/* =============================================================================
   Abordazh — home hero slider
   Desktop (>=768px): full-bleed 2.4:1 photo, headline overlaid on the empty
   side over a directional scrim.
   Mobile (<768px):   stacked — photo (4:5, focus per slide) + text panel.
   ========================================================================== */

.abz-hero {
  --abz-hero-green: #051e05;
  --abz-hero-accent: #d2dcdc;
  --abz-hero-radius: 0;
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: var(--abz-hero-green);
}

.abz-hero__viewport {
  position: relative;
  /* Height grows ~half as fast as width (vs a fixed 2.4:1), so wide screens
     get a panoramic band, not a full-height wall. 320px at 768px, capped 640. */
  height: clamp(320px, calc(160px + 20.8vw), 640px);
  overflow: hidden;
}

/* --- slides: crossfade --- */
.abz-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  z-index: 0;
}
.abz-hero__slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 1;
}

.abz-hero__figure { position: absolute; inset: 0; margin: 0; }
.abz-hero__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
/* masks slide: bias the crop upward so the eyes stay in frame */
.abz-hero__slide--focustop .abz-hero__img { object-position: 50% 30%; }
/* product slide: nudge the gear up slightly in the panoramic crop */
.abz-hero__slide--product .abz-hero__img { object-position: 50% 58%; }

/* directional scrim so overlaid text stays legible */
.abz-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(3, 14, 3, .82) 0%,
    rgba(3, 14, 3, .55) 30%,
    rgba(3, 14, 3, .10) 55%,
    rgba(3, 14, 3, 0) 72%);
}
.abz-hero__scrim--right {
  background: linear-gradient(270deg,
    rgba(3, 14, 3, .82) 0%,
    rgba(3, 14, 3, .55) 30%,
    rgba(3, 14, 3, .10) 55%,
    rgba(3, 14, 3, 0) 72%);
}

/* --- overlaid content (desktop) --- */
.abz-hero__content {
  --abz-hero-gutter: clamp(72px, 6vw, 96px);   /* min clears the prev/next arrows (~58px) */
  --abz-hero-band: 1280px;               /* centered content band on wide screens */
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  max-width: min(46%, 560px);
  display: flex;
  flex-direction: column;
  gap: 18px;
  color: #fff;
}
/* On wide screens the text aligns to a centered band, not the far viewport edge. */
.abz-hero__slide--textleft .abz-hero__content {
  left: max(var(--abz-hero-gutter), calc(50% - var(--abz-hero-band) / 2));
  right: auto;
  align-items: flex-start;
  text-align: left;
}
.abz-hero__slide--textright .abz-hero__content {
  right: max(var(--abz-hero-gutter), calc(50% - var(--abz-hero-band) / 2));
  left: auto;
  align-items: flex-end;
  text-align: right;
}

.abz-hero__title {
  margin: 0;
  font-weight: 700;
  font-size: clamp(24px, 3vw, 44px);
  line-height: 1.08;
  text-wrap: balance;
  text-wrap-style: balance;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.abz-hero__sub {
  margin: 0;
  font-size: clamp(14px, 1.25vw, 18px);
  line-height: 1.45;
  color: rgba(255, 255, 255, .92);
  max-width: 46ch;
  text-wrap: balance;
  text-wrap-style: balance;
}

.abz-hero__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 0 26px;
  border-radius: 6px;
  background: var(--abz-hero-accent);
  color: var(--abz-hero-green);
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}
.abz-hero__cta:hover,
.abz-hero__cta:focus-visible {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
  color: var(--abz-hero-green);
  text-decoration: none;
}
.abz-hero__cta:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* --- arrows (desktop only) --- */
.abz-hero__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: rgba(3, 14, 3, .38);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: background .18s ease;
}
.abz-hero__arrow:hover,
.abz-hero__arrow:focus-visible { background: rgba(3, 14, 3, .68); }
.abz-hero__arrow:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.abz-hero__arrow--prev { left: 14px; }
.abz-hero__arrow--next { right: 14px; }

