/* PROMO LAYOUT MODULE — promotional / offer banner styles.
   Every color is driven through the vendor's theme via the --pr-* palette
   variables (set by the consumer: the gallery canvas here, the dashboard sample,
   or the public page) so the color swatch themes them.

   Markup (IDENTICAL across every layout — a block switches look by changing ONE
   class):
     .promo.pr-<layout>
       > .promo-inner
           > .promo-copy   (.promo-badge + .promo-title + .promo-text)
           > .promo-cta
           > .promo-note
   Every layout carries the same five slots; layouts restyle and rearrange them
   but the markup never changes. Same discipline as faq_layouts.css /
   footer_layouts.css. Stacked layouts let `.promo-copy` collapse via
   `display:contents` so badge/title/text share the inner column with the CTA and
   note; the split / inline layouts use it as a real box.

   TYPE: Zulli Typography Kit v1.0, matching the other body modules. The badge
   and note move to the mono utility face; the title takes --type-display-m in
   the vendor's display face (it clears the 24px floor, so it stays display
   type); the CTA takes --btn-md at weight 500. --c-r follows corner_style. */

.promo{
  container-type: inline-size;
  font-family: var(--pr-bf, 'Inter', system-ui, sans-serif);
  color: rgba(var(--pr-ink-rgb), .72);
  max-width: 640px;
  margin-inline: auto;
  /* Design tokens — all derived from the theme palette. */
  --c-ink: var(--pr-ink);
/* Secondary text now comes from the derived --*-muted role (see
   _muted_text in style_templates.py) instead of a hardcoded alpha. A fixed
   fade put 43 of 72 themes under AA; the derived value mutes as far as each
   palette allows and stops there. Fallback keeps the old look off-theme. */
  --c-muted: var(--pr-muted, rgba(var(--pr-ink-rgb), .68));
  --c-soft: rgba(var(--pr-ink-rgb), .74);
  --c-line: rgba(var(--pr-ink-rgb), .15);
  --c-line-soft: rgba(var(--pr-ink-rgb), .08);
  --c-surface: color-mix(in srgb, var(--pr-ink) 4%, var(--pr-bg));
  --c-accent: var(--pr-primary);
  /* Only for a solid fill with --c-accent-ink painted on top (see the same
     split in link_layouts.css: --lk-primary vs --lk-primary-fill). */
  --c-accent-fill: var(--pr-primary-fill, var(--pr-primary));
  --c-accent-ink: var(--pr-on-primary);
  --c-accent-text: var(--pr-primary-text, var(--pr-primary));
  --c-accent-soft: color-mix(in srgb, var(--pr-primary) 12%, var(--pr-bg));
  --c-accent-line: color-mix(in srgb, var(--pr-primary) 40%, var(--pr-bg));
  --c-shadow-sm: 0 1px 2px rgba(0,0,0,.05), 0 8px 18px -10px rgba(0,0,0,.20);
  --c-r: var(--pr-radius, 6px);
}

/* ---- shared slot primitives ---- */
.promo-inner{ position:relative; }
/* By default the copy wrapper is transparent to layout, so its three children
   sit directly in the inner flex column alongside the CTA and note. Split /
   inline re-enable it as a real box. */
.promo-copy{ display:contents; }
/* --type-label. Pill radius is a shape, so it doesn't follow --c-r. */
.promo-badge{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start;
  font-family:var(--pr-mf, ui-monospace, monospace); font-weight:500; font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; line-height:1.2;
  padding:6px 10px; border-radius:999px;
  background:var(--c-accent-soft); color:var(--c-accent-text); }
/* --type-display-m. 19px floor put the display face under its 24px floor at
   narrow widths, where it read as an odd body face rather than a headline. */
.promo-title{ margin:0; font-family:var(--pr-hf, 'Fraunces', serif); font-weight:var(--pr-tw, 600);
  font-size:clamp(24px, 5cqi, 32px); line-height:1.18; letter-spacing:-0.016em; color:var(--c-ink); }
