/* portfolio.css
   Extends styles.css with everything needed for the dynamic portfolio
   system: an aspect-ratio-respecting masonry grid, video cards, the
   fullscreen lightbox, the custom cursor, and the project detail page.
   Reuses the same tokens (--bg, --grad-a/b/c, .glass, .glass-strong, etc.)
   defined in styles.css — nothing here introduces a new palette.
*/

/* ---------- MASONRY GRID (aspect-ratio respecting) ---------- */
/* Each card sizes itself to its media's natural aspect ratio — no fixed
   heights, no cropping. object-fit is intentionally NOT used here so
   portrait, landscape and square work naturally sits in the column flow. */
.p-media-wrap{
  overflow:hidden;
  display:block;
  position:relative;
  background: var(--surface);
}
.p-media-wrap img,
.p-media-wrap video{
  display:block;
  width:100%;
  height:auto;
}
.p-item{ cursor:pointer; }
.p-item .p-overlay{ pointer-events:none; }

/* video cards inside the grid */
.p-video-badge{
  position:absolute; top:14px; right:14px; z-index:2;
  width:38px; height:38px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(7,7,7,.55);
  border:1px solid var(--border-strong);
  backdrop-filter: blur(6px);
}
.p-video-badge svg{ margin-left:2px; }

.portfolio-empty{
  grid-column: 1/-1;
  text-align:center;
  padding: 4rem 1.5rem;
  color: var(--text-tertiary);
}
.portfolio-empty h3{ color:#fff; }

/* ---------- LIGHTBOX ---------- */
.lightbox-overlay{
  position:fixed; inset:0; z-index:200;
  background: rgba(5,5,6,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition: opacity .35s ease;
}
.lightbox-overlay.open{ opacity:1; pointer-events:auto; }
.lightbox-stage{
  position:relative;
  width:min(94vw, 1200px);
  height:min(88vh, 850px);
  display:flex; align-items:center; justify-content:center;
  transform: scale(.94);
  opacity:0;
  transition: transform .4s cubic-bezier(.2,.8,.2,1), opacity .4s ease;
}
.lightbox-overlay.open .lightbox-stage{ transform:scale(1); opacity:1; }
.lightbox-stage img,
.lightbox-stage video{
  max-width:100%; max-height:100%;
  width:auto; height:auto;
  object-fit:contain;
  border-radius:16px;
  box-shadow: 0 30px 90px -20px rgba(0,0,0,.7);
}
.lightbox-btn{
  position:absolute;
  width:46px; height:46px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  background: rgba(255,255,255,0.06);
  border:1px solid var(--border-strong);
  backdrop-filter: blur(10px);
  color:#fff;
  transition: all .25s ease;
}
.lightbox-btn:hover{ background: rgba(255,255,255,0.14); transform: scale(1.06); }
.lightbox-close{ top:20px; right:20px; }
.lightbox-prev{ left:16px; top:50%; transform:translateY(-50%); }
.lightbox-next{ right:16px; top:50%; transform:translateY(-50%); }
.lightbox-prev:hover, .lightbox-next:hover{ transform: translateY(-50%) scale(1.06); }
.lightbox-counter{
  position:absolute; bottom:20px; left:50%; transform:translateX(-50%);
  font-size:.75rem; letter-spacing:.1em; color:var(--text-tertiary);
  background: rgba(255,255,255,0.06); border:1px solid var(--border);
  padding:.4rem .9rem; border-radius:999px;
}
@media (max-width: 640px){
  .lightbox-prev, .lightbox-next{ width:38px; height:38px; }
  .lightbox-close{ top:12px; right:12px; }
}

/* ---------- CUSTOM CURSOR (desktop only) ---------- */
html.has-custom-cursor, html.has-custom-cursor *{ cursor:none !important; }
.cursor-dot, .cursor-ring{
  position:fixed; top:0; left:0; z-index:300;
  pointer-events:none;
  transform: translate(-50%,-50%);
  will-change: transform;
}
.cursor-dot{
  width:6px; height:6px; border-radius:999px;
  background:#fff;
  transition: opacity .2s ease, transform .15s ease;
}
.cursor-ring{
  width:38px; height:38px; border-radius:999px;
  border:1px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  transition: width .3s cubic-bezier(.2,.8,.2,1), height .3s cubic-bezier(.2,.8,.2,1),
              border-color .3s ease, background-color .3s ease, opacity .2s ease;
}
.cursor-ring .cursor-label{
  font-family:'Space Grotesk',sans-serif;
  font-size:.6rem; letter-spacing:.15em; font-weight:600; color:#fff;
  opacity:0; transform:scale(.6); transition: opacity .25s ease, transform .25s ease;
}
.cursor-ring.hover{
  width:54px; height:54px;
  border-color: var(--grad-c);
  background: rgba(255,31,77,0.12);
}
.cursor-ring.hover-label{
  width:76px; height:76px;
  border-color: var(--grad-c);
  background: rgba(255,31,77,0.22);
}
.cursor-ring.hover-label .cursor-label{ opacity:1; transform:scale(1); }
.cursor-hidden{ opacity:0 !important; }

/* ---------- PROJECT DETAIL PAGE ---------- */
.detail-hero{ padding-top:9rem; }
.detail-media-grid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap:1.25rem;
}
.detail-media-card{
  position:relative;
  border-radius:24px;
  overflow:hidden;
  min-height:280px;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer;
}
.detail-media-card img,
.detail-media-card video{
  width:100%; height:100%;
  object-fit:contain;
  display:block;
}
.detail-media-card .p-video-badge{ pointer-events:none; }
.detail-media-card::after{
  content:'';
  position:absolute; inset:0;
  background: rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:24px;
  pointer-events:none;
  transition: border-color .3s ease, background .3s ease;
}
.detail-media-card:hover::after{ border-color: rgba(255,59,48,.4); background: rgba(255,255,255,0.04); }
.detail-media-card:hover img{ transform: scale(1.02); }
.detail-media-card img{ transition: transform .5s cubic-bezier(.2,.8,.2,1); }

.detail-nav-project{
  transition: all .3s cubic-bezier(.2,.8,.2,1);
}
.detail-nav-project:hover{ transform: translateY(-3px); border-color: rgba(255,59,48,.4); }

.stagger > *{ opacity:0; transform: translateY(20px); transition: opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.stagger.in-view > *{ opacity:1; transform:translateY(0); }
.stagger.in-view > *:nth-child(1){ transition-delay:.02s; }
.stagger.in-view > *:nth-child(2){ transition-delay:.08s; }
.stagger.in-view > *:nth-child(3){ transition-delay:.14s; }
.stagger.in-view > *:nth-child(4){ transition-delay:.2s; }
.stagger.in-view > *:nth-child(5){ transition-delay:.26s; }
.stagger.in-view > *:nth-child(6){ transition-delay:.32s; }

.detail-loading{ padding: 8rem 0; text-align:center; color: var(--text-tertiary); }

/* plays immediately on page load for above-the-fold hero content —
   independent of the scroll-triggered .reveal/.stagger observer */
@keyframes detailFadeUp{
  from{ opacity:0; transform: translateY(22px); }
  to{ opacity:1; transform: translateY(0); }
}
.d-fade{ animation: detailFadeUp .7s cubic-bezier(.2,.8,.2,1) both; }
.d-fade-1{ animation-delay: .02s; }
.d-fade-2{ animation-delay: .1s; }
.d-fade-3{ animation-delay: .18s; }
.d-fade-4{ animation-delay: .26s; }
@media (prefers-reduced-motion: reduce){ .d-fade{ animation:none !important; opacity:1 !important; transform:none !important; } }

@media (prefers-reduced-motion: reduce){
  .lightbox-stage, .detail-media-card img, .stagger > *{ transition:none !important; }
}

/* ---------- utility gaps not present in the pre-compiled Tailwind bundle
   (this project has no live Tailwind build step, so anything new is
   hand-written here instead of guessed as a utility class) ---------- */
.whitespace-pre-line{ white-space: pre-line; }

/* ---------- PORTFOLIO GRID (per-category masonry, replaces the old
   single-grid layout — 2 columns down to mobile, 3 from desktop up) ---------- */
.p-grid{
  columns: 2;
  column-gap: 1.25rem;
  column-fill: balance;
}
@media (min-width: 1024px){
  .p-grid{ columns: 3; }
}

/* ---------- SEARCH BOX (portfolio section header) ---------- */
.p-search-wrap{
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1.1rem;
  color: var(--text-tertiary);
  min-width: 240px;
}
.p-search-wrap input{
  background:none; border:none; outline:none;
  color:#fff; font-size:.85rem; width:100%;
  font-family: inherit;
}
.p-search-wrap input::placeholder{ color: var(--text-tertiary); }
.p-search-wrap svg{ flex-shrink:0; }

/* ---------- PER-CATEGORY SECTIONS ---------- */
.portfolio-sections > .p-category-block{ margin-bottom: 4rem; }
.portfolio-sections > .p-category-block:last-child{ margin-bottom: 0; }
.p-category-block.hide{ display:none; }
.p-item.hide{ display:none; }

/* ---------- TAGS (project detail hero) ---------- */
.detail-tags{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; max-width:42rem; }
.detail-tag{
  font-size:.72rem; letter-spacing:.03em;
  padding:.35rem .8rem; border-radius:999px;
  background: var(--surface); border:1px solid var(--border);
  color: var(--text-tertiary);
}

/* ---------- EMBED CELLS (universal media: YouTube/Vimeo/Drive/Dropbox/
   Instagram/Facebook/direct files — used in the homepage grid card AND the
   project detail media grid). Each cell's aspect ratio comes from the item
   itself (an explicit choice in the admin, or a per-platform guess) rather
   than a fixed 16:9/9:16 box, so a vertical Reel/Short stays tall and a
   landscape video stays wide. ---------- */
.embed-cell{
  position:relative;
  width:100%;
  overflow:hidden;
  background: var(--surface);
}
.embed-cell iframe{
  position:absolute; inset:0;
  width:100%; height:100%;
  border:0;
}
.embed-cell img, .embed-cell video{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.detail-media-card-embed .embed-cell img,
.detail-media-card-embed .embed-cell video{ object-fit:contain; }
.embed-platform-chip{
  position:absolute; bottom:10px; left:10px; z-index:2;
  font-size:.65rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.3rem .6rem; border-radius:999px;
  background: rgba(7,7,7,.55); backdrop-filter: blur(6px);
  color: rgba(255,255,255,.85); pointer-events:none;
}
.embed-cell-fallback{ display:flex; align-items:center; justify-content:center; padding:1rem; min-height:140px; }
.embed-cell-fallback .link-fallback-card{ width:100%; }

/* an embed in the detail media grid: height comes from its own aspect-ratio,
   not the min-height/centering the image/video cards use, and it isn't a
   click-to-lightbox target (the player/link card is already the full view) */
.detail-media-card.detail-media-card-embed{ min-height:0; display:block; cursor:default; }
.detail-media-card.detail-media-card-embed::after{ display:none; }

/* ---------- LEGACY EMBED BLOCK (kept for the Documents/PDF section's
   iframe frame; the old "Links" section that used to force 16:9 has been
   replaced by .embed-cell above, folded straight into the media grid) ---------- */
.detail-embed-block{ margin-top:3rem; }

/* ---------- UNIVERSAL LINK FALLBACK (when a platform can't be embedded —
   Instagram, a Drive folder, an unrecognized link, etc.) ---------- */
.link-fallback-card{
  display:flex; align-items:center; gap:1rem;
  padding:1rem 1.25rem; border-radius:20px;
}
.link-fallback-thumb{ width:64px; height:64px; border-radius:12px; object-fit:cover; flex-shrink:0; background:var(--surface); }
.link-fallback-icon{
  width:64px; height:64px; border-radius:12px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--surface); color:var(--text-tertiary);
}
.link-fallback-body{ min-width:0; }
.link-fallback-label{ font-weight:500; font-size:.92rem; margin-bottom:.2rem; }
.link-fallback-note{ font-size:.78rem; color:var(--text-tertiary); line-height:1.5; }
.embed-caveat-note{ font-size:.75rem; color:var(--text-tertiary); margin-top:.75rem; line-height:1.5; }
.detail-embed-frame-media{ aspect-ratio:unset; display:flex; align-items:center; justify-content:center; background:var(--surface); }
.detail-embed-frame-media img, .detail-embed-frame-media video{
  position:static; width:100%; height:auto; max-height:80vh; object-fit:contain;
}

/* ---------- TESTIMONIAL MEDIA (image/video/embed reviews) ---------- */
.t-media-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:.75rem; margin:.5rem 0 1.5rem; max-width:640px; margin-left:auto; margin-right:auto;
}
.t-media-item{ border-radius:16px; overflow:hidden; background:var(--surface); display:flex; align-items:center; justify-content:center; }
.t-media-img, .t-media-video{ width:100%; height:auto; max-height:340px; object-fit:contain; display:block; cursor:zoom-in; }
.t-embed-frame{ position:relative; width:100%; aspect-ratio:16/9; }
.t-embed-frame iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.t-media-item .link-fallback-card{ width:100%; flex-direction:column; text-align:center; }

/* ---------- PDF DOCUMENTS (project detail page) ---------- */
.detail-pdf-list{ display:flex; flex-direction:column; gap:1.25rem; }
.detail-pdf-card{ overflow:hidden; }
.detail-pdf-card-header{
  display:flex; align-items:center; gap:.7rem;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
}
.detail-pdf-icon{ color: var(--grad-c); flex-shrink:0; display:flex; }
.detail-pdf-name{ flex:1; min-width:0; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.detail-pdf-actions{ display:flex; gap:.5rem; flex-shrink:0; }
.detail-pdf-btn{
  font-size:.75rem; font-weight:500;
  padding:.4rem .9rem; border-radius:999px;
  border:1px solid var(--border-strong);
  color:#fff; transition: all .2s ease;
}
.detail-pdf-btn:hover{ border-color: rgba(255,59,48,.5); background: rgba(255,31,77,.08); }
.detail-pdf-frame{ width:100%; height:70vh; max-height:800px; }
.detail-pdf-frame iframe{ width:100%; height:100%; border:0; display:block; }
@media (max-width: 640px){
  .detail-pdf-frame{ height:50vh; }
}

/* =====================================================================
   TESTIMONIAL REELS CAROUSEL (reels-carousel.js)
   Three cards at a time: a larger, prominent centre card and a smaller one
   either side. Every card is sized by its OWN media's aspect ratio (--r,
   set from the video's videoWidth/Height, the image's naturalWidth/Height,
   or the ratio saved in the admin for embeds) inside a max box — nothing is
   stretched or cropped, and a 9:16 reel stays 9:16 next to a 1:1 image.
   ===================================================================== */
.reels{
  --maxw: 320px;      /* widest a centre card can get */
  --maxh: 560px;      /* tallest a centre card can get */
  --step: 300px;      /* distance between the centre and a side card */
  --side-scale: .78;
  position:relative;
  max-width: 1100px; margin:0 auto;
}
.reels-stage{
  position:relative;
  height: calc(var(--maxh) + 48px);
  overflow: hidden;
  /* soft fade at the far edges so cards slide in/out gracefully */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  touch-action: pan-y;
  outline:none;
}
.reel-card{
  --r: .5625;
  position:absolute; top:50%; left:50%;
  width: min(var(--maxw), calc(var(--maxh) * var(--r)));
  aspect-ratio: var(--r);
  transform: translate(-50%, -50%);
  transition: transform .65s cubic-bezier(.22,.8,.2,1), opacity .5s ease, filter .5s ease, width .45s ease;
  will-change: transform, opacity;
  cursor: pointer;
}
.reels-stage.is-init .reel-card, .reel-card.no-move{ transition:none !important; }
.reel-card.is-center{ transform: translate(-50%, -50%) scale(1); z-index:3; cursor:default; }
.reel-card.is-prev{ transform: translate(-50%, -50%) translateX(calc(var(--step) * -1)) scale(var(--side-scale)); z-index:2; opacity:.72; filter:brightness(.62); }
.reel-card.is-next{ transform: translate(-50%, -50%) translateX(var(--step)) scale(var(--side-scale)); z-index:2; opacity:.72; filter:brightness(.62); }
.reel-card.is-prev:hover, .reel-card.is-next:hover{ opacity:.9; filter:brightness(.8); }
.reel-card.is-far-left{ transform: translate(-50%, -50%) translateX(calc(var(--step) * -1.7)) scale(.6); z-index:1; opacity:0; pointer-events:none; }
.reel-card.is-far-right{ transform: translate(-50%, -50%) translateX(calc(var(--step) * 1.7)) scale(.6); z-index:1; opacity:0; pointer-events:none; }

.reel-frame{
  position:absolute; inset:0;
  border-radius: 28px; overflow:hidden;
  background:#0a0a0a;
  border:1px solid var(--border-strong);
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.9);
  transition: box-shadow .5s ease, border-color .5s ease;
}
.reel-card.is-center .reel-frame{
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.95), 0 0 70px -12px rgba(255,59,48,.42);
}

