/* ==========================================================================
   Case study page (single-case_study.php), 2026-10-19
   Builds on assets/css/project.css (hero, sections, quote, gallery, CTA);
   this file adds the layout grids and the pieces project.css lacks.
   ========================================================================== */

.mmp-case-study h2 {
  margin: 0 0 20px !important;
}

/* Same page grid as every other page (.mmp-container-wide): project.css
   uses 1280/1180px boxes with 40px side padding. */
.mmp-case-study .mmp-project-hero,
.mmp-case-study .mmp-project-section {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Hero: copy left, cover right */
.mmp-cs-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

.mmp-case-study .mmp-project-title {
  font-size: clamp(2.6rem, 5vw, 4.6rem) !important;
  line-height: var(--mmp-display-line-height) !important;
  letter-spacing: var(--mmp-display-tracking) !important;
}

.mmp-cs-cover {
  display: flex;
  justify-content: center;
}

.mmp-cs-cover img {
  width: auto !important;
  max-width: 100%;
  max-height: 520px;
  border-radius: 4px !important;
}

/* Story + At a glance */
.mmp-cs-story-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(260px, 1fr);
  gap: 60px;
  align-items: start;
}

.mmp-cs-story-grid--glance-only {
  grid-template-columns: minmax(0, 520px);
}

/* Prose keeps a readable measure, starting at the grid edge */
.mmp-cs-prose > * {
  max-width: 760px;
}

.mmp-cs-prose p:last-child {
  margin-bottom: 0;
}

.mmp-cs-glance dl {
  margin: 0;
}

.mmp-cs-glance dt {
  font-family: var(--mmp-font-body);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: var(--mmp-eyebrow-tracking);
  text-transform: uppercase;
  color: var(--mmp-page-muted);
  margin-top: 18px;
}

.mmp-cs-glance dd {
  margin: 6px 0 0;
  color: var(--mmp-page-ink);
}

.mmp-cs-partners {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mmp-cs-partners li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mmp-cs-partner-logo {
  width: 72px;
  height: 44px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* Quote */
.mmp-cs-quote-wrap .mmp-project-quote {
  max-width: 820px;
}

.mmp-project-quote {
  margin: 0;
}

/* Gallery */
.mmp-cs-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.mmp-cs-gallery-grid figure {
  margin: 0;
}

.mmp-cs-gallery-grid img {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
}

/* The books: store cards (books.css), up to three across; a card never
   grows past Books-page width, so one book doesn't stretch. */
.mmp-cs-books {
  background: var(--mmp-white);
}

.mmp-cs-books-grid ul.products {
  grid-template-columns: repeat(3, minmax(0, 360px)) !important;
}

/* CTA button (project.css styles block buttons; this one is a plain link) */
.mmp-cs-cta-buttons {
  display: flex;
}

.mmp-cs-btn {
  display: inline-block;
  padding: 14px 28px;
  background: var(--mmp-white);
  color: var(--mmp-page-ink) !important;
  font-family: var(--mmp-font-body);
  font-size: 0.85rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
}

.mmp-cs-btn:hover,
.mmp-cs-btn:focus-visible {
  background: var(--mmp-page-gold);
}

@media (max-width: 921px) {
  .mmp-cs-hero-grid,
  .mmp-cs-story-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .mmp-cs-cover img {
    max-height: 420px;
  }

  .mmp-cs-books-grid ul.products {
    grid-template-columns: repeat(2, minmax(0, 360px)) !important;
  }
}

@media (max-width: 560px) {
  .mmp-cs-gallery-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .mmp-cs-books-grid ul.products {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .mmp-case-study .mmp-project-title {
    font-size: 2.4rem !important;
  }
}

/* Section labels match the site kicker (2026-10-19). Dark bands keep gold
   through project.css's more specific rules. */
.mmp-project-kicker {
  font-size: 0.78rem;
  letter-spacing: var(--mmp-eyebrow-tracking);
  line-height: var(--mmp-eyebrow-line-height);
  color: var(--brand-accent);
}