/* ==========================================================================
   Case study pages
   ========================================================================== */

.figure img:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* Breadcrumb header (replaces .site-header on case study pages) */

.breadcrumb-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: linear-gradient(
    to bottom,
    var(--color-background) 0%,
    var(--color-background) 75%,
    rgba(255, 255, 255, 0) 100%
  );
  padding-block: 1.75rem;
}

.breadcrumb-header .wrap {
  position: relative;
  display: flex;
  align-items: center;
}

.breadcrumb {
  font-size: 1.75rem;
  font-weight: 500;
  padding-right: 3.5rem; /* keep text clear of the absolutely positioned toggle */
}

.toc-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  /* 0.5rem accounts for the gap between the 3rem button and the 2rem icon,
     so the visible icon (not the invisible button box) sits flush with
     the wrap's content edge, matching the breadcrumb text on the left. */
  right: calc(var(--gutter) - 0.5rem);
  transform: translateY(-50%);
  width: 3rem;
  height: 3rem;
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  transition: color 0.2s var(--ease);
}

.toc-toggle:hover,
.toc-toggle:focus-visible {
  color: #666666;
}

.toc-toggle svg {
  width: 2rem;
  height: 2rem;
}

/* Table of contents overlay panel */

.toc-panel {
  position: fixed;
  inset: 0;
  z-index: 60;
  background-color: rgba(255, 255, 255, 0.98);
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
  overflow-y: auto;
  padding-block: 1.75rem 3rem;
}

.toc-panel.is-open {
  transform: translateX(0);
}

.toc-panel__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.toc-close {
  width: 3rem;
  height: 3rem;
  margin-bottom: 2rem;
  /* Same 0.5rem correction as .toc-toggle, applied via margin since this
     button sits in normal flow (flex align-items: flex-end) rather than
     being absolutely positioned. */
  margin-right: -0.5rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--color-primary);
  transition: color 0.2s var(--ease);
}

.toc-close:hover,
.toc-close:focus-visible {
  color: #666666;
}

.toc-close svg {
  width: 2.2rem;
  height: 2.2rem;
}

.toc-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1.5rem;
  text-align: right;
}

.toc-list a {
  font-size: 1.5rem;
  font-weight: 500;
  text-decoration: none;
}

.toc-list a:hover {
  text-decoration: underline;
}

.toc-back {
  width: 100%;
  padding-bottom: 1rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-rule);
}

body.toc-open {
  overflow: hidden;
}

/* Prevent background scroll while an image is enlarged in the lightbox.
   :has() has broad current support (Chrome/Edge/Safari, and Firefox 121+),
   but I am not 100% certain of your target browser matrix, so it may be
   worth verifying against caniuse.com/css-has before relying on this alone. */
body:has(.lightbox.is-active),
body:has(.article-modal.is-active) {
  overflow: hidden;
}

/* Case study hero */

.case-hero {
  padding-block: 4.5rem;
  text-align: center;
}

.case-hero h1 {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.15;
}

.case-hero .meta {
  font-size: 1rem;
  font-weight: 500;
  margin-top: 2rem;
  color: var(--color-text);
}

/* Section rhythm */

.section {
  padding-block: 3.5rem;
}

.section h2 {
  font-size: 2.5rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.25rem;
}

.section-intro {
  font-size: 1.45rem;
  font-weight: 500;
  text-align: center;
  max-width: 45rem; /* matches .hero__wrap */
  margin-inline: auto;
  margin-bottom: 5rem;
  line-height: 1.5;
}

.section h3 {
  font-size: 1.45rem;
  font-weight: 700;
  margin-top: 2.5rem;
  margin-bottom: 0.85rem;
}

.section h4 {
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.body-copy {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.65;
  margin-bottom: 1.25rem;
}

.body-list {
  list-style: disc;
  padding-left: 1.25rem;
  margin-bottom: 1.25rem;
}

.body-list li {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

/* Figures */

.figure {
  margin-block: 1.75rem;
  margin-inline: 0;
}

.figure img {
  width: 100%;
  display: block;
  box-shadow: var(--shadow-image);
  border-radius: var(--radius);
}

/* Zoom cursor only applies once script.js has actually wired the image
   up to be clickable/keyboard-operable. Without this guard, the cursor
   implies interactivity that silently does nothing if JS fails to load. */
.figure img.is-zoomable {
  cursor: zoom-in;
}

/* Table/report screenshots keep square corners */
.figure.figure--table img {
  border-radius: 0;
}

.figure figcaption {
  font-size: 1rem;
  font-weight: 500;
  text-align: center;
  margin-top: 0.85rem;
  color: var(--color-text);
}

/* Text column paired with a figure. Mobile keeps plain document order
   (text block, then the figure below it); desktop switches to a
   two-column grid with the figure centered in the second column. */

.split-row {
  margin-bottom: 1.75rem;
}

@media (min-width: 768px) {
  .split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 3rem;
    align-items: start;
  }

  .split-row__text .body-copy:last-child {
    margin-bottom: 0;
  }

  .split-row__media {
    margin-block: 0;
    justify-self: center;
    align-self: center;
  }
}

.figure-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
  margin-block: 1.75rem;
}

