/* Laiwa hero — first-party replacement for the Slider Revolution "home-new" module.
   Reproduces the original 1440x550 design grid: the stage scales uniformly with the
   container (scale = containerWidth / 1440), which the original achieved in JS.
   Here it is pure CSS: aspect-ratio on the container + percentage-positioned layers.

   2026-09-14 parity fix — measured against the live RevSlider at 390/768/1200/1440/1920:
   RevSlider scales the banner proportionally ONLY UP TO its 1440 grid width and then
   CAPS the height at the 550px grid height; above 1440 the layer grid stays 1440 wide,
   centred and at scale 1, while only the background image spans the full width.
   Measured live heights: 380w->145, 758w->290, 1190w->455, 1430w->546, 1910w->550.
   Without the cap this hero reached 730px at a 1910px container — 180px too tall. */

.laiwa-hero{position:relative;width:100%;aspect-ratio:1440/550;max-height:550px;overflow:hidden;background:#fff;isolation:isolate}
@supports not (aspect-ratio:1/1){.laiwa-hero{height:0;padding-bottom:38.1944%;max-height:550px}}

.laiwa-hero__slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .3s cubic-bezier(.645,.045,.355,1),visibility 0s linear .3s}
.laiwa-hero__slide.is-active{opacity:1;visibility:visible;transition:opacity .3s cubic-bezier(.645,.045,.355,1),visibility 0s}

/* full-bleed background, matching the original bgfit:cover */
.laiwa-hero__bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center center;display:block}
.laiwa-hero__bg--left{object-position:left center}

/* the 1440x550 design stage; layers are positioned as % of it so they scale with the container.
   It keeps the 1440/550 aspect and is centred, so that once .laiwa-hero is capped at 550px tall
   the stage stops growing and stays 1440 wide — matching RevSlider, whose layers measured the
   same absolute size (960px, 670px) at both a 1430px and a 1910px container. Below the grid
   width the stage is still exactly as wide as the hero, so nothing changes there. */
.laiwa-hero__stage{position:absolute;top:0;bottom:0;left:50%;transform:translateX(-50%);
  height:100%;width:auto;aspect-ratio:1440/550}
@supports not (aspect-ratio:1/1){.laiwa-hero__stage{left:0;transform:none;width:100%}}
.laiwa-hero__layer{position:absolute;display:block;max-width:none;height:auto}

/* ---- navigation (reproduces the original "uranus" style) ---- */
.laiwa-hero__arrow{position:absolute;top:50%;transform:translateY(-50%);width:50px;height:50px;
  display:flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;cursor:pointer;
  background:rgba(255,255,255,0);color:#fff;z-index:20;transition:opacity .3s}
.laiwa-hero__arrow:hover{opacity:.75}
.laiwa-hero__arrow--prev{left:20px}
.laiwa-hero__arrow--next{right:20px}
.laiwa-hero__arrow svg{width:40px;height:40px;display:block;fill:none;stroke:currentColor;stroke-width:2}
.laiwa-hero__arrow:focus-visible{outline:2px solid #fff;outline-offset:2px}

.laiwa-hero__bullets{position:absolute;left:50%;transform:translateX(-50%);bottom:10px;
  display:flex;gap:5px;z-index:20;margin:0;padding:0;list-style:none}
.laiwa-hero__bullet{position:relative;width:15px;height:15px;padding:0;border:0;cursor:pointer;
  border-radius:50%;background:transparent;box-shadow:0 0 0 2px rgba(255,255,255,0);
  transition:box-shadow .3s ease}
.laiwa-hero__bullet::before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;
  border-radius:50%;background-color:rgba(255,255,255,.3);
  transition:background-color .3s ease,transform .3s ease}
.laiwa-hero__bullet[aria-current="true"],.laiwa-hero__bullet:hover{box-shadow:0 0 0 2px rgba(255,255,255,1)}
.laiwa-hero__bullet[aria-current="true"]::before,.laiwa-hero__bullet:hover::before{transform:scale(.4);background-color:#fff}
.laiwa-hero__bullet:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* autoplay progress bar, as in the original */
.laiwa-hero__timer{position:absolute;left:0;top:0;height:5px;width:0;background:rgba(0,0,0,.15);z-index:21}

@media (prefers-reduced-motion:reduce){
  .laiwa-hero__slide{transition:none}
  .laiwa-hero__timer{display:none}
}