/* ==========================================================================
   My Hero Storybooks · site.css
   Прилагодувања на дизајн системот (brand.css) за живиот сајт.
   Редослед: tokens.css → style.css → brand.css → site.css.
   brand.css е датотеката од системот и не се менува рачно; сè што е
   специфично за овие страници оди тука.
   ========================================================================== */

/* Бранот лежи на работ на секцијата, не во текот на содржината. */
.hero > .wave, .section > .wave { position: absolute; left: 0; right: 0; bottom: -1px; z-index: 3; margin: 0; }
.hero > .wave.is-flipped, .section > .wave.is-flipped { top: -1px; bottom: auto; }

/* „Scroll ↓" стои над бранот, не врз него. */
.hero .scroll-hint { bottom: 84px; z-index: 4; }
@media (max-width: 760px) { .hero .scroll-hint { display: none; } }

/* Две реченици на картичката, никогаш три: line-clamp понекогаш не држи
   заедно со text-wrap: pretty, па висината е ограничена и рачно. */
.sc-desc { text-wrap: wrap; max-height: calc(1.6em * 2); }

/* ── Нарачка ───────────────────────────────────────────────────────────────
   Картичките за избор во order.js се <button role="radio">, не label со
   radio. Избраната состојба ја добива истиот изглед како :has(input:checked)
   во системот. */
.order-shell { background: var(--night-glow); }
.option-card.selected, .option-card[aria-checked="true"] { border-color: var(--gold); background: rgba(242, 193, 78, 0.12); }
.option-card.selected .opt-check, .option-card[aria-checked="true"] .opt-check { background: var(--gold); border-color: var(--gold); color: var(--midnight); }
.option-card:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.option-grid.worlds { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) { .option-grid.worlds { grid-template-columns: minmax(0, 1fr); } }

/* Гласот на приказната (he / she / they): изгледот на .choice од системот. */
.pill-row { display: flex; flex-wrap: wrap; gap: 10px; }
.pill-row .pill {
  display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--field-border); border-radius: var(--radius-pill); background: transparent; cursor: pointer;
  font-family: var(--font-body); font-weight: 800; font-size: var(--fs-sm); color: var(--text);
}
.pill-row .pill:hover { border-color: var(--gold); }
.pill-row .pill.selected, .pill-row .pill[aria-checked="true"] { border-color: var(--gold); background: rgba(242, 193, 78, 0.15); color: var(--accent-text); }

.dropzone { position: relative; }
.order-form { display: grid; gap: var(--space-5); max-width: 560px; }
.consent strong { color: var(--heading); }
.consent a { color: var(--link); }
.timeline { padding-left: 0; }
.order-form .dropzone { display: grid; justify-items: center; }

/* Пауза за впечатоците што се тркалаат. */
.quotes-track.is-paused { animation-play-state: paused !important; }
.quotes-controls { display: flex; justify-content: center; margin-top: 18px; }
.order-shell .accent { color: var(--accent-text); }
.order-shell .sub-h { color: var(--gold-soft); }

/* Долги германски зборови („Nutzungsbedingungen", „Datenschutzerklärung")
   во DynaPuff не собираат на телефон од 320px. Насловите се делат со цртичка
   според јазикот на страницата, наместо да излезат надвор од екранот. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
.legal-shell h1 { font-size: clamp(1.7rem, 8.5vw, 2.6rem); }

/* Потврда по праќање на формуларот „пратете своја приказна“. */
.form-sent { margin: 0 0 18px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius-md); background: rgba(242, 193, 78, 0.12); font-weight: 700; color: var(--heading); }