/* ═══════════════════════════════════════════════════════════════
   Image-based banner — full-bleed PNG with clickable CTA overlays
   3 sizes (mobile/tablet/desktop) swapped via <picture> sources.
   Aspect-ratios locked per breakpoint to prevent CLS.
   ═══════════════════════════════════════════════════════════════ */

.banner.banner-img-mode {
  /* image banners ignore the column grid */
}

.banner-image-wrap {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  background: transparent;
  /* Desktop aspect */
  aspect-ratio: 1920 / 600;
  max-width: none;
}

.banner-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ─── Placeholder shown when banner files haven't been uploaded yet ─── */
.banner-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    repeating-linear-gradient(135deg,
      transparent 0 18px,
      rgba(37,99,235,0.06) 18px 19px),
    var(--brand-surface, #EFF6FF);
  color: var(--ink-muted, #374151);
  font-family: var(--font-sans, system-ui), sans-serif;
  text-align: center;
  padding: 24px;
}
.banner-placeholder .ph-inner { max-width: 460px; }
.banner-placeholder .ph-icon {
  font-size: 36px;
  margin-bottom: 10px;
}
.banner-placeholder .ph-title {
  font: 700 17px/1.2 var(--font-display, inherit);
  color: var(--ink, #111827);
  letter-spacing: -0.01em;
  margin-bottom: 14px;
}
.banner-placeholder .ph-sub {
  font: 500 13px/1.7 var(--font-mono, ui-monospace, monospace);
  color: var(--brand, #2563EB);
}
.banner-placeholder .ph-sub code {
  background: rgba(37,99,235,0.08);
  padding: 2px 8px;
  border-radius: 5px;
  font-size: 12px;
}
.banner-placeholder .ph-hint {
  margin-top: 14px;
  font: 400 12px/1.4 var(--font-sans, inherit);
  color: var(--ink-subtle, #6B7280);
}
@media (max-width: 640px) {
  .banner-placeholder .ph-title { font-size: 15px; }
  .banner-placeholder .ph-sub   { font-size: 11.5px; }
  .banner-placeholder .ph-hint  { font-size: 11px; }
}

/* ─── DESKTOP (≥1024px) — show the full 1920×600 art at natural ratio.
   These are complete designed banners (text + visual baked in), so the
   whole composition must stay visible. Lock the 3.2:1 aspect and let it
   fill the available width with no cropping. */
@media (min-width: 1024px) {
  .banner-image-wrap {
    aspect-ratio: 1920 / 600;
    height: auto;
  }
  .banner-image {
    object-fit: cover;
    object-position: center;
  }
}

.banner-image-cta {
  position: absolute;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  transition: transform 180ms var(--ease-out), background 180ms var(--ease-out);
  z-index: 2;
}
.banner-image-cta:hover {
  background: rgba(255,255,255,0.10);
  transform: scale(1.02);
}
.banner-image-cta:active {
  transform: scale(0.98);
}
.banner-image-cta:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
}

/* When in image mode, the .banner becomes a flush container */
.banner.banner-img-mode { padding: 0 !important; }

/* The hero-v2 enhancement CSS pins .banner / .hero-track to a fixed 440px
   (sized for the text-based banners). Image banners size to their own
   aspect-ratio and are taller than 440px, so that fixed height makes the
   next section overlap and clip the banner's bottom (the CTAs). Let
   image-mode banners and their track grow to the image's natural height. */
.banner.banner-img-mode,
.banner.active.banner-img-mode {
  height: auto !important;
  min-height: 0 !important;
}
.hero-v2:has(.banner.active.banner-img-mode) .hero-track {
  height: auto !important;
  min-height: 0 !important;
}

/* Tablet: 1024×480 = 64:30 */
@media (max-width: 1023px) {
  .banner-image-wrap {
    aspect-ratio: 1024 / 480;
  }
}

/* Mobile: 750×900 = 5:6 (portrait) */
@media (max-width: 640px) {
  .banner-image-wrap {
    aspect-ratio: 750 / 900;
    max-width: 100%;
  }
}

/* In image mode, the global mobile-refinements that force visual-first
   ordering don't apply (no grid). Make sure the banner takes natural height. */
@media (max-width: 820px) {
  .banner.banner-img-mode { min-height: 0 !important; height: auto !important; }
  .banner.banner-img-mode .banner-image-wrap { margin: 0; }
}

/* The hero applies a per-banner accent gradient (accent-action / -brand /
   -success) plus 32px/36px vertical padding. With self-contained image
   banners that leaves a colored strip above and below the art. Image banners
   are full-bleed compositions, so drop the padding and accent background. */
.hero-v2:has(.banner.banner-img-mode) {
  padding: 0 !important;
  background: #fff !important;
  border-bottom: 0 !important;
}
.hero-v2:has(.banner.banner-img-mode)::before,
.hero-v2:has(.banner.banner-img-mode)::after {
  display: none !important;
}

/* Carousel controls (arrows + dots) sit in flow below the track and add a
   ~66px white strip under image banners. Overlay them on the banner instead. */
.hero-v2:has(.banner.banner-img-mode) .hero-controls {
  position: absolute !important;
  left: 0; right: 0; bottom: 16px;
  margin: 0 !important;
  padding: 0 !important;
  z-index: 5;
}

/* ═══════════════════════════════════════════════════════════════
   FRAMED BANNERS (desktop + tablet ≥ 641px)
   Contain the full-bleed art within the site width and round the
   corners so the 1920×600 art doesn't dominate the page. Mobile
   keeps the portrait full-bleed look.
   ═══════════════════════════════════════════════════════════════ */
@media (min-width: 641px) {
  .hero-v2:has(.banner.banner-img-mode) {
    padding: 14px 24px 8px !important;
    background: #fff !important;
  }

  /* Side navigation arrows — anchored to the framed banner edges */
  .hero-side-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    width: 46px;
    height: 46px;
    border-radius: 999px;
    border: 1px solid rgba(17,24,39,0.08);
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: var(--ink, #111827);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 6px 18px -6px rgba(17,24,39,0.30);
    transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease;
  }
  .hero-side-arrow:hover {
    background: #fff;
    transform: translateY(-50%) scale(1.06);
    box-shadow: 0 10px 24px -8px rgba(17,24,39,0.38);
  }
  .hero-side-prev { left: max(16px, calc((100% - 1180px) / 2 + 16px)); }
  .hero-side-next { right: max(16px, calc((100% - 1180px) / 2 + 16px)); }
  .banner.banner-img-mode .banner-image-wrap {
    max-width: 1180px;
    margin: 0 auto !important;
    border-radius: 24px;
    box-shadow: 0 20px 48px -22px rgba(17, 24, 39, 0.32),
                0 4px 14px -6px rgba(17, 24, 39, 0.12);
    border: 1px solid rgba(17, 24, 39, 0.05);
  }
  /* keep the overlaid carousel controls inside the framed area */
  .hero-v2:has(.banner.banner-img-mode) .hero-controls {
    bottom: 24px;
  }
}

/* Hide side arrows on mobile (static hero is used there) */
@media (max-width: 640px) {
  .hero-side-arrow { display: none !important; }
}

/* Dots row removed on framed desktop banners (side arrows handle nav) */
@media (min-width: 641px) {
  .hero-v2:has(.banner.banner-img-mode) .hero-controls { display: none !important; }
}