/**
 * @file
 * Comparison content type — visual hero + tight grid + quick check + prose disclosure.
 *
 * Loaded only on /comparison/* pages via apu.libraries.yml +
 * apu_preprocess_node__comparison(). Per-page palette is set by the Twig
 * template adding classes like `.palette-a-terracotta` to the .comparison
 * article element, based on each Concept paragraph's Palette field.
 *
 * Palette keys (lowercase single words, must match the Palette field's
 * allowed-values machine names):
 *   terracotta, teal, amber, forest, plum, slate, rust, moss
 */

/* ============================================================
   DIAGNOSTIC — uncomment to verify the article tag is present
   ============================================================
   article.comparison {
     border: 8px dashed orange !important;
   }
   article.comparison h1.comp-h1 {
     color: red !important;
   }
   ============================================================ */


/* ============================================================
   PAGE-LEVEL TOKENS
   ============================================================ */

.comparison {
  --paper:       #FAF7F2;
  --paper-2:     #F4EFE5;
  --ink:         #1C1C1C;
  --ink-soft:    #4A4744;
  --ink-mute:    #807A72;
  --rule:        #E5DFD2;
  --rule-strong: #CFC8B7;
  --good:        #4F6B2A;
  --good-fill:   #E5EDD7;
  --bad:         #A33C2A;
  --bad-fill:    #F5DCD5;

  --display: 'Fraunces', Georgia, serif;
  --body:    'Source Serif 4', Georgia, serif;
  --ui:      'IBM Plex Sans', system-ui, sans-serif;

  --concepts:   2;
  --aspect-col: 110px;

  /* Defaults; overridden by .palette-* classes below */
  --color-a: #C16548; --fill-a: #F5E5DD; --ink-a: #6B2D17;
  --color-b: #2C5F5D; --fill-b: #DCE8E5; --ink-b: #143432;
  --color-c: #6B3D8A; --fill-c: #E8DBF0; --ink-c: #3D1F58;
  --color-d: #4A5B6E; --fill-d: #DDE3EA; --ink-d: #1F2A3A;
  --color-e: #5C7A3A; --fill-e: #E5EDD7; --ink-e: #2A3B17;
}

/* ============================================================
   PAGE CONTAINER & FRAMING
   ----------------------------------------------------------------
   A subtle "card on cream" effect that gives the comparison article
   visual focus without forcing a narrow editorial column.
   - Outside the article: warm paper background
   - Inside the article: clean white with light border
   - Centered with max-width 1140px (room for 5-concept layouts)
   - Mobile: collapses to edge-to-edge, no wasted padding
   ============================================================ */

body.node--type-comparison .layout-content,
body.node--type-comparison main.main-content,
body.page-node-type-comparison .layout-content,
body.page-node-type-comparison main.main-content {
  background: #FAF7F2;
  padding: 32px 0;
}

