/* =====================================================================
   FITCOM — LIFE CHANGING STORIES  ·  assets/css/stories.css
   Honour-wall design layer for /stories + /stories/<slug>.
   Standalone by design: only sty-* classes live here, fc-* tokens come
   from home.css, and inner.css shared rules are never overridden.
   Brand: Orange #F6921E accents on ink/cream, Newsreader italic for
   quotes + result numbers, min text 14px, no colours outside palette.
   ===================================================================== */

/* ---- §2 Spotlight — hall-of-fame plaque on ink ---------------------- */
.sty-spot{ background:var(--fc-ink); padding-block:clamp(2.5rem,1.8rem + 3vw,4.5rem); }
.sty-spot__grid{
  display:grid; grid-template-columns:1fr 1.2fr;
  gap:clamp(1.5rem,1rem + 3vw,3.5rem); align-items:center;
}
.sty-spot__media{ position:relative; }
.sty-spot__media img{
  width:100%; height:clamp(320px,36vw,460px); object-fit:cover; display:block;
  border-radius:24px; box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.sty-spot__media::after{
  content:""; position:absolute; inset:0; border-radius:24px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);
}
.sty-spot__focus{
  display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fc-orange);
  border:1px solid rgba(246,146,30,.45); border-radius:999px;
  padding:.35rem .9rem; margin-bottom:1.1rem;
}
.sty-spot__quote{ margin:0 0 1.6rem; padding:0; border:0; }
.sty-spot__mark{ display:block; margin-bottom:.6rem; }
.sty-spot__mark svg path:last-child{ fill:#fff; opacity:.25; }
.sty-spot__quote p{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:clamp(1.4rem,1.1rem + 1.6vw,2.1rem); line-height:1.35;
  color:#fff; margin:0 0 .7rem; max-width:24ch;
}
.sty-spot__quote cite{
  font-style:normal; font-size:.9rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:rgba(255,255,255,.65);
}
.sty-spot__medals{ display:flex; flex-wrap:wrap; gap:.75rem; margin-bottom:1.8rem; }
.sty-medal{
  background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.14);
  border-radius:16px; padding:.75rem 1.1rem; min-width:9.5rem;
}
.sty-medal__label{
  display:block; font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:rgba(255,255,255,.55); margin-bottom:.25rem;
}
.sty-medal__vals{ display:block; font-size:.95rem; font-weight:600; color:rgba(255,255,255,.85); }
.sty-medal__vals .ar{ color:rgba(255,255,255,.4); margin:0 .35rem; }
.sty-medal__vals em{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:1.35rem; color:var(--fc-orange);
}

/* ---- §3 The Wall — filter + grid ------------------------------------ */
.sty-wall__head{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:1rem; margin-bottom:1.6rem;
}
.sty-wall__head .fc-h2{ margin:0; }
.sty-filter{ display:flex; flex-wrap:wrap; gap:.5rem; }
.sty-chip{
  appearance:none; cursor:pointer; font:inherit; font-size:.875rem; font-weight:600;
  color:var(--fc-ink); background:rgba(255,255,255,.6);
  border:1px solid rgba(14,14,14,.15); border-radius:999px; padding:.45rem 1rem;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.sty-chip:hover{ border-color:var(--fc-orange); color:var(--fc-orange-dark); }
.sty-chip.is-on{ background:var(--fc-ink); border-color:var(--fc-ink); color:#fff; }

.sty-grid{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(1rem,.8rem + 1.2vw,1.75rem);
}
.sty-card{
  display:block; text-decoration:none; background:#fff; border-radius:24px;
  overflow:hidden; box-shadow:0 6px 22px rgba(40,28,10,.08);
  transition:transform .22s ease, box-shadow .22s ease;
}
.sty-card:hover{ transform:translateY(-6px); box-shadow:0 18px 44px rgba(40,28,10,.16); }
.sty-card.is-hide{ display:none; }
.sty-card__img{ position:relative; aspect-ratio:4/3; overflow:hidden; }
.sty-card__img img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease;
}
.sty-card:hover .sty-card__img img{ transform:scale(1.04); }
.sty-card__loc{
  position:absolute; top:.9rem; left:.9rem; font-size:.75rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:#fff;
  background:rgba(14,14,14,.55); backdrop-filter:blur(4px);
  border-radius:999px; padding:.3rem .8rem;
}
.sty-card__play{
  position:absolute; top:.9rem; right:.9rem; display:inline-flex; align-items:center;
  gap:.3rem; font-size:.75rem; font-weight:700; color:#fff;
  background:var(--fc-orange); border-radius:999px; padding:.3rem .7rem;
}
.sty-card__stat{
  position:absolute; left:.9rem; bottom:.9rem; display:inline-block;
  background:#fff; border-radius:14px; padding:.5rem .85rem;
  font-size:.75rem; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fc-body);
  box-shadow:0 6px 18px rgba(0,0,0,.18);
}
.sty-card__stat em{
  display:block; font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:1.15rem; text-transform:none; letter-spacing:0; color:var(--fc-ink);
}
.sty-card__stat em .ar{ color:var(--fc-orange); font-style:normal; }
.sty-card__cap{ padding:1.1rem 1.25rem 1.3rem; }
.sty-card__focus{
  display:inline-block; font-size:.75rem; font-weight:700; letter-spacing:.1em;
  text-transform:uppercase; color:var(--fc-orange-dark); margin-bottom:.4rem;
}
.sty-card__title{
  margin:0 0 .45rem; font-size:1.05rem; line-height:1.35; font-weight:700;
  color:var(--fc-ink);
}
.sty-card__meta{ font-size:.875rem; color:var(--fc-body); }

