/* =========================================================================
   Banner Carousel — components/banner.css
   Horizontal slideshow of 4:3 promotional cards.
   Tokens from :root in styles.css.
   ========================================================================= */

/* ----- Carousel wrapper (full-bleed) ----- */

.banner-carousel {
  --banner-arrow-size: 48px;
  --banner-gap: var(--space-md);
  --banner-pad-y: var(--space-lg);
  --banner-slides: 3;
  position: relative;
  background: var(--color-brand-darker);
  padding: var(--banner-pad-y) 0;
  overflow: hidden;
}

/* ----- Dismiss button ----- */

.banner-carousel__dismiss {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-sm);
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  color: var(--color-text-light);
  cursor: pointer;
  transition: background var(--transition-base);
}

.banner-carousel__dismiss:hover,
.banner-carousel__dismiss:focus-visible {
  background: rgba(255, 255, 255, 0.3);
}

/* Dismiss animation */

.banner-carousel--dismissing {
  animation: banner-dismiss 0.3s ease forwards;
}

@keyframes banner-dismiss {
  to {
    opacity: 0;
    max-height: 0;
    padding: 0;
    overflow: hidden;
  }
}

/* ----- Inner container ----- */

.banner-carousel__inner {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  max-width: var(--max-width-container);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

/* ----- Nav arrows ----- */

.banner-carousel__arrow {
  flex: 0 0 var(--banner-arrow-size);
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--banner-arrow-size);
  height: var(--banner-arrow-size);
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-light);
  cursor: pointer;
  transition: background var(--transition-base), border-color var(--transition-base);
}

.banner-carousel__arrow:hover,
.banner-carousel__arrow:focus-visible {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.6);
}

.banner-carousel__arrow:disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}

.banner-carousel__arrow svg {
  width: 24px;
  height: 24px;
}

/* ----- Slide track ----- */

