/* ==========================================================================
   FitnessBlackBelt — success-stories.css
   Sections: Hero · Stats · Transformation slots · Featured note
             · Testimonial wall + filter · The pattern
   ========================================================================== */

/* ==========================================================================
   1. BREADCRUMBS
   ========================================================================== */
.crumbs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-size: var(--fs-xs);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: 1.75rem;
}
.crumbs a { color: var(--brand-300); transition: color var(--dur); }
.crumbs a:hover { color: var(--brand-200); }
.crumbs span[aria-current] { color: var(--text-soft); }

/* ==========================================================================
   2. HERO — success stories variant
   Hero component lives in base.css. Here: left-aligned breadcrumb and the
   stats bar that closes the section.
   ========================================================================== */
.hero .crumbs { justify-content: flex-start; margin-bottom: 1.25rem; }

/* The rating card reads as a value, not a heading */
.hero__card--gold strong { letter-spacing: .1em; color: var(--gold-soft); }

.sstats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  text-align: left;
}
@media (min-width: 780px) { .sstats { grid-template-columns: repeat(4, 1fr); } }

.sstats li {
  display: grid;
  gap: .4rem;
  padding: clamp(1.35rem, 3vw, 2rem);
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  transition: background-color var(--dur);
}
.sstats li:hover { background: var(--surface-2); }
.sstats strong {
  font-family: var(--font-display);
  font-size: clamp(1.85rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.045em;
  background: linear-gradient(160deg, #fff, var(--brand-300));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.sstats span { font-size: var(--fs-xs); color: var(--muted); line-height: 1.45; }

/* ==========================================================================
   3. TRANSFORMATION SLOTS
   ========================================================================== */
.transform__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}

.tslot {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.tslot:hover { border-color: rgba(217,180,65,.32); transform: translateY(-5px); }

.tslot__pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}
.tslot__pair .media { border-radius: 0; border-width: 0; }
/* The "after" half carries a violet cast so the pair reads as a progression */
.tslot__after {
  background:
    repeating-linear-gradient(135deg, transparent 0 13px, rgba(217,180,65,.05) 13px 14px),
    linear-gradient(165deg, rgba(138,105,18,.22), var(--bg-2)) !important;
}
.tslot__after .media__slot-note b { color: var(--brand-300); }
.tslot figcaption { font-size: 10px; }
.tslot__half {
  display: grid;
  place-items: center;
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(255,255,255,.022) 11px 12px),
    linear-gradient(165deg, var(--surface-2), var(--bg-2));
  position: relative;
}
.tslot__half span {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
}
.tslot__half--after {
  background:
    repeating-linear-gradient(135deg, transparent 0 11px, rgba(217,180,65,.05) 11px 12px),
    linear-gradient(165deg, rgba(138,105,18,.2), var(--bg-2));
}
.tslot__half--after span { color: var(--brand-300); }

/* Camera glyph watermark inside each half */
.tslot__half::before {
  content: '';
  position: absolute;
  top: 32%;
  width: 34px; height: 34px;
  opacity: .16;
  background: currentColor;
  color: var(--text);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6'%3E%3Cpath d='M3 8.5A2.5 2.5 0 0 1 5.5 6h1.8l1.2-2h6.6l1.2 2h1.8A2.5 2.5 0 0 1 21 8.5v9A2.5 2.5 0 0 1 18.5 20h-13A2.5 2.5 0 0 1 3 17.5Z'/%3E%3Ccircle cx='12' cy='13' r='3.6'/%3E%3C/svg%3E") center/contain no-repeat;
}

.tslot figcaption {
  padding: 1rem 1.25rem;
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--line);
}

.transform__note {
  display: flex;
  align-items: center;
  gap: .6rem;
  justify-content: center;
  margin-top: 2.25rem;
  font-size: var(--fs-xs);
  color: var(--dim);
  text-align: center;
}
.transform__note svg { width: 15px; height: 15px; flex: none; color: var(--brand-400); }

/* ==========================================================================
   4. FEATURED COACH NOTE
   ========================================================================== */
.featured__panel {
  display: grid;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  box-shadow: var(--shadow-lg);
}
@media (min-width: 880px) { .featured__panel { grid-template-columns: .85fr 1.15fr; } }

.featured__media { position: relative; min-height: 280px; }
.featured__media img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 50% 35%;
  filter: contrast(1.1) saturate(.85);
}
.featured__media-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(120deg, rgba(138,105,18,.4), transparent 60%),
    linear-gradient(180deg, transparent 50%, rgba(10,8,6,.55));
}

.featured__copy { padding: clamp(2rem, 4.5vw, 3.5rem); }

/* The panel is built as a photo beside the note. Until a photo is added the
   note is the only child, and the second column would be dead space inside
   the border — so on its own it takes the full width. */
.featured__copy:only-child { grid-column: 1 / -1; }

