/* Avalehe slaider. Slaidid tulevad assets/content/_hero.json failist, mille
   POS kirjutab (vali tooted: POS -> Lehed -> "Lisa bännerisse").
   Laetakse style.css JÄREL. */

.heroslider {
    position: relative;
    background: var(--dark);
    overflow: hidden;
    isolation: isolate;
}

/* Salongi foto taustaks. Originaal on kirju ja hele, seega tumendame ja
   võtame värvi maha — pilt jääb tekstuuriks, mitte konkureerivaks sisuks. */
.heroslider .hs-bg {
    position: absolute; inset: 0; z-index: -2;
    background-image: url("opt/hero-bg-960.webp");   /* tee on hero.css suhtes */
    background-size: cover; background-position: center 42%;
    filter: saturate(.45) brightness(.42) contrast(1.05);
    transform: scale(1.04);          /* varjab filtri servaefekti */
}
@media (min-width: 700px) {
    .heroslider .hs-bg { background-image: url("opt/hero-bg-1440.webp"); }
}
@media (min-width: 1400px) {
    .heroslider .hs-bg { background-image: url("opt/hero-bg-1920.webp"); }
}

/* Lehe peapealkiri on ekraanilugejale, sest slaidid vahetuvad ja neis on h2 */
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* Loor: vasak pool tekstile pea läbipaistmatu, paremal jääb salongist ainult
   aim — muidu konkureerib taust tootepildiga. */
.heroslider .hs-veil {
    position: absolute; inset: 0; z-index: -1;
    background:
        linear-gradient(100deg, rgba(17,19,24,.96) 0%, rgba(17,19,24,.9) 45%, rgba(17,19,24,.74) 100%),
        radial-gradient(120% 90% at 15% 100%, rgba(225,29,42,.14) 0%, transparent 60%);
}

.heroslider .wrap { position: relative; }

/* --- Slaidid --- */
.hs-track { position: relative; min-height: 520px; }
.hs-slide {
    position: absolute; inset: 0;
    display: grid; grid-template-columns: 1fr 1.05fr; gap: 30px;
    align-items: center; padding: 56px 0 76px;
    opacity: 0; visibility: hidden;
    transition: opacity .5s ease;
}
.hs-slide.on { opacity: 1; visibility: visible; position: relative; }

.hs-text .hs-badge {
    display: inline-block; background: var(--accent); color: #fff;
    font-size: 11.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
    padding: 5px 11px; border-radius: 5px; margin-bottom: 16px;
}
.hs-text .hs-series {
    color: var(--accent); font-weight: 700; letter-spacing: .14em;
    text-transform: uppercase; font-size: 12.5px; margin-bottom: 10px;
}
.hs-text h2 {
    color: #fff; font-size: clamp(32px, 5vw, 54px); line-height: 1.04;
    font-weight: 800; margin: 0 0 14px;
}
.hs-text .hs-tag {
    color: #c3c8d4; font-size: 18px; line-height: 1.5; margin: 0 0 22px; max-width: 30ch;
}
.hs-text .hs-price {
    display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin: 0 0 8px;
}
.hs-text .hs-price .from { color: #8b90a0; font-size: 13px; font-weight: 600; }
.hs-text .hs-price .now { color: #fff; font-size: 30px; font-weight: 800; line-height: 1; }
.hs-text .hs-price .now.sale { color: var(--accent); }
.hs-text .hs-price .was { color: #8b90a0; font-size: 17px; text-decoration: line-through; }
.hs-text .hs-note { color: #8b90a0; font-size: 12.5px; margin: 0 0 24px; }
.hs-text .btns { display: flex; gap: 12px; flex-wrap: wrap; }

/* Tootepilt — läbipaistev väljalõige (make_hero.py) */
.hs-shot { position: relative; }
.hs-shot img {
    width: 100%; height: auto; max-height: 400px; object-fit: contain;
    filter: drop-shadow(0 26px 34px rgba(0, 0, 0, .55));
}

/* --- Juhtnupud --- */
.hs-nav {
    position: absolute; bottom: 26px; left: 0; right: 0;
    display: flex; align-items: center; gap: 14px;
}
.hs-dots { display: flex; gap: 8px; }
.hs-dots button {
    width: 30px; height: 4px; border: 0; padding: 0; cursor: pointer; border-radius: 2px;
    background: rgba(255, 255, 255, .28); transition: .2s;
}
.hs-dots button:hover { background: rgba(255, 255, 255, .5); }
.hs-dots button.on { background: var(--accent); width: 46px; }

.hs-arrows { display: flex; gap: 8px; margin-left: auto; }
.hs-arrows button {
    width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
    background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
    color: #fff; font-size: 19px; line-height: 1;
    display: flex; align-items: center; justify-content: center; transition: .16s;
}
.hs-arrows button:hover { background: var(--accent); border-color: var(--accent); }

.hs-count { color: #8b90a0; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* --- Responsive --- */
@media (max-width: 900px) {
    .hs-track { min-height: 0; }
    .hs-slide {
        grid-template-columns: 1fr; gap: 18px; padding: 40px 0 74px;
        text-align: center;
    }
    .hs-slide .hs-text { order: 2; }
    .hs-slide .hs-shot { order: 1; }
    .hs-text .hs-tag { margin-left: auto; margin-right: auto; }
    .hs-text .hs-price, .hs-text .btns { justify-content: center; }
    .hs-shot img { max-height: 250px; }
    .hs-nav { justify-content: center; }
    .hs-arrows { display: none; }
}
@media (max-width: 640px) {
    .hs-text h2 { font-size: 30px; }
    .hs-text .hs-tag { font-size: 16px; }
}

/* Kui kasutaja on animatsioonid välja lülitanud, ei tee me üleminekuid ega autoplay'd */
@media (prefers-reduced-motion: reduce) {
    .hs-slide { transition: none; }
}