/* Case study (Figma 307:3601). Mobile-first.
   Local tokens below use design values not yet in tokens.css; T16 can promote them. */
.s-case-study {
  --cs-bg: var(--amber-950);
  --cs-shade: #4a1e06;
  --cs-text: var(--text-negative);
  --cs-text-soft: var(--stone-100);
  --cs-line: rgb(255 255 255 / 0.18);
  --cs-photo: url("../../assets/img/case-study-office.jpg");

  padding-block: var(--section-y);
  padding-inline: var(--gutter);
}
.s-case-study__inner { max-width: 2000px; margin-inline: auto; }

.s-case-study__card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  gap: var(--space-10);
  padding: var(--space-10) var(--space-6);
  border-radius: var(--radius-lg);
  background: var(--cs-bg);
  color: var(--cs-text);
}

/* Photo + shade. Gradient fallback stands in for the photo until it is exported.
   .s-case-study__media carries the image reveal (motion.css owns its opacity/transform while revealing),
   so the photo's own 0.6 opacity and hover zoom live on the inner layer. */
.s-case-study__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.s-case-study__photo {
  position: absolute; inset: 0;
  background:
    var(--cs-photo) center / cover no-repeat,
    radial-gradient(60% 50% at 70% 30%, rgb(255 214 170 / 0.35), transparent 70%),
    radial-gradient(50% 60% at 85% 80%, rgb(120 60 20 / 0.6), transparent 70%),
    linear-gradient(160deg, #5a2a0e, #2a0f02);
  opacity: 0.6;
  transition: transform var(--dur-reveal-img) var(--ease-out);
}
.s-case-study__shade {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--cs-shade) 0%, rgb(74 30 6 / 0.55) 55%, rgb(74 30 6 / 0.85) 100%);
}

.s-case-study__content { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-10); }

.s-case-study__logo {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-heading); font-size: 1.25rem; font-weight: var(--fw-medium); letter-spacing: -0.04em;
}

.s-case-study__figure { display: flex; flex-direction: column; gap: var(--space-8); }
.s-case-study__quote p {
  font-family: var(--font-heading);
  font-weight: var(--fw-heading);
  font-size: var(--h4-size);
  line-height: var(--h4-lh);
  letter-spacing: var(--h4-ls);
  color: var(--cs-text);
}

.s-case-study__author { display: flex; align-items: center; gap: var(--space-6); }
.s-case-study__avatar { width: 48px; height: 48px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.s-case-study__person { display: flex; flex-direction: column; font-size: var(--body-md-size); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: var(--body-md-ls); color: var(--cs-text-soft); }
.s-case-study__role { opacity: 0.6; }

/* "Read full case study" uses .btn.btn--cta; hovering it pushes the story photo in a touch */
@media (hover: hover) {
  .s-case-study__card:has(.s-case-study__btn:hover) .s-case-study__photo { transform: scale(1.03); }
}

/* Metrics: 3 across on mobile, stacked column on desktop */
.s-case-study__metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); border-top: 1px solid var(--cs-line); padding-top: var(--space-6); }
.s-case-study__metric { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 5px; }
.s-case-study__metric dd {
  margin: 0;
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: 2rem; line-height: 1.1; letter-spacing: -0.02em;
  color: var(--cs-text);
  font-variant-numeric: tabular-nums;
}
.s-case-study__metric dt { font-size: var(--body-md-size); font-weight: var(--fw-medium); line-height: 1.2; letter-spacing: var(--body-md-ls); color: var(--cs-text-soft); }

@media (min-width: 640px) {
  .s-case-study__card { padding: var(--space-12) var(--space-10); }
  .s-case-study__metric dd { font-size: 2.75rem; }
}

@media (min-width: 1024px) {
  .s-case-study { padding-inline: var(--space-6); }
  .s-case-study__card {
    grid-template-columns: minmax(0, 595px) 1fr 296px;
    align-items: center;
    gap: var(--space-8);
    min-height: 719px;
    padding: var(--space-24) 0 var(--space-24) clamp(var(--space-16), 12.8vw, 184px);
  }
  /* Vertical rule at left (Figma: 532px tall, x=85) */
  .s-case-study__card::before {
    content: ""; position: absolute; left: clamp(var(--space-8), 5.9vw, 85px); top: 50%;
    height: 74%; width: 1px; transform: translateY(-50%);
    transform-origin: top;
    background: var(--cs-line);
    transition: transform var(--dur-reveal-img) var(--ease-out) 200ms;
  }
  /* The rule draws downward once the card scrolls in (js/sections/case-study.js adds .is-in) */
  .motion .s-case-study__card:not(.is-in)::before { transform: translateY(-50%) scaleY(0); }
  .s-case-study__media { inset: 0 77px; }
  .s-case-study__shade {
    right: auto; width: 73.4%;
    background: linear-gradient(90deg, var(--cs-shade), rgb(74 30 6 / 0));
    -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
    /* blur fades out toward the photo's sharp side */
    -webkit-mask-image: linear-gradient(90deg, #000 60%, transparent);
            mask-image: linear-gradient(90deg, #000 60%, transparent);
  }
  .s-case-study__content { gap: 100px; }
  .s-case-study__figure { gap: 50px; }
  .s-case-study__content > .s-case-study__logo { margin-bottom: -50px; }
  .s-case-study__metrics { grid-column: 3; grid-template-columns: 1fr; gap: 0; border-top: 0; padding-top: 0; }
  .s-case-study__metric { padding-block: var(--space-10); }
  .s-case-study__metric dd { font-size: 3.5rem; letter-spacing: -0.02em; }
}
@media (min-width: 1280px) {
  .s-case-study { padding-inline: 32px; }
}
@media (min-width: 1280px) { .s-case-study__card { padding-top: 70px; } .s-case-study__metrics { position: relative; top: 13px; } }

@media (prefers-reduced-motion: reduce) {
  .s-case-study__photo, .s-case-study__card::before { transition-duration: 0.01ms !important; }
  .s-case-study__card:has(.s-case-study__btn:hover) .s-case-study__photo { transform: none; }
}