/* ---- Detail: award-style results panel ------------------------------ */
.sty-award{
  position:absolute; right:clamp(.8rem,2vw,1.5rem); bottom:clamp(.8rem,2vw,1.5rem);
  min-width:15rem; background:rgba(14,14,14,.88); backdrop-filter:blur(6px);
  border-radius:16px;
  padding:1.1rem 1.3rem 1rem; color:#fff;
  box-shadow:0 18px 44px rgba(0,0,0,.35);
}
.sty-award__head{
  margin:0 0 .6rem; font-size:.78rem; font-weight:800; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fc-orange);
}
.sty-award__row{
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  padding:.4rem 0; border-top:1px solid rgba(255,255,255,.12);
}
.sty-award__row:first-child{ border-top:0; }
.sty-award__label{ font-size:.8rem; color:rgba(255,255,255,.65); }
.sty-award__vals{ font-size:.9rem; font-weight:600; color:rgba(255,255,255,.85); }
.sty-award__vals .ar{ color:rgba(255,255,255,.4); margin:0 .3rem; }
.sty-award__vals em{
  font-family:var(--font-serif); font-style:italic; font-weight:600;
  font-size:1.25rem; color:var(--fc-orange);
}
.sty-award__dur{
  margin:.7rem 0 0; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.12);
  font-size:.8rem; color:rgba(255,255,255,.55);
}
@media (max-width:700px){
  .sty-award{ position:static; margin-top:.9rem; min-width:0; }
}

/* ---- Detail: member pull-quote -------------------------------------- */
.sty-quote{ margin:2.4rem 0; padding:0; text-align:center; }
.sty-quote__mark{ display:flex; justify-content:center; margin-bottom:.5rem; }
.sty-quote p{
  font-family:var(--font-serif); font-style:italic; font-weight:500;
  font-size:clamp(1.25rem,1.05rem + 1vw,1.7rem); line-height:1.4;
  color:var(--fc-ink); margin:0 0 .5rem;
}
.sty-quote cite{
  font-style:normal; font-size:.875rem; font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fc-orange-dark);
}

/* ---- Detail: click-to-load video (16:9 + vertical 9:16) ------------- */
.sty-video{
  position:relative; margin:2rem 0; border-radius:24px; overflow:hidden;
  aspect-ratio:16/9; background:var(--fc-ink);
  box-shadow:0 14px 40px rgba(0,0,0,.18);
}
.sty-video--vertical{
  aspect-ratio:9/16; max-width:min(420px,100%); margin-inline:auto;
}
.sty-video__poster{
  appearance:none; border:0; padding:0; margin:0; cursor:pointer;
  position:absolute; inset:0; width:100%; height:100%; background:var(--fc-ink);
}
.sty-video__poster img{
  width:100%; height:100%; object-fit:cover; display:block; opacity:.85;
  transition:opacity .2s ease, transform .3s ease;
}
.sty-video__poster:hover img{ opacity:1; transform:scale(1.02); }
.sty-video__play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  display:grid; place-items:center; width:72px; height:72px; border-radius:50%;
  background:var(--fc-orange); color:#fff;
  box-shadow:0 10px 30px rgba(246,146,30,.5);
  transition:transform .2s ease;
}
.sty-video__poster:hover .sty-video__play{ transform:translate(-50%,-50%) scale(1.08); }
.sty-video__play svg{ margin-left:3px; }
.sty-video__hint{
  position:absolute; left:50%; bottom:1.1rem; transform:translateX(-50%);
  font-size:.875rem; font-weight:700; letter-spacing:.06em; color:#fff;
  background:rgba(14,14,14,.55); backdrop-filter:blur(4px);
  border-radius:999px; padding:.4rem 1rem; white-space:nowrap;
}
.sty-video iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }

