/* ================================================================
   PRIYO STORY — MEDIA LAYER
   Natural (uncropped) photos and videos, collage frames, filters
   ================================================================ */

/* ================================================================
   1. FILTER PRESETS  (Instagram-style, pure CSS)
   ================================================================ */
.fx-none      { filter:none; }
.fx-vivid     { filter:saturate(1.55) contrast(1.12); }
.fx-clarendon { filter:contrast(1.2) saturate(1.35) brightness(1.05); }
.fx-warm      { filter:sepia(.3) saturate(1.4) brightness(1.05); }
.fx-cool      { filter:saturate(1.1) hue-rotate(-14deg) brightness(1.06); }
.fx-lark      { filter:contrast(.9) brightness(1.12) saturate(1.15); }
.fx-juno      { filter:saturate(1.45) contrast(1.1) sepia(.1); }
.fx-reyes     { filter:sepia(.28) brightness(1.12) contrast(.85) saturate(.78); }
.fx-crema     { filter:sepia(.45) contrast(1.2) brightness(1.12) saturate(.9); }
.fx-aden      { filter:hue-rotate(-18deg) contrast(.92) saturate(.88) brightness(1.18); }
.fx-moon      { filter:grayscale(1) contrast(1.12) brightness(1.1); }
.fx-noir      { filter:grayscale(1) contrast(1.35) brightness(.95); }
.fx-fade      { filter:saturate(.62) brightness(1.1) contrast(.92); }

/* ================================================================
   2. COLLAGE FRAMES
   Every cell carries --ar (its natural aspect ratio) so nothing is
   cropped unless the chosen frame explicitly asks for it.
   ================================================================ */
.pc-frame{
  --gap:4px;
  margin-bottom:10px;
  border-radius:12px;
  overflow:hidden;
  background:#0e1512;
  width:100%;
}
.pc-cell{
  position:relative;
  overflow:hidden;
  background:#0e1512;
  cursor:pointer;
  min-width:0; min-height:0;
}
.pc-cell img{
  width:100%; height:100%;
  display:block;
  object-fit:cover;
}
.pc-badge{
  position:absolute;
  left:8px; bottom:8px;
  background:rgba(0,0,0,.55);
  color:#fff;
  font-size:14px; font-weight:700;
  padding:3px 9px;
  border-radius:20px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  pointer-events:none;
}
.pc-more{
  position:absolute; inset:0;
  background:rgba(0,0,0,.52);
  color:#fff;
  font-size:27px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
  pointer-events:none;
}

/* ---- natural: nothing cropped, each photo keeps its own shape ---- */
.pc-frame.f-nat{
  display:flex;
  flex-direction:column;
  gap:var(--gap);
  background:transparent;
}
.pc-frame.f-nat .pc-cell{
  aspect-ratio:var(--ar, 4 / 3);
  max-height:78vh;
  border-radius:12px;
  background:#0e1512;
}
.pc-frame.f-nat .pc-cell img{ object-fit:contain; }

/* ---- carousel: swipe through, natural shape ---- */
.pc-frame.f-carousel{
  display:flex;
  gap:var(--gap);
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
  background:transparent;
}
.pc-frame.f-carousel::-webkit-scrollbar{ display:none; }
.pc-frame.f-carousel .pc-cell{
  flex:0 0 100%;
  scroll-snap-align:center;
  aspect-ratio:var(--ar, 4 / 3);
  max-height:70vh;
  border-radius:12px;
}
.pc-frame.f-carousel .pc-cell img{ object-fit:contain; }

/* ---- equal grid ---- */
.pc-frame.f-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(var(--cols, 2), 1fr);
}
.pc-frame.f-grid .pc-cell{ aspect-ratio:1 / 1; }
.pc-frame.f-grid[data-n="1"]{ --cols:1; }
.pc-frame.f-grid[data-n="1"] .pc-cell{ aspect-ratio:var(--ar, 1 / 1); }
.pc-frame.f-grid[data-n="2"]{ --cols:2; }
.pc-frame.f-grid[data-n="3"]{ --cols:3; }
.pc-frame.f-grid[data-n="4"]{ --cols:2; }
.pc-frame.f-grid[data-n="5"]{ --cols:3; }
.pc-frame.f-grid[data-n="6"]{ --cols:3; }

