/* Parallang — Customer stories (video testimonials), homepage section.
   Loaded after colors_and_type.css + home.css, so it inherits
   .section, .section--tint, .eyebrow, .section__kicker, .section__lede,
   .reveal / .reveal-stagger and the tokens (--navy, --blue, --line, ...).
   Naming mirrors the tutorials page facade (.tut-poster) so both pages
   share one mental model: a static poster, a YouTube player only on click. */

/* ── Section head ── */
.stories__head{max-width:680px;margin-bottom:clamp(32px,4.5vw,48px);}
.stories__head .section__lede{margin-bottom:0;}

/* ── Facade poster (before click) ── */
.story-poster{
  position:relative;display:block;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;
  padding:0;cursor:pointer;background:var(--navy-ink);
  box-shadow:0 18px 48px rgba(42,53,84,.12),0 2px 6px rgba(42,53,84,.06);
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s;
}
.story-poster:hover{transform:translateY(-3px);box-shadow:0 24px 56px rgba(42,53,84,.18),0 2px 6px rgba(42,53,84,.06);}
.story-poster:focus-visible{outline:3px solid var(--blue);outline-offset:3px;}
.story-poster__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.story-poster::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(2,8,35,0) 50%,rgba(2,8,35,.42) 100%);
  transition:background .3s;
}
.story-poster:hover::after{background:linear-gradient(180deg,rgba(2,8,35,.08) 50%,rgba(2,8,35,.5) 100%);}
.story-poster__play{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;
  width:64px;height:64px;border-radius:50%;background:#fff;color:var(--blue);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px rgba(2,8,35,.28);transition:transform .3s;
}
.story-poster:hover .story-poster__play{transform:translate(-50%,-50%) scale(1.08);}
.story-poster__play svg{width:24px;height:24px;margin-left:3px;}
.story-poster__dur{
  position:absolute;bottom:12px;right:12px;z-index:1;
  background:rgba(2,8,35,.82);color:#fff;
  font:600 11.5px/1 var(--font-body);letter-spacing:.02em;
  padding:5px 9px;border-radius:7px;
}
.story-poster__badge{
  position:absolute;top:14px;left:14px;z-index:1;
  background:rgba(255,255,255,.94);color:var(--blue);
  font:700 10.5px/1 var(--font-body);text-transform:uppercase;letter-spacing:.1em;
  padding:6px 10px;border-radius:999px;
}
/* Name + role printed over the poster's dark base (grid cards only) */
.story-poster__caption{
  position:absolute;left:16px;right:72px;bottom:13px;z-index:1;
  text-align:left;color:#fff;text-shadow:0 1px 2px rgba(2,8,35,.5);
}
.story-poster__caption b{display:block;font:600 13px/1.3 var(--font-body);}
.story-poster__caption span{display:block;font:500 11.5px/1.3 var(--font-body);color:rgba(255,255,255,.8);margin-top:1px;}

/* ── Live player (after click) ── */
.story-frame{
  position:relative;width:100%;aspect-ratio:16/9;
  border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#000;
  box-shadow:0 18px 48px rgba(42,53,84,.12),0 2px 6px rgba(42,53,84,.06);
}
.story-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;}

/* ── Featured story: poster + pull quote ── */
.story-featured{
  display:grid;grid-template-columns:1.55fr 1fr;
  gap:clamp(28px,4.5vw,56px);align-items:center;
}
@media (max-width:900px){.story-featured{grid-template-columns:1fr;gap:26px;}}
.story-featured .story-poster__play{width:84px;height:84px;}
.story-featured .story-poster__play svg{width:30px;height:30px;}

.story__tag{
  font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.14em;
  color:var(--blue);margin-bottom:16px;display:inline-flex;align-items:center;gap:8px;
}
.story__tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--blue);}
.story__quote{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(24px,2.6vw,32px);line-height:1.18;letter-spacing:-0.02em;
  color:var(--navy);margin:0 0 20px;text-wrap:pretty;
}
.story__quote::before{content:'\201C';color:var(--blue);}
.story__quote::after{content:'\201D';color:var(--blue);}