/* ---- Detail: share row additions ------------------------------------ */
.sty-share button{
  appearance:none; cursor:pointer; font:inherit; padding:0; margin:0;
  background:transparent; border:0; color:inherit;
  display:inline-flex; align-items:center; justify-content:center;
}
.sty-share__done{
  font-size:.8rem; font-weight:700; color:var(--fc-orange-dark);
}

/* ---- Responsive ------------------------------------------------------ */
@media (max-width:960px){
  .sty-spot__grid{ grid-template-columns:1fr; }
  .sty-spot__media img{ height:clamp(280px,52vw,420px); }
  .sty-grid{ grid-template-columns:repeat(2,1fr); }
}
@media (max-width:600px){
  .sty-grid{ grid-template-columns:1fr; }
  .sty-wall__head{ flex-direction:column; align-items:flex-start; }
  .sty-spot__quote p{ max-width:none; }
}

/* =====================================================================
   UP client-results direction (Kelvin 2026-07-07): minimal, de-emphasise
   precise numbers, focus on the transformation + the story. Numeric
   medals/stats hidden on the LISTING; full data still lives on each
   individual story page. Reversible (display:none only).
   ===================================================================== */
.page-stories .sty-spot__medals { display: none; }
.page-stories .sty-card__stat { display: none; }
/* give the spotlight body a touch more breathing room without the medals */
.page-stories .sty-spot__quote { margin-bottom: 1.6rem; }

/* =====================================================================
   UP-style client results (Kelvin 2026-07-08) — hero strip, pill filter
   bar, minimal cards. Old spotlight/chip/card-cap rules above are now
   unused on /stories but kept: story-detail still links this sheet.
   ===================================================================== */