/* ---- first photo big on the left ---- */
.pc-frame.f-leftbig{
  display:grid;
  gap:var(--gap);
  grid-template-columns:1.9fr 1fr;
  aspect-ratio:3 / 2;
}
.pc-frame.f-leftbig .pc-cell:first-child{ grid-row:1 / -1; }
.pc-frame.f-leftbig[data-n="2"]{ grid-template-rows:1fr; }
.pc-frame.f-leftbig[data-n="3"]{ grid-template-rows:repeat(2, 1fr); }
.pc-frame.f-leftbig[data-n="4"]{ grid-template-rows:repeat(3, 1fr); }
.pc-frame.f-leftbig[data-n="5"]{ grid-template-rows:repeat(4, 1fr); }
.pc-frame.f-leftbig[data-n="6"]{ grid-template-rows:repeat(5, 1fr); }
.pc-frame.f-leftbig[data-n="1"]{ grid-template-columns:1fr; aspect-ratio:var(--ar, 4 / 3); }

/* ---- first photo big on top ---- */
.pc-frame.f-topbig{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(var(--rest, 2), 1fr);
}
.pc-frame.f-topbig .pc-cell:first-child{
  grid-column:1 / -1;
  aspect-ratio:16 / 10;
}
.pc-frame.f-topbig .pc-cell{ aspect-ratio:1 / 1; }
.pc-frame.f-topbig[data-n="1"] .pc-cell:first-child{ aspect-ratio:var(--ar, 4 / 3); }
.pc-frame.f-topbig[data-n="2"]{ --rest:1; }
.pc-frame.f-topbig[data-n="3"]{ --rest:2; }
.pc-frame.f-topbig[data-n="4"]{ --rest:3; }
.pc-frame.f-topbig[data-n="5"]{ --rest:4; }
.pc-frame.f-topbig[data-n="6"]{ --rest:5; }

/* ---- single row ---- */
.pc-frame.f-row{
  display:grid;
  gap:var(--gap);
  grid-auto-flow:column;
  grid-auto-columns:1fr;
}
.pc-frame.f-row .pc-cell{ aspect-ratio:3 / 4; }
.pc-frame.f-row[data-n="1"] .pc-cell{ aspect-ratio:var(--ar, 4 / 3); }

/* ================================================================
   3. VIDEO — natural size, never cropped
   ================================================================ */
.pc-video{
  position:relative;
  width:100%;
  aspect-ratio:var(--ar, 16 / 9);
  max-height:80vh;
  border-radius:12px;
  overflow:hidden;
  background:#0e1512;
  margin-bottom:10px;
  cursor:pointer;
}
.pc-video video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:contain;      /* show the whole frame, no crop */
  background:#0e1512;
}
.pc-video.is-reel{ max-height:74vh; }
.pc-video .post-video-duration,
.pc-video .post-video-play,
.pc-video .post-video-views{ z-index:3; }

/* reel + square cards keep the whole frame visible too */
.reel-card video, .mini-reel-card video{ object-fit:contain !important; background:#000; }
.video-feed-thumb video{ object-fit:contain !important; background:#000; }

/* a 1:1 card sized from the uploaded video instead of forced square */
.video-feed-thumb.is-natural{
  aspect-ratio:var(--ar, 1 / 1) !important;
  max-height:70vh;
}

/* ================================================================
   4. REEL FOOT — name + views only (no avatar)
   ================================================================ */
.reel-foot{
  position:absolute;
  left:0; right:0; bottom:0;
  padding:26px 10px 10px;
  display:flex; flex-direction:column; align-items:flex-start; gap:3px;
  z-index:3;
  background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.62) 100%);
  pointer-events:none;
}
.reel-namepill{
  font-size:15.5px; font-weight:700;
  color:#fff;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  max-width:100%;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.reel-viewpill{
  display:flex; align-items:center; gap:4px;
  color:#fff;
  font-size:14px; font-weight:600;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
  line-height:1;
}
.reel-viewpill svg{ width:12px; height:12px; flex-shrink:0; }

.mini-reel-card .reel-foot{ padding:20px 8px 8px; }
.mini-reel-card .reel-namepill{ font-size:13.5px; }
.mini-reel-card .reel-viewpill{ font-size:12.5px; }
.mini-reel-card .reel-viewpill svg{ width:10px; height:10px; }

