/* Figma instance "intro" (1440x444, fixed height = 42px pad + a 360px
   content row + 42px pad, exact, no slack). Shared pattern across the
   Process, Case Studies, Services and People pages: eyebrow + heading
   stacked left, a longer body column right.

   Home's hero-intro.css carries its own earlier instance of this same
   component (page-specific top padding and row min-height, since it sits
   directly under the hero). This file is the standalone/generic version. */

.intro-band {
  background-color: var(--dozen-blue);
  padding-block: var(--space-40);
}

.intro-band__row {
  display: flex;
  flex-direction: column;
  gap: 34.54px;
}

.intro-band__col {
  display: flex;
  flex-direction: column;
  gap: 13.06px;
}

.intro-band__eyebrow {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--dozen-teal);
}

.intro-band__heading {
  margin: 0;
  color: var(--pure-white);
  font-size: var(--h1-size);
  line-height: 1.2;
}

.intro-band__copy {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 500;
  /* Fluid 20px (402) → 32px (1440), floored rather than jumping at a
     breakpoint like the header type scale does. */
  font-size: clamp(1.25rem, 0.9595rem + 1.1561vw, 2rem);
  line-height: var(--p-leading);
  /* em, not px: tracks the fluid size so it still reads as -1.12px at the
     1440 board without a second breakpoint rule. */
  letter-spacing: -0.035em;
  /* Lightened from --light-purple (#aaa3df): 3.12:1 against the blue band
     fails AA at this size. The desktop rule below restores the board color
     once the fluid size crosses the 24px large-text threshold. */
  color: #cdc9ec;
}

@media (min-width: 1024px) {
  .intro-band {
    padding-block: 42px;
  }

  .intro-band__row {
    flex-direction: row;
    align-items: flex-start;
    gap: 82px;
  }

  /* Figma fixes each band's height via its copy column's text box —
     360px on Process (8 lines), 315px on the case-study detail bands
     (7 lines); the band's own padding stays 42px everywhere. */
  .intro-band--h360 .intro-band__row {
    min-height: 360px;
  }

  .intro-band--h315 .intro-band__row {
    min-height: 315px;
  }

  .intro-band--h180 .intro-band__row {
    min-height: 180px;
  }

  .intro-band__col {
    flex: 0 1 639px;
    gap: 0;
  }

  .intro-band__eyebrow {
    font-style: normal;
    font-size: var(--h4-size);
    line-height: var(--h4-leading);
  }

  .intro-band__heading {
    line-height: var(--h1-leading);
  }

  .intro-band__copy {
    flex: 0 1 559px;
    /* ≥27px here, so 3.12:1 clears the AA large-text bar. */
    color: var(--light-purple);
  }
}

/* Testimonial variant (case-study detail, second intro instance). Swaps the
   flat blue field for a warm gradient-grain photo fill and flips the type
   from light-on-blue to dark-on-light. Pure addition; the base block and
   --h360/--h315 modifiers are untouched. */
.intro-band--textured {
  background-color: var(--pure-white);
  background-image: url("../../img/intro-testimonial-bg.jpg");
  background-image: image-set(
    url("../../img/intro-testimonial-bg-m.avif") type("image/avif"),
    url("../../img/intro-testimonial-bg-m.webp") type("image/webp"),
    url("../../img/intro-testimonial-bg.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
}

.intro-band--textured .intro-band__eyebrow {
  color: var(--dozen-blue);
}

.intro-band--textured .intro-band__heading,
.intro-band--textured .intro-band__copy {
  color: var(--dozen-dark);
}

/* Full-size art once the layout is desktop-wide; mobile ships 828w encodes. */
@media (min-width: 1024px) {
  .intro-band--textured {
    background-image: image-set(
      url("../../img/intro-testimonial-bg.avif") type("image/avif"),
      url("../../img/intro-testimonial-bg.webp") type("image/webp"),
      url("../../img/intro-testimonial-bg.jpg") type("image/jpeg")
    );
  }
}