/* ==========================================================================
   Brainstorm Africa — case.css
   Page-specific styles for case study detail pages.
   Loaded after css/styles.css: reuses --blue, --lime, --black, --charcoal,
   --offwhite, --body-on-light, --muted, --white, --nav-height,
   --section-pad-y, --section-pad-x, --max-width, .section-inner, .eyebrow,
   .btn, .btn-primary, .fade-rise, .word-lime, and the .contact-* form
   classes already styled in styles.css.

   Design language: full-bleed editorial imagery with text-only "breaks"
   between images. Square edges everywhere, no border radius, no gradients,
   no drop shadows.
   ========================================================================== */

/* ---------------------------------------------------------------------- */
/* 1. CASE HERO */
/* ---------------------------------------------------------------------- */
.cs-hero {
  background: var(--black);
  padding-top: calc(var(--nav-height) + clamp(32px, 6vw, 64px));
  padding-bottom: clamp(48px, 8vw, 96px);
}
.cs-hero-inner {
  padding-top: 0;
  padding-bottom: 0;
}
.cs-hero-tag {
  color: var(--blue);
}
.cs-hero-title {
  color: var(--white);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 6.5rem);
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0 0 20px 0;
}
.cs-hero-sub {
  color: var(--offwhite);
  font-weight: 300;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  line-height: 1.5;
  max-width: 44rem;
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* 2. META STRIP */
/* ---------------------------------------------------------------------- */
.cs-meta {
  background: var(--offwhite);
}
.cs-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(28px, 4vw, 48px);
}
.cs-meta-value {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--body-on-light);
  margin: 0;
}
.cs-meta-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cs-meta-list li {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.4;
  color: var(--body-on-light);
}

/* ---------------------------------------------------------------------- */
/* 3. FULL-BLEED IMAGE BANDS */
/* ---------------------------------------------------------------------- */
.cs-bleed {
  background: var(--black);
  overflow: hidden;
}
.cs-bleed-img {
  /* .cs-bleed sections are direct children of <main> and already span the
     full page width; no viewport-centering margin/transform here, a
     transform would be overridden by .fade-rise's own transform */
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}

/* Contained variant: smaller / lower-res images sit centered with padding
   on a section background, instead of running edge to edge. */
.cs-bleed--contained {
  background: var(--offwhite);
}
.cs-bleed--contained .cs-bleed-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--section-pad-x);
}
.cs-bleed--contained .cs-bleed-img {
  width: 100%;
  max-width: 1100px;
}

/* ---------------------------------------------------------------------- */
/* 4. TEXT BREAKS (rhythm between image bands) */
/* ---------------------------------------------------------------------- */
.cs-break {
  background: var(--offwhite);
}
.cs-break--dark {
  background: var(--charcoal);
}
.cs-break-inner {
  max-width: 62ch;
  margin: 0 auto;
  padding: clamp(64px, 10vw, 140px) var(--section-pad-x);
}
.cs-break-heading {
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 2.8rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 20px 0;
  color: var(--body-on-light);
}
.cs-break--dark .cs-break-heading {
  color: var(--white);
}
.cs-break-body {
  font-weight: 300;
  font-size: clamp(17px, 1.2vw, 18px);
  line-height: 1.6;
  margin: 0;
  color: var(--body-on-light);
}
.cs-break--dark .cs-break-body {
  color: var(--offwhite);
}

/* ---------------------------------------------------------------------- */
/* 5. STAT CALLOUT (black, lime accent) */
/* ---------------------------------------------------------------------- */
.cs-callout {
  background: var(--black);
  border-top: 1px solid #222;
}
.cs-callout-inner {
  text-align: center;
}
.cs-callout-number {
  font-weight: 700;
  font-size: clamp(4rem, 10vw, 8rem);
  line-height: 1;
  color: var(--lime);
  margin: 0 0 16px 0;
}
.cs-callout-label {
  color: var(--muted);
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* 6. QUOTE BLOCK */
/* ---------------------------------------------------------------------- */
.cs-quote {
  background: var(--offwhite);
}
.cs-quote-inner {
  max-width: 46rem;
}
.cs-quote-text {
  font-weight: 700;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
  line-height: 1.35;
  color: var(--body-on-light);
  margin: 0 0 28px 0;
}
.cs-quote-mark {
  color: var(--blue);
}
.cs-quote-name {
  font-weight: 700;
  font-size: 18px;
  color: var(--body-on-light);
  margin: 0 0 4px 0;
}
.cs-quote-role {
  margin: 0;
}

/* ---------------------------------------------------------------------- */
/* 7. NEXT PROJECT STRIP */
/* ---------------------------------------------------------------------- */
.cs-next {
  background: var(--black);
  border-top: 1px solid #222;
}
.cs-next-link {
  display: inline-block;
  color: var(--white);
  font-weight: 700;
  font-size: clamp(2rem, 6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  transition: color 0.2s ease;
}
.cs-next-link:hover {
  color: var(--blue);
}

/* ---------------------------------------------------------------------- */
/* 8. CONTACT SECTION (reuses .contact-heading / .contact-line /
      .contact-form / .form-row / .contact-submit / .contact-confirmation
      from styles.css, all of which are already self-contained) */
/* ---------------------------------------------------------------------- */
.cs-contact {
  background: var(--black);
  border-top: 1px solid #222;
}

/* ---------------------------------------------------------------------- */
/* Responsive */
/* ---------------------------------------------------------------------- */
@media (max-width: 900px) {
  .cs-meta-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 700px) {
  .cs-meta-grid { grid-template-columns: 1fr; }
  .cs-break-inner { padding-left: var(--section-pad-x); padding-right: var(--section-pad-x); }
}

@media (max-width: 480px) {
  .cs-hero-title { font-size: clamp(2.4rem, 11vw, 3rem); }
}

/* ---------------------------------------------------------------------- */
/* Reduced motion */
/* ---------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cs-next-link {
    transition-duration: 0.001ms !important;
  }
}

/* ---------------------------------------------------------------------- */
/* ADDED for Pay Up / Baig Security / Plano / Drivisa case pages (2026-07):
   Dark contained variant, for transparent PNG product shots that need to
   sit on a charcoal background instead of the offwhite contained variant. */
/* ---------------------------------------------------------------------- */
.cs-bleed--contained-dark {
  background: var(--charcoal);
}
.cs-bleed--contained-dark .cs-bleed-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: clamp(48px, 7vw, 96px) var(--section-pad-x);
}
.cs-bleed--contained-dark .cs-bleed-img {
  width: 100%;
  max-width: 1100px;
}

/* ---------------------------------------------------------------------- */
/* ADDED: two-image side-by-side layout for contained image bands
   (used on the Pay Up case page for the two app screens). Two columns,
   12px gap, stacks under 720px. */
/* ---------------------------------------------------------------------- */
.cs-duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.cs-duo .cs-bleed-img {
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  transform: none;
}
@media (max-width: 720px) {
  .cs-duo {
    grid-template-columns: 1fr;
  }
}