/* ==========================================================================
   IFT LEARNINGS — video testimonials rail + overlay media player
   --------------------------------------------------------------------------
   The text rail (site.css .tm-rail) scrolls RIGHT-TO-LEFT. This one scrolls
   LEFT-TO-RIGHT, so the two read as a pair moving against each other.
   ========================================================================== */

/* ============================== RAIL ============================== */
.vt-rail{
  /* The room the hover lift needs has to come from INSIDE this box.
     overflow:hidden is not optional — it is what hides the off-screen half of
     the duplicated track — and CSS gives no way to clip one axis only:
     setting overflow-x:hidden forces the computed overflow-y to auto, which
     would add a scrollbar and clip anyway. So the cards get breathing room as
     padding, and an equal negative margin cancels it, leaving every card
     exactly where it sat before. Must stay >= the lift plus the shadow reach. */
  --rail-air:20px;
  padding-block:var(--rail-air);
  margin-block:calc(var(--rail-air) * -1);
  overflow:hidden;position:relative;cursor:grab;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.vt-rail.dragging{cursor:grabbing}
.vt-track{display:flex;gap:1.3rem;width:max-content;will-change:transform}

/* ============================== CARD ============================== */
.vt{
  width:min(330px,74vw);flex:none;border:1px solid var(--line);border-radius:12px;
  background:var(--panel);overflow:hidden;text-align:left;padding:0;
  display:flex;flex-direction:column;
  transition:border-color .4s ease,transform .55s var(--ease),box-shadow .45s ease;
}
/* A neutral drop shadow is invisible against #0E0407, so the lift is grounded
   with an accent glow instead — the same device as the assistant FAB. */
.vt:hover,.vt:focus-visible{
  border-color:var(--accent);transform:translateY(-5px);
  box-shadow:0 16px 32px -20px rgba(255,61,87,.5);
}

.vt-thumb{
  position:relative;aspect-ratio:16/9;overflow:hidden;
  /* Shown while the thumbnail loads, and permanently for Vimeo (whose
     thumbnail needs an API call we deliberately don't make). */
  background:
    radial-gradient(70% 60% at 30% 20%,rgba(255,61,87,.32),transparent 70%),
    linear-gradient(150deg,#2A0A14 0%,#160610 60%,#0E0407 100%);
}
.vt-thumb img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform 1.1s var(--ease),opacity .5s ease;
}
.vt:hover .vt-thumb img{transform:scale(1.06)}
/* A YouTube ID that no longer resolves would otherwise show a broken-image
   glyph over the gradient; JS adds this class on error. */
.vt-thumb img.failed{opacity:0}

.vt-thumb::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(to top,rgba(14,4,7,.72) 0%,transparent 55%);
}

