/* ============================================================
   ANYSHIFT — ARTICLE PROSE
   Element-level typography for migrated blog bodies, so legacy
   markup reads cleanly in the new design system without relying
   on old class names.
   ============================================================ */
.as-prose { color: var(--as-ink); font-size: 17px; line-height: 1.75; }
.as-prose > *:first-child { margin-top: 0; }
.as-prose h1, .as-prose h2, .as-prose h3, .as-prose h4 {
  font-family: var(--as-font-display);
  text-transform: uppercase;
  letter-spacing: .025em;
  color: var(--as-black);
  line-height: 1.1;
  margin: 1.8em 0 .5em;
}
.as-prose h1 { font-size: clamp(28px, 4vw, 40px); }
.as-prose h2 { font-size: clamp(23px, 3vw, 30px); }
.as-prose h3 { font-size: clamp(19px, 2vw, 23px); }
.as-prose p { margin: 0 0 1.1em; }
.as-prose a { color: var(--as-red); text-decoration: underline; text-underline-offset: 2px; }
.as-prose a:hover { color: var(--as-red-700); }
.as-prose ul, .as-prose ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.as-prose li { margin: .35em 0; }
.as-prose img { max-width: 100%; height: auto; border-radius: var(--as-r-md); margin: 1.4em 0; }
.as-prose blockquote {
  margin: 1.4em 0; padding: .6em 1.2em;
  border-left: 4px solid var(--as-red);
  background: var(--as-red-50); border-radius: var(--as-r-sm);
  color: var(--as-ink);
}
.as-prose table { width: 100%; border-collapse: collapse; margin: 1.4em 0; font-size: 15px; }
.as-prose th, .as-prose td { border: 1px solid var(--as-line); padding: 10px 12px; text-align: left; }
.as-prose th { background: var(--as-paper); }
/* Neutralise legacy hero/wrappers that carried old Bootstrap classes */
.as-prose .inner-banner { text-align: left; padding: 0; }
.as-prose .container, .as-prose .row, .as-prose [class^="col-"] { width: auto; margin: 0; padding: 0; }

/* ============================================================
   QUIZ (interactive blocks embedded in some articles)
   ============================================================ */
.as-prose .quiz-section {
  background: #fff; border: 1px solid var(--as-line); border-radius: var(--as-r-lg);
  padding: clamp(20px, 3vw, 32px); margin: 2em 0; box-shadow: var(--as-shadow-sm);
}
.as-prose .quiz-section > h4,
.as-prose .quiz-section > h3 {
  font-family: var(--as-font-display); text-transform: uppercase; letter-spacing: .02em;
  font-size: clamp(18px, 2.2vw, 23px); line-height: 1.2; color: var(--as-black); margin: 0 0 6px;
}
.as-prose .quiz-intro { color: var(--as-ink-soft); font-size: 14.5px; margin: 0 0 18px; }
.as-prose .quiz-progress { height: 6px; background: var(--as-line); border-radius: 999px; overflow: hidden; margin: 0 0 18px; }
.as-prose .quiz-progress > span { display: block; height: 100%; width: 0; background: var(--as-grad-red); transition: width .3s ease; }

.as-prose .quiz-question { margin: 0 0 22px; }
.as-prose .quiz-question:last-of-type { margin-bottom: 4px; }
.as-prose .quiz-question > p { font: 700 16px/1.45 var(--as-font-body); color: var(--as-black); margin: 0 0 12px; }

.as-prose .quiz-option {
  display: block; background: #fff; border: 1.5px solid var(--as-line); border-radius: var(--as-r-md);
  padding: 13px 16px; margin: 0 0 10px; font: 500 14.5px/1.45 var(--as-font-body); color: var(--as-ink);
  cursor: pointer; transition: border-color .15s ease, background .15s ease, transform .08s ease, box-shadow .15s ease;
}
.as-prose .quiz-option:hover { border-color: var(--as-red); background: #fff5f5; box-shadow: var(--as-shadow-sm); }
.as-prose .quiz-option:active { transform: scale(.995); }

/* JS-populated variant (quiz-list + actions + score) */
.as-prose .quiz-list { list-style: none; padding-left: 0; margin: 0; }
.as-prose .quiz-list > li { margin: 0 0 22px; }
.as-prose .quiz-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.as-prose .quiz-actions button {
  appearance: none; border: 0; cursor: pointer; border-radius: var(--as-r-pill);
  padding: 11px 22px; font: 700 14px/1 var(--as-font-body); background: var(--as-grad-red); color: #fff;
  box-shadow: var(--as-shadow-red); transition: transform .12s ease, filter .15s ease;
}
.as-prose .quiz-actions button:hover { transform: translateY(-1px); filter: brightness(1.05); }
.as-prose .quiz-actions button.secondary { background: #fff; color: var(--as-red); border: 1.5px solid var(--as-line); box-shadow: none; }
.as-prose .quiz-score-box:not(:empty) {
  margin-top: 16px; padding: 14px 18px; border-radius: var(--as-r-md);
  background: #fff5f5; border: 1px solid var(--as-line); font: 700 15px/1.45 var(--as-font-body); color: var(--as-black);
}