/* =============================================================
   TANMAYA - HERO SLIDER (velký úvodní banner na homepage)
   Doplněk k tanmaya.css, sekce "20. HOMEPAGE – ÚVODNÍ HERO BANNER".
   POZOR: načítat AŽ ZA tanmaya.css (přepisuje některá její pravidla).
   Ovládání (šipky + tečky) staví hero-slider.js.
   ============================================================= */

:root {
    /* Rychlost prolnutí mezi slidy */
    --tm-hero-fade: 0.55s;

    /* Zelené CTA na slidu "Letní bonus" */
    --tm-bonus-green: #1B5E4B;
    --tm-bonus-green-hover: #14483A;
    --tm-bonus-dot: #3BB273;

    /* ---------------------------------------------------------
       FOTKA SLIDU "LETNÍ BONUS"
       Obrázek už má oblouk i broskvový přechod zapečený v sobě,
       CSS ho jen správně ořízne. Měníš-li fotku, přepiš jen URL.
       --------------------------------------------------------- */
    --tm-bonus-img: url('https://obchod.tantramasaze.com/user/documents/upload/bannery/banner-main-letni-bez-textu-kratky.jpg');
}


/* -------------------------------------------------------------
   1. KONTEJNER SLIDERU
   .home-hero__main je v tanmaya.css flexbox; tady z něj děláme
   "stoh" (grid 1x1), ve kterém leží všechny slidy přes sebe.
   Výška kontejneru = výška nejvyššího slidu, takže se nic neořízne.
   ------------------------------------------------------------- */
.home-hero__main.home-hero__slider {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;   /* výška = nejvyšší slide, ne jen ten první */
    position: relative;
}

/* Jednotlivý slide - všechny na stejné pozici v mřížce */
.home-hero__slide {
    grid-area: 1 / 1;
    display: flex;
    min-width: 0;
    background: #ffffff;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--tm-hero-fade) ease;
}

/* Aktivní slide */
.home-hero__slide.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1;
}

/* Místo dole na tečky, ať nekolidují s CTA */
.home-hero__slider .home-hero__main-content,
.home-hero__slider .home-hero__bonus-content {
    padding-bottom: 48px;
}


/* -------------------------------------------------------------
   2. OVLÁDÁNÍ - šipky + tečky v jednom shluku vpravo dole
   (vkládá je hero-slider.js, aby se nic nepřekrývalo s textem)
   ------------------------------------------------------------- */
.home-hero__controls {
    position: absolute;
    right: 24px;
    bottom: 16px;
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 12px;
}

.home-hero__nav {
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid rgba(122, 92, 80, 0.3);
    border-radius: 50%;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.75);
    color: #7A5C50;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.home-hero__nav:hover {
    background: #ffffff;
    border-color: #7A5C50;
    color: #4A2C2A;
}
.home-hero__nav:focus-visible {
    outline: 2px solid #7A5C50;
    outline-offset: 2px;
}
.home-hero__nav svg {
    width: 14px;
    height: 14px;
    display: block;
}

.home-hero__dots {
    display: flex;
    align-items: center;
    gap: 8px;
}
.home-hero__dot {
    width: 9px;
    height: 9px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    background: rgba(122, 92, 80, 0.32);
    transition: background 0.25s ease, width 0.25s ease, border-radius 0.25s ease;
}
.home-hero__dot:hover { background: rgba(122, 92, 80, 0.55); }
.home-hero__dot.is-active {
    width: 26px;
    border-radius: 5px;
    background: #7A5C50;
}
.home-hero__dot:focus-visible {
    outline: 2px solid #7A5C50;
    outline-offset: 3px;
}


/* -------------------------------------------------------------
   3. SLIDE "LETNÍ BONUS"
   Vlevo fotka (oblouk i broskvový přechod jsou součástí JPG),
   vpravo bílá textová část. Bílý okraj fotky plynule navazuje
   na bílé pozadí textu - proto background-position: right.
   ------------------------------------------------------------- */
.home-hero__bonus-img {
    /* Stejná šířka jako fotka na slidu 1 (tanmaya.css: .home-hero__main-img),
       aby oblouk při prolnutí slidů "neposkočil". */
    flex: 0 0 56%;
    background-image: var(--tm-bonus-img);
    background-size: cover;
    background-position: right center;
    background-repeat: no-repeat;
    background-color: #ffffff;
}

