/* Savonia_Slider (2026-11-04): banner slider, own file, loaded only where a slider is (layout savonia/slider.xml: home).
   Same look as the old home slider (#banner-slider-demo-4 + savonia-rail.css single mode + savonia-home.css), measured
   at 360-2560 px (tools/measure-old.js): one banner per view, CSS scroll-snap, dots under it, no arrows,
   7 px corners (10 px up to 991 px), 12 px gap between slides on phones, box ratio = the slider's desktop size. */
.sv-slider { position: relative; }
.sv-slider__track {
    display: flex; gap: 0; margin: 0; padding: 0; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; outline: 0;
}
.sv-slider__track::-webkit-scrollbar { display: none; }
.sv-slider--moving .sv-slider__track { scroll-snap-type: none; }
.sv-slider__track:focus-visible { box-shadow: 0 0 0 2px #a9cf45; border-radius: 10px; }
.sv-slider__slide { flex: 0 0 100%; min-width: 0; scroll-snap-align: start; overflow: hidden; border-radius: 7px; text-align: center; }
.sv-slider__slide img { max-width: 100%; height: auto; aspect-ratio: var(--sv-slider-ar, 1200 / 628); object-fit: cover; }
/* r4 (2026-11-04, Szabolcs): the banner fills the whole column (no empty bands left and right), the ratio stays,
   the box grows downwards (1920 px: 1084 x 567). The 917 px cap of the old CMS markup is gone. */
.sv-slider__slide img { display: block; width: 100%; }

/* arrows (sv-slider.js adds them): desktop only, transparent white circle, Savonia green chevron; green on hover */
.sv-slider__nav {
    position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center;
    width: 46px; height: 46px; margin-top: -23px; padding: 0; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%;
    background: rgba(255, 255, 255, .55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12); color: #4a6214; cursor: pointer; opacity: .9;
    transition: background-color .2s, color .2s, opacity .2s, transform .2s;
}
.sv-slider__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-slider__nav--prev { left: 14px; }
.sv-slider__nav--next { right: 14px; }
.sv-slider__nav:hover, .sv-slider__nav:focus-visible { background: rgba(169, 207, 69, .92); border-color: rgba(169, 207, 69, .92); color: #fff; opacity: 1; outline: 0; }
.sv-slider__nav:active { transform: scale(.94); }

/* the side menus next to the home slider (desktop): tighter rows, no chevrons (overrides savonia-home.css, loaded before) */
@media (min-width: 992px) {
    .cms-index-index #slideshow .side-custom-menu { margin-bottom: 12px !important; }
    .cms-index-index #slideshow .side-custom-menu h2 { padding: 12px 16px 6px; font-size: 15px; }
    .cms-index-index #slideshow .side-custom-menu ul { padding: 0 6px 6px; }
    .cms-index-index #slideshow .side-custom-menu li a { min-height: 33px; padding: 0 10px; font-size: 14px; }
    .cms-index-index #slideshow .side-custom-menu li a::after { content: none; display: none; }
}

.sv-slider__dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 2px; }
.sv-slider__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #d5d5d5; cursor: pointer; }
.sv-slider__dots button[aria-current="true"] { background: #a9cf45; width: 22px; border-radius: 5px; }

@media (max-width: 991px) {
    .sv-slider__slide { border-radius: 10px; }
    /* dots: same look, 44 px tall tap area */
    .sv-slider__dots { padding: 0; }
    .sv-slider__dots button { position: relative; margin: 18px 0; }
    .sv-slider__dots button::after { content: ""; position: absolute; inset: -18px -4px; }
}
@media (max-width: 767px) {
    .sv-slider__track { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-slider__track { scroll-behavior: auto; }
}
/* (last in the file, after the dots rules) desktop with a mouse: arrows instead of dots; phones and tablets (also a 1024 px iPad): dots + swipe, no arrows */
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .sv-slider__nav { display: flex; }
    .sv-slider__dots { display: none; }
}