/* ============================================================
   case-study.css — case1.html + case2.html only. The toolbar
   bubbles, reading-width container, blue theme tint, the reusable
   content grids, and the decorative glyphs/rows that appear inside
   them. Loaded after base.css. Site-wide chrome (navbar, hero,
   project cards) lives in site.css instead.

   Rules below are ordered by where they first appear on the page,
   reading case1.html (the larger of the two) top to bottom, then
   whatever case2.html adds on top.
   ============================================================ */

/* iOS-toolbar-style bubbles: frosted controls that float over the
   page and stay put while it scrolls. back-button sits top-left, a
   plain icon circle; contact-bubble mirrors it top-right but carries
   a label too, so a case study keeps a quick way out and a quick,
   legible way to reach out without a full nav bar. First thing on
   every case-study page. */

.back-button,
.contact-bubble {
  position: fixed;
  top: 1.5rem;
  z-index: 10;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: var(--color-brand-black);
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transition: background-color 120ms ease-in, transform 120ms ease-in;
}

.back-button:hover,
.contact-bubble:hover {
  background: rgba(255, 255, 255, 0.85);
  transform: scale(1.06);
}

.back-button {
  left: 1.5rem;
  width: 48px;
  border-radius: 50%;
  font-size: 1.25rem;
}

.contact-bubble {
  right: 1.5rem;
  gap: 0.5rem;
  padding: 0 1.25rem 0 1rem;
  border-radius: 999px;
  font-family: "Karla", system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
}

.contact-bubble svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Purpose/Overview two-column intro, directly under the hero image */

.purpose-grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 4rem;
  margin: 0 auto;
  margin-bottom: 4rem;
  /* max-width padded by the same 2rem/side as .container below it, so the
     content column stays 860px on wide screens (identical to before) while
     narrower viewports get matching edge padding instead of flush text. */
  max-width: 860px;
  padding: 0 2rem;
}

/* Reading-width container used by nearly every section below the intro */

.container {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 4rem;
}

/* Alt-section divider, alternating with base.css's .white-section down
   the length of a case study. Class name kept as .blue-section since
   it's referenced throughout case1.html/case2.html — it no longer
   renders a color tint, just a faint 1px border top and bottom to
   separate it from the sections around it. */

.blue-section {
  padding: 6rem 0;
  background-color: rgb(230, 236, 242);
}

/* Reusable content grids: a plain N-column grid reused across many
   unrelated sections (storyboard panels, research findings, ideation
   pairs, "how might we" cards, IA icons, next steps...), so named for
   their shape rather than any one section. */

.grid-3col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}

.grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem;
}

/* Big decorative numeral/glyph heading a grid-cell card (research
   findings, design-choice call-outs, next steps) — a visual accent,
   not a real page heading, so it borrows h1's look via its own class
   instead of the <h1> tag. */

.card-glyph {
  font-family: "DM Sans", system-ui, sans-serif;
  font-size: 4rem;
  font-weight: bold;
  letter-spacing: -0.06em;
  margin-bottom: 0.5rem;
  color: var(--color-brand-black);
}

/* Vertical stack utility: a plain flex column with a gap, for lists
   and stacked text blocks. .stack-wide is a wider-gap modifier for
   pairing bigger text blocks (e.g. Ideation's Problem/Hypothesis). */

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

.stack-wide {
  gap: 2rem;
}

/* Padded figure wrapper for the storyboard panels */

.storyboard-figure {
  padding: 1rem;
}

/* Information-architecture icon + description pairs */

.ia-item {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.ia-icon {
  width: 32px;
  height: 32px;
  color: var(--color-brand-yellow);
}

/* Figure caption chip, reused under IA diagrams and wireframe shots */

.caption {
  font-size: 1rem;
  display: block;
  background-color: rgb(119, 157, 176);
  color: rgb(255, 255, 255);
  padding: 0.5rem 0.7rem;
  max-width: fit-content;
  margin-top: 0.4rem;
  border-radius: 3px 18px 18px 18px;
}

/* Prototype CTA: a button next to its caption text */

.button-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    background-color: rgb(195, 221, 238);
    color: var(--color-brand-black);
    padding: 1rem;
}

.button-row p {
    flex-grow: 1;
}

/* Rows of design-choice imagery. .decision-split modifies a row
   pairing one image with a text column instead of images alone. */

.decision-row {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    gap: 2rem;
}

.decision-row img {
    max-width: 200px;
}

.decision-split {
    align-items: center;
}

.decision-split .column {
    max-width: none;
    flex: 1;
}

/* RESPONSIVE (widest breakpoint first) */

@media (max-width: 900px) {
  .grid-3col {
    grid-template-columns: repeat(2, 1fr);
  }

  .decision-row {
    flex-direction: column;
    align-items: center;
  }

  .decision-split .column {
    max-width: fit-content;
    flex: none;
  }
}

@media (max-width: 560px) {
  .grid-3col,
  .purpose-grid,
  .grid-2col {
    grid-template-columns: 1fr;
  }
}