/* Slide content only for the case studies carousel. Show/hide, crossfade and
   data-carousel wiring live in carousel.css; this file owns everything
   inside a single .case-studies__slide.

   Fluid values below interpolate exactly between the two designed boards
   (402 mobile / 1440 desktop) using the same clamp() derivation as
   tokens.css; each was solved so the formula lands on the precise Figma
   px value at both 402 and 1440. */

.case-studies__slide {
  position: relative;
  width: 100%;
  padding: var(--container-padding);
  background-color: var(--off-white);
}

/* Paper-grain texture (shared asset with the hero section) layered over
   each slide's gradient. The gradient stops below carry the purple tint
   sampled from the Figma render; the texture contributes grain only. */
.case-studies__slide::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../../img/hero-texture.jpg");
  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")
  );
  background-size: cover;
  background-position: center;
  mix-blend-mode: multiply;
  opacity: 0.3;
  pointer-events: none;
}

.case-studies__slide--integrity {
  background-image: radial-gradient(
    75% 85% at 47% 82%,
    #aaa0e6 0%,
    #d1cded 45%,
    #f3f3ee 85%
  );
}

.case-studies__slide--hca {
  background-image: linear-gradient(
    115deg,
    #d8d6ec 0%,
    #cbc4ed 55%,
    #b1a6ea 100%
  );
}

.case-studies__slide--elephant-sanctuary {
  background-image: radial-gradient(
    70% 80% at 48% 12%,
    #b0a5e9 0%,
    #d4d1ed 45%,
    #f8f8f5 85%
  );
}

.case-studies__slide--closing-times {
  background-image: linear-gradient(
    115deg,
    #d8d6ec 0%,
    #cbc4ed 55%,
    #b1a6ea 100%
  );
}

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

/* Mobile stacking order is photo, logo, headline, subline, cta — the
   photo sits first in the DOM so it reads correctly with no JS/CSS
   dependency; desktop restores the side-by-side order below. */
.case-studies__media {
  order: -1;
  width: 100%;
}

.case-studies__media picture {
  display: block;
  width: 100%;
}

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

.case-studies__logo {
  display: block;
  height: auto;
  margin-bottom: clamp(1.25rem, 0.6207rem + 2.5048vw, 2.875rem);
}

.case-studies__text {
  display: flex;
  flex-direction: column;
  gap: clamp(0.75rem, 1.4436rem - 0.7707vw, 1.25rem);
  margin-bottom: clamp(1.25rem, 0.6449rem + 2.4085vw, 2.8125rem);
}

.case-studies__headline {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-style: normal;
  color: var(--dozen-dark);
  font-size: clamp(2.25rem, 1.9595rem + 1.1561vw, 3rem);
  line-height: 1.2;
}

.case-studies__slide--hca .case-studies__headline {
  font-size: clamp(2.25rem, 1.7659rem + 1.9268vw, 3.5rem);
  line-height: clamp(2.7rem, 2.3902rem + 1.2331vw, 3.5rem);
}

.case-studies__slide--elephant-sanctuary .case-studies__headline {
  font-size: clamp(2.25rem, 1.593rem + 2.615vw, 3.9465rem);
  line-height: clamp(2.7rem, 2.2173rem + 1.9213vw, 3.9465rem);
}

.case-studies__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.1127rem + 1.5414vw, 2.5rem);
  line-height: clamp(1.8rem, 1.1356rem + 2.6445vw, 3.5156rem);
}

.case-studies__slide--hca .case-studies__subline,
.case-studies__slide--elephant-sanctuary .case-studies__subline {
  font-size: clamp(1.5rem, 1.1225rem + 1.5026vw, 2.4748rem);
  line-height: clamp(1.8rem, 1.5386rem + 1.0402vw, 2.4748rem);
}

.case-studies__link {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: var(--space-20) var(--space-40);
  border: 2px solid var(--dozen-blue);
  border-radius: 999px;
  background-color: rgba(243, 244, 244, 0.6);
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: clamp(1rem, 0.9032rem + 0.3854vw, 1.25rem);
  line-height: clamp(1.25rem, 1.4581rem - 0.2312vw, 1.4rem);
  letter-spacing: -0.035em;
  color: var(--dozen-blue);
  text-decoration: none;
  text-align: center;
  transition:
    background-color 0.2s ease,
    color 0.2s ease,
    transform 0.2s ease;
}

.case-studies__link:hover,
.case-studies__link:focus-visible {
  background-color: var(--dozen-blue);
  color: var(--pure-white);
  transform: translateY(-1px);
}

/* The D-cutout shape AND its overflow accents (trunk, tusks, raised arms)
   are baked into the shipped photo's alpha. The canvas is square and
   renders at the layout box's tall side, centered — Figma "cover"
   semantics WITHOUT clipping, so the accents overhang both sides of the
   box. Never object-fit this image: cover crops the overhang flat. */
.case-studies__photo {
  display: block;
  width: 112.112%; /* 361/322 — square canvas at the mobile box's tall side */
  max-width: none;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-inline: -6.056%;
}

@media (min-width: 1024px) {
  .case-studies__slide {
    padding: var(--space-100);
  }

  .case-studies__inner {
    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 inner max they resolve to exactly 722px and 508px. */
  .case-studies__media {
    order: 1;
    min-width: 0;
    flex: 508 1 0;
  }

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

  .case-studies__content {
    order: 0;
    min-width: 0;
    flex: 722 1 0;
  }

  .case-studies__slide--hca .case-studies__headline,
  .case-studies__slide--elephant-sanctuary .case-studies__headline {
    letter-spacing: -0.035em;
  }

  .case-studies__slide--hca .case-studies__subline,
  .case-studies__slide--elephant-sanctuary .case-studies__subline {
    letter-spacing: -0.035em;
  }

  .case-studies__link {
    align-self: flex-start;
    display: inline-flex;
    width: auto;
  }
}