/* ============================================================
   Experience — keshin.work  (Figma "6.0 — Experience")
   ------------------------------------------------------------
   Gallery card + testimonial switcher + rating/clients stats.
   Lifted out of home.css when the approach page took the same
   section, so both pages style it from one place. The switcher
   itself lives in js/main.js and binds by id, so any page that
   loads this file and that script gets the working section.
   Colors/type come from css/tokens.css.
   ============================================================ */

.exp {
  background: var(--surface-10);
  /* 96 top and bottom — the frame puts the title at +96 and closes 96
     under the cards. Tablet/mobile step down proportionally; only the
     desktop frame gives an exact figure. */
  padding: 96px var(--page-gutter);
}

/* The section owns the whole gap on both sides — 96 above the title and
   96 under the cards, the way the home page reads. Everywhere else the
   neighbours were stacking their own spacing on top of that: the section
   above contributes its bottom padding (128 on About), and the footer
   carries a 128px margin that only the home page zeroes. Both are
   cancelled here so all four pages land on the same 96. */
:has(+ .exp) { padding-bottom: 0; }
.exp + .site-footer { margin-top: 0; }

@media (max-width: 1024px) { .exp { padding: 72px var(--page-gutter); } }
@media (max-width: 767.98px)  { .exp { padding: 56px var(--page-gutter); } }

.exp-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.exp-title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--text-d2);
  line-height: var(--lh-d2);
  letter-spacing: var(--ls-d2);
  color: var(--color-gray-80);
}

.exp-title .dot { color: var(--color-brand); }

.exp-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* 1. experience-gallery-card — collage + scrims + caption */
.exp-gallery {
  flex: 1 1 0;
  min-width: 280px;
  max-width: 421.33px;
  aspect-ratio: 421.33 / 526;
  position: relative;
  overflow: hidden;
}

.exp-gallery > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* scrim-shape-a (#111112) + scrim-shape-b (brand blue), 0 → 80% */
.exp-gallery::before,
.exp-gallery::after {
  content: "";
  position: absolute;
  inset: 0;
}
.exp-gallery::before { background: linear-gradient(180deg, rgba(17, 17, 18, 0) 0%, rgba(17, 17, 18, 0.8) 100%); }
.exp-gallery::after  { background: linear-gradient(180deg, rgba(0, 47, 167, 0) 0%, rgba(0, 47, 167, 0.8) 100%); }

.exp-gallery-caption {
  position: absolute;
  left: 7.6%;
  right: 7.6%;
  bottom: 6%;
  margin: 0;
  z-index: 1;
  font-family: var(--font-body);
  font-size: var(--text-body-xl);      /* 04. Body/XL - 24/Medium; L - 20 below 1440 */
  font-weight: 500;
  line-height: var(--lh-body-xl);
  letter-spacing: var(--ls-body-xl);
  color: #FFFFFF;
}

/* 2. testimonial-card */
.exp-testimonial {
  flex: 1 1 0;
  min-width: 300px;
  background: var(--surface-20);
  padding: 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 24px;
}

.exp-testimonial-top {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.exp-dots { display: flex; gap: 8px; }

.exp-dots button {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: var(--color-gray-60);
  cursor: pointer;
  transition: background-color var(--motion-hover);
}

.exp-dots button.active { background: var(--color-brand); }

/* 04. Body/L - 20/Medium (2026-08-31 restyle — was XL - 24/Light).
   The frames swap it again below 1440: S - 15/Regular on the 1024 frame
   and L - 20/Regular on the 375 one. */
.exp-quote {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-l);
  font-weight: 500;
  line-height: var(--lh-body-l);
  letter-spacing: var(--ls-body-l);
  color: var(--color-gray-80);
  /* one review is written as two paragraphs; the break is in the data */
  white-space: pre-line;
}

.exp-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.exp-author-avatar {
  width: 64px;
  height: 64px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

.exp-author-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: var(--text-title-2);       /* 3. Title/Title - 2 - 20 */
  font-weight: 600;
  line-height: var(--lh-title-2);
  letter-spacing: var(--ls-title-2);
  color: var(--color-gray-80);
}

.exp-author-name img { width: 20px; height: 20px; }

.exp-author-role {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-s);
  font-weight: 500;
  line-height: var(--lh-body-s);
  letter-spacing: var(--ls-body-s);
  color: var(--color-gray-60);
}