.home-hero__bonus-content {
    flex: 1;
    padding: 32px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.home-hero__bonus-title {
    font-family: 'Canela Web', serif !important;
    font-weight: 400 !important;
    color: #4A2C2A;
    font-size: 38px;
    line-height: 1.15;
    margin: 0 0 16px;
}

/* Zlatý mezinadpis "Ke každé masáži od 150 minut" */
.home-hero__bonus-lead {
    color: #D0A768;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 10px;
}

.home-hero__bonus-list {
    list-style: none;
    margin: 0 0 20px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.home-hero__bonus-list li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    color: #4A2C2A;
    font-size: 15px;
    line-height: 1.45;
    margin: 0;
}
.home-hero__bonus-list li::before { content: none; }
.home-hero__bonus-list li strong { font-weight: 700; }

.home-hero__bonus-ico {
    flex: 0 0 auto;
    font-size: 15px;
    line-height: 1.45;
}
/* Text odrážky musí být v jednom <span>, jinak by ho flexbox
   rozsekal na samostatné položky a divně lámal řádky. */
.home-hero__bonus-txt {
    flex: 1 1 auto;
    min-width: 0;
}

/* CTA řádek */
.home-hero__slide--bonus .home-hero__ctas {
    margin-top: 4px;
    gap: 22px;
}
.home-hero__btn--green {
    background-color: var(--tm-bonus-green) !important;
    color: #ffffff !important;
}
.home-hero__slide--bonus .home-hero__btn--green:hover {
    background-color: var(--tm-bonus-green-hover) !important;
    color: #ffffff !important;
}

/* "On-line rezervace" se zelenou tečkou */
.home-hero__note {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #4A2C2A;
    font-size: 14px;
    font-weight: 500;
}
.home-hero__note::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--tm-bonus-dot);
    flex: 0 0 auto;
}


/* -------------------------------------------------------------
   4. TABLET (768 - 1100 px) - užší text, menší nadpis
   ------------------------------------------------------------- */
@media (max-width: 1100px) and (min-width: 768px) {
    .home-hero__bonus-content { padding: 26px 26px 48px; }
    .home-hero__bonus-title { font-size: 29px; margin-bottom: 12px; }
    .home-hero__bonus-lead { font-size: 15px; margin-bottom: 8px; }
    .home-hero__bonus-list { gap: 6px; margin-bottom: 16px; }
    .home-hero__bonus-list li,
    .home-hero__bonus-ico { font-size: 14px; }
    .home-hero__slide--bonus .home-hero__ctas { gap: 16px; }
}


/* -------------------------------------------------------------
   5. MOBIL (max 767 px) - fotka nahoře, text pod ní
   (tanmaya.css tu dává flex-direction:column na .home-hero__main,
   ten je teď grid - musíme to nastavit na .home-hero__slide)
   Fotka se přiblíží na nápoje, aby se v úzkém pruhu neukazoval
   oblouk s bílou plochou.
   ------------------------------------------------------------- */
@media (max-width: 767px) {
    .home-hero__slide {
        flex-direction: column;
    }

    /* Šipky na mobilu pryč - listuje se prstem a tečkami */
    .home-hero__nav { display: none; }
    .home-hero__controls { right: 18px; bottom: 14px; }

    .home-hero__slider .home-hero__main-content,
    .home-hero__slider .home-hero__bonus-content {
        padding-bottom: 40px;
    }

    /* Na mobilu neflexujeme - výšku slidu určuje jeho obsah,
       jinak by se vyšší slide oříznul podle toho nižšího. */
    .home-hero__slider .home-hero__main-img,
    .home-hero__slider .home-hero__bonus-img {
        flex: 0 0 auto;
        height: 220px;
        width: 100%;
    }
    .home-hero__slider .home-hero__main-content,
    .home-hero__slider .home-hero__bonus-content {
        flex: 0 0 auto;
    }
    .home-hero__bonus-img {
        background-size: cover;
        background-position: center;
    }
    .home-hero__bonus-content {
        padding: 22px 22px 40px;
    }
    .home-hero__bonus-title { font-size: 26px; margin-bottom: 12px; }
    .home-hero__bonus-lead { font-size: 14px; margin-bottom: 8px; }
    .home-hero__bonus-list { gap: 6px; margin-bottom: 16px; }
    .home-hero__bonus-list li,
    .home-hero__bonus-ico { font-size: 14px; }
    .home-hero__slide--bonus .home-hero__ctas { gap: 16px; }
    .home-hero__note { font-size: 13px; }
}


/* -------------------------------------------------------------
   6. OMEZENÍ ANIMACÍ (systémové nastavení uživatele)
   ------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .home-hero__slide { transition: none; }
    .home-hero__dot { transition: none; }
}