/* ════════════════════════════════════════════════════════════════════
   SymposiON · banners.css   —  banner kit
   Four formats: hero (sea-sunrise), promo (terracotta), strip (gold
   meander announcement), square social cards. Load after obsidian +
   mediterranean. Background illustrations are inlined as <span> with an
   svg inside (so currentColor tints them) OR <img> for fixed color.
   ════════════════════════════════════════════════════════════════════ */
.sym-banner { border: 1px solid var(--sym-hairline); overflow: hidden; position: relative; display: flex; align-items: center; }

/* ─── Hero · sea sunrise ────────────────────────────────────────── */
.sym-banner-hero { min-height: 220px;
  background: linear-gradient(105deg, #0B1620 0%, #10222E 46%, color-mix(in srgb, var(--med-aegean) 40%, #10222E) 100%); }
.sym-banner-hero .copy { padding: 42px 50px; position: relative; z-index: 3; max-width: 60%; }
.sym-banner-hero .sun { position: absolute; right: 8%; top: 50%; transform: translateY(-50%); width: 200px; color: var(--med-sun); opacity: .5; z-index: 1; }
.sym-banner-hero .wm  { position: absolute; right: -20px; bottom: -30px; width: 240px; color: var(--med-limewash); opacity: .08; z-index: 2; }
.sym-banner-hero .eyebrow { font-family: var(--sym-font-mono); font-size: 10px; letter-spacing: 2.6px; text-transform: uppercase; color: var(--med-sun); margin-bottom: 14px; }
.sym-banner-hero h3 { font-family: var(--sym-font-serif); font-weight: 500; font-size: 46px; line-height: 1; margin: 0 0 12px; color: var(--med-limewash); }
.sym-banner-hero h3 b { color: var(--med-sun); font-weight: 600; }
.sym-banner-hero p  { font-size: 13.5px; line-height: 1.6; color: rgba(237,230,212,.78); margin: 0 0 20px; max-width: 380px; }
.sym-banner-hero .cta { display: inline-flex; align-items: center; gap: 9px; background: var(--med-sun); color: #1A1304;
  font-family: var(--sym-font-mono); font-size: 11px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; padding: 12px 20px; text-decoration: none; }

/* ─── Promo · terracotta ────────────────────────────────────────── */
.sym-banner-promo { min-height: 120px; padding: 0 44px; justify-content: space-between;
  background: linear-gradient(100deg, var(--med-terracotta), color-mix(in srgb, var(--med-terracotta) 70%, var(--med-wine))); }
.sym-banner-promo .laurel { position: absolute; left: 36%; top: 50%; transform: translateY(-50%); width: 130px; color: #F4E6CE; opacity: .16; }
.sym-banner-promo .l { position: relative; z-index: 2; }
.sym-banner-promo .badge { font-family: var(--sym-font-mono); font-size: 9px; letter-spacing: 2px; color: #F4E6CE; opacity: .85; text-transform: uppercase; }
.sym-banner-promo h3 { font-family: var(--sym-font-serif); font-weight: 600; font-size: 32px; color: #FBF3E4; margin: 6px 0 0; }
.sym-banner-promo .cta { position: relative; z-index: 2; background: #FBF3E4; color: var(--med-wine);
  font-family: var(--sym-font-mono); font-size: 11px; letter-spacing: 2px; font-weight: 700; text-transform: uppercase; padding: 13px 22px; text-decoration: none; }

/* ─── Strip · gold meander announcement ─────────────────────────── */
.sym-banner-strip { min-height: 64px; padding: 0 26px; gap: 18px; background: var(--sym-bg-card); }
.sym-banner-strip .meander-bg { position: absolute; inset: 0; color: var(--sym-gold); opacity: .07;
  background-image: url('../images/bg-symbols/meander-band.svg'); background-repeat: repeat-x; background-size: auto 64px; }
.sym-banner-strip .ic { width: 30px; height: 30px; color: var(--sym-gold); position: relative; z-index: 2; flex-shrink: 0; }
.sym-banner-strip .tx { position: relative; z-index: 2; font-size: 13px; color: var(--sym-fg); }
.sym-banner-strip .tx b { color: var(--sym-gold); font-family: var(--sym-font-serif); font-size: 16px; }
.sym-banner-strip .cta { position: relative; z-index: 2; margin-left: auto; font-family: var(--sym-font-mono);
  font-size: 10px; letter-spacing: 1.6px; color: var(--sym-gold); text-transform: uppercase;
  border: 1px solid color-mix(in srgb, var(--sym-gold) 40%, transparent); padding: 8px 14px; cursor: pointer; text-decoration: none; }

/* ─── Square social cards ───────────────────────────────────────── */
.sym-banner-squares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sym-square { aspect-ratio: 1; border: 1px solid var(--sym-hairline); position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; }
.sym-square.sea   { background: linear-gradient(160deg, #10222E, color-mix(in srgb, var(--med-aegean) 35%, #10222E)); }
.sym-square.olive { background: linear-gradient(160deg, color-mix(in srgb, var(--med-olive) 55%, #14140C), #14140C); }
.sym-square.terra { background: linear-gradient(160deg, color-mix(in srgb, var(--med-terracotta) 60%, #1A0E0A), #1A0E0A); }
.sym-square .wm { position: absolute; right: -24px; top: -20px; width: 150px; opacity: .14; }
.sym-square.sea   .wm { color: #9FD0DC; } .sym-square.olive .wm { color: #D4E0A8; } .sym-square.terra .wm { color: #F4C3A8; }
.sym-square .eyebrow { font-family: var(--sym-font-mono); font-size: 8.5px; letter-spacing: 2px; text-transform: uppercase; opacity: .8; position: relative; }
.sym-square h4 { font-family: var(--sym-font-serif); font-weight: 500; font-size: 24px; margin: 6px 0 0; position: relative; line-height: 1.05; }
.sym-square.sea   .eyebrow { color: #9FD0DC; } .sym-square.sea   h4 { color: #EDF6F8; }
.sym-square.olive .eyebrow { color: #D4E0A8; } .sym-square.olive h4 { color: #F2F4E2; }
.sym-square.terra .eyebrow { color: #F4C3A8; } .sym-square.terra h4 { color: #FBEDE4; }

@media (max-width: 760px) {
  .sym-banner-hero .copy { max-width: 100%; padding: 30px 26px; }
  .sym-banner-hero .sun { opacity: .25; }
  .sym-banner-hero h3 { font-size: 34px; }
  .sym-banner-promo { flex-direction: column; align-items: flex-start; gap: 14px; padding: 22px 26px; }
  .sym-banner-squares { grid-template-columns: 1fr; }
}