/* ==========================================================================
   Hero — Edge Pharma
   The Hero carousel's own content design: layout, typography, image
   treatment, and decorative scrim. Shared by every page that uses the
   Hero component (homepage, Products, etc.) so it only needs to be
   built once. Swiper's own mechanics (shell, pagination dots, arrows)
   live in css/components/slider.css.
   ========================================================================== */

/* ---------------------------------------------------------------------
   Hero shell
   --------------------------------------------------------------------- */

.hero {
  padding-block: 0;
}

/* ---------------------------------------------------------------------
   Slide layout — full-bleed photo fills the whole slide; text is
   overlaid on top, held legible by a dark gradient scrim over the image.
   --------------------------------------------------------------------- */

.hero__slide {
  position: relative;
  height: 560px;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(9, 20, 32, 0.82) 0%,
    rgba(9, 20, 32, 0.6) 40%,
    rgba(9, 20, 32, 0.25) 65%,
    rgba(9, 20, 32, 0.05) 85%
  );
}

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__text {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  height: 100%;
}

/* On the homepage only, .site-header is fixed + transparent and overlays
   the hero at every scroll position (only its background/logo swap on
   scroll — its position never moves). Reserve that header's height as
   top clearance so the vertically-centered slide content (long titles,
   stacked mobile CTAs) can never render above/behind it. Every other
   page already sits below an opaque, non-overlaying header via
   .main's own padding-top, so this is scoped to the homepage only. */
body.page-home .hero__text {
  padding-top: calc(88px + var(--space-6));
}

.hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

/* ---------------------------------------------------------------------
   Typography — white, set against the dark scrim
   --------------------------------------------------------------------- */

.hero__label {
  font-size: 14px;
  font-weight: var(--fw-semibold);
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-secondary);
  margin-bottom: var(--space-3);
}

.hero__title {
  max-width: 580px;
  font-family: var(--font-family-heading);
  font-weight: var(--fw-medium);
  line-height: 1.15;
  color: var(--color-white);
  font-size: clamp(2rem, 1.55rem + 2vw, 3rem); /* 32px → 48px */
}

.hero__subtitle {
  max-width: 520px;
  margin-top: var(--space-5);
  font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem); /* 16px → 18px */
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.82);
}

/* ---------------------------------------------------------------------
   CTA buttons — 52px height, 16px gap, both variants
   --------------------------------------------------------------------- */

.hero__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-4);
  margin-top: var(--space-7);
  width: 100%;
}

.hero__actions .btn {
  height: 52px;
  border-radius: var(--radius-sharp);
}

.hero__actions .btn--primary {
  background-color: var(--color-secondary);
}

.hero__actions .btn--primary:hover {
  background-color: #0f9c8d;
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.hero__actions .btn--outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.6);
}

.hero__actions .btn--outline:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
  color: var(--color-white);
  box-shadow: var(--shadow-md);
}

.hero__actions .btn--outline:focus-visible {
  outline: 2px solid var(--color-white);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------
   Slide content animation — fade + upward movement, staggered
   ========================================================================== */

.hero__label,
.hero__title,
.hero__subtitle,
.hero__actions,
.hero__media {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-default), transform 600ms var(--ease-default);
}

.swiper-slide-active .hero__label { transition-delay: 0ms; }
.swiper-slide-active .hero__title { transition-delay: 0ms; }
.swiper-slide-active .hero__subtitle { transition-delay: 120ms; }
.swiper-slide-active .hero__actions { transition-delay: 240ms; }
.swiper-slide-active .hero__media { transition-delay: 360ms; }

.swiper-slide-active .hero__label,
.swiper-slide-active .hero__title,
.swiper-slide-active .hero__subtitle,
.swiper-slide-active .hero__actions,
.swiper-slide-active .hero__media {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .hero__label,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__media {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---------------------------------------------------------------------
   Tablet (≥768px) — taller slide, row of CTAs
   --------------------------------------------------------------------- */

@media (min-width: 768px) {
  .hero__slide {
    height: 620px;
  }

  .hero__actions {
    flex-direction: row;
    align-items: center;
    width: auto;
  }

  .hero__actions .btn {
    width: auto;
  }
}

/* ---------------------------------------------------------------------
   Desktop (≥992px) — fixed 760px height
   --------------------------------------------------------------------- */

@media (min-width: 992px) {
  .hero {
    height: 760px;
    display: flex;
    align-items: center;
  }

  .hero__slide {
    height: 100%;
  }

  .hero__content {
    max-width: 560px;
  }
}