.banner-carousel__track {
  flex: 1;
  display: flex;
  gap: var(--banner-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.banner-carousel__track::-webkit-scrollbar {
  display: none;
}

/* ----- Slide card (4:3) ----- */

.banner-slide {
  flex: 0 0 calc(
    (100% - (var(--banner-slides) - 1) * var(--banner-gap))
    / var(--banner-slides)
  );
  aspect-ratio: 4 / 3;
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  overflow: hidden;
  scroll-snap-align: start;
  box-shadow: var(--shadow-sm);
}

/* Fallback for browsers without aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
  .banner-slide::before {
    content: '';
    display: block;
    padding-bottom: 75%;
  }
}

/* =========================================================================
   Theme modifiers
   ========================================================================= */

/* --- Dark --- */
.banner-slide--dark {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
}

.banner-slide--dark .banner-slide__header {
  background: linear-gradient(135deg, var(--color-brand-dark), var(--color-primary));
  color: var(--color-text-light);
}

.banner-slide--dark .banner-slide__btn--ghost {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.banner-slide--dark .banner-slide__btn--ghost:hover,
.banner-slide--dark .banner-slide__btn--ghost:focus-visible {
  background: rgba(21, 118, 154, 0.08);
}

/* --- Light --- */
.banner-slide--light {
  background: rgba(255, 255, 255, 0.95);
  color: var(--color-text);
}

.banner-slide--light .banner-slide__header {
  background: linear-gradient(135deg, var(--color-background-alt), var(--color-surface-muted));
  color: var(--color-heading);
}

.banner-slide--light .banner-slide__subtitle {
  color: var(--color-text-muted);
}

/* --- Primary --- */
.banner-slide--primary {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
}

.banner-slide--primary .banner-slide__header {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: var(--color-text-light);
}

/* --- Accent --- */
.banner-slide--accent {
  background: rgba(255, 255, 255, 0.92);
  color: var(--color-text);
}

.banner-slide--accent .banner-slide__header {
  background: linear-gradient(135deg, var(--color-accent), var(--color-card-orange));
  color: var(--color-text-light);
}

/* =========================================================================
   Slide internals
   ========================================================================= */

/* ----- Background image (covers entire card) ----- */

.banner-slide__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
}

/* ----- Header strip ----- */

.banner-slide__header {
  position: relative;
  z-index: 1;
  flex: 0 0 72px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xs) var(--space-md);
  text-align: center;
}

.banner-slide__title {
  margin: 0;
  font-family: var(--font-family-display);
  font-size: clamp(0.95rem, 0.85rem + 0.4vw, 1.25rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--letter-spacing-tight);
  color: inherit;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.banner-slide__subtitle {
  margin: 2px 0 0;
  font-family: var(--font-family-sans);
  font-size: clamp(0.7rem, 0.65rem + 0.2vw, 0.8rem);
  font-weight: 400;
  line-height: 1.25;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ----- Content area ----- */

.banner-slide__content {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: var(--space-xs) var(--space-md) var(--space-sm);
  overflow: hidden;
}

/* ----- Foreground image placements ----- */

.banner-slide__image {
  display: block;
  object-fit: contain;
}

/* full — covers entire card (behind header + content) */
.banner-slide__image--full {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

/* half — top half of content area */
.banner-slide__image--half {
  width: 100%;
  max-height: 50%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-xs);
}

/* bottom-third — lower third of content area */
.banner-slide__image--bottom-third {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 33%;
  object-fit: cover;
}

/* bottom-strip — thin decorative band */
.banner-slide__image--bottom-strip {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 20%;
  object-fit: cover;
}

/* lower-right — small anchored image */
.banner-slide__image--lower-right {
  position: absolute;
  bottom: var(--space-sm);
  right: var(--space-sm);
  width: 30%;
  max-width: 100px;
  height: auto;
  max-height: 60%;
  z-index: 0;
}

/* lower-left — mirrored */
.banner-slide__image--lower-left {
  position: absolute;
  bottom: var(--space-sm);
  left: var(--space-sm);
  width: 30%;
  max-width: 100px;
  height: auto;
  max-height: 60%;
  z-index: 0;
}

/* ----- Body zone ----- */

.banner-slide__body {
  position: relative;
  z-index: 1;
  flex: 1;
  overflow: hidden;
}

.banner-slide__body p {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.4;
}

.banner-slide__list {
  margin: 0;
  padding-left: var(--space-md);
  font-size: 0.75rem;
  line-height: 1.35;
  list-style: disc;
}

.banner-slide__list li {
  margin-bottom: var(--space-2xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Metrics format */
.banner-slide__metrics {
  display: flex;
  gap: var(--space-sm);
  margin: 0;
}

.banner-slide__metric {
  text-align: center;
}

.banner-slide__metric-value {
  display: block;
  font-family: var(--font-family-display);
  font-size: var(--font-size-h4);
  font-weight: 700;
  line-height: 1;
}

.banner-slide__metric-label {
  display: block;
  font-size: 0.75rem;
  opacity: 0.8;
}

/* ----- CTA zone ----- */

.banner-slide__cta {
  position: relative;
  z-index: 1;
  display: flex;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-xs);
}

.banner-slide__btn {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-family: var(--font-family-sans);
  font-size: 0.8rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition-base), color var(--transition-base);
}

.banner-slide__btn--primary {
  background: var(--color-primary);
  color: var(--color-text-light);
}

.banner-slide__btn--primary:hover,
.banner-slide__btn--primary:focus-visible {
  background: var(--color-primary-dark);
}

.banner-slide__btn--ghost {
  background: transparent;
  color: inherit;
  border: 1px solid currentColor;
}

.banner-slide__btn--ghost:hover,
.banner-slide__btn--ghost:focus-visible {
  background: rgba(255, 255, 255, 0.12);
}

/* Light theme CTA overrides */
.banner-slide--light .banner-slide__btn--ghost {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.banner-slide--light .banner-slide__btn--ghost:hover,
.banner-slide--light .banner-slide__btn--ghost:focus-visible {
  background: rgba(21, 118, 154, 0.08);
}

/* =========================================================================
   Responsive
   ========================================================================= */

/* Tablet — 2 visible */
@media (max-width: 1023px) {
  .banner-carousel {
    --banner-slides: 2;
  }
}

/* Mobile — 1 visible */
@media (max-width: 767px) {
  .banner-carousel {
    --banner-slides: 1;
    --banner-gap: var(--space-sm);
    --banner-arrow-size: 40px;
    --banner-pad-y: var(--space-md);
  }

  .banner-carousel__arrow svg {
    width: 20px;
    height: 20px;
  }

  .banner-slide__title {
    font-size: 1.1rem;
  }

  .banner-slide__list {
    font-size: 0.8rem;
  }

  .banner-slide__btn {
    font-size: 0.75rem;
  }
}

/* Small mobile */
@media (max-width: 479px) {
  .banner-carousel__inner {
    padding: 0 var(--space-xs);
    gap: var(--space-xs);
  }
}

/* =========================================================================
   Reduced motion
   ========================================================================= */

@media (prefers-reduced-motion: reduce) {
  .banner-carousel__track {
    scroll-behavior: auto;
  }

  .banner-carousel--dismissing {
    animation: none;
    display: none;
  }
}