/* --- dots --- */
.abz-hero__dots {
  position: absolute;
  bottom: clamp(14px, 3vh, 26px);
  left: 0;
  right: 0;
  z-index: 4;
  display: flex;
  gap: 9px;
  justify-content: center;
}
.abz-hero__dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .5);
  cursor: pointer;
  transition: background .18s ease, transform .18s ease, width .18s ease;
}
.abz-hero__dot:hover { background: rgba(255, 255, 255, .8); }
.abz-hero__dot.is-active {
  background: #fff;
  width: 22px;
  border-radius: 6px;
}
.abz-hero__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* =============================================================================
   Mobile (<768px): full-screen hero
   The photo fills the viewport between the fixed top bars and the bottom bar
   (100vh − topbar − mainbar − promobar − bottombar), with heading + CTA only,
   overlaid on the LOWER HALF over a bottom-up scrim.
   ========================================================================== */
@media (max-width: 767.98px) {
  .abz-hero {
    /* the visible band the body reserves on mobile: bars are 48 / 72 / 48 / 72.
       Use svh (small viewport height) so the photo does NOT grow/shrink when the
       mobile browser hides/shows its URL bar on scroll — 100vh does exactly that,
       which reads as the slide "zooming" while you swipe. vh line is the fallback. */
    --abz-hero-mh: calc(100vh - var(--abz-topbar-h) - var(--abz-mainbar-h) - 48px - var(--abz-bottombar-h));
    --abz-hero-mh: calc(100svh - var(--abz-topbar-h) - var(--abz-mainbar-h) - 48px - var(--abz-bottombar-h));
  }

  .abz-hero__viewport {
    aspect-ratio: auto;
    max-height: none;
    height: auto;
  }
  .abz-hero__slide {
    position: static;
    inset: auto;
    opacity: 1;
    visibility: visible;
    display: none;
    transition: none;
  }
  .abz-hero__slide.is-active { display: block; position: relative; }

  .abz-hero__figure {
    position: relative;
    inset: auto;
    width: 100%;
    aspect-ratio: auto;
    height: var(--abz-hero-mh);
    min-height: 360px;                       /* guard for short/landscape viewports */
  }
  .abz-hero__slide[data-pos="right"] .abz-hero__img { object-position: 78% center; }
  .abz-hero__slide[data-pos="left"]  .abz-hero__img { object-position: 22% center; }
  /* masks slide: keep the eyes in frame on the tall mobile crop too */
  .abz-hero__slide--focustop[data-pos="left"] .abz-hero__img { object-position: 22% 30%; }
  /* slides with a dedicated mobile-framed image (portrait/square): the composition is
     already baked in, so crop from the centre instead of the desktop data-pos bias */
  .abz-hero__slide--mfit .abz-hero__img { object-position: 50% center !important; }

  /* bottom-up scrim so the text over the lower half stays legible */
  .abz-hero__scrim,
  .abz-hero__scrim--right {
    display: block;
    background: linear-gradient(0deg,
      rgba(3, 14, 3, .88) 0%,
      rgba(3, 14, 3, .62) 26%,
      rgba(3, 14, 3, .12) 46%,
      rgba(3, 14, 3, 0) 56%);
  }

  /* heading + button only, centered in the lower half of the photo.
     left/right forced (!important) so EVERY slide sits flush to the screen edge —
     the desktop --textleft/--textright rules are 2-class selectors and would
     otherwise push the block ~72px in from the edge. */
  .abz-hero__content {
    position: absolute;
    top: 50%;
    bottom: 0;
    left: 0 !important;
    right: 0 !important;
    z-index: 3;
    transform: none;
    max-width: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start !important;
    text-align: left !important;
    gap: 16px;
    padding: 0 16px calc(12px + 26px);       /* clear the dots at the bottom */
    background: none;
    color: #fff;
  }
  .abz-hero__title { font-size: clamp(24px, 7vw, 32px); text-shadow: 0 2px 16px rgba(0, 0, 0, .45); }
  .abz-hero__sub   { display: none; }         /* mobile: heading + button only */
  .abz-hero__cta   { align-self: flex-start; }

  .abz-hero__arrow { display: none; }         /* swipe + dots on mobile */

  .abz-hero__dots { bottom: 12px; }
}

/* reduced motion: no crossfade transition */
@media (prefers-reduced-motion: reduce) {
  .abz-hero__slide { transition: none; }
}