/* ═══════════════════════════════════════════════════════════════
   Image Banner — a single (optionally linked) promotional image
   ═══════════════════════════════════════════════════════════════ */

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner {
  width: 100%;
  padding: var(--image-banner-pad-y, 24px) 0;
}

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-container {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 clamp(16px, 4vw, 64px);
}

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-frame {
  display: block;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--color-surface-alt);
}

/* Two or three banners: stacked on phones, side by side from tablets up. */
.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-grid {
  display: grid;
  align-items: start;
  gap: 12px;
}

@media (min-width: 768px) {
  .cc_pD1lGtPUQa_nZ2NphvKNc .image-banner--cols-2 .image-banner-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-md);
  }

  .cc_pD1lGtPUQa_nZ2NphvKNc .image-banner--cols-3 .image-banner-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }
}

@media (min-width: 1024px) {
  .cc_pD1lGtPUQa_nZ2NphvKNc .image-banner--cols-3 .image-banner-grid {
    gap: var(--space-md);
  }
}

/* Full width (single banner only): edge to edge, no rounding. */
.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner--full .image-banner-container {
  max-width: none;
  padding: 0;
}

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner--full .image-banner-frame { border-radius: 0; }

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-picture { display: block; }

/* The image keeps its own proportions, so nothing gets cropped. */
.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-img {
  display: block;
  width: 100%;
  height: auto;
  transition: opacity 200ms ease;
}

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-link:hover .image-banner-img { opacity: 0.94; }

.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-link:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Empty state until an image is chosen. */
.cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-placeholder {
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
}

@media (min-width: 768px) {
  .cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-placeholder { aspect-ratio: 3 / 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cc_pD1lGtPUQa_nZ2NphvKNc .image-banner-img { transition: none; }
}