.story__facts{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px;padding:0;list-style:none;}
.story__fact{
  display:inline-flex;align-items:baseline;gap:6px;
  font:500 12.5px/1 var(--font-body);color:var(--ink-2);
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 13px 8px 11px;
}
.story__fact b{font-family:var(--font-display);font-weight:700;font-size:14px;color:var(--blue);letter-spacing:-0.01em;}

.story__who{display:flex;align-items:center;gap:14px;padding-top:20px;border-top:1px solid var(--line);}
.story__avatar{
  width:46px;height:46px;border-radius:50%;overflow:hidden;flex-shrink:0;
  border:2px solid #fff;box-shadow:0 2px 8px rgba(42,53,84,.18);
  background:linear-gradient(135deg,var(--blue),var(--navy));
  color:#fff;display:flex;align-items:center;justify-content:center;
  font:700 14px/1 var(--font-display);
}
.story__avatar img{width:100%;height:100%;object-fit:cover;object-position:32% 28%;display:block;}
.story__name{font:600 14px/1.3 var(--font-body);color:var(--navy);margin:0;}
.story__role{font-size:12.5px;line-height:1.4;color:var(--muted);margin:2px 0 0;}

.story__meta{
  display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;
  margin:14px 0 0;font-size:12.5px;line-height:1.5;color:var(--muted);
}
.story__meta span{display:inline-flex;align-items:center;gap:7px;}
.story__meta svg{width:15px;height:15px;flex-shrink:0;}
.story__meta .story__meta-privacy svg{color:var(--color-success);}

/* ── More stories (grid; omitted entirely while there is one video) ── */
.story-more{margin-top:clamp(40px,5.5vw,64px);}
.story-more__h{font-family:var(--font-display);font-weight:700;font-size:20px;letter-spacing:-0.01em;color:var(--navy);margin:0 0 22px;}
.story-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;}
@media (max-width:1100px){.story-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:600px){.story-grid{grid-template-columns:1fr;}}
.story-card{
  background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .35s cubic-bezier(.2,.7,.2,1),box-shadow .35s,border-color .25s;
}
.story-card:hover{transform:translateY(-3px);box-shadow:0 20px 44px rgba(42,53,84,.08);border-color:#c7d0e6;}
.story-card .story-poster,.story-card .story-frame{border:0;border-radius:0;box-shadow:none;}
.story-card .story-poster:hover{transform:none;}
.story-card .story-poster__play{width:56px;height:56px;}
.story-card .story-poster__play svg{width:20px;height:20px;}
.story-card__body{padding:20px 22px 22px;display:flex;flex-direction:column;gap:16px;flex:1;}
.story-card__quote{font-size:15px;line-height:1.5;color:var(--navy);margin:0;text-wrap:pretty;}
.story-card__quote::before{content:'\201C';color:var(--blue);font-weight:700;}
.story-card__quote::after{content:'\201D';color:var(--blue);font-weight:700;}
.story-card .story__who{margin-top:auto;padding-top:16px;gap:12px;}
.story-card .story__avatar{width:38px;height:38px;font-size:12px;}
.story-card .story__name{font-size:13.5px;}
.story-card .story__role{font-size:12px;}

/* ── Written quotes (optional block, reuses .quotes / .quote from home.css) ── */
.stories__quotes{margin-top:clamp(40px,5.5vw,64px);}
.stories__quotes .story-more__h{margin-bottom:4px;}
.stories__quotes .quotes{margin-top:22px;}

/* ── Invitation row ── */
.story-invite{
  margin-top:clamp(40px,5.5vw,56px);padding-top:30px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.story-invite p{margin:0;font-size:14px;color:var(--ink-2);}
.story-invite a{display:inline-flex;align-items:center;gap:9px;font:600 14px/1 var(--font-body);color:var(--blue);transition:color .15s;}
.story-invite a:hover{color:var(--blue-hover);}
.story-invite a svg{width:17px;height:17px;}

/* ── Mobile polish ── */
@media (max-width:600px){
  .story-poster,.story-frame{border-radius:14px;}
  .story-featured .story-poster__play{width:66px;height:66px;}
  .story-featured .story-poster__play svg{width:24px;height:24px;}
  .story__quote{font-size:clamp(22px,6.2vw,26px);}
  .story__facts{gap:7px;margin-bottom:20px;}
  .story__fact{padding:7px 11px 7px 10px;font-size:12px;}
  .story-card__body{padding:18px 18px 20px;}
}