/**
 * Case Study single page
 *
 * Layers on top of the blog-detail-hero styles the component reuses, then
 * styles the sections unique to a case study: the hero's headline-metrics
 * band, the detail section (body copy beside the overview card), and the
 * related-case-studies band that closes the page.
 *
 * The rich-text body itself is styled globally by legal-details.css via
 * .rich-text-data, so no headings/paragraphs rules live here.
 */

/* ======================
   Hero
====================== */

.case-study-hero {
  background-image: url(../images/case-study-hero-bg.png);
}

.case-study-hero.has-metrics .blog-detail-hero-inner {
  padding-bottom: 80px;
  @media (max-width: 1179px) {
    padding-bottom: 60px;
  }
  @media (max-width: 767px) {
    padding-bottom: 40px;
  }
}

.case-study-hero-metrics {
  position: relative;
  z-index: 1;
  display: flex;
  padding-bottom: 100px;
  @media (max-width: 1179px) {
    padding-bottom: 80px;
  }
  @media (max-width: 767px) {
    flex-direction: column;
    gap: 24px;
    padding-bottom: 60px;
  }
}

.case-study-hero-metric {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-inline: 40px;
  @media (max-width: 1179px) {
    padding-inline: 32px;
  }
  @media (max-width: 767px) {
    padding-inline: 0;
  }
}

.case-study-hero-metric:first-child {
  padding-inline-start: 0;
}

.case-study-hero-metric:last-child {
  padding-inline-end: 0;
}

.case-study-hero-metric + .case-study-hero-metric {
  border-left: 1px solid var(--graphite);
  @media (max-width: 767px) {
    border-left: 0;
    border-top: 1px solid var(--graphite);
    padding-top: 24px;
  }
}

.case-study-hero-metric-value {
  font: var(--heading-h3);
  color: var(--light-silver);
  letter-spacing: var(--letter-spacing-m1-5);
}

.case-study-hero-metric-description {
  margin: 0;
  font: var(--body-b2);
  color: var(--snow);
}

/* ======================
   Detail: body + overview card
====================== */

.case-study-detail {
  padding: 100px 0 50px;
  background-color: var(--white);
  position: relative;
  @media (max-width: 1179px) {
    padding: 80px 0 40px;
  }
  @media (max-width: 767px) {
    padding: 60px 0 30px;
  }
}

/* Copy takes the room it needs; the card keeps a fixed column beside it.
   Columns are left to stretch — an `align-items: start` here would shrink the
   aside to the card's own height, leaving the sticky card nothing to travel
   along. */
.case-study-detail-inner {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 60px;
  @media (max-width: 1179px) {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  @media (max-width: 767px) {
    gap: 32px;
  }
}

/* No card to sit beside, so the copy spans the section. */
.case-study-detail.is-full .case-study-detail-inner {
  grid-template-columns: minmax(0, 1fr);
}

.case-study-detail-body {
  min-width: 0;
}

/* Full height so the card has the whole copy column to stick along. Stacked,
   the overview reads first — it frames the copy that follows, the way the
   full-width strip above the body used to. */
.case-study-detail-aside {
  height: 100%;
  @media (max-width: 1179px) {
    height: auto;
    order: -1;
  }
}

/* Held below the sticky header while the copy scrolls past. */
.case-study-detail-card {
  position: sticky;
  top: calc(var(--header-height, 80px) + 15px);
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: var(--radius-12);
  background-color: var(--pearl);
  @media (max-width: 1179px) {
    position: static;
  }
}

/* Hairline between fields, so the markup stays free of separators. */
.case-study-detail-item + .case-study-detail-item {
  padding-top: 16px;
  border-top: 1px solid var(--stone);
}

.case-study-detail-label {
  display: block;
  margin-bottom: 12px;
  font: var(--tag);
  color: var(--graphite);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-2);
}

.case-study-detail-value {
  margin: 0;
  font: var(--body-b1);
  color: var(--dark);
}

/* A field with several values (e.g. two IFS products) spaces them apart; one
   that wraps to a second line is a single value, so it keeps its line-height. */
.case-study-detail-value + .case-study-detail-value {
  margin-top: 8px;
}

.result-item-wrapper {
  margin-top: 16px;
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(198px, 1fr));
  gap: 16px;
}

.result-item {
  border-radius: var(--radius-12);
  background-color: var(--pearl);
  padding: 20px !important;
  height: 100%;
}

.result-item h4 {
  margin: 0;
  font: var(--heading-h4);
  color: var(--dark);
  letter-spacing: var(--letter-spacing-m1);
  margin-bottom: 8px;
}

.result-item p {
  margin: 0;
  font: var(--body-b3);
  color: var(--graphite);
}

.case-study-detail-body blockquote {
  margin: 0;
  padding: 32px;
  background-color: var(--pearl);
  border-radius: var(--radius-12);
  font-style: normal;
  color: var(--dark);
  margin-top: 48px;
  @media (max-width: 1179px) {
    margin-top: 32px;
    padding: 28px;
  }
  @media (max-width: 767px) {
    margin-top: 24px;
    padding: 24px;
  }
}

.case-study-detail-body blockquote p {
  font-style: normal;
  font: var(--heading-h6);
  letter-spacing: var(--letter-spacing-m0-5);
}

.case-study-detail-body blockquote {
  &::before {
    width: 0;
    background-color: transparent;
  }
}

.case-study-detail-body blockquote p:first-of-type::before {
  content: '"';
}

.case-study-detail-body blockquote p:last-of-type::after {
  content: '"';
}

/* ======================
   Related case studies
====================== */

/* Two large cards side-by-side, same shape as customer-stories-feature. The
   underlying .story-card already carries its own styling from
   customer-stories.css — this section only positions the pair. */
.case-study-related {
  padding: 50px 0 100px;
  background-color: var(--white);
  @media (max-width: 1179px) {
    padding: 40px 0 80px;
  }
  @media (max-width: 767px) {
    padding: 30px 0 60px;
  }
}

.case-study-related-grid {
  grid-template-columns: repeat(auto-fill, minmax(308px, 1fr));
  @media (max-width: 1024x) {
    grid-template-columns: 1fr 1fr;
  }
  @media (max-width: 767px) {
    grid-template-columns: 1fr;
  }
}