/* ============================================================
   AI CONTENT STUDIO — page-specific styles for
   ai-content-studio.html only.

   One-off hand-authored case study (same convention as
   censa-design-system.html / outgrow.html) — loads case-study.css
   first and reuses .cs-hero, .cs-eyebrow, .cs-situation, .cs-role,
   .cs-decisions, .cs-hero__meta, .cs-next, .cs-result__grid,
   .principle-card as-is. Only the shapes Figma specifies that don't
   already exist elsewhere are added here, prefixed .aics-:
     - .aics-hero__title/__supporting — max-width clamps only; the
       hero eyebrow/headline/statement reuse the shared
       .cs-hero__category/__title/__statement (Anton display face,
       same as every other case study) rather than Figma's literal
       Manrope hero treatment, per direct instruction to match this
       site's established typography over a one-off Figma deviation
     - .aics-device        — the hero's laptop-framed product
       screenshot (CSS bezel, not a hand-traced SVG laptop — the
       real screenshot inside is the actual asset)
     - .aics-grid           — a 2/3-column card grid (Situation's
       problem cards, Task's verb cards, Heuristic Evaluation,
       Key Design Decisions) — .principle-grid's own breakpoints
       go to 3 cols at desktop for every count, which doesn't fit
       the 2x2 grids here
     - .aics-closing        — a plain statement paragraph after a
       card grid (no quote box in Figma, just text)
     - .aics-heuristic       — heuristic-evaluation card: tag +
       severity pill + title + desc + redesign note
     - .aics-ia-compare      — the Information Architecture
       before/after two-column comparison (reuses .cds-flow-style
       step list)
     - .aics-reel            — the "Old vs New" proof-reel section.
       Figma specifies this on a dark background, but kept it on
       the page's own light background per direct instruction, to
       stay consistent with every other section
     - .aics-pair            — an old/new image comparison pair
       inside the reel
     - .aics-decision        — Key Design Decisions card (numbered
       tag + title + desc, with a highlighted "System" variant)
     - .aics-prev / .aics-back — the "previous case study" / "back
       to works" links above the standard .cs-next block (same
       pattern as outgrow.css's .og-prev/.og-back)

   Mobile-first; tablet/desktop overrides at the project's
   established 768/1024 widths.
   ============================================================ */

/* ---- Hero ---- */
.aics-hero__title {
  max-width: 1280px;
}

.aics-hero__supporting {
  color: var(--color-ink);
  max-width: 880px;
}

/* ---- Hero device frame ---- */
.aics-device {
  width: 100%;
  max-width: 1280px;
}

.aics-device__screen {
  width: 100%;
  aspect-ratio: 1280 / 735;
  background: var(--color-ink-2);
  border: 6px solid var(--color-ink-2);
  border-radius: 20px 20px 4px 4px;
  overflow: hidden;
}

.aics-device__screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.aics-device__base {
  height: 10px;
  background: var(--color-ink-2);
  border-radius: 0 0 8px 8px;
  margin: 0 -12px;
}

/* ---- Card grid (problem/verb/heuristic/decision cards) ---- */
.aics-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.aics-closing {
  color: var(--color-ink);
  max-width: 720px;
}

/* ---- Heuristic Evaluation card ---- */
.aics-heuristic {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
}

.aics-heuristic__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.aics-heuristic__tag {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

.aics-heuristic__severity {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

.aics-heuristic__severity--high {
  background: #fbe7df;
  color: #8a2e12;
}

.aics-heuristic__severity--medium {
  background: #fbefd5;
  color: #7a4b00;
}

.aics-heuristic__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.aics-heuristic__desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--color-muted);
}

.aics-heuristic__redesign {
  background: var(--color-bg);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: var(--fs-sm);
  color: var(--color-ink);
}

/* ---- Information architecture before/after ---- */
.aics-ia-compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.aics-ia-compare__col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
}

.aics-ia-compare__col--after {
  background: var(--color-surface);
  border-color: var(--color-accent);
}

.aics-ia-compare__heading {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.aics-ia-compare__col--after .aics-ia-compare__heading {
  color: var(--color-accent);
}

.aics-ia-compare__heading span {
  font-size: var(--fs-sm);
  font-weight: 400;
  color: var(--color-muted);
}

.aics-ia-stats {
  gap: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-border);
}

/* ---- Old vs New proof reel (light background, per direct instruction) ---- */
.aics-reel {
  display: flex;
  flex-direction: column;
  gap: 64px;
}

.aics-reel__eyebrow {
  color: var(--color-accent);
}

.aics-reel__heading {
  color: var(--color-ink);
}

.aics-reel__group {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.aics-reel__group-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.aics-reel__badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  background: rgba(254, 83, 31, 0.18);
  color: var(--color-accent);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.aics-pair {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  width: 100%;
}

.aics-pair__item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.aics-pair__item img {
  display: block;
  width: 100%;
  border-radius: 10px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.aics-pair__item figcaption {
  font-size: var(--fs-sm);
  line-height: 1.5;
  color: var(--color-muted);
}

.aics-pair__item figcaption strong {
  color: var(--color-ink);
  font-weight: 600;
}

/* ---- Key Design Decisions ---- */
.aics-decision {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 28px;
}

.aics-decision--system {
  background: #dce6f7;
  border-color: transparent;
}

.aics-decision__tag {
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  color: var(--color-accent);
}

.aics-decision--system .aics-decision__tag {
  color: #16308f;
}

.aics-decision__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-lg);
  color: var(--color-ink);
}

.aics-decision__desc {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--color-muted);
}

.aics-decision--system .aics-decision__desc {
  color: #22306a;
}

/* ---- Prev / Back links ---- */
.aics-prev {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-muted);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.aics-prev:hover {
  opacity: 0.7;
}

.aics-back {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--color-ink);
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.aics-back:hover {
  opacity: 0.7;
}

/* ---- Result grid 4-up (reused from the Censa/Outgrow convention —
   case-study.css's own breakpoint only goes to 3 columns) ---- */
.cs-result__grid--four {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Responsive ---- */

/* Tablet: 768–1023px */
@media (min-width: 768px) {
  .aics-grid--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aics-grid--3 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aics-ia-compare {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .aics-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .cs-result__grid--four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Laptop/Desktop: 1024px+ */
@media (min-width: 1024px) {
  .aics-grid--3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}