.featured__copy blockquote p {
  /* Was Fraunces italic. That family is loaded italic-only (ital@1 in the
     font URL), so the quote had no upright to fall back on and read as a
     heavy slanted serif against a page set in Bricolage. The display face
     matches the headings and holds up far better at this size. */
  font-family: var(--font-display);
  font-style: normal;
  font-size: var(--fs-2xl);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.025em;
  color: var(--text);
  text-wrap: balance;
  /* High enough that it never binds at the container's real width — the quote
     fills the panel — but it still stops a line running the full width of an
     ultra-wide display, where it would be unreadable. */
  max-width: 52ch;
}
.featured__copy footer {
  margin-top: 1.85rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
}
.featured__copy footer strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: 650;
}
.featured__copy footer span { font-size: var(--fs-xs); color: var(--gold); letter-spacing: .04em; }

/* ==========================================================================
   5. TESTIMONIAL WALL
   ========================================================================== */
.wall { overflow: hidden; }

/* --- Filter chips --- */
.wall__filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5rem;
  margin-bottom: 1.5rem;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem 1.15rem;
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: 500;
  color: var(--text-soft);
  background: rgba(255,255,255,.03);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  transition: all var(--dur) var(--ease-out);
}
.chip em {
  font-style: normal;
  font-size: 10px;
  font-weight: 600;
  padding: .1rem .4rem;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.07);
  color: var(--dim);
  transition: all var(--dur);
}
.chip:hover { border-color: var(--line-strong); background: rgba(255,255,255,.06); color: #fff; }
.chip.is-active {
  color: var(--on-brand);
  background: var(--grad-brand);
  border-color: transparent;
  box-shadow: 0 10px 28px -14px rgba(201,162,39,0.65);
}
.chip.is-active em { background: rgba(255,255,255,.22); color: #fff; }

.wall__count {
  text-align: center;
  font-size: var(--fs-xs);
  color: var(--dim);
  margin-bottom: 2.25rem;
}

/* --- Masonry-ish grid --- */
.wall__grid {
  display: grid;
  gap: clamp(.9rem, 1.8vw, 1.25rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr));
  align-items: start;
}

.wcard {
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 3vw, 1.85rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  transition: border-color var(--dur), transform var(--dur) var(--ease-out),
              box-shadow var(--dur), opacity 320ms var(--ease-out);
}
.wcard:hover {
  border-color: rgba(217,180,65,.34);
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

/* Hidden by the filter */
.wcard.is-filtered {
  display: none;
}

.wcard__stars {
  font-size: var(--fs-sm);
  letter-spacing: .16em;
  color: var(--gold);
  margin-bottom: 1rem;
}
.wcard blockquote {
  font-size: var(--fs-sm);
  line-height: 1.7;
  color: var(--text-soft);
  flex: 1;
}
.wcard blockquote::before { content: '“'; }
.wcard blockquote::after { content: '”'; }

.wcard figcaption {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
}
.wcard__avatar {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-sm);
  color: var(--brand-200);
  background: linear-gradient(150deg, rgba(217,180,65,.3), rgba(138,105,18,.12));
  border: 1px solid rgba(217,180,65,.3);
}
.wcard__who { display: grid; line-height: 1.35; }
.wcard__who strong { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: 600; }
.wcard__who em { font-style: normal; font-size: 11px; color: var(--dim); }

/* Featured card spans two columns where there's room */
@media (min-width: 900px) {
  .wcard--feature { grid-column: span 2; }
  .wcard--feature blockquote {
    font-family: var(--font-accent);
    font-style: italic;
    font-size: var(--fs-lg);
    line-height: 1.45;
    color: var(--text);
  }
  .wcard--feature {
    border-color: rgba(217,180,65,.3);
    background:
      radial-gradient(100% 80% at 100% 0%, rgba(201,162,39,.16), transparent 62%),
      linear-gradient(165deg, var(--surface-2), var(--bg-2));
  }
}

.wall__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--dim);
  font-size: var(--fs-sm);
}

/* ==========================================================================
   6. THE PATTERN
   ========================================================================== */
.common__grid {
  display: grid;
  gap: clamp(1rem, 2vw, 1.35rem);
}
@media (min-width: 700px)  { .common__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1060px) { .common__grid { grid-template-columns: repeat(4, 1fr); } }

.common__card {
  position: relative;
  padding: clamp(1.6rem, 3vw, 2.1rem);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(168deg, rgba(255,255,255,.042), rgba(255,255,255,.008)), var(--surface);
  overflow: hidden;
  transition: border-color var(--dur), transform var(--dur) var(--ease-out);
}
.common__card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-500), transparent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 600ms var(--ease-out);
}
.common__card:hover { border-color: rgba(217,180,65,.3); transform: translateY(-5px); }
.common__card:hover::after { transform: scaleX(1); }

.common__num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(231,203,116,.32);
  margin-bottom: 1.15rem;
}
.common__card h3 { font-size: var(--fs-base); font-weight: 650; margin-bottom: .55rem; }
.common__card p { font-size: var(--fs-sm); color: var(--muted); }