.figure-pair .figure {
  margin-block: 0;
}

@media (min-width: 640px) {
  .figure-pair {
    grid-template-columns: 1fr 1fr;
  }
}

/* Image gallery: a card-styled frame holding a grid of screenshots.
   The box-shadow and rounded corners live on the frame, not the
   individual images, which sit flush with square corners inside it. */

.image-gallery {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  background-color: var(--color-secondary);
  border-radius: var(--radius);
  box-shadow: var(--shadow-image);
  padding: 1.25rem;
}

.image-gallery img {
  box-shadow: none;
  border-radius: var(--radius);
}

/* Simple stacked images with a gap, no card frame */

.image-stack {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.image-stack img {
  margin: 0;
}

@media (min-width: 640px) {
  .image-gallery {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding: 1.5rem;
  }

  .image-gallery--pair {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Cards */

.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.25rem;
  margin-block: 1.75rem;
}

@media (min-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.card {
  background-color: var(--color-secondary);
  border: 1px solid #CCCCCC;
  border-radius: var(--radius);
  padding: 1.5rem;
}

.card h4 {
  margin-bottom: 0.6rem;
}

.card p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
}

.excerpt-card {
  background-color: var(--color-secondary);
  border: 1px solid #CCCCCC;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 5vw, 3rem);
}

/* Phase rows (90-Day Roadmap) — mirrors the footer's label/content pattern */

.phase {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 2.5rem;
}

.phase:last-child {
  /* Without this, the phase's own bottom margin stacks with the
     section's bottom padding, doubling the gap before the hr. */
  margin-bottom: 0;
}

.phase h3 {
  margin: 0;
}

.phase-days {
  display: block;
  font-weight: 500;
}

@media (min-width: 640px) {
  .phase {
    flex-direction: row;
    gap: 2.5rem;
  }

  .phase h3 {
    width: 30%;
    flex: 0 0 30%;
  }

  .phase-content {
    flex: 1 1 auto;
  }
}

/* Content brief rows (Content Brief & Excerpt) — same label/content pattern
   as .phase, but with a smaller row gap and its own class so the SEO Audit
   Phase section's .phase rules stay untouched. */

.brief-item {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-block: 1.25rem;
}

.brief-item:last-child {
  margin-bottom: 0;
}

.brief-item h4 {
  margin: 0;
}

@media (min-width: 640px) {
  .brief-item {
    flex-direction: row;
    gap: 2.5rem;
  }

  .brief-item h4 {
    width: 30%;
    flex: 0 0 30%;
  }

  .brief-item-content {
    flex: 1 1 auto;
  }
}

/* Closing statement */

.section--closing {
  padding-bottom: 0;
}

.closing-box {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-radius: var(--radius);
  padding: 3.5rem clamp(1.5rem, 5vw, 3rem);
  margin-block: 1rem 6rem; /* Gap before the case-nav row */
}

.closing-box h2 {
  color: #FFFFFF;
  margin-bottom: 3.5rem;
}

.closing-box p {
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.65;
  margin: 0;
}

.case-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-block: 0 2.5rem; /* Gap before the footer's hr */
}

.case-nav a {
  font-size: 1.75rem;
  font-weight: 500;
}

/* Lightbox */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.lightbox.is-active {
  opacity: 1;
  pointer-events: auto;
}

.lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: var(--radius);
  box-shadow: var(--shadow-image);
  transform: scale(0.92);
  transition: transform 0.35s var(--ease);
  cursor: zoom-out;
}

.lightbox.is-active img {
  transform: scale(1);
}

.lightbox-close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 0;
  color: #FFFFFF;
  transition: color 0.2s var(--ease);
}

.lightbox-close:hover,
.lightbox-close:focus-visible {
  color: #CCCCCC;
}

