/* ==========================================================================
   customer-stories-item.css — Case study detail template styles
   Depends on: tokens.css, global.css, components.css
   ========================================================================== */


/* ==========================================================================
   CASE STUDY HERO (.csi-hero)
   Dark bg with client logo overlay
   ========================================================================== */

.csi-hero {
  min-height: 50vh;
  min-height: 50svh;
  display: flex;
  align-items: center;
  padding-top: calc(var(--sp-20) + 80px);
  padding-bottom: var(--sp-16);
}

.csi-hero__inner {
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  width: 100%;
  text-align: center;
}

.csi-hero__logo {
  height: 56px;
  margin-bottom: var(--sp-6);
  filter: brightness(0) invert(1);
  opacity: 0.7;
}

.csi-hero__logo img {
  height: 100%;
  width: auto;
  object-fit: contain;
}

.csi-hero h1 {
  color: var(--color-white);
  margin-bottom: var(--sp-4);
  max-width: 20ch;
  margin-inline: auto;
}

.csi-hero__sub {
  font-size: var(--fs-lg);
  color: rgba(255, 255, 255, 0.75);
  max-width: 640px;
  margin-inline: auto;
}


/* ==========================================================================
   INFO PANEL (.csi-info)
   Horizontal row of pill badges
   ========================================================================== */

/* Section override — remove block padding (tight to hero) */
.csi-info-section {
  padding-block: 0;
}

.csi-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  padding-block: var(--sp-8);
  border-bottom: 1px solid var(--color-border);
}

.csi-info__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--radius-full);
  background-color: var(--color-surface-light);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text-heading);
}

.csi-info__pill-label {
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}


/* ==========================================================================
   KEY RESULT CALLOUT (.csi-result)
   ========================================================================== */

.csi-result {
  text-align: center;
  padding-block: var(--sp-16);
}

.csi-result__number {
  font-size: var(--fs-6xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  line-height: 1;
  margin-bottom: var(--sp-3);
}

@media (min-width: 768px) {
  .csi-result__number {
    font-size: var(--fs-7xl);
  }
}

.csi-result__desc {
  font-size: var(--fs-xl);
  color: var(--color-text-muted);
  max-width: 480px;
  margin-inline: auto;
}


/* ==========================================================================
   CONTENT SECTIONS (.csi-content)
   Prose width for readable body text
   ========================================================================== */

.csi-content {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.csi-content h2 {
  margin-bottom: var(--sp-4);
}

.csi-content h3 {
  margin-bottom: var(--sp-3);
  margin-top: var(--sp-8);
}

.csi-content p {
  color: var(--color-text-body);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-normal);
}

.csi-content p:last-child {
  margin-bottom: 0;
}

.csi-content__lead {
  font-size: var(--fs-lg);
  color: var(--color-purple-3);
  font-weight: var(--fw-semibold);
  margin-top: calc(-1 * var(--sp-2));
  margin-bottom: var(--sp-6);
  letter-spacing: var(--ls-normal);
}

.csi-content ul {
  list-style: none;
  padding: 0;
  margin-bottom: var(--sp-6);
}

.csi-content li {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-block: var(--sp-2);
  font-size: var(--fs-base);
  color: var(--color-text-body);
}

.csi-content li::before {
  content: '';
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-primary);
  margin-top: 0.55em;
}


/* ==========================================================================
   RESULTS GRID (.csi-results-grid)
   Stat blocks for outcomes
   ========================================================================== */

.csi-results-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-6);
  margin-bottom: var(--sp-6);
}

@media (min-width: 768px) {
  .csi-results-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.csi-results-grid__item {
  text-align: center;
  padding: var(--sp-6);
  border-radius: var(--radius-lg);
  background-color: var(--color-surface-light);
}

.csi-results-grid__number {
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extrabold);
  color: var(--color-primary);
  margin-bottom: var(--sp-2);
}

.csi-results-grid__label {
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
}


/* ==========================================================================
   HERO CTA ROW (.csi-hero__ctas)
   Used when hero carries primary + download buttons
   ========================================================================== */

.csi-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}


/* ==========================================================================
   STAT BAND (.csi-stat-band)
   Full-width band of large stats — purple-darkest with teal numbers.
   Mirrors the brochure visual treatment.

   Grid sized for the current 3-stat Defence story: 1-up on mobile,
   3-up at the desktop breakpoint (the previous 2-up mid-tier orphaned
   the third stat onto its own row). If a future story carries 4 or 5
   stats the grid below should be widened to match.
   ========================================================================== */

.csi-stat-band {
  background-color: var(--color-purple-5);
  padding-block: var(--sp-12);
  position: relative;
}

.csi-stat-band::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 6px;
  background-color: var(--color-teal-2);
}

