/* ==========================================================================
   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%;
}

.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;
  }
}