/* --type-body */
.promo-text{ margin:0; font-size:15px; line-height:1.6; color:var(--c-soft); max-width:var(--measure-body, 68ch); }
.promo-cta{ display:inline-flex; align-items:center; justify-content:center; gap:8px;
  align-self:flex-start;
  font-family:var(--pr-bf, 'Inter', sans-serif); font-weight:500; font-size:14px; line-height:1.2;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  min-height:var(--btn-h-md, clamp(40px, 4.4vw, 44px));
  padding:8px var(--btn-px-lg, clamp(20px, 2.6vw, 30px)); border-radius:999px;
  background:var(--c-accent-fill); color:var(--c-accent-ink); border:0;
  transition:transform .15s ease, box-shadow .2s ease, background .2s; }
.promo-cta:hover{ transform:translateY(-1px); box-shadow:var(--c-shadow-sm); }
.promo-cta::after{ content:"\2192"; font-weight:600; }
/* --type-label — the note is fine print, not prose */
.promo-note{ margin:0; font-family:var(--pr-mf, ui-monospace, monospace); font-size:12px;
  line-height:1.5; color:var(--c-muted); }

/* ============================================================ */
/* Named layouts                                                */
/* ============================================================ */

/* 01 · Accent Banner — a full-bleed accent-tinted band, centered stack. The
   loud, unmissable hero promo. */
.pr-banner .promo-inner{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; padding:clamp(24px, 6cqi, 38px) clamp(20px, 6cqi, 40px);
  background:var(--c-accent-soft); border-radius:var(--c-r);
  border:1px solid var(--c-accent-line); }
.pr-banner .promo-badge{ align-self:center; background:var(--c-accent-fill); color:var(--c-accent-ink); }
.pr-banner .promo-cta{ align-self:center; }
.pr-banner .promo-text{ max-width:46ch; }

/* 02 · Bordered Card — a clean bordered, rounded card on a soft surface with a
   subtle lift. The default, safe look. */
.pr-boxed .promo-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:clamp(22px, 5.5cqi, 32px); background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--c-r); box-shadow:var(--c-shadow-sm); }
.pr-boxed .promo-cta{ margin-top:4px; }

/* 03 · Split Row — copy on the left, CTA parked on the right, note underneath.
   Compact and businesslike; collapses to a stack on narrow cards. */
.pr-split .promo-inner{ display:grid; grid-template-columns:1fr auto; align-items:center;
  column-gap:clamp(16px, 4cqi, 28px); row-gap:12px;
  padding:clamp(20px, 5cqi, 28px); background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--c-r); }
.pr-split .promo-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:9px;
  min-width:0; }
.pr-split .promo-note{ grid-column:1 / -1; }
@container (max-width: 400px){
  .pr-split .promo-inner{ grid-template-columns:1fr; }
  .pr-split .promo-cta{ align-self:stretch; justify-content:center; }
}

/* 04 · Spotlight — a soft radial glow behind a centered stack, borderless. Warm
   and editorial; lets serif/cursive faces shine. */
.pr-spotlight .promo-inner{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:14px; padding:clamp(26px, 6cqi, 40px) clamp(20px, 5cqi, 32px); border-radius:var(--c-r);
  background:
    radial-gradient(120% 100% at 50% 0%, var(--c-accent-soft), transparent 70%),
    var(--pr-bg); }
.pr-spotlight .promo-badge{ align-self:center; background:transparent; color:var(--c-accent-text);
  border:1px solid var(--c-accent-line); }
.pr-spotlight .promo-cta{ align-self:center; }
.pr-spotlight .promo-text{ max-width:44ch; }

/* 05 · Coupon Ticket — a dashed-edge ticket with two notches punched into the
   sides. Reads instantly as a deal/coupon. */
.pr-ticket .promo-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:clamp(22px, 5.5cqi, 32px); background:var(--c-surface);
  border:2px dashed var(--c-accent-line); border-radius:var(--c-r); }
.pr-ticket .promo-inner::before,
.pr-ticket .promo-inner::after{ content:""; position:absolute; top:50%; width:22px; height:22px;
  background:var(--pr-bg); border:2px dashed var(--c-accent-line); border-radius:50%;
  transform:translateY(-50%); }
.pr-ticket .promo-inner::before{ left:-13px; clip-path:inset(0 0 0 50%); }
.pr-ticket .promo-inner::after{ right:-13px; clip-path:inset(0 50% 0 0); }
.pr-ticket .promo-badge{ border-radius:var(--c-r); }