/* 3. stats-cards */
.exp-stats {
  flex: 1 1 0;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.exp-rating {
  height: 274px;
  background: var(--color-brand-50);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* 02. Label/Number on web and mobile (112 → 56), but the 1024 frame
   steps this one down to Label/Rating - Tablet - 48. */
.exp-rating-value {
  font-family: var(--font-display);
  font-size: var(--text-label-number);
  line-height: var(--lh-label-number);
  letter-spacing: var(--ls-label-number);
  color: var(--color-brand);
}

.exp-rating-stars { display: flex; gap: 1px; }
.exp-rating-stars img { width: 24px; height: 24px; }

.exp-rating-count {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
  color: var(--color-gray-80);
}

.exp-clients {
  flex: 1;
  min-height: 180px;
  background: var(--color-brand);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--color-gray-10);
}

.exp-clients-label {
  font-family: var(--font-body);
  font-size: var(--text-hairline-12);
  font-weight: 700;
  line-height: var(--lh-hairline);
  letter-spacing: var(--ls-hairline);
  text-transform: uppercase;
}

/* 02. Label/Number — the token carries the whole 112/72/56 ramp. */
.exp-clients-value {
  font-family: var(--font-display);
  font-size: var(--text-label-number);
  line-height: var(--lh-label-number);
  letter-spacing: var(--ls-label-number);
}

/* ── Tablet (≤1024) ──────────────────────────────────────── */
@media (max-width: 1024px) {
  /* The three cards carry min-widths of 280 / 300 / 300. With the two 8px
     gaps that is 896px of content, which the 1024 frame has (944) but no
     narrower viewport does — so from 768 up to ~976 the row could not
     shrink and pushed the whole page into a horizontal scroll instead,
     pinning content at x=936. Every page with this section did it.

     The frame's tablet layout is three-up, so keep it and let the cards
     compress: min-width: 0 is the standard flexbox release valve, and
     `flex: 1 1 0` then splits the row evenly. At the 768 boundary that is
     224px each, the narrowest this band ever gets. Below 768 the row
     becomes a column and these floors stop mattering. */
  .exp-gallery,
  .exp-testimonial,
  .exp-stats { min-width: 0; }

  .exp-gallery-caption {                /* XL → 04. Body/L - 20/Medium */
    font-size: var(--text-body-l);
    line-height: var(--lh-body-l);
    letter-spacing: var(--ls-body-l);
  }
  .exp-rating { height: 240px; }
  .exp-rating-value {                   /* Number → 02. Label/Rating - Tablet - 48 */
    font-size: var(--text-label-rating);
    line-height: var(--lh-label-rating);
    letter-spacing: var(--ls-label-rating);
  }
  .exp-quote {                          /* L/Medium → 04. Body/S - 15/Regular */
    font-size: var(--text-body-s);
    font-weight: 400;
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
  }
  .exp-author-name {                    /* Title 2 → 04. Body/S - 15/Medium */
    font-size: var(--text-body-s);
    line-height: var(--lh-body-s);
    letter-spacing: var(--ls-body-s);
    font-weight: 500;
  }
  .exp-author-role {                    /* S/Medium → 05. Caption/XS - 12/Regular */
    font-size: var(--text-caption-xs);
    line-height: var(--lh-caption-xs);
    letter-spacing: var(--ls-caption-xs);
    font-weight: 400;
  }
  /* The 1024 frame trades the hairlines for 08. Chip - 11. */
  .exp-rating-count,
  .exp-clients-label {
    font-size: var(--text-chip);
    line-height: var(--lh-chip);
    letter-spacing: var(--ls-chip);
    font-weight: 600;
  }
}

/* ── Mobile (≤767) ───────────────────────────────────────── */
@media (max-width: 767.98px) {
  .exp-row { flex-direction: column; }
  /* flex: none matters — the base rule is `flex: 1 1 0` for the desktop
     row, and once the row turns into a column that 0 basis is the card's
     HEIGHT. With nothing to grow into it collapsed to 0 and the gallery
     vanished on every page below 768. Dropping the flex lets the
     aspect-ratio set the height instead. */
  .exp-gallery { flex: none; max-width: none; aspect-ratio: 343 / 430; }
  .exp-gallery-caption { left: 14px; right: 14px; bottom: 24px; }  /* type from the ≤1024 block */

  .exp-dots button { width: 8px; height: 8px; }
  .exp-quote {                          /* S/Regular → 04. Body/L - 20/Regular */
    font-size: var(--text-body-l);
    font-weight: 400;
    line-height: var(--lh-body-l);
    letter-spacing: var(--ls-body-l);
  }
  .exp-author-avatar { width: 48px; height: 48px; }
  .exp-author { gap: 12px; }
  .exp-author-name { gap: 4px; }        /* type carried down from the ≤1024 block */
  .exp-testimonial { gap: 120px; justify-content: flex-start; }

  .exp-rating { height: 228px; }
  .exp-rating-value {                   /* Rating-48 → 02. Label/Number - Mobile - 56 */
    font-size: var(--text-label-number);
    line-height: var(--lh-label-number);
    letter-spacing: var(--ls-label-number);
    color: var(--color-gray-80);
  }
  .exp-rating-stars img { width: 16px; height: 16px; }
  /* The 375 frame goes back to Hairline - 13 for both card captions. */
  .exp-rating-count {
    font-size: var(--text-hairline-13);
    line-height: var(--lh-hairline);
    letter-spacing: var(--ls-hairline);
    font-weight: 700;
    color: var(--color-gray-60);
  }
  .exp-clients { min-height: 228px; flex: none; }
  .exp-clients-label {
    font-size: var(--text-hairline-13);
    line-height: var(--lh-hairline);
    letter-spacing: var(--ls-hairline);
    font-weight: 700;
  }
}