/* ============================================================
   The Ukrainian Queen — page-specific styles
   Everything reusable (hero, path, forwho, roadmap, voices,
   final-cta, footer) lives in queen.css and is reused as-is;
   this file only covers what's unique to this sub-page:
   the two-column hero variant (no rotating dial — that motif
   belongs to the five-thrones methodology on the main page),
   the proof strip, and the problem-point cards.
   ============================================================ */

/* ---------- hero variant (text + single framed plate) ---------- */
.uq-hero__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: var(--s-6);
  align-items: center;
}
.uq-hero__body { max-width: 56ch; }
.uq-hero__title { margin-bottom: var(--s-3); }
/* the plate holds the full Ukrainian Queen poster artwork — its title,
   badge and colors are baked into the image as one composition, so it
   must never be cropped: no forced aspect-ratio, image at natural height */
.uq-hero__plate .frame { aspect-ratio: auto; }
.uq-hero__plate .frame img { height: auto; }
@media (max-width: 900px) {
  .uq-hero__grid { grid-template-columns: 1fr; gap: var(--s-5); justify-items: center; }
  .uq-hero__body { text-align: center; max-width: 46ch; }
  .uq-hero__body .hero__ctas { justify-content: center !important; }
  .uq-hero__plate { order: -1; max-width: 340px; }
}

/* ---------- proof strip ---------- */
.uq-proof { padding-block: var(--s-5); border-top: var(--line-thin); border-bottom: var(--line-thin); }
.uq-proof__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); text-align: center; }
.uq-proof__item strong { display: block; font-family: var(--loud); font-size: var(--fs-2); color: var(--purple-ink); }
.uq-proof__item span { font-size: var(--fs-0); color: var(--gray); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 760px) { .uq-proof__grid { grid-template-columns: repeat(2, 1fr); gap: var(--s-4); } }

/* ---------- the problem ---------- */
.uq-problem { background: var(--paper); }
.uq-problem__points { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.uq-point { padding: var(--s-4); background: var(--bg); border: var(--line-thin); border-radius: var(--r); }
.uq-point__num { display: block; font-family: var(--mono); font-size: var(--fs-0); font-weight: 700; color: var(--purple-ink); margin-bottom: var(--s-2); }
.uq-point h3 { font-size: var(--fs-3); margin-bottom: var(--s-1); }
.uq-point p { color: var(--gray); }
@media (max-width: 760px) { .uq-problem__points { grid-template-columns: 1fr; } }

/* ---------- 12-week program stats (light-bg reuse of the .stat pattern) ---------- */
.uq-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-3); border-top: var(--line-thin); padding-top: var(--s-4); margin-top: var(--s-5); text-align: center; }
.uq-stats .stat strong { display: block; font-family: var(--loud); font-size: var(--fs-4); color: var(--purple-ink); }
.uq-stats .stat span { font-size: var(--fs-0); color: var(--gray); text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 760px) { .uq-stats { grid-template-columns: repeat(2, 1fr); gap: var(--s-3); } }