/**
 * @file
 * Homepage hero carousel — full-bleed photo slides with text overlay.
 *
 * Markup comes from the Views templates
 * (views-view-unformatted--hero.html.twig + views-view-fields--hero.html.twig).
 * Colours, spacing and type all reference the theme tokens; no :root here.
 * Loads in the `frontpage` library, so it only ships on the front page.
 */

.hero-carousel {
  position: relative;
  overflow: hidden;
  background: var(--swalim-color-blue-deep);
}
.hero-carousel__track {
  display: flex;
  transition: transform var(--duration-slow, 420ms) var(--ease-out);
  will-change: transform;
}
.hero-carousel.is-static .hero-carousel__track { transition: none; }

.hero-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  min-height: clamp(360px, 52vh, 560px);
  display: flex;
}
.hero-slide__media,
.hero-slide__scrim { position: absolute; inset: 0; }
.hero-slide__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* darken the left/bottom so white text always clears contrast */
.hero-slide__scrim {
  background:
    linear-gradient(90deg,
      rgb(19 51 74 / 82%) 0%,
      rgb(19 51 74 / 55%) 38%,
      rgb(19 51 74 / 12%) 68%,
      rgb(19 51 74 / 0%) 100%),
    linear-gradient(0deg, rgb(19 51 74 / 45%) 0%, rgb(19 51 74 / 0%) 40%);
}

.hero-slide__inner {
  position: relative;
  z-index: 1;
  align-self: center;
  width: 100%;
  padding-block: var(--space-xl);
}
.hero-slide__body { max-width: 46rem; }

.hero-slide__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-2xs);
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--swalim-color-accent);
  color: var(--swalim-color-accent-ink);
  font-family: var(--font-body);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.hero-slide__title {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-3xl, clamp(2.25rem, 1.7rem + 2.8vw, 3.75rem));
  line-height: var(--lh-tight);
  letter-spacing: -0.02em;
  color: var(--swalim-color-on-dark);
  text-wrap: balance;
}
.hero-slide__text {
  margin-top: var(--space-sm);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--swalim-color-on-dark-muted);
  max-width: 38rem;
}
.hero-slide__actions { margin-top: var(--space-lg); }
/* the Views link field renders an <a>; style it as the primary CTA */
.hero-slide__actions a {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--swalim-color-accent);
  color: var(--swalim-color-accent-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: background var(--duration-fast) var(--ease-out);
}
.hero-slide__actions a:hover { background: var(--swalim-color-accent-on-dark); }
.hero-slide__actions a::after {
  content: "→";
  font-size: 1.05em;
  line-height: 1;
}

/* ---------- controls ---------- */
.hero-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 16%);
  color: var(--swalim-color-on-dark);
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--duration-fast) var(--ease-out);
}
.hero-carousel__arrow:hover { background: rgb(255 255 255 / 30%); }
.hero-carousel__arrow--prev { left: var(--space-sm); }
.hero-carousel__arrow--next { right: var(--space-sm); }

.hero-carousel__dots {
  position: absolute;
  bottom: var(--space-md);
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  gap: var(--space-2xs);
}
.hero-carousel__dot {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 40%);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-out), width var(--duration-fast);
}
.hero-carousel__dot.is-current {
  width: 26px;
  border-radius: 5px;
  background: var(--swalim-color-accent);
}

/* single slide — hide the machinery */
.hero-carousel[data-count="1"] .hero-carousel__arrow,
.hero-carousel[data-count="1"] .hero-carousel__dots { display: none; }

@media (max-width: 768px) {
  .hero-carousel__arrow { display: none; }         /* swipe / dots on mobile */
  .hero-carousel__slide { min-height: clamp(320px, 60vh, 460px); }
  .hero-slide__text { font-size: var(--fs-md); }
}

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

/* clear the sticky header so the eyebrow/headline aren't clipped */
.hero-slide__inner { padding-block: calc(var(--space-xl) + 24px) var(--space-xl); }