/* 06 · Corner Ribbon — a diagonal ribbon banner pinned across the top-right
   corner carries the badge; the card holds the rest. Playful, high-energy. */
.pr-ribbon .promo-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:clamp(22px, 5.5cqi, 32px); background:var(--c-surface);
  border:1px solid var(--c-line); border-radius:var(--c-r); overflow:hidden; }
.pr-ribbon .promo-badge{ position:absolute; display:block; top:24px; right:-54px; width:180px;
  text-align:center; line-height:1.2; transform:rotate(45deg);
  background:var(--c-accent-fill); color:var(--c-accent-ink); border-radius:0;
  padding:6px 0; box-shadow:var(--c-shadow-sm); }
.pr-ribbon .promo-title{ padding-right:24px; }

/* 07 · Accent Rail — a thick accent bar down the left edge; everything else is
   quiet. Timeline-like, calm but pointed. */
.pr-rail .promo-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:11px;
  padding:clamp(16px, 4cqi, 22px) clamp(18px, 4.5cqi, 26px);
  border-left:4px solid var(--c-accent); border-radius:0 var(--c-r) var(--c-r) 0;
  background:linear-gradient(90deg, var(--c-accent-soft), transparent 60%); }

/* 08 · Stamped — a heavy double outline, no fill, uppercase. Reads like a mailed
   stamp/seal; suits mono and serif type. */
.pr-stamp .promo-inner{ display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:13px; padding:clamp(24px, 6cqi, 36px); border-radius:var(--c-r);
  border:2px solid var(--c-line); outline:2px solid var(--c-line); outline-offset:4px; }
.pr-stamp .promo-badge{ align-self:center; background:transparent; color:var(--c-accent-text);
  border:1px solid currentColor; letter-spacing:.14em; }
.pr-stamp .promo-title{ text-transform:uppercase; letter-spacing:.02em; }
.pr-stamp .promo-cta{ align-self:center; background:transparent; color:var(--c-accent-text);
  border:2px solid var(--c-accent); }
.pr-stamp .promo-cta:hover{ background:var(--c-accent-fill); color:var(--c-accent-ink); }

/* 09 · Minimal — no card, no fill: just a small badge, the offer, and a text
   link. Lets busy type systems stay calm. */
.pr-minimal .promo-inner{ display:flex; flex-direction:column; align-items:flex-start; gap:10px;
  padding:6px 2px; }
.pr-minimal .promo-badge{ padding:0; background:transparent; color:var(--c-accent-text); }
.pr-minimal .promo-cta{ padding:0; background:transparent; color:var(--c-accent-text);
  border-radius:0; border-bottom:2px solid var(--c-accent-line); }
.pr-minimal .promo-cta:hover{ transform:none; box-shadow:none; border-bottom-color:var(--c-accent); }

/* 10 · Inline Bar — a slim strip: a small badge eyebrow over a one-line offer on
   the left, a compact CTA on the right (supporting text + note fold away). A
   rounded rectangle, not a full pill, so it stays tidy if the offer wraps. Great
   as a page-top strip. */
.pr-inline{ max-width:none; }
.pr-inline .promo-inner{ display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:14px clamp(16px, 3.5cqi, 20px); background:var(--c-accent-soft);
  border-radius:var(--c-r); }
.pr-inline .promo-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:5px;
  min-width:0; }
.pr-inline .promo-badge{ padding:0; background:transparent; color:var(--c-accent-text);
  font-size:12px; }
/* Inline is the compact strip, so its title steps DOWN to --type-h3 rather
   than off the scale. */
.pr-inline .promo-title{ font-size:18px; line-height:1.36; font-weight:600; }
.pr-inline .promo-text,
.pr-inline .promo-note{ display:none; }
/* --btn-sm for the compact strip */
.pr-inline .promo-cta{ flex-shrink:0; min-height:var(--btn-h-sm, clamp(32px, 3.4vw, 34px));
  padding:6px var(--btn-px-sm, clamp(10px, 1.2vw, 14px)); font-size:13px; }

@media (prefers-reduced-motion: reduce){
  .promo-cta{ transition:none; }
}