/* Ask the Cards, the Day Pass and question packs (templates/ask.php, templates/order.php, dzt_buy_panel()).
   Loaded only where it's used; builds on the almanac layer in site.css (.plate, .kicker, .btn, .steps-3). */

.ask-hero .hero__grid { align-items: start; }
.ask-box { margin-top: var(--s4); max-width: 560px; }
.ask-box .join { box-shadow: none; padding: 0; background: none; }
.ask-box .join__seal { display: none; }
.ask-form textarea { min-height: 128px; resize: vertical; font: 400 1.0625rem/1.5 var(--sans); }
.ask-form .btn { width: 100%; }
.ask-backs { display: flex; justify-content: center; gap: 12px; }
.ask-backs img { width: min(30%, 150px); border-radius: 10px; box-shadow: 0 2px 3px rgba(27, 43, 36, .15), 0 18px 30px -18px rgba(27, 43, 36, .55); }
.ask-backs img:nth-child(1) { transform: rotate(-5deg) translateY(8px); }
.ask-backs img:nth-child(3) { transform: rotate(5deg) translateY(8px); }

/* the question, quoted */
.ask-question { font: italic 400 clamp(1.2rem, 1.1rem + .4vw, 1.4rem)/1.45 var(--serif); color: var(--ink); border-left: 2px solid var(--brass); padding-left: var(--s3); margin: 0 0 var(--s4); max-width: 60ch; }

/* the three-card spread */
.ask-spread { list-style: none; padding: 0; margin: var(--s4) 0 var(--s5); display: grid; gap: var(--s5) var(--s4); }
@media (min-width: 800px) { .ask-spread { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ask-spread li { display: grid; align-content: start; }
.ask-spread img { width: min(70%, 210px); margin: 0 auto var(--s2); border-radius: 10px; box-shadow: 0 2px 3px rgba(27, 43, 36, .12), 0 16px 28px -18px rgba(27, 43, 36, .5); }
.ask-spread__pos { margin: 0 0 4px; text-align: center; font: 600 .72rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--terracotta-text); }
.ask-spread h2, .ask-spread h3 { text-align: center; font-size: 1.3rem; margin-bottom: var(--s2); }
.ask-spread p { font-size: 1.0625rem; }
.ask-disclosure { margin-top: var(--s4); max-width: var(--measure); }

/* prices */
.price-cards { display: grid; gap: var(--s4) var(--s3); grid-template-columns: 1fr; margin-top: var(--s2); }
@media (min-width: 720px) { .price-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .price-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.price-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: var(--s4) var(--s3) var(--s3); background: var(--surface); box-shadow: inset 0 0 0 1px #CFC7B6, inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--rule); }
.price-card--best { box-shadow: inset 0 0 0 2px var(--forest), inset 0 0 0 6px var(--surface), inset 0 0 0 7px var(--rule); }
.price-card__tag { position: absolute; top: -11px; left: var(--s3); background: var(--forest); color: #fff; font: 600 .68rem/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; padding: 6px 10px; }
.price-card__name { margin: 0; font: 600 .78rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.price-card__price { margin: 0; font: 400 clamp(2rem, 1.8rem + .8vw, 2.5rem)/1.05 var(--serif); color: var(--ink); }
.price-card__price .fine { font-family: var(--sans); }
.price-card__note { margin: 0 0 var(--s2); font-size: .9375rem; color: var(--ink-2); }
.price-card > form, .price-card > .btn { margin-top: auto; }
.price-card .btn { width: 100%; }

/* order states */
.status-panel { max-width: 620px; margin: var(--s4) auto; padding: clamp(28px, 4vw, 44px); text-align: center; }
.status-panel .kicker { justify-content: center; }
.status-panel .kicker::after { display: none; }
.spinner { width: 40px; height: 40px; margin: 0 auto var(--s3); border-radius: 50%; border: 2px solid var(--rule); border-top-color: var(--brass); animation: dz-spin 1s linear infinite; }
@keyframes dz-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; border-color: var(--brass); } }

/* cross-sell panel printed by dzt_buy_panel() in other templates */
.buy-panel { margin-top: var(--s4); }
.buy-panel__label { margin: 0; font: 600 .75rem/1.3 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--terracotta-text); }
.buy-panel__title { margin: 6px 0 8px; font: 500 clamp(1.25rem, 1.15rem + .4vw, 1.45rem)/1.25 var(--serif); }
.buy-panel__text { margin: 0 0 var(--s2); color: var(--ink-2); font-size: 1rem; max-width: 60ch; }