article.comparison {
  background: #FFFFFF;
  border: 1px solid #E5DFD2;
  border-radius: 12px;
  padding: 48px 56px;
  max-width: 1140px;
  margin: 0 auto;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

@media (max-width: 760px) {
  body.node--type-comparison .layout-content,
  body.node--type-comparison main.main-content,
  body.page-node-type-comparison .layout-content,
  body.page-node-type-comparison main.main-content {
    padding: 16px 0;
  }
  article.comparison {
    padding: 28px 22px;
    border-radius: 8px;
    margin: 0 12px;
    max-width: none;
  }
}

/* ============================================================
   PALETTE LIBRARY — 8 reusable palettes for sides a, b, c, d, e
   ============================================================ */

.comparison.palette-a-terracotta { --color-a: #C16548; --fill-a: #F5E5DD; --ink-a: #6B2D17; }
.comparison.palette-a-teal       { --color-a: #2C5F5D; --fill-a: #DCE8E5; --ink-a: #143432; }
.comparison.palette-a-amber      { --color-a: #B07D2A; --fill-a: #F5EAD3; --ink-a: #5A3D08; }
.comparison.palette-a-forest     { --color-a: #3D6B2A; --fill-a: #E1ECD2; --ink-a: #1F3D11; }
.comparison.palette-a-plum       { --color-a: #6B3D8A; --fill-a: #E8DBF0; --ink-a: #3D1F58; }
.comparison.palette-a-slate      { --color-a: #4A5B6E; --fill-a: #DDE3EA; --ink-a: #1F2A3A; }
.comparison.palette-a-rust       { --color-a: #A0492C; --fill-a: #F2DCD0; --ink-a: #4F1F0E; }
.comparison.palette-a-moss       { --color-a: #5C7A3A; --fill-a: #E5EDD7; --ink-a: #2A3B17; }

.comparison.palette-b-terracotta { --color-b: #C16548; --fill-b: #F5E5DD; --ink-b: #6B2D17; }
.comparison.palette-b-teal       { --color-b: #2C5F5D; --fill-b: #DCE8E5; --ink-b: #143432; }
.comparison.palette-b-amber      { --color-b: #B07D2A; --fill-b: #F5EAD3; --ink-b: #5A3D08; }
.comparison.palette-b-forest     { --color-b: #3D6B2A; --fill-b: #E1ECD2; --ink-b: #1F3D11; }
.comparison.palette-b-plum       { --color-b: #6B3D8A; --fill-b: #E8DBF0; --ink-b: #3D1F58; }
.comparison.palette-b-slate      { --color-b: #4A5B6E; --fill-b: #DDE3EA; --ink-b: #1F2A3A; }
.comparison.palette-b-rust       { --color-b: #A0492C; --fill-b: #F2DCD0; --ink-b: #4F1F0E; }
.comparison.palette-b-moss       { --color-b: #5C7A3A; --fill-b: #E5EDD7; --ink-b: #2A3B17; }

.comparison.palette-c-terracotta { --color-c: #C16548; --fill-c: #F5E5DD; --ink-c: #6B2D17; }
.comparison.palette-c-teal       { --color-c: #2C5F5D; --fill-c: #DCE8E5; --ink-c: #143432; }
.comparison.palette-c-amber      { --color-c: #B07D2A; --fill-c: #F5EAD3; --ink-c: #5A3D08; }
.comparison.palette-c-forest     { --color-c: #3D6B2A; --fill-c: #E1ECD2; --ink-c: #1F3D11; }
.comparison.palette-c-plum       { --color-c: #6B3D8A; --fill-c: #E8DBF0; --ink-c: #3D1F58; }
.comparison.palette-c-slate      { --color-c: #4A5B6E; --fill-c: #DDE3EA; --ink-c: #1F2A3A; }
.comparison.palette-c-rust       { --color-c: #A0492C; --fill-c: #F2DCD0; --ink-c: #4F1F0E; }
.comparison.palette-c-moss       { --color-c: #5C7A3A; --fill-c: #E5EDD7; --ink-c: #2A3B17; }

.comparison.palette-d-terracotta { --color-d: #C16548; --fill-d: #F5E5DD; --ink-d: #6B2D17; }
.comparison.palette-d-teal       { --color-d: #2C5F5D; --fill-d: #DCE8E5; --ink-d: #143432; }
.comparison.palette-d-amber      { --color-d: #B07D2A; --fill-d: #F5EAD3; --ink-d: #5A3D08; }
.comparison.palette-d-forest     { --color-d: #3D6B2A; --fill-d: #E1ECD2; --ink-d: #1F3D11; }
.comparison.palette-d-plum       { --color-d: #6B3D8A; --fill-d: #E8DBF0; --ink-d: #3D1F58; }
.comparison.palette-d-slate      { --color-d: #4A5B6E; --fill-d: #DDE3EA; --ink-d: #1F2A3A; }
.comparison.palette-d-rust       { --color-d: #A0492C; --fill-d: #F2DCD0; --ink-d: #4F1F0E; }
.comparison.palette-d-moss       { --color-d: #5C7A3A; --fill-d: #E5EDD7; --ink-d: #2A3B17; }

.comparison.palette-e-terracotta { --color-e: #C16548; --fill-e: #F5E5DD; --ink-e: #6B2D17; }
.comparison.palette-e-teal       { --color-e: #2C5F5D; --fill-e: #DCE8E5; --ink-e: #143432; }
.comparison.palette-e-amber      { --color-e: #B07D2A; --fill-e: #F5EAD3; --ink-e: #5A3D08; }
.comparison.palette-e-forest     { --color-e: #3D6B2A; --fill-e: #E1ECD2; --ink-e: #1F3D11; }
.comparison.palette-e-plum       { --color-e: #6B3D8A; --fill-e: #E8DBF0; --ink-e: #3D1F58; }
.comparison.palette-e-slate      { --color-e: #4A5B6E; --fill-e: #DDE3EA; --ink-e: #1F2A3A; }
.comparison.palette-e-rust       { --color-e: #A0492C; --fill-e: #F2DCD0; --ink-e: #4F1F0E; }
.comparison.palette-e-moss       { --color-e: #5C7A3A; --fill-e: #E5EDD7; --ink-e: #2A3B17; }

/* ============================================================
   HEADINGS & DECK
   ============================================================ */

.comparison .comp-h1 {
  font-family: var(--display);
  font-size: 40px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 12px;
  color: var(--ink);
}
.comparison .comp-h1 em {
  font-style: italic;
  color: var(--ink-mute);
  font-weight: 400;
}

.comparison .comp-deck {
  font-family: var(--body);
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 36px;
  max-width: 62ch;
  font-style: italic;
  line-height: 1.55;
}
.comparison .comp-h1 em.h1-connector {
  font-style: italic;
  color: var(--ink-mute);
  font-weight: 400;
}

/* ============================================================
   HERO — visual cards
   ============================================================ */

.comparison .comp-hero {
  display: grid;
  grid-template-columns: repeat(var(--concepts), minmax(0, 1fr));
  gap: 20px;
  margin-bottom: 48px;
}

.comparison .hero-card {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 26px 28px 30px;
  position: relative;
  overflow: hidden;
}

.comparison .hero-pill {
  display: inline-block;
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 4px;
}

.comparison .hero-svg-wrap {
  margin: 16px 0 22px;
}

.comparison .hero-svg-wrap svg,
.comparison .hero-svg-wrap img {
  display: block;
  max-width: 100%;
  height: auto;
}

.comparison .hero-claim {
  font-family: var(--display);
  font-size: 22px;
  line-height: 1.25;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
  font-weight: 400;
  color: var(--ink);
}
.comparison .hero-claim em { font-style: italic; }

.comparison .hero-detail {
  font-size: 14.5px;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Hero side variants */
.comparison .hero-card.side-a { background: linear-gradient(180deg, var(--fill-a) 0%, white 65%); }
.comparison .hero-card.side-b { background: linear-gradient(180deg, var(--fill-b) 0%, white 65%); }
.comparison .hero-card.side-c { background: linear-gradient(180deg, var(--fill-c) 0%, white 65%); }
.comparison .hero-card.side-d { background: linear-gradient(180deg, var(--fill-d) 0%, white 65%); }
.comparison .hero-card.side-e { background: linear-gradient(180deg, var(--fill-e) 0%, white 65%); }

.comparison .hero-pill.side-a { background: var(--fill-a); color: var(--ink-a); }
.comparison .hero-pill.side-b { background: var(--fill-b); color: var(--ink-b); }
.comparison .hero-pill.side-c { background: var(--fill-c); color: var(--ink-c); }
.comparison .hero-pill.side-d { background: var(--fill-d); color: var(--ink-d); }
.comparison .hero-pill.side-e { background: var(--fill-e); color: var(--ink-e); }

.comparison .hero-claim.side-a em { color: var(--color-a); }
.comparison .hero-claim.side-b em { color: var(--color-b); }
.comparison .hero-claim.side-c em { color: var(--color-c); }
.comparison .hero-claim.side-d em { color: var(--color-d); }
.comparison .hero-claim.side-e em { color: var(--color-e); }

/* ============================================================
   JUMP BAR
   ============================================================ */

.comparison .jump-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.comparison .jump-label {
  font-family: var(--ui);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-right: 6px;
}
.comparison .jump-chip {
  font-family: var(--ui);
  font-size: 13px;
  color: var(--ink);
  background: var(--paper-2);
  border: 1px solid var(--rule);
  padding: 6px 14px;
  border-radius: 100px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.15s ease;
}
.comparison .jump-chip:hover {
  background: white;
  border-color: var(--ink-soft);
}

/* ============================================================
   ASPECT SECTIONS
   ============================================================ */

.comparison .aspect-section {
  padding: 28px 0 22px;
  border-bottom: 1px solid var(--rule);
}
.comparison .aspect-section:last-of-type { border-bottom: none; }

.comparison .aspect-h2 {
  font-family: var(--display);
  font-size: 24px;
  font-weight: 400;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
  padding-top: 10px;
  display: flex;
  align-items: baseline;
  gap: 14px;
  scroll-margin-top: 24px;
  color: var(--ink);
  line-height: 1.2;
}
.comparison .aspect-h2 .aspect-num {
  font-family: var(--display);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-mute);
  font-weight: 400;
  letter-spacing: 0.02em;
}

.comparison .aspect-cells {
  display: grid;
  grid-template-columns: repeat(var(--concepts), minmax(0, 1fr));
  gap: 16px;
}

.comparison .aspect-cell {
  padding: 16px 20px;
  border-radius: 6px;
  font-size: 15px;
  line-height: 1.55;
  border-left-width: 3px;
  border-left-style: solid;
}
.comparison .aspect-cell strong { font-weight: 600; }
.comparison .aspect-cell em { font-style: italic; }
.comparison .aspect-cell p:last-child { margin-bottom: 0; }

.comparison .aspect-cell.side-a { background: var(--fill-a); color: var(--ink-a); border-left-color: var(--color-a); }
.comparison .aspect-cell.side-b { background: var(--fill-b); color: var(--ink-b); border-left-color: var(--color-b); }
.comparison .aspect-cell.side-c { background: var(--fill-c); color: var(--ink-c); border-left-color: var(--color-c); }
.comparison .aspect-cell.side-d { background: var(--fill-d); color: var(--ink-d); border-left-color: var(--color-d); }
.comparison .aspect-cell.side-e { background: var(--fill-e); color: var(--ink-e); border-left-color: var(--color-e); }

/* H3 — concept name inside the cell */
.comparison .aspect-cell .concept-h3 {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  margin: 0 0 8px;
  opacity: 0.85;
}

/* Inline diagrams inside cells */
.comparison .aspect-cell img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-top: 12px;
  border-radius: 4px;
  background: white;
  padding: 8px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  cursor: zoom-in;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.comparison .aspect-cell img:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px -8px rgba(28, 28, 28, 0.15);
}

/* Yellow callout for "applies to all concepts" notes */
.comparison .callout-tip {
  background: #FFF8E1;
  border-left: 3px solid #C5A23A;
  border-radius: 6px;
  padding: 14px 18px;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: #6B5117;
}
.comparison .callout-tip strong {
  color: #4F3A0A;
  font-weight: 600;
}
.comparison .callout-tip a {
  color: var(--color-a, #C16548);
  font-weight: 500;
}

/* ============================================================
   ACTION BUTTONS
   ============================================================ */

.comparison .actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 36px;
  margin-bottom: 28px;
}

.comparison .action-btn {
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--paper);
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.comparison .action-btn:hover {
  transform: translateY(-1px);
  text-decoration: none;
  color: var(--paper);
}
.comparison .action-btn.secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--rule-strong);
}
.comparison .action-btn.secondary:hover {
  background: var(--paper-2);
  border-color: var(--ink);
  color: var(--ink);
}
.comparison .action-btn .ext {
  font-size: 11px;
  opacity: 0.65;
}

/* ============================================================
   QUICK CHECK
   ============================================================ */

.comparison .quiz-card {
  background: var(--paper-2);
  border-radius: 10px;
  padding: 26px 30px;
  border: 1px solid var(--rule);
}

.comparison .quiz-label {
  font-family: var(--ui);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
  margin-bottom: 10px;
}

.comparison .quiz-q {
  font-family: var(--display);
  font-size: 20px;
  margin-bottom: 16px;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.3;
}

.comparison .quiz-options {
  display: grid;
  grid-template-columns: repeat(var(--concepts), minmax(0, 1fr));
  gap: 10px;
}

.comparison .quiz-option {
  font-family: var(--ui);
  font-size: 14px;
  padding: 13px 18px;
  background: white;
  border: 1px solid var(--rule);
  border-radius: 6px;
  text-align: left;
  cursor: pointer;
  color: var(--ink);
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  gap: 10px;
}
.comparison .quiz-option:hover:not(.locked) {
  border-color: var(--ink);
  background: var(--paper);
}
.comparison .quiz-option.locked { cursor: default; }

.comparison .quiz-option .letter {
  font-family: var(--display);
  font-style: italic;
  color: var(--ink-mute);
  flex-shrink: 0;
  width: 18px;
}
.comparison .quiz-option .icon-slot {
  margin-left: auto;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.comparison .quiz-option.is-correct {
  background: var(--good-fill);
  border-color: var(--good);
  color: var(--good);
}
.comparison .quiz-option.is-correct .icon-slot { opacity: 1; }

.comparison .quiz-option.is-wrong {
  background: var(--bad-fill);
  border-color: var(--bad);
  color: var(--bad);
}
.comparison .quiz-option.is-wrong .icon-slot { opacity: 1; }

.comparison .quiz-option.is-dimmed { opacity: 0.45; }

.comparison .quiz-feedback {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 6px;
  font-size: 14.5px;
  line-height: 1.55;
  display: none;
  animation: comparisonFadeSlide 0.3s ease both;
}
.comparison .quiz-feedback.show { display: block; }
.comparison .quiz-feedback.is-correct {
  background: var(--good-fill);
  color: var(--good);
  border-left: 3px solid var(--good);
}
.comparison .quiz-feedback.is-wrong {
  background: var(--bad-fill);
  color: var(--bad);
  border-left: 3px solid var(--bad);
}
.comparison .quiz-feedback strong {
  font-weight: 600;
  margin-right: 6px;
}
.comparison .quiz-feedback .reset-link {
  margin-left: 12px;
  font-family: var(--ui);
  font-size: 12.5px;
  text-decoration: underline;
  cursor: pointer;
  opacity: 0.8;
}
.comparison .quiz-feedback .reset-link:hover { opacity: 1; }

@keyframes comparisonFadeSlide {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   FULL-PROSE INLINE DISCLOSURE
   ============================================================ */

.comparison .prose-disclosure {
  margin-top: 36px;
  border-top: 1px solid var(--rule);
  padding-top: 28px;
  scroll-margin-top: 24px;
}
.comparison .prose-disclosure summary { list-style: none; }
.comparison .prose-disclosure summary::-webkit-details-marker { display: none; }

.comparison .prose-disclosure summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ui);
  font-size: 13.5px;
  font-weight: 500;
  padding: 12px 22px;
  border-radius: 100px;
  border: 1px solid var(--rule-strong);
  background: var(--paper-2);
  color: var(--ink);
  transition: all 0.15s ease;
  letter-spacing: 0.01em;
  user-select: none;
}
.comparison .prose-disclosure summary:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.comparison .prose-disclosure summary:focus-visible {
  outline: 2px solid var(--color-a);
  outline-offset: 3px;
}

.comparison .disclosure-icon {
  width: 12px;
  height: 12px;
  transition: transform 0.25s ease;
  flex-shrink: 0;
}
.comparison .prose-disclosure[open] summary .disclosure-icon { transform: rotate(180deg); }

.comparison .prose-disclosure .label-closed { display: inline; }
.comparison .prose-disclosure .label-open { display: none; }
.comparison .prose-disclosure[open] summary .label-closed { display: none; }
.comparison .prose-disclosure[open] summary .label-open { display: inline; }

.comparison .prose-body {
  margin-top: 32px;
  padding: 36px 40px 40px;
  background: var(--paper-2);
  border-radius: 12px;
  border: 1px solid var(--rule);
}
.comparison .prose-body h4 {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 28px 0 10px;
  color: var(--ink);
}
.comparison .prose-body h4:first-child { margin-top: 0; }
.comparison .prose-body p {
  font-family: var(--body);
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 65ch;
  margin-bottom: 14px;
}
.comparison .prose-body p strong { color: var(--ink); font-weight: 600; }
.comparison .prose-body p em { font-style: italic; }

.comparison .prose-body .collapse-trigger {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-strong);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}
.comparison .prose-body .collapse-note {
  font-family: var(--ui);
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 760px) {
  .comparison .comp-h1 { font-size: 28px; }
  .comparison .comp-hero { grid-template-columns: 1fr; }
  .comparison .aspect-cells { grid-template-columns: 1fr; }
  .comparison .quiz-options { grid-template-columns: 1fr; }
  .comparison .aspect-h2 { font-size: 21px; }
  .comparison .prose-body { padding: 24px 22px 28px; }
}