/* play button */
.vt-play{
  position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2;
  width:56px;height:56px;border-radius:50%;
  display:grid;place-items:center;
  background:rgba(14,4,7,.55);border:1.5px solid rgba(243,233,235,.7);
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
  transition:background-color .4s ease,border-color .4s ease,scale .45s var(--ease);
}
.vt-play svg{width:20px;height:20px;translate:2px 0;fill:var(--fg)}
.vt:hover .vt-play{background:var(--accent);border-color:var(--accent);scale:1.1}
.vt:hover .vt-play svg{fill:#fff}

.vt-dur{
  position:absolute;right:.6rem;bottom:.6rem;z-index:2;
  font-family:var(--font-m);font-size:.68rem;letter-spacing:.04em;
  background:rgba(8,2,5,.8);color:var(--fg);
  padding:3px 7px;border-radius:4px;
}

.vt-body{padding:1.1rem 1.2rem 1.2rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.vt-body .hl{
  font-family:var(--font-d);font-weight:700;font-size:1rem;line-height:1.3;color:var(--fg);
}
.vt-who{display:flex;align-items:center;gap:.7rem;margin-top:auto;padding-top:.5rem}
.vt-who .av{
  width:34px;height:34px;border-radius:50%;flex:none;
  display:grid;place-items:center;
  font-family:var(--font-d);font-weight:800;font-size:.76rem;
  background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent);
}
/* Targeted through .vt-id, not a blanket `.vt-who span` — that would also hit
   .av and, being more specific, would strip its grid centring and colour. */
.vt-who .vt-id{display:flex;flex-direction:column;gap:.1rem;min-width:0}
.vt-who .vt-id b{font-size:.86rem;font-weight:600;color:var(--fg)}
.vt-who .vt-id span{color:var(--muted);font-size:.73rem;letter-spacing:.06em}

/* ============================== OVERLAY PLAYER ============================== */
.vp{
  position:fixed;inset:0;z-index:200;
  display:grid;place-items:center;padding:5vh 4vw;
  background:rgba(8,2,5,.9);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  opacity:0;visibility:hidden;
  transition:opacity .4s ease,visibility .4s ease;
}
.vp.open{opacity:1;visibility:visible}

.vp-frame{
  position:relative;width:min(1100px,100%);
  transform:scale(.96) translateY(12px);
  transition:transform .5s var(--ease);
}
.vp.open .vp-frame{transform:none}

.vp-video{
  position:relative;aspect-ratio:16/9;width:100%;
  background:#000;border:1px solid var(--line-2);border-radius:12px;overflow:hidden;
}
.vp-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.vp-spin{
  position:absolute;left:50%;top:50%;translate:-50% -50%;
  width:34px;height:34px;border-radius:50%;
  border:2px solid rgba(243,233,235,.2);border-top-color:var(--accent);
  animation:vpSpin .8s linear infinite;
}
@keyframes vpSpin{to{transform:rotate(360deg)}}

.vp-cap{
  display:flex;align-items:center;gap:.9rem;
  margin-top:1.1rem;color:var(--muted);font-size:.9rem;flex-wrap:wrap;
}
.vp-cap b{color:var(--fg);font-family:var(--font-d);font-weight:700;font-size:1rem}
.vp-cap .sep{color:var(--accent)}

.vp-close{
  position:absolute;top:-3.1rem;right:0;
  width:42px;height:42px;border-radius:50%;
  display:grid;place-items:center;
  border:1px solid var(--line-2);color:var(--fg);
  transition:background-color .35s ease,border-color .35s ease,color .35s ease,rotate .45s var(--ease);
}
.vp-close svg{width:16px;height:16px}
.vp-close:hover{background:var(--accent);border-color:var(--accent);color:#fff;rotate:90deg}
@media(max-width:700px){
  .vp{padding:2vh 3vw}
  .vp-close{top:auto;bottom:-3.2rem;right:50%;translate:50% 0}
  .vp-cap{margin-top:.9rem}
}

/* The custom cursor is hidden over the player: the iframe swallows pointer
   events, so the dot would freeze at the edge and look broken.

   Keyed off a body class set by media.js, NOT `.vp.open ~ .cursor`. The sibling
   combinator only matches forwards, and in layouts/site.blade.php the cursor
   elements are emitted well before the player — so that selector could never
   match and the cursor stayed frozen over every video. */
body.vp-open .cursor,
body.vp-open .cursor-f{opacity:0}

@media(prefers-reduced-motion:reduce){
  .vt-track{transform:none!important;flex-wrap:wrap;width:auto}
  .vp,.vp-frame{transition:none}
}

/* ==========================================================================
   VOICES PAGE — the same cards, laid out to be read rather than to scroll
   --------------------------------------------------------------------------
   Both card types are sized for a flex rail (`width:min(…); flex:none`), which
   in a grid would leave them at a fixed width and refuse to fill the column.
   Resetting both here is why the card markup could be shared instead of
   duplicated — see partials/quote-card.blade.php.

   These rules live in media.css because that is the stylesheet voices.blade.php
   pushes, and it loads after site.css, so the .tm overrides win on order.
   ========================================================================== */
.v-grid{
  display:grid;gap:1.4rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  margin-bottom:1.4rem;
}
.v-grid .vt,
.v-grid .tm{width:auto;flex:none}

/* A video card in a grid can lift freely — there is no overflow:hidden rail
   clipping it here, so it does not need the --rail-air trick. */
.v-grid .tm{height:100%}

@media(max-width:560px){
  .v-grid{grid-template-columns:1fr;gap:1.1rem}
}