/* Creytix Banner Studio — core component system
 * BRAND-AGNOSTIC. Every color/font here reads from the fleet's existing
 * `--ctx-*` design-token custom properties (packages/creytix-design-tokens)
 * with a neutral fallback baked into every var() call, so this file:
 *   1. Renders something reasonable with ZERO theme applied.
 *   2. Goes fully on-brand the instant a `.brand-<slug>` class (either a
 *      generated packages/creytix-design-tokens/css/<slug>.css, OR a
 *      Banner Studio theme file in ../themes/) wraps the banner.
 * No build step. No framework. Pure CSS, ~9KB uncompressed.
 *
 * Component map:
 *   .cxb                 banner root (put a size class + optional tone class on it)
 *   .cxb--hero|strip|square|sticky   size/aspect-ratio family
 *   .cxb--tone-*         semantic tone (brand|surface|warning|info|urgent|success)
 *   .cxb__media          absolute background layer (photo or gradient)
 *   .cxb__scrim          gradient legibility overlay above a photo
 *   .cxb__content        the text/CTA stack, above media
 *   .cxb__eyebrow .cxb__title .cxb__body .cxb__meta
 *   .cxb__actions .cxb__btn (--primary|--ghost|--alt)
 *   .cxb__badge          small pill (date chip, "Nuevo", stat)
 *   .cxb__icon           circular icon slot
 *   .cxb__dismiss        close button (sticky variant)
 *
 * See docs/creytix/CREYTIX_BANNER_STUDIO.md for the full guide + catalog.
 */

