/* ==========================================================================
   HOME PAGE
   Layout for the sections of index.html only. Anything reusable across
   future pages belongs in components.css.
   Depends on: tokens.css, base.css, components.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   PAGE RHYTHM
   In the frame the main column is a single flex stack with a 72px gap, with
   40px and 8px spacer rectangles inserted to widen certain joints. Those
   shims are reproduced here as margins so the DOM carries no empty elements.
   -------------------------------------------------------------------------- */

.page {
  padding-top: var(--page-top-gap);
}

/* Frame D's rhythm is a flat 110 between bands. The horizontal rules that
   used to open and close the BRANDS band are gone from the frame. */
.page > * + * { margin-top: var(--gap-band); }

/* The two joints the frame keeps tighter. */
.page > .section--tight  { margin-top: var(--gap-tight); }
.page > .closing         { margin-top: var(--gap-closing); }


/* --------------------------------------------------------------------------
   FULL-BLEED BANDS
   IMPACT and ABOUT are edge-to-edge panels in frame D - the same fill the
   impact panel used to have, but spanning the viewport with no border and no
   radius. Each carries its own vertical inset.
   -------------------------------------------------------------------------- */

.band {
  background-color: var(--color-surface-panel);
}
.band--impact { padding-block: var(--band-pad-impact); }   /*  76 */
.band--about  { padding-block: var(--band-pad-about);  }   /* 110 */


/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */

.hero__intro {
  margin: 0;
  max-width: 284px;              /* the frame's rail measure */
  color: var(--color-text-muted);
  font-size: var(--fs-rail-intro);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}

.hero__headline {
  margin: 0;
  color: var(--color-text);
  font-size: var(--fs-hero);
  font-weight: var(--fw-medium);
  line-height: var(--lh-hero);
  letter-spacing: var(--ls-hero);
  text-wrap: balance;
}

/* The first clause is set in the muted tone in the frame. */
.hero__headline-lead { color: var(--color-text-muted); }

@media (min-width: 1024px) {
  .hero__intro {
    grid-column: 1;
    margin-top: 20px;            /* frame D: intro y=244 against the h1 at 224 */
  }
}


/* --------------------------------------------------------------------------
   RAIL LABEL OFFSETS
   Vertical position of each left-rail label, measured off the frame. Both the
   rail and the main column start at the same y, so these are the label's y
   minus its section's y:

     ABILITIES        1396 - 1394 =  +2
     IMPACT           2044 - 1988 = +56   (the panel's own 76px inset)
     BRANDS           2552 - 2547 =  +5   (+73 more: the section box starts at
                                           the rule - 72px padding plus its
                                           own 1px border - above group one)
     ABOUT            3331 - 3336 =  -5
     RECOMMENDATIONS  4217 - 4218 =  -1   (+4: the rail's own padding-block)

   Only applies at desktop, where the rail exists; below that the label
   stacks directly above its section.
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
  #abilities       { --eyebrow-offset:  2px; }
  #impact          { --eyebrow-offset: 25px; }   /* label 2166c vs stats 2141 */
  #brands          { --eyebrow-offset: 13px; }   /* 2490 vs the band at 2477  */
  #about           { --eyebrow-offset:  0px; }   /* label and paragraph align */
  #recommendations { --eyebrow-offset:  4px; }
}


/* --------------------------------------------------------------------------
   WORK  -  six case-study cards, 3 x 2 in the frame
   -------------------------------------------------------------------------- */

.work-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--grid-row-gap) var(--grid-gap);
}

@media (min-width: 481px) {
  .work-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .work-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   ABILITIES  -  six items, 3 x 2 in the frame
   -------------------------------------------------------------------------- */

.abilities-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--ability-gap-y) var(--ability-gap-x);
}

@media (min-width: 481px) {
  .abilities-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .abilities-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}


/* --------------------------------------------------------------------------
   IMPACT  -  four figures inside a rounded panel
   -------------------------------------------------------------------------- */

.impact-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--stat-gap);
}

@media (min-width: 481px) {
  .impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .impact-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}




/* --------------------------------------------------------------------------
   ABOUT
   -------------------------------------------------------------------------- */

/* Frame D reverses the order: the long paragraph runs first, then the
   portrait + lead row 58px below it. */
.about__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--about-gap);
  align-items: start;
  margin-top: var(--about-body-gap);
}

.about__portrait {
  width: 100%;
  aspect-ratio: 390 / 478;       /* frame D: taller than the old square */
}

