/* ====== ABOUT HERO SECTION ====== */

/*
  Layout derived from the Squarespace reference's fluid engine:
  - 26-column grid (1 gutter + 24 content + 1 gutter)
  - 15 rows, height proportional to container width (scaling factor 0.0215)
  - Headline: grid-area 3/2/6/9   (top-left)
  - Subtext:  grid-area 10/6/14/13 (center-left, bottom-aligned)
  - GIF:      grid-area 1/14/16/27 (right side to edge, small top padding for blue gap)
*/

#about-hero {
  position: relative;
  width: 100%;
  background-color: var(--color-blue);
  overflow: hidden;
}

/* ---- Hero body: 26-column grid with fixed proportional height ---- */

.about-hero-body {
  display: grid;
  /* Fixed height: 15 rows × (container-width × 0.0215) + 14 gaps × 11px
     At 1440px viewport: ~580px. Capped by clamp for very wide/narrow screens. */
  height: clamp(400px, calc(min(var(--site-max-width), 100vw - var(--site-gutter) * 2) * 0.0215 * 15 + 14 * 11px), 650px);
  grid-template-rows: repeat(15, 1fr);
  grid-template-columns:
    calc(var(--site-gutter) - 11px)
    repeat(24, minmax(0, calc((var(--site-max-width) - 23 * 11px) / 24)))
    minmax(0, 1fr);
  column-gap: 11px;
  row-gap: 11px;
}

/* Headline: top-left — rows 3-5, cols 2-8 */
.about-hero-content {
  grid-area: 3 / 2 / 6 / 9;
  z-index: 2;
  display: flex;
  align-items: center;
}

.about-hero-headline {
  font-size: clamp(3.2rem, 5.5vw, 6.2rem);
  font-weight: var(--font-weight-bold);
  line-height: 1.08;
  color: var(--color-white);
  margin: 0;
}

/* Subtext: center-left, bottom-aligned — rows 10-13, cols 6-12 */
.about-hero-subtext {
  grid-area: 10 / 6 / 14 / 13;
  z-index: 2;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

.about-hero-text {
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 400;
  font-style: italic;
  line-height: 1.6;
  color: var(--color-white);
  opacity: 0.85;
  margin: 0;
}

/* GIF: right side, bleeding to edge — rows 1-15, cols 14-27
   Top padding creates ~55px blue gap between nav and GIF */
.about-hero-media {
  grid-area: 1 / 14 / 16 / 27;
  padding-top: clamp(22px, 2.4vw, 36px);
  z-index: 1;
  overflow: hidden;
}

.about-hero-gif {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ====== MOBILE ====== */
@media (max-width: 767px) {

  .about-hero-body {
    display: flex;
    flex-direction: column;
    height: auto;
    padding: var(--space-md) var(--site-gutter) 0;
    gap: var(--space-sm);
  }

  .about-hero-content {
    display: block;
  }

  .about-hero-subtext {
    display: block;
  }

  .about-hero-text {
    max-width: none;
  }

  .about-hero-media {
    margin-left: calc(-1 * var(--site-gutter));
    margin-right: calc(-1 * var(--site-gutter));
    width: calc(100% + 2 * var(--site-gutter));
    height: 50vw;
    min-height: 180px;
    padding-top: 0;
  }
}