/* §1 hero: split headline + member strip */
.sty-hero{ background:var(--fc-ink); padding-block:clamp(2.8rem,2rem + 3.5vw,5rem); overflow:hidden; }
.sty-hero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1.2rem + 3vw,4rem); align-items:center; }
.sty-hero__txt .fc-eyebrow{ color:var(--fc-orange); }
.sty-hero__txt h1{ color:#fff; font-size:var(--fs-h1); line-height:1.05; letter-spacing:-.02em; font-weight:800; margin:.2em 0 .5em; }
.sty-hero__txt h1 .accent{ color:var(--fc-orange); }
.sty-hero__lead{ color:rgba(255,255,255,.78); font-size:var(--fs-body); line-height:1.7; max-width:46ch; margin:0 0 1.6rem; }
.sty-hero__strip{ display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.sty-hero__cell{ display:block; aspect-ratio:9/16; overflow:hidden; border-radius:6px; }
.sty-hero__cell img{ width:100%; height:100%; object-fit:cover; filter:grayscale(1) contrast(1.05); transition:filter .3s ease; display:block; }
.sty-hero__cell:hover img{ filter:none; }

/* §2 pill filter bar */
.sty-bar{ background:#fff; border-bottom:1px solid var(--fc-line); padding-block:1.1rem; position:sticky; top:0; z-index:30; }
.sty-bar__inner{ display:flex; justify-content:center; align-items:center; gap:.7rem; flex-wrap:wrap; }
.sty-sel{ position:relative; display:inline-flex; align-items:center; gap:.55rem; border:1.5px solid var(--fc-ink); border-radius:999px; padding:0 1.1rem; height:48px; color:var(--fc-ink); background:#fff; }
.sty-sel svg{ flex:none; opacity:.65; }
.sty-sel select{ appearance:none; -webkit-appearance:none; border:0; background:transparent; font:500 .92rem 'Poppins',sans-serif; color:var(--fc-ink); padding-right:1.3rem; min-width:170px; height:100%; cursor:pointer; outline:none; }
.sty-sel::after{ content:""; position:absolute; right:1rem; top:50%; width:8px; height:8px; border-right:2px solid var(--fc-body); border-bottom:2px solid var(--fc-body); transform:translateY(-70%) rotate(45deg); pointer-events:none; }
.sty-clear{ width:48px; height:48px; border-radius:50%; border:1.5px solid var(--fc-ink); background:#fff; color:var(--fc-ink); cursor:pointer; display:inline-flex; align-items:center; justify-content:center; }
.sty-clear:hover{ background:var(--fc-ink); color:#fff; }

/* §3 minimal cards */
.sty-wall{ background:var(--fc-paper); padding-block:clamp(2.2rem,1.6rem + 2.5vw,3.6rem); }
.sty-card--min{ background:transparent; border:0; box-shadow:none; border-radius:14px; overflow:visible; }
.sty-card--min:hover{ transform:translateY(-4px); box-shadow:none; }
.sty-card--min .sty-card__img{ border-radius:14px; aspect-ratio:1/1; box-shadow:0 6px 22px rgba(40,28,10,.10); }
.sty-card--min:hover .sty-card__img{ box-shadow:0 16px 38px rgba(40,28,10,.18); }
.sty-card__pill{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:2; background:rgba(255,255,255,.94); color:var(--fc-ink); font:600 .8rem 'Poppins',sans-serif; letter-spacing:.06em; text-transform:uppercase; padding:.6rem 1.05rem; border-radius:999px; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.18); transition:background .15s ease, transform .2s ease; }
.sty-card__pill .ar{ color:var(--fc-orange); font-style:normal; }
.sty-card--min:hover .sty-card__pill{ background:var(--fc-orange); color:#fff; transform:translate(-50%,-50%) scale(1.04); }
.sty-card--min:hover .sty-card__pill .ar{ color:#fff; }
.sty-card__bar{ display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding:.85rem .2rem 0; }
.sty-card__dur{ font:700 1.05rem 'Poppins',sans-serif; color:var(--fc-ink); }
.sty-card__age{ font:600 .72rem 'Poppins',sans-serif; letter-spacing:.08em; color:var(--fc-ink); border:1.5px solid var(--fc-line); border-radius:999px; padding:.32rem .7rem; background:#fff; }
.sty-empty{ text-align:center; color:var(--fc-body); padding:2.5rem 0; }

@media (max-width:900px){
  .sty-hero__grid{ grid-template-columns:1fr; }
  .sty-hero__strip{ grid-template-columns:repeat(5,1fr); }
  .sty-bar{ position:static; }
  .sty-sel select{ min-width:0; flex:1; }
  .sty-bar__inner{ justify-content:stretch; }
  .sty-sel{ flex:1 1 44%; }
}

/* ---- story detail hero (UP-style upgrade, Kelvin 2026-07-08) -------- */
.sty-dhero{ background:var(--fc-ink); padding-block:clamp(2.8rem,2rem + 3.5vw,5rem); }
.sty-dhero__grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,1.2rem + 3vw,4rem); align-items:center; }
.sty-dhero__focus{ display:inline-block; font:700 .72rem 'Poppins',sans-serif; letter-spacing:.16em; text-transform:uppercase; color:var(--fc-orange); border:1.5px solid var(--fc-orange); border-radius:999px; padding:.35rem .9rem; margin-bottom:1.1rem; }
.sty-dhero__txt h1{ color:#fff; font:800 clamp(1.7rem,1.3rem + 2vw,2.6rem)/1.15 'Poppins',sans-serif; letter-spacing:-.02em; margin:0 0 1.2rem; }
.sty-dhero__chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-bottom:1.7rem; }
.sty-dhero__chip{ font:600 .8rem 'Poppins',sans-serif; color:rgba(255,255,255,.88); border:1.5px solid rgba(255,255,255,.28); border-radius:999px; padding:.4rem .85rem; }
.sty-dhero__media img{ width:100%; height:auto; display:block; border-radius:18px; box-shadow:0 22px 54px rgba(0,0,0,.4); }
@media (max-width:900px){
  .sty-dhero__grid{ grid-template-columns:1fr; }
  .sty-dhero__media{ order:-1; }
}

/* story body = Poppins, matching the article pages (Kelvin 2026-07-08).
   Quote block drops the Newsreader serif for the brand style. */
.fc-storybody p{ font-family:'Poppins','Noto Sans SC',system-ui,sans-serif; }
.sty-quote p{ font:600 1.25rem/1.5 'Poppins',sans-serif !important; font-style:normal; }