.about__lead {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.about__lead-strong { color: var(--color-text); }

.about__body {
  margin: 0;
  color: var(--color-text-muted);   /* frame D: muted, was white */
  font-size: var(--fs-lead);
  font-weight: var(--fw-regular);   /* frame D: regular, was light */
  line-height: var(--lh-lead);
  letter-spacing: var(--ls-eyebrow);
}

@media (min-width: 768px) {
  /* 390 / 1400 of the content column. In the frame the portrait is a fixed
     390px and the copy takes what is left (the layer's stated 976px width
     overflows the 1400px row, so it shrinks to 948px when rendered). */
  /* 390 and ~929 of the 1400 row. The frame stops the copy at 929 rather
     than stretching it to fill, which is what puts it on 7 lines.

     The column is 66.65% (933px) rather than the literal 66.357% (929px):
     the frame's 4th line, "I've been described as a player/", measures
     931.6px in the browser against Figma's 929 - a 0.3% metrics difference
     in Inter. Four pixels of width buys the frame's exact line breaks and
     its exact 490px block height; holding 929 costs an eighth line and
     pushes everything below down by 70px. */
  .about__row { grid-template-columns: 27.857% 66.65%; }
}


/* --------------------------------------------------------------------------
   RECOMMENDATIONS  -  horizontal rail
   The frame scrolls this row horizontally; that behaviour is kept at every
   size. On narrow screens the rail bleeds to the viewport edge so a partly
   visible next card signals that there is more to swipe to.
   -------------------------------------------------------------------------- */

.rec-rail {
  display: flex;
  gap: var(--grid-gap);
  overflow-x: auto;
  overflow-y: hidden;
  padding-block: var(--space-4);
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border-panel) transparent;
}

.rec-rail::-webkit-scrollbar { height: 6px; }
.rec-rail::-webkit-scrollbar-track { background: transparent; }
.rec-rail::-webkit-scrollbar-thumb {
  background-color: var(--color-border-panel);
  border-radius: 3px;
}

@media (max-width: 1023px) {
  .rec-rail {
    margin-inline: calc(var(--page-gutter) * -1);
    padding-inline: var(--page-gutter);
    scroll-padding-inline-start: var(--page-gutter);
  }
}


/* --------------------------------------------------------------------------
   PULL QUOTE
   -------------------------------------------------------------------------- */

.pull-quote { margin: 0; }

.pull-quote__text {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-display);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
}
.pull-quote__text-strong { color: var(--color-text); }

.pull-quote__attribution {
  display: block;
  color: var(--color-text-muted);   /* frame D: muted, was white */
  font-size: var(--fs-quote-attr);
  font-style: italic;
  font-weight: var(--fw-regular);
  /* The frame sets 70px leading on 28px type; its half-leading is what
     opens the space above the attribution, so there is no margin here. */
  line-height: 2.5;
  letter-spacing: var(--ls-eyebrow);
}


/* --------------------------------------------------------------------------
   CLOSING
   Frame D runs the photograph edge to edge (1906 x 476) and sets the caption
   in black over its bright right-hand side, rather than below it in the
   content column.
   -------------------------------------------------------------------------- */

.closing {
  position: relative;
  /* The caption is sized against the photograph, not the viewport, so it
     keeps the frame's proportions at every width instead of only at 1920. */
  container-type: inline-size;
}

.closing__figure { margin: 0; }

.closing__image {
  width: 100%;
  /* height:auto is required - the width/height attributes on the <img> are a
     UA presentational hint that otherwise pins the height and defeats
     aspect-ratio. */
  height: auto;
  aspect-ratio: 1906 / 476;
  object-fit: cover;
}

.closing__caption {
  margin: 0;
  color: var(--color-text-on-image);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  line-height: 1.2857;                 /* 36 / 28 */
  letter-spacing: var(--ls-caption);
}

/* Laid over the photo's bright right-hand side, as drawn. */
@media (min-width: 1024px) {
  .closing__caption {
    position: absolute;
    top: 13.445%;                      /*  64 / 476  */
    right: 4.197%;                     /*  80 / 1906 */
    width: 37.461cqw;                  /* 714 / 1906 */
    font-size: 1.4691cqw;              /*  28 / 1906 */
  }
}

/* Below that the photo is too short to hold the block, so the caption drops
   beneath it and takes the readable off-image colour. */
@media (max-width: 1023px) {
  .closing__caption {
    margin-top: var(--space-24);
    padding-inline: var(--page-gutter);
    color: var(--color-text-caption);
  }
}