/* media layers (a testimonial can carry several — dots switch between them) */
.reel-media, .reel-layer{ position:absolute; inset:0; }
.reel-layer{ display:none; background:#000; }
.reel-layer.is-current{ display:block; }
.reel-layer video, .reel-layer img.reel-img, .reel-layer > img{
  width:100%; height:100%; object-fit:contain; display:block;   /* card already matches the media's ratio: contain = exact fit, never crops */
}
.reel-layer iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.reel-open{
  position:absolute; top:12px; right:56px; z-index:4;
  display:inline-flex; align-items:center; gap:.3rem;
  font-size:.65rem; letter-spacing:.03em; text-transform:uppercase;
  padding:.38rem .65rem; border-radius:999px;
  background:rgba(7,7,7,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.14); color:rgba(255,255,255,.88);
}
.reel-card.no-sound .reel-open{ right:12px; }
.reel-open:hover{ background:rgba(7,7,7,.85); }

/* text-only testimonial */
.reel-text{
  position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center;
  padding: 2.2rem 1.6rem 8.5rem; text-align:left;
  background: radial-gradient(120% 80% at 20% 0%, rgba(255,59,48,.22), transparent 60%), radial-gradient(90% 70% at 100% 100%, rgba(255,31,77,.18), transparent 60%), #0d0d0d;
}
.reel-quote-mark{ font-family:'Space Grotesk',sans-serif; font-size:4.5rem; line-height:.6; color:var(--grad-c); margin-bottom:.9rem; }
.reel-text p{ font-size:1.02rem; line-height:1.6; color:rgba(255,255,255,.88); display:-webkit-box; -webkit-line-clamp:9; -webkit-box-orient:vertical; overflow:hidden; }

/* caption: overlaid on the bottom of native video/images/text cards */
.reel-caption{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding: 3.2rem 1.1rem 1rem;
  background: linear-gradient(to top, rgba(0,0,0,.88), rgba(0,0,0,.55) 55%, transparent);
  pointer-events:none; text-align:left;
}
.reel-stars{ color:var(--grad-c); font-size:.8rem; letter-spacing:.12em; margin-bottom:.4rem; }
.reel-quote{ font-size:.82rem; line-height:1.5; color:rgba(255,255,255,.85); margin-bottom:.7rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.reel-person{ display:flex; align-items:center; gap:.6rem; }
.reel-avatar{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex-shrink:0; border:1px solid rgba(255,255,255,.25); }
.reel-name{ font-size:.85rem; font-weight:500; }
.reel-role{ font-size:.7rem; color:rgba(255,255,255,.55); }
/* a live third-party player has its own controls along the bottom, so its
   caption moves to a compact strip on top instead of covering them */
.reel-card.has-embed-current .reel-caption{
  top:0; bottom:auto; padding:.9rem 7.5rem .9rem 1rem;
  background: linear-gradient(to bottom, rgba(0,0,0,.78), rgba(0,0,0,.35) 65%, transparent);
}
.reel-card.has-embed-current.no-sound .reel-caption{ padding-right:5.5rem; }
.reel-card.has-embed-current .reel-quote, .reel-card.has-embed-current .reel-stars{ display:none; }
.reel-card.has-fallback-current .reel-caption{ background:none; }

/* round controls */
.reel-btn{
  position:absolute; z-index:4;
  width:34px; height:34px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,7,7,.6); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,.16); color:#fff;
  transition: background .2s ease, transform .2s ease;
}
.reel-btn:hover{ background:rgba(7,7,7,.88); transform:scale(1.06); }
.reel-sound{ top:10px; right:10px; }
.reel-sound[hidden]{ display:none; }
.reel-play{
  position:absolute; left:50%; top:50%; z-index:4;
  width:68px; height:68px; border-radius:50%;
  transform: translate(-50%,-50%) scale(.85);
  display:flex; align-items:center; justify-content:center;
  background:rgba(7,7,7,.55); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.3); color:#fff;
  opacity:0; pointer-events:none;
  transition: opacity .25s ease, transform .25s ease;
}
.reel-play svg{ margin-left:3px; }
.reel-card.is-center.needs-play .reel-play{ opacity:1; pointer-events:auto; transform:translate(-50%,-50%) scale(1); }
.reel-pager{ position:absolute; right:10px; top:50%; transform:translateY(-50%); z-index:4; display:flex; flex-direction:column; gap:.4rem; }
.reel-pager-dot{ width:7px; height:7px; border-radius:50%; background:rgba(255,255,255,.35); transition:all .25s ease; }
.reel-pager-dot.active{ background:#fff; height:20px; border-radius:999px; }

/* can't-embed fallback card: always explains itself and links out */
.reel-fallback{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.55rem; padding:1.5rem 1.2rem; text-align:center; overflow:hidden;
  background: radial-gradient(100% 70% at 50% 0%, rgba(255,59,48,.2), transparent 65%), #0d0d0d;
}
.reel-fallback img{ width:100%; max-height:42%; object-fit:cover; border-radius:14px; }
.reel-fallback-label{ font-weight:500; font-size:.95rem; }
.reel-fallback-note{ font-size:.75rem; color:rgba(255,255,255,.55); line-height:1.5; }
.reel-fallback-btn{
  display:inline-flex; align-items:center; gap:.4rem; margin-top:.3rem;
  font-size:.75rem; padding:.55rem 1.1rem; border-radius:999px;
  border:1px solid rgba(255,255,255,.28); color:#fff; background:rgba(255,255,255,.06);
}
.reel-fallback-btn:hover{ background:rgba(255,255,255,.14); }

/* arrows + dots */
.reels-nav{
  position:absolute; top:50%; z-index:6; transform:translateY(-50%);
  width:48px; height:48px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,14,14,.72); backdrop-filter:blur(10px);
  border:1px solid var(--border-strong); color:#fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.reels-nav:hover{ border-color:rgba(255,59,48,.6); background:rgba(28,14,14,.9); transform:translateY(-50%) scale(1.06); }
.reels-nav[hidden]{ display:none; }
.reels-prev{ left:.25rem; } .reels-next{ right:.25rem; }
.reels.is-single .reel-card{ cursor:default; }

@media (max-width: 1024px){
  .reels{ --maxw:290px; --maxh:520px; --step:250px; }
}
@media (max-width: 640px){
  .reels{ --maxw:min(72vw, 290px); --maxh:480px; --step:64vw; --side-scale:.8; }
  .reels-nav{ width:40px; height:40px; }
  .reels-prev{ left:.1rem; } .reels-next{ right:.1rem; }
  .reel-caption{ padding-top:2.6rem; }
}
@media (prefers-reduced-motion: reduce){
  .reel-card, .reel-play, .reel-frame{ transition:none !important; }
}

/* direct image/video files inside an embed cell keep their natural shape */
.embed-cell.embed-cell-natural{ background:transparent; }
.embed-cell-natural img, .embed-cell-natural video{
  position:static; inset:auto; width:100%; height:auto; object-fit:contain; display:block;
}

/* ---------- GRID CARD HOLDING A LIVE PLAYER / LINK CARD ---------- */
.p-item.p-item-embed{ cursor:default; }
.p-embed-link{
  position:absolute; top:12px; right:12px; z-index:3;
  font-size:.68rem; letter-spacing:.03em;
  padding:.4rem .8rem; border-radius:999px;
  background:rgba(7,7,7,.62); backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.18); color:#fff;
  opacity:0; transform:translateY(-4px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease;
}
.p-item-embed:hover .p-embed-link, .p-embed-link:focus-visible{ opacity:1; transform:none; }
@media (hover:none){ .p-embed-link{ opacity:1; transform:none; } }
.p-embed-link:hover{ background:rgba(255,59,48,.75); }
.p-embed-caption{ display:flex; flex-direction:column; gap:.15rem; padding:.85rem .4rem 0; }
.p-embed-caption h4{ transition: color .2s ease; }
.p-embed-caption:hover h4{ color:var(--grad-c); }