.csi-stat-band__inner {
  max-width: var(--container-default);
  margin-inline: auto;
  padding-inline: var(--sp-6);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 720px) {
  .csi-stat-band__inner {
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
}

.csi-stat {
  text-align: center;
  padding: var(--sp-2) var(--sp-4);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

@media (min-width: 720px) {
  .csi-stat + .csi-stat::before {
    content: '';
    position: absolute;
    top: 10%;
    bottom: 10%;
    left: 0;
    width: 1px;
    background-color: rgba(255, 255, 255, 0.12);
  }
}

.csi-stat__num {
  display: block;
  font-size: var(--fs-4xl);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  color: var(--color-teal-1);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--sp-2);
}

@media (min-width: 1280px) {
  .csi-stat__num {
    font-size: var(--fs-5xl);
  }
}

.csi-stat__label {
  display: block;
  font-size: var(--fs-sm);
  color: rgba(255, 255, 255, 0.75);
  line-height: var(--lh-snug);
  max-width: 18ch;
}


/* ==========================================================================
   CALLOUT PANEL (.csi-callout)
   Used for "Building internal capability" and similar inline highlight blocks
   ========================================================================== */

.csi-callout {
  margin-top: var(--sp-8);
  padding: var(--sp-6);
  background-color: var(--color-surface-light);
  border-left: 4px solid var(--color-purple-3);
  border-radius: var(--radius-md);
}

.csi-callout h3 {
  margin-top: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--color-text-heading);
}

.csi-callout p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   CAPABILITIES DELIVERED (.csi-caps)
   2-column grid of capability cards, each with title + description
   ========================================================================== */

.csi-caps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  margin-top: var(--sp-8);
}

@media (min-width: 900px) {
  .csi-caps {
    grid-template-columns: 1fr 1fr;
  }

  /* Wide modifier — card spans both columns of the grid so it sits
     centred below the two cards above. Use for the third item when a
     story has an odd number of capability cards. */
  .csi-cap--wide {
    grid-column: 1 / -1;
  }
}

.csi-cap {
  padding: var(--sp-6);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  position: relative;
  padding-left: var(--sp-10);
}

.csi-cap::before {
  content: '';
  position: absolute;
  top: var(--sp-6);
  left: var(--sp-6);
  width: 12px;
  height: 12px;
  border-radius: var(--radius-full);
  background-color: var(--color-teal-2);
  margin-top: 0.4em;
}

.csi-cap h3 {
  margin-top: 0;
  margin-bottom: var(--sp-2);
  font-size: var(--fs-lg);
  color: var(--color-text-heading);
}

.csi-cap p {
  margin: 0;
  color: var(--color-text-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}


/* ==========================================================================
   OUTCOMES PANEL (.csi-outcome-panel)
   Dark band that closes the narrative — mirrors the brochure outcomes block.
   ========================================================================== */

.csi-outcome-panel {
  background-color: var(--color-purple-5);
  color: var(--color-white);
  padding-block: var(--sp-16);
  position: relative;
}

.csi-outcome-panel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 96px;
  height: 6px;
  background-color: var(--color-teal-2);
}

.csi-outcome-panel__inner {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.csi-outcome-panel .eyebrow {
  color: var(--color-teal-1);
  margin-bottom: var(--sp-3);
}

.csi-outcome-panel h2 {
  color: var(--color-white);
  margin-bottom: var(--sp-4);
}

.csi-outcome-panel p {
  color: rgba(255, 255, 255, 0.85);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  margin-bottom: var(--sp-4);
}

.csi-outcome-panel p:last-child {
  margin-bottom: 0;
}


/* ==========================================================================
   DOWNLOAD CTA CARD (.csi-download)
   Two-column layout — message + download button
   ========================================================================== */

.csi-download {
  max-width: var(--container-narrow);
  margin-inline: auto;
  padding: var(--sp-8);
  background-color: var(--color-surface-light);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-6);
  align-items: center;
}

@media (min-width: 768px) {
  .csi-download {
    grid-template-columns: 1fr auto;
    padding: var(--sp-10) var(--sp-12);
  }
}

.csi-download__copy h3 {
  margin: 0 0 var(--sp-2) 0;
  font-size: var(--fs-2xl);
  color: var(--color-text-heading);
}

.csi-download__copy p {
  margin: 0;
  color: var(--color-text-muted);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.csi-download__action {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  align-items: flex-start;
}

@media (min-width: 768px) {
  .csi-download__action {
    align-items: flex-end;
  }
}

.csi-download__meta {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.csi-download__icon {
  width: 18px;
  height: 18px;
  display: inline-block;
  vertical-align: -0.2em;
  margin-right: var(--sp-2);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* ==========================================================================
   RELATED CASES (.csi-related)
   ========================================================================== */

.csi-related__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-8);
}

@media (min-width: 768px) {
  .csi-related__grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}