/* Case study detail hero. Figma frame "case studies" (05 Case Studies
   Detail), 1440x758, pad 40/100/40/100. The 40px top pad and 78px nav row
   are already reproduced by site-header's own padding-top/row height
   (see site.css), so this section only owns the 10px gap below the nav
   and the slide itself; the slide anatomy matches the home page's
   case-studies carousel (same client instance, Integrity Music) but is
   rebuilt fresh here since there's no carousel behavior on this page and
   the type scale is larger (56/39.6 vs the carousel's 48/32).

   The CTA link under the copy exists in the layer tree but is marked
   hidden in Figma (visible:false) — this is the detail page itself, so a
   "Learn More" pointing at itself would be redundant; omitted here. */

.cs-hero {
  position: relative;
  background-color: var(--pure-white);
  background-image: radial-gradient(
    75% 85% at 47% 82%,
    #aaa0e6 0%,
    #d1cded 45%,
    #f3f3ee 85%
  );
}

.cs-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../img/hero-texture.jpg");
  background-image: image-set(
    url("../../img/hero-texture-m.avif") type("image/avif"),
    url("../../img/hero-texture-m.webp") type("image/webp"),
    url("../../img/hero-texture.jpg") type("image/jpeg")
  );
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
}

@media (min-width: 1024px) {
  .cs-hero::before {
    background-image: image-set(
      url("../../img/hero-texture.avif") type("image/avif"),
      url("../../img/hero-texture.webp") type("image/webp"),
      url("../../img/hero-texture.jpg") type("image/jpeg")
    );
  }
}

/* The texture layer is absolutely positioned, which by default paints
   above static in-flow content within the same stacking context. Both the
   injected header and the slide section need their own stacking context
   to sit above it. */
.cs-hero .site-header,
.cs-hero__hero {
  position: relative;
}

.cs-hero__hero {
  padding-inline: var(--container-padding);
  padding-block: var(--space-20) var(--container-padding);
}

.cs-hero__slide {
  display: flex;
  flex-direction: column;
  gap: clamp(0.625rem, 1.4921rem - 0.9634vw, 1.25rem);
  max-width: 1240px;
  margin-inline: auto;
}

.cs-hero__media {
  order: -1;
  width: 100%;
}

.cs-hero__media picture {
  display: block;
  width: 100%;
}

/* Square canvas, cutout + overflow accents in the alpha; renders at the
   box's tall side, centered — never object-fit (cover crops the accents). */
.cs-hero__photo {
  display: block;
  width: 112.112%; /* 361/322 */
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: -6.056%;
}

.cs-hero__content {
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: left;
}

.cs-hero__logo {
  display: block;
  height: auto;
  margin-bottom: clamp(1.25rem, 0.6933rem + 2.2158vw, 2.6875rem);
}

.cs-hero__text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.4436rem - 0.7707vw, 1.25rem);
}

.cs-hero__headline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  color: var(--dozen-dark);
  font-size: clamp(2.25rem, 1.7659rem + 1.9268vw, 3.5rem);
  line-height: clamp(2.7rem, 2.3902rem + 1.2331vw, 3.5rem);
}

.cs-hero__subline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: italic;
  color: var(--dozen-blue);
  font-size: clamp(1.5rem, 1.1225rem + 1.5026vw, 2.4748rem);
  line-height: clamp(1.8rem, 1.5386rem + 1.0402vw, 2.4748rem);
}

@media (min-width: 1024px) {
  .cs-hero__hero {
    padding-inline: var(--space-100);
    padding-block: 10px var(--space-40);
  }

  .cs-hero__slide {
    flex-direction: row;
    align-items: center;
  }

  /* Columns hold the board's 722/508 split proportionally so the row can
     compress below 1440 instead of forcing horizontal overflow; at the
     1240px slide max they resolve to exactly 722px and 508px. */
  .cs-hero__media {
    order: 1;
    min-width: 0;
    flex: 508 1 0;
  }

  .cs-hero__photo {
    width: 116.142%; /* 590/508 */
    margin-inline: -8.071%;
  }

  .cs-hero__content {
    order: 0;
    min-width: 0;
    flex: 722 1 0;
  }

  .cs-hero__headline,
  .cs-hero__subline {
    letter-spacing: -0.035em;
  }
}