.lightbox-close svg {
  width: 2rem;
  height: 2rem;
}

/* Article modal (Sample Article Excerpt — "Read the full article") */

.article-modal {
  position: fixed;
  inset: 0;
  z-index: 110;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background-color: rgba(0, 0, 0, 0.85);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s var(--ease);
}

.article-modal.is-active {
  opacity: 1;
  pointer-events: auto;
}

.article-modal__panel {
  position: relative;
  background-color: var(--color-background);
  border-radius: var(--radius);
  box-shadow: var(--shadow-image);
  max-width: 45rem; /* matches .section-intro / hero measure */
  width: 100%;
  max-height: 85vh;
  overflow: hidden;
  transform: scale(0.92);
  transition: transform 0.35s var(--ease);
}

.article-modal.is-active .article-modal__panel {
  transform: scale(1);
}

.article-modal__scroll {
  max-height: 85vh;
  overflow-y: auto;
  padding: 3rem clamp(1.5rem, 5vw, 3rem);
}

.article-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  z-index: 2;
  width: 2.75rem;
  height: 2.75rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-background);
  border: 1px solid var(--color-rule);
  border-radius: 999px;
  color: var(--color-primary);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}

.article-modal__close:hover,
.article-modal__close:focus-visible {
  background-color: var(--color-secondary);
}

.article-modal__close svg {
  width: 1.15rem;
  height: 1.15rem;
}

/* Article body typography, scoped inside the modal only */

/* The article body isn't part of the page's heading structure, so its
   section titles are plain paragraphs styled to match heading sizes
   rather than actual h1/h2/h3 elements. The same classes are reused on
   the Sample Article Excerpt outside the modal, so each rule is paired
   with a plain selector as well as one scoped to .article-body (needed
   for specificity over the .article-body p rule below). */

.pseudo-h1,
.article-body .pseudo-h1 {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.25;
  margin: 0 0 1.75rem;
}

.pseudo-h2,
.article-body .pseudo-h2 {
  font-size: 1.45rem;
  font-weight: 700;
  margin: 2.25rem 0 0.85rem;
}

.article-body .pseudo-h2:first-of-type {
  margin-top: 1.75rem;
}

.pseudo-h3,
.article-body .pseudo-h3 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 1.5rem 0 0.5rem;
}

.article-body p {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}

.article-body p em {
  font-style: italic;
}

.article-body ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin: 0 0 1.25rem;
}

.article-body li {
  font-size: 1.2rem;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 0.5rem;
}

.article-body li:last-child {
  margin-bottom: 0;
}

/* Button styled as a text link, for controls that trigger JS behavior
   (like opening a modal) rather than navigating. */

.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
  cursor: pointer;
  transition: color 0.2s var(--ease);
}

.link-button:hover,
.link-button:focus-visible {
  text-decoration: none;
}

/* ==========================================================================
   Utilities
   Small, additive one-off overrides pulled out of inline style="" attributes.
   Scoped with a u- prefix and kept purely additive so they don't affect
   any other page sharing this stylesheet.
   ========================================================================== */

.u-mt-0 { margin-top: 0; }
.u-mb-0 { margin-bottom: 0; }
.u-mt-3 { margin-top: 0.75rem; }
.u-mt-5 { margin-top: 1.25rem; }
.u-mb-5 { margin-bottom: 2.5rem; }
.u-text-right { text-align: right; }
.grid-1col { grid-template-columns: 1fr; }

/* Mobile type scale */

@media (max-width: 640px) {
  .case-hero h1 {
    font-size: 2.1rem;
  }

  .section h2 {
    font-size: 1.85rem;
  }

  .section-intro {
    font-size: 1.15rem;
  }

  .section h3 {
    font-size: 1.25rem;
  }

  .body-copy,
  .body-list li,
  .card p {
    font-size: 1.05rem;
  }

  .case-nav a,
  .breadcrumb {
    font-size: 1.375rem;
  }

  .article-modal {
    padding: 0;
  }

  .article-modal__panel {
    max-height: 100vh;
    border-radius: 0;
  }

  .article-modal__scroll {
    max-height: 100vh;
    padding: 3.5rem 1.5rem 2rem;
  }

  .article-body .pseudo-h1 {
    font-size: 1.5rem;
  }

  .article-body .pseudo-h2 {
    font-size: 1.25rem;
  }

  .article-body p,
  .article-body li {
    font-size: 1.05rem;
  }
}