/* ════════════════════════════════════════════════════════════════════
   SymposiON · offers.css   —  offer cards + the variant picker UI
   Companion to sym-blocks.js. Load after screens.css + banners.css.
   ════════════════════════════════════════════════════════════════════ */

/* ─── OFFER CARD ────────────────────────────────────────────────── */
.sym-offer { --ac: var(--med-terracotta); position: relative; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--ac) 35%, transparent); background: var(--sym-bg-card);
  padding: 28px 30px; display: flex; flex-direction: column; gap: 8px; }
.sym-offer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--ac); opacity: .8; }
.sym-offer .sym-offer-eyebrow { font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--ac); }
.sym-offer .sym-offer-title { font-family: var(--sym-font-serif); font-weight: 600; font-size: 28px; margin: 2px 0 0; line-height: 1.05; }
.sym-offer .sym-offer-body  { font-size: 13px; line-height: 1.6; color: var(--sym-fg-muted); margin: 4px 0 0; max-width: 420px; }
.sym-offer .sym-offer-cta   { align-self: flex-start; margin-top: 14px; background: var(--ac); color: #1A1304; text-decoration: none;
  font-family: var(--sym-font-mono); font-size: 10px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; padding: 12px 20px; }

/* ribbon flourish */
.sym-offer .sym-offer-ribbon { position: absolute; top: 16px; right: -34px; transform: rotate(45deg); background: var(--ac); color: #1A1304;
  font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 1.6px; font-weight: 700; padding: 5px 40px; }
/* coin / laurel art flourish */
.sym-offer .sym-offer-art { position: absolute; right: -16px; bottom: -16px; width: 130px; height: 130px; color: var(--ac); opacity: .14; pointer-events: none; }
.sym-offer.v-coin, .sym-offer.v-laurel { padding-right: 120px; }
/* countdown flourish */
.sym-offer .sym-offer-clock { position: absolute; right: 24px; top: 22px; width: 38px; height: 38px; color: var(--ac); opacity: .55; }
.sym-offer .sym-offer-deadline { font-family: var(--sym-font-mono); font-size: 13px; letter-spacing: 1px; color: var(--ac); margin-top: 6px; }
.sym-offer.v-countdown { padding-right: 80px; }

/* ─── PICKER UI ─────────────────────────────────────────────────── */
.sym-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.sym-picker-opt { background: var(--sym-bg-card); border: 1px solid var(--sym-hairline); cursor: pointer;
  padding: 0; text-align: left; overflow: hidden; position: relative; transition: border-color .2s, transform .2s; }
.sym-picker-opt:hover { border-color: color-mix(in srgb, var(--sym-gold) 45%, transparent); transform: translateY(-2px); }
.sym-picker-opt.on { border-color: var(--sym-gold); box-shadow: 0 0 0 1px var(--sym-gold), var(--sym-glow-gold); }
.sym-picker-name { display: block; font-family: var(--sym-font-mono); font-size: 10px; letter-spacing: 2px; text-transform: uppercase;
  color: var(--sym-gold); padding: 12px 16px; border-bottom: 1px solid var(--sym-hairline); }
.sym-picker-opt.on .sym-picker-name::after { content: " ✓"; }
.sym-picker-preview { padding: 16px; pointer-events: none; transform: scale(.92); transform-origin: top left; }
/* shrink heavy blocks so previews fit the swatch */
.sym-picker-preview .sym-banner-hero { min-height: 150px; }
.sym-picker-preview .sym-banner-hero h3 { font-size: 26px; }
.sym-picker-preview .sym-plan { padding: 18px; }
.sym-picker-preview .sym-plan .pr { font-size: 30px; }
.sym-picker-preview .sym-offer .sym-offer-title { font-size: 20px; }