/* Promotional banners. Colours come from per-banner custom properties set by banners.js. */
.promo {
  --promo-bg: #0c3a1e;
  --promo-fg: #f1efe8;
  --promo-accent: #f1efe8;
  --promo-accent-fg: #030705;
  --promo-overlay: .5;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--promo-bg);
  color: var(--promo-fg);
  font-family: var(--serif, Georgia, serif);
}
.promo-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.promo--has-img::after { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--promo-bg); opacity: var(--promo-overlay); }

.promo-inner { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.5rem; width: min(100% - 2 * var(--gutter, 1.25rem), 78rem); margin-inline: auto; }
.promo--center .promo-inner { justify-content: center; text-align: center; }
.promo--left .promo-inner { justify-content: flex-start; text-align: left; }
.promo-copy { display: grid; gap: .35rem; }
.promo-title { font-weight: 500; }
.promo-badge {
  justify-self: start;
  font: 500 .72rem var(--sans, system-ui, sans-serif);
  letter-spacing: .28em;
  text-transform: uppercase;
  padding: .45rem .9rem .45rem 1.18rem;
  background: var(--promo-accent);
  color: var(--promo-accent-fg);
}
.promo--center .promo-badge { justify-self: center; }
.promo--bar .promo-badge { padding: .2rem .6rem .2rem .8rem; font-size: .66rem; letter-spacing: .2em; }
.promo-text { margin: 0; }

.promo-cta {
  display: inline-block;
  font: 500 .74rem var(--sans, system-ui, sans-serif);
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  padding: .8rem 1.5rem;
  background: var(--promo-accent);
  color: var(--promo-accent-fg);
  border: 1px solid var(--promo-accent);
  transition: background-color .4s cubic-bezier(.4, .9, .3, 1), color .4s cubic-bezier(.4, .9, .3, 1);
}
.promo-cta:hover { background: transparent; color: var(--promo-fg); border-color: currentColor; }
.promo :focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

/* Slim announcement strip above the header */
.promo--bar .promo-inner { min-height: 2.75rem; padding-block: .5rem; padding-inline-end: 2rem; }
.promo--bar .promo-copy { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; }
.promo--bar .promo-title { font: 500 .78rem var(--sans, system-ui, sans-serif); letter-spacing: .16em; text-transform: uppercase; }
.promo--bar .promo-text { font-size: 1.05rem; }
.promo--bar .promo-cta { padding: .45rem 1rem; font-size: .68rem; }
.promo--bar.promo--large .promo-inner { min-height: 3.5rem; }
.promo-close { position: absolute; right: .75rem; top: 50%; transform: translateY(-50%); width: 2.5rem; height: 2.5rem; display: grid; place-items: center; background: none; border: 0; color: inherit; font: 400 1.6rem/1 var(--sans, system-ui, sans-serif); cursor: pointer; opacity: .8; }
.promo-close:hover { opacity: 1; }

/* Large band between hero and collections */
.promo--band .promo-inner { flex-direction: column; align-items: flex-start; gap: 1.25rem; padding-block: clamp(2rem, 5vw, 3.5rem); }
.promo--band.promo--center .promo-inner { align-items: center; }
.promo--band .promo-title { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; }
.promo--band .promo-text { font-size: 1.25rem; max-width: 46ch; }
.promo--band.promo--compact .promo-inner { padding-block: clamp(1.25rem, 3vw, 2rem); }
.promo--band.promo--large .promo-inner { padding-block: clamp(3.5rem, 9vw, 7rem); }
.promo--band.promo--large .promo-title { font-size: clamp(2.4rem, 6vw, 4.2rem); }

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