@media (max-width:760px){
  .reel-foot{ padding:34px 14px 14px; gap:4px; }
  .reel-namepill{ font-size:18px; }
  .reel-viewpill{ font-size:16px; }
  .reel-viewpill svg{ width:14px; height:14px; }
}

/* ================================================================
   5. COMPOSER — filter strip + frame chooser
   ================================================================ */
.cp-section-title{
  font-size:15.5px; font-weight:700;
  margin:16px 0 8px;
  color:var(--text, #1f2a24);
  display:flex; align-items:center; justify-content:space-between;
  gap:8px;
}
.cp-section-title small{ font-size:14px; font-weight:600; color:var(--muted, #6b7a72); }

.cp-strip{
  display:flex; gap:8px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
  -webkit-overflow-scrolling:touch;
}
.cp-strip::-webkit-scrollbar{ display:none; }

.cp-fx{
  flex:0 0 auto;
  width:66px;
  border:none; background:transparent;
  padding:0; cursor:pointer;
  font-family:inherit;
  text-align:center;
}
.cp-fx-thumb{
  width:66px; height:66px;
  border-radius:10px;
  overflow:hidden;
  border:2.5px solid transparent;
  background:#0e1512;
  margin-bottom:4px;
}
.cp-fx-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
.cp-fx.sel .cp-fx-thumb{ border-color:var(--green-dark, #0f5132); }
.cp-fx-name{
  font-size:13.5px; font-weight:600;
  color:var(--muted, #6b7a72);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cp-fx.sel .cp-fx-name{ color:var(--green-dark, #0f5132); }

.cp-frames{
  display:flex; gap:9px;
  overflow-x:auto;
  padding-bottom:4px;
  scrollbar-width:none;
}
.cp-frames::-webkit-scrollbar{ display:none; }
.cp-frame-opt{
  flex:0 0 auto;
  width:82px;
  border:2px solid var(--border, #e2e8e4);
  border-radius:11px;
  background:#fff;
  padding:7px 6px 6px;
  cursor:pointer;
  font-family:inherit;
  transition:border-color .16s ease, background .16s ease;
}
.cp-frame-opt:hover{ border-color:var(--green, #1a7a4c); }
.cp-frame-opt.sel{ border-color:var(--green-dark, #0f5132); background:var(--green-light, #e8f5ee); }
.cp-frame-mini{
  height:52px;
  margin-bottom:5px;
  display:grid;
  gap:2px;
}
.cp-frame-mini i{
  display:block;
  background:#b9c9c1;
  border-radius:3px;
}
.cp-frame-opt.sel .cp-frame-mini i{ background:var(--green, #1a7a4c); }
.cp-frame-name{
  font-size:13.5px; font-weight:700;
  color:var(--muted, #6b7a72);
  text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cp-frame-opt.sel .cp-frame-name{ color:var(--green-dark, #0f5132); }

/* live preview of the finished collage */
.cp-preview-wrap{
  border:1px solid var(--border, #e2e8e4);
  border-radius:12px;
  padding:8px;
  background:#fbfdfc;
  margin-top:8px;
}
.cp-preview-wrap .pc-frame{ margin-bottom:0; }
.cp-preview-wrap .pc-frame.f-nat .pc-cell{ max-height:230px; }
.cp-preview-wrap .pc-frame.f-carousel .pc-cell{ max-height:230px; }

.cp-active-hint{
  font-size:14px; color:var(--muted, #6b7a72);
  margin-top:6px;
}
.cp-thumb.active{ outline:2.5px solid var(--green-dark, #0f5132); outline-offset:-2px; }

/* ================================================================
   7. RESPONSIVE
   ================================================================ */
@media (max-width:700px){
  .pc-frame.f-nat .pc-cell{ max-height:70vh; }
  .pc-video{ max-height:72vh; }
  .cp-fx, .cp-fx-thumb{ width:58px; }
  .cp-fx-thumb{ height:58px; }
  .cp-frame-opt{ width:74px; }
  .cp-frame-mini{ height:46px; }
}
@media (max-width:380px){
  .cp-fx, .cp-fx-thumb{ width:52px; }
  .cp-fx-thumb{ height:52px; }
  .cp-frame-opt{ width:66px; }
  .cp-frame-mini{ height:40px; }
  .pc-frame.f-row .pc-cell{ aspect-ratio:2 / 3; }
}