/* ======================================================
   HERO — Ópticas Pavía
   ------------------------------------------------------
   Business rule: the FULL slide image must always be
   visible, on every viewport and device. No cropping.

   That rules out `cover`, which crops by definition.
   The slide image uses `contain` inside a container with
   a stable aspect ratio, and the leftover space is filled
   with a blurred copy of the same image so the frame never
   shows empty bars.

   The container ratio is stable (not per-image) on purpose:
   the ERP serves slides ranging from 0.73 to 2.74 aspect
   ratio, so sizing the hero to each image would make the
   page jump violently between slides.
   ====================================================== */

:root {
    /* Measured from the live page: the header nav and the section that follows
       the hero. Keep these in sync if either block is restyled. */
    --hero-fill-top: #212529;
    --hero-fill-bottom: #ffffff;
}

.hero-section {
    position: relative;
    overflow: hidden;
    background-color: #111111;
    /* The template's nav is `position: absolute` with an opaque background and
       the header box itself collapses to 0px, so without this padding the nav
       sits ON TOP of the slide and hides its first ~98px. That is invisible to
       any object-fit measurement -- the image is laid out correctly and simply
       covered. Reserve the nav's height so the slide starts below it.
       JS keeps --hero-header-offset in sync with the real nav height. */
    /* Full shorthand, not padding-top: the class selector must also beat the
       template's `section { padding: ... }` element rule. The markup no longer
       carries Bootstrap's `p-0`, whose !important overrode this. */
    padding: var(--hero-header-offset, 98px) 0 0 0;
}

.hero-swiper {
    width: 100%;
    /* Matches the 1920x700 upload guideline: a slide that
       follows it fills the frame edge to edge, no backdrop. */
    aspect-ratio: 1920 / 700;
    min-height: 300px;
    height: auto;
}

/* NO max-height here. A viewport-based cap (78vh) overrides aspect-ratio on
   any window shorter than ~900px, shrinking the frame while the width stays
   at 100%. The frame then becomes wider than 2.743, so even a pixel-perfect
   1920x700 slide gets scaled down with ~138px of blurred filler per side.
   That breaks the contract this component exists to keep: a slide uploaded at
   the documented size must fill the frame edge to edge, on every window. */

/* On narrow screens the ratio alone yields a very short strip, so a
   min-height keeps the hero present. Keep it close to the natural
   height though: every pixel above it becomes blurred filler. */
@media (max-width: 767px) {
    .hero-swiper { min-height: 200px; }
}

/* Filler for whatever the contained slide cannot cover. Instead of a blurred
   copy of the image, the leftover space continues the two blocks the hero sits
   between: the site header above, the first content section below. The hard
   stop sits at 50%, which is exactly the contained image's vertical centre, so
   in the usual letterbox case the seam is hidden behind the image itself and
   only the two solid bands show. Kept on the swiper, not the slide, so it never
   fades in and out with Swiper's crossfade. */
.hero-swiper {
    position: relative;
    background: linear-gradient(
        to bottom,
        var(--hero-fill-top) 0 50%,
        var(--hero-fill-bottom) 50% 100%
    );
}

.hero-swiper .swiper-wrapper {
    height: 100%;
}

/* Crafto/Swiper turn slides into flex boxes, which would top-align the
   contained image and push all the filler to one side. Keep it a plain
   block so `contain` centers the slide in both axes. */
.hero-swiper .swiper-slide {
    display: block;
    height: 100%;
}

.hero-slide {
    position: relative;
    overflow: hidden;
    background: transparent;
}

/* The actual slide: always complete, never cropped. */
.hero-slide__img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* ---------- Navigation arrows ---------- */
.slider-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.45);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
    padding: 0;
    outline: none;
    line-height: 1;
}

.slider-nav-btn:hover,
.slider-nav-btn:focus-visible {
    background: rgba(140, 198, 63, 0.85);
    border-color: #8cc63f;
    transform: translateY(-50%) scale(1.08);
}

.slider-nav-btn i {
    font-size: 28px;
    display: block;
    line-height: 1;
}

.slider-nav-prev { left: 28px; }
.slider-nav-next { right: 28px; }

@media (max-width: 767px) {
    .slider-nav-btn { width: 40px; height: 40px; }
    .slider-nav-btn i { font-size: 20px; }
    .slider-nav-prev { left: 10px; }
    .slider-nav-next { right: 10px; }
}