/* Savonia_HomeBanners (2026-11-05): the home page banner rows, own file, home page only (layout savonia/homebanners.xml).
   Desktop/tablet: grid, equal heights per row, 20 px gaps (16 px up to 991 px), rounded cards like the product cards.
   Phones (up to 767 px):
     - "pair": 2 narrow tiles side by side, a wide one full width on top (all visible at once, nothing to swipe);
     - "strip": one row you swipe sideways (scroll-snap); the next tile peeks in (portrait tiles 66 %, square 82 %),
       dots under it (sv-homebanners.js), the strip runs to the screen edge, the first tile on the page gutter.
   Same dot look as the slider (sv-slider.css). Tokens: --sv-radius, --sv-shadow, --sv-green, --sv-menu-ink. */
.sv-hb { --sv-hb-gap: 20px; position: relative; padding: 28px 0; }
.sv-hb__track {
    display: grid; grid-template-columns: repeat(var(--sv-hb-cols, 4), minmax(0, 1fr)); gap: var(--sv-hb-gap);
    margin: 0; padding: 0; list-style: none;
}
.sv-hb__item {
    position: relative; display: block; min-width: 0; overflow: hidden;
    border-radius: var(--sv-radius, 10px); background: #fff; box-shadow: var(--sv-shadow, 0 2px 12px rgba(0, 0, 0, .07));
    color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent;
    transition: transform .25s ease, box-shadow .25s ease;
}
.sv-hb__item--wide { grid-column: span 2; }
.sv-hb__item picture { display: block; }
.sv-hb__item img {
    display: block; width: 100%; height: auto; max-width: none; aspect-ratio: var(--sv-hb-ar, 3 / 4); object-fit: cover;
    transition: transform .4s ease;
}
.sv-hb__item:focus-visible { outline: 3px solid var(--sv-green, #a9cf45); outline-offset: 3px; }

/* optional call to action (admin "CTA text"): a white pill at the bottom, Savonia green ink; green on hover */
.sv-hb__cta {
    position: absolute; left: 50%; bottom: 16px; z-index: 1; display: inline-flex; align-items: center; gap: 4px;
    max-width: calc(100% - 24px); padding: 9px 14px 9px 18px; border-radius: 999px;
    background: rgba(255, 255, 255, .95); box-shadow: 0 2px 10px rgba(0, 0, 0, .14);
    color: var(--sv-menu-ink, #4f6b10); font-size: 14px; font-weight: 700; line-height: 1.2; white-space: nowrap;
    transform: translateX(-50%); transition: background-color .2s, color .2s;
}
.sv-hb__cta svg { width: 16px; height: 16px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

@media (hover: hover) and (pointer: fine) {
    .sv-hb__item:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, .13); }
    .sv-hb__item:hover img { transform: scale(1.03); }
    .sv-hb__item:hover .sv-hb__cta { background: var(--sv-green, #a9cf45); color: #fff; }
}
@media (prefers-reduced-motion: reduce) {
    .sv-hb__item, .sv-hb__item img { transition: none; }
    .sv-hb__item:hover, .sv-hb__item:hover img { transform: none; }
}

.sv-hb__dots { display: none; }

@media (max-width: 991px) {
    .sv-hb { --sv-hb-gap: 16px; padding: 22px 0; }
}

/* ---------- phones ---------- */
@media (max-width: 767px) {
    .sv-hb { --sv-hb-gap: 12px; padding: 16px 0 18px; }
    .sv-hb__cta { bottom: 10px; padding: 7px 10px 7px 13px; font-size: 13px; }

    /* pair: 2 columns, wide tiles full width first */
    .sv-hb--pair .sv-hb__track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sv-hb--pair .sv-hb__item--wide { grid-column: 1 / -1; order: -1; }

    /* strip: swipe sideways, edge to edge (page gutter 15 px), snap to the gutter */
    .sv-hb--strip .sv-hb__track {
        display: flex; gap: var(--sv-hb-gap); margin: 0 -15px; padding: 4px 15px 10px;
        overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding: 0 15px; scroll-behavior: smooth;
        -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; position: relative;
    }
    .sv-hb--strip .sv-hb__track::-webkit-scrollbar { display: none; }
    .sv-hb--strip .sv-hb__item { flex: 0 0 82%; scroll-snap-align: start; }
    .sv-hb--strip.sv-hb--portrait .sv-hb__item { flex-basis: 66%; }
    .sv-hb--strip .sv-hb__item--wide { flex-basis: 88%; }

    .sv-hb--strip .sv-hb__dots { display: flex; justify-content: center; gap: 8px; }
    .sv-hb__dots button { position: relative; width: 9px; height: 9px; margin: 8px 0 0; padding: 0; border: 0; border-radius: 50%; background: #d5d5d5; cursor: pointer; transition: width .2s, background-color .2s; }
    .sv-hb__dots button::after { content: ""; position: absolute; inset: -14px -4px; }   /* 37 x 17 px tap area, rows stay tight */
    .sv-hb__dots button[aria-current="true"] { width: 22px; border-radius: 5px; background: var(--sv-green, #a9cf45); }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
    .sv-hb--strip .sv-hb__track { scroll-behavior: auto; }
}
/* small tablets / phones in landscape: show more of the next tile */
@media (min-width: 480px) and (max-width: 767px) {
    .sv-hb--strip .sv-hb__item { flex-basis: 56%; }
    .sv-hb--strip.sv-hb--portrait .sv-hb__item { flex-basis: 42%; }
}