.cxb {
  --cxb-radius: var(--ctx-radius, 12px);
  --cxb-bg: var(--ctx-color-surface, #F4F6F8);
  --cxb-ink: var(--ctx-color-primary-text, #1A2430);
  --cxb-ink-muted: var(--ctx-color-muted-text, #57626D);
  --cxb-border: var(--ctx-color-border, #DCE2E7);
  --cxb-accent: var(--ctx-color-brand-accent, #2563EB);
  --cxb-accent-hover: var(--ctx-color-accent-hover, #1D4ED8);
  --cxb-on-accent: var(--ctx-color-on-accent, #FFFFFF);
  --cxb-warning: var(--ctx-color-warning, #B8763F);
  --cxb-error: var(--ctx-color-error, #B8452F);
  --cxb-success: var(--ctx-color-success, #2E7D5B);
  --cxb-font-display: var(--ctx-font-display, Georgia, "Iowan Old Style", serif);
  --cxb-font-body: var(--ctx-font-body, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  --cxb-shadow: 0 16px 40px -16px rgba(20, 30, 40, 0.28);

  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--cxb-radius);
  background: var(--cxb-bg);
  color: var(--cxb-ink);
  font-family: var(--cxb-font-body);
  box-shadow: var(--cxb-shadow);
}
.cxb * { box-sizing: border-box; }
.cxb img { display: block; max-width: 100%; }
.cxb a { text-decoration: none; }

/* ---------- media + scrim (photo-backed banners) ---------- */
.cxb__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.cxb__media--gradient {
  background: linear-gradient(155deg, var(--cxb-accent) 0%, color-mix(in srgb, var(--cxb-accent) 60%, #08202E) 100%);
}
.cxb__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(8, 20, 30, 0.05) 0%, rgba(8, 18, 26, 0.35) 55%, rgba(6, 14, 20, 0.72) 100%);
  pointer-events: none;
}

/* ---------- content stack ---------- */
.cxb__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.cxb__eyebrow {
  display: inline-block;
  font-family: var(--cxb-font-body);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 8px;
}
.cxb__title {
  font-family: var(--cxb-font-display);
  font-weight: 400;
  line-height: 1.12;
  margin: 0 0 10px;
}
.cxb__body {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--cxb-ink-muted);
  margin: 0 0 18px;
  max-width: 46ch;
}
.cxb--on-dark .cxb__body { color: rgba(255, 255, 255, 0.82); }
.cxb__meta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: var(--cxb-ink-muted);
  margin-bottom: 12px;
}

/* ---------- actions / CTA button ---------- */
.cxb__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cxb__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: calc(var(--cxb-radius) * 0.5);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  cursor: pointer;
  overflow: hidden;
  white-space: nowrap;
}
.cxb__btn--primary { background: var(--cxb-accent); color: var(--cxb-on-accent); }
.cxb__btn--primary:hover { background: var(--cxb-accent-hover); }
.cxb__btn--ghost { border-color: currentColor; color: inherit; background: transparent; }
.cxb__btn--alt { background: #fff; color: var(--cxb-accent); }
.cxb__btn--alt:hover { background: #F2F6FA; }

/* ---------- badge / icon ---------- */
.cxb__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 5px 11px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.18);
  color: inherit;
  width: fit-content;
  margin-bottom: 12px;
}
.cxb--tone-surface .cxb__badge,
.cxb--tone-warning .cxb__badge,
.cxb--tone-info .cxb__badge,
.cxb--tone-success .cxb__badge { background: color-mix(in srgb, var(--cxb-accent) 12%, transparent); color: var(--cxb-accent); }
.cxb__icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 19px;
  background: color-mix(in srgb, var(--cxb-accent) 14%, transparent);
  color: var(--cxb-accent);
  flex-shrink: 0;
}

/* ---------- dismiss (sticky) ---------- */
.cxb__dismiss {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.18);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cxb--tone-surface .cxb__dismiss,
.cxb--tone-warning .cxb__dismiss { background: rgba(0, 0, 0, 0.08); color: var(--cxb-ink-muted); }
.cxb__dismiss:hover { background: rgba(0, 0, 0, 0.3); }

/* ================= SIZE / ASPECT FAMILIES ================= */

/* HERO — wide feature banner, ~21:9 desktop, stacks on mobile.
   Fits a page hero strip or a full-bleed section. */
.cxb--hero {
  aspect-ratio: 21 / 9;
  min-height: 260px;
}
.cxb--hero .cxb__content {
  justify-content: flex-end;
  padding: clamp(20px, 4vw, 44px) clamp(20px, 4vw, 52px);
}
.cxb--hero .cxb__title { font-size: clamp(22px, 3vw, 36px); max-width: 18ch; }
@media (max-width: 640px) { .cxb--hero { aspect-ratio: 4 / 5; } }

/* STRIP — inline leaderboard/billboard family (IAB 728x90 / 970x250 spirit),
   full-width row banner for slotting between page sections. */
.cxb--strip {
  min-height: 96px;
}
.cxb--strip .cxb__content {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  flex-wrap: wrap;
}
.cxb--strip .cxb__title { font-size: 19px; margin: 0; }
.cxb--strip .cxb__body { margin: 2px 0 0; max-width: 52ch; }
.cxb--strip .cxb__text { display: flex; align-items: center; gap: 14px; }
.cxb--strip .cxb__eyebrow, .cxb--strip .cxb__badge { margin: 0; }
@media (max-width: 720px) {
  .cxb--strip .cxb__content { flex-direction: column; align-items: flex-start; }
}

/* SQUARE — 1:1 social-card format. */
.cxb--square {
  aspect-ratio: 1 / 1;
  max-width: 420px;
}
.cxb--square .cxb__content {
  justify-content: center;
  align-items: flex-start;
  padding: clamp(22px, 6%, 36px);
}
.cxb--square .cxb__title { font-size: clamp(20px, 5vw, 27px); }

/* STICKY MOBILE — fixed bottom bar, compact, dismissible.
   Better-Ads-Standard-aware: kept under ~15% of a typical mobile viewport. */
.cxb--sticky {
  border-radius: 0;
  min-height: 64px;
  max-height: 88px;
  box-shadow: 0 -12px 28px -18px rgba(10, 20, 30, 0.35);
}
.cxb--sticky .cxb__content {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 18px;
}
.cxb--sticky .cxb__title { font-size: 14.5px; margin: 0; }
.cxb--sticky .cxb__body { display: none; }
.cxb--sticky .cxb__text { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cxb--sticky .cxb__title-wrap { min-width: 0; }
.cxb--sticky .cxb__title-wrap .cxb__meta { margin: 2px 0 0; font-size: 11px; }
.cxb--sticky .cxb__btn { padding: 9px 16px; font-size: 12.5px; flex-shrink: 0; }
/* Demo-only positioning hook; a consuming page decides real placement. */
.cxb--sticky.cxb--sticky-demo { position: sticky; bottom: 0; z-index: 30; }

/* ================= TONE FAMILIES ================= */
/* brand — deep accent-driven, white text: primary conversion asks */
.cxb--tone-brand { color: #fff; }
.cxb--tone-brand:not(.cxb--has-photo) .cxb__media { background: linear-gradient(155deg, var(--cxb-accent) 0%, color-mix(in srgb, var(--cxb-accent) 55%, #071823) 100%); }
.cxb--tone-brand .cxb__eyebrow { color: color-mix(in srgb, #fff 78%, var(--cxb-accent)); }
.cxb--tone-brand .cxb__title { color: #fff; }
.cxb--tone-brand .cxb__body { color: rgba(255, 255, 255, 0.85); }
.cxb--tone-brand .cxb__btn--primary { background: #fff; color: var(--cxb-accent); }
.cxb--tone-brand .cxb__btn--primary:hover { background: #F2F6FA; }
.cxb--tone-brand .cxb__btn--ghost { border-color: rgba(255, 255, 255, 0.6); color: #fff; }

/* surface — airy white/off-white card, accent text + border: informational/soft CTAs */
.cxb--tone-surface { background: var(--cxb-bg); border: 1px solid var(--cxb-border); box-shadow: none; }
.cxb--tone-surface .cxb__eyebrow { color: var(--cxb-accent); }
.cxb--tone-surface .cxb__btn--ghost { border-color: var(--cxb-border); color: var(--cxb-ink); }

/* warning — payment / dues reminders: warm, firm, never alarming */
.cxb--tone-warning { background: color-mix(in srgb, var(--cxb-warning) 10%, var(--cxb-bg)); border: 1px solid color-mix(in srgb, var(--cxb-warning) 35%, var(--cxb-border)); box-shadow: none; }
.cxb--tone-warning .cxb__eyebrow, .cxb--tone-warning .cxb__title { color: color-mix(in srgb, var(--cxb-warning) 70%, var(--cxb-ink)); }
.cxb--tone-warning .cxb__icon { background: color-mix(in srgb, var(--cxb-warning) 20%, transparent); color: var(--cxb-warning); }
.cxb--tone-warning .cxb__btn--primary { background: var(--cxb-warning); color: #fff; }

/* info — assembly / meeting notices: bordered card, brand-accent calendar icon */
.cxb--tone-info { background: var(--cxb-bg); border: 1px solid var(--cxb-border); border-left: 4px solid var(--cxb-accent); box-shadow: none; }
.cxb--tone-info .cxb__eyebrow { color: var(--cxb-accent); }

/* urgent — security / urgent notices: strongest contrast in the system, still tasteful */
.cxb--tone-urgent { background: color-mix(in srgb, var(--cxb-error) 92%, black); border: 1px solid color-mix(in srgb, var(--cxb-error) 60%, black); box-shadow: none; }
.cxb--tone-urgent .cxb__eyebrow, .cxb--tone-urgent .cxb__title, .cxb--tone-urgent .cxb__meta { color: #fff; }
.cxb--tone-urgent .cxb__body { color: rgba(255, 255, 255, 0.88); }
.cxb--tone-urgent .cxb__icon { background: rgba(255, 255, 255, 0.16); color: #fff; }
.cxb--tone-urgent .cxb__btn--primary { background: #fff; color: color-mix(in srgb, var(--cxb-error) 85%, black); }

/* success — achievement / transparency: gold-leaning accent, stat-forward */
.cxb--tone-success { background: color-mix(in srgb, var(--cxb-success) 8%, var(--cxb-bg)); border: 1px solid color-mix(in srgb, var(--cxb-success) 30%, var(--cxb-border)); box-shadow: none; }
.cxb--tone-success .cxb__eyebrow { color: var(--cxb-success); }
.cxb--tone-success .cxb__icon { background: color-mix(in srgb, var(--cxb-success) 18%, transparent); color: var(--cxb-success); }
.cxb--tone-success .cxb__btn--primary { background: var(--cxb-success); color: #fff; }
.cxb--tone-success .cxb__stat { font-family: var(--cxb-font-display); font-size: clamp(26px, 4vw, 40px); color: var(--cxb-success); line-height: 1; margin-bottom: 4px; }

/* has-photo utility: when a real <img class="cxb__media"> is present instead of the gradient */
.cxb--has-photo .cxb__media { opacity: 0.94; }