/*
  Cases page — scoped to `.cases-*`, loaded only on /keysy/ and /en/cases/
  via pages/case_studies.py head_extra. Premium B2B layout using the site's
  own tokens and real existing project images. No global stylesheet affected.
*/

/* ---- Hero: text + collage of real industry photos ---- */
.cases-hero {
  padding-block: var(--space-md) var(--space-xl);
}

.cases-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 64px;
  align-items: center;
}

.cases-hero__content {
  min-width: 0;
}

.cases-hero__title {
  margin: var(--space-xs) 0 var(--space-md);
  font-size: clamp(2.25rem, 2.4vw + 1rem, 3.25rem);
  line-height: 1.08;
  overflow-wrap: normal;
  word-break: normal;
}

.cases-hero__lede {
  max-width: 36rem;
  margin: 0 0 var(--space-lg);
  font-size: var(--text-md);
  line-height: var(--leading-normal);
  color: var(--graphite-900);
}

.cases-hero__collage {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
  min-width: 0;
}

.cases-hero__tile {
  display: block;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: var(--hairline) solid var(--border-hairline);
  box-shadow: var(--shadow-sm);
}

.cases-hero__tile img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--warm-white-50);
}

/* ---- What tasks we handle ---- */
.cases-tasks {
  padding-block: var(--space-xl);
}

.cases-tasks__head {
  max-width: 46rem;
  margin-bottom: var(--space-lg);
}

.cases-tasks__title {
  margin: var(--space-2xs) 0 var(--space-sm);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: var(--leading-snug);
}

.cases-tasks__intro {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphite-900);
}

.cases-tasks__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
}

.cases-task {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xs);
  padding: var(--space-md);
  background: var(--surface-card);
  border: var(--hairline) solid var(--metal-300);
  border-radius: var(--radius-md);
  border-top: 2px solid var(--brand-accent);
}

.cases-task__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--graphite-950);
}

.cases-task__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--graphite-900);
}

/* ---- How a request is handled ---- */
.cases-process {
  padding-block: 0 var(--space-xl);
}

.cases-process__title {
  margin: var(--space-2xs) 0 var(--space-lg);
  font-size: clamp(1.75rem, 1.3rem + 1.4vw, 2.25rem);
  line-height: var(--leading-snug);
}

.cases-process__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-lg);
}

.cases-step {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--metal-300);
}

.cases-step__num {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  color: var(--brand-accent);
}

.cases-step__title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.0625rem;
  color: var(--graphite-950);
}

.cases-step__body {
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--graphite-900);
}

/* ---- Transparency / confidentiality note (confident, not apologetic) ---- */
.cases-note {
  padding-block: 0 var(--space-xl);
}

.cases-note__box {
  max-width: 60rem;
  padding: var(--space-lg) var(--space-xl);
  background: rgba(47, 111, 94, 0.06);
  border: var(--hairline) solid var(--border-hairline);
  border-left: 3px solid var(--brand-accent);
  border-radius: var(--radius-md);
}

.cases-note__title {
  margin: var(--space-2xs) 0 var(--space-2xs);
  font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem);
  line-height: var(--leading-snug);
}

.cases-note__body {
  margin: 0;
  max-width: 48rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--graphite-900);
}

/* ---- Final CTA band ---- */
.cases-cta {
  padding-block: 0 var(--space-2xl);
}

.cases-cta__box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  flex-wrap: wrap;
  padding: var(--space-xl);
  background: rgba(47, 111, 94, 0.06);
  border: var(--hairline) solid var(--border-hairline);
  border-radius: var(--radius-lg);
}

.cases-cta__text {
  flex: 1 1 320px;
  min-width: 0;
}

.cases-cta .eyebrow {
  color: var(--brand-accent);
}

.cases-cta__title {
  margin: var(--space-2xs) 0 var(--space-2xs);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
  line-height: var(--leading-snug);
}

.cases-cta__body {
  margin: 0;
  max-width: 42rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--graphite-700);
}

.cases-cta__actions {
  flex: 0 0 auto;
}

/* ---- Tablet ---- */
@media (max-width: 1023px) {
  .cases-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .cases-hero__lede {
    max-width: none;
  }
  .cases-hero__collage {
    max-width: 560px;
  }
  .cases-tasks__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cases-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---- Mobile ---- */
@media (max-width: 767px) {
  .cases-hero {
    padding-block: var(--space-sm) var(--space-lg);
  }
  .cases-hero__title {
    font-size: clamp(2rem, 8vw, 2.5rem);
  }
  .cases-hero .cta-row,
  .cases-cta__actions {
    flex-wrap: wrap;
    gap: var(--space-2xs) var(--space-sm);
  }
  .cases-hero .cta-row .btn,
  .cases-cta__actions .btn {
    flex: 1 1 auto;
    min-height: 44px;
    justify-content: center;
  }
  .cases-tasks__grid,
  .cases-process__grid {
    grid-template-columns: 1fr;
  }
  .cases-cta__box {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--space-lg);
  }
}