/* ==========================================================
   mod_zsvenues – Podniky „Od večeře až do peřin"

   PRAVIDLO:
   Vzhled (barvy, typografie, spacing) = utility z typography.css,
   vypisované v šabloně jako VÝCHOZÍ a přepsatelné z nastavení modulu.
   Tento soubor řeší jen mechaniku pod hook třídami .mod-zsvenues__*,
   která se z nastavení nemaže (jinak by se rozpadl layout).
   ========================================================== */

/* ----------------------------------------------------------
   Hlavička sekce
   ---------------------------------------------------------- */
.mod-zsvenues__header{
    margin-bottom: 3rem;
}

.mod-zsvenues__divider{
    margin-bottom: 3rem;
}

/* ----------------------------------------------------------
   Karta – flex sloupec, aby tlačítka seděla na spodní hraně
   (dřív: h-100 d-flex flex-column v HTML)

   Ze sloupců děláme flex kontejnery: karta se pak roztáhne na výšku
   nejvyšší karty v řádku jako flex item (align-items:stretch), tedy
   bez závislosti na tom, jestli se propíše procentní výška.
   ---------------------------------------------------------- */
.mod-zsvenues .row > *{
    display: flex;
}
.mod-zsvenues__item{
    width: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
}

/* ----------------------------------------------------------
   Výřez fotky – vlastní box (nezávislý na Bootstrap .ratio,
   který v osekaném buildu Cassiopeia nemusí být).
   Poměr řídí --zsv-ratio (v %) z šablony.
   ---------------------------------------------------------- */
.mod-zsvenues__media{
    position: relative;
    width: 100%;
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    background: color-mix(in srgb, var(--c-canvas) 8%, transparent);
}
.mod-zsvenues__media::before{
    content: "";
    display: block;
    padding-top: var(--zsv-ratio, 66.66%);
}
.mod-zsvenues__media img{
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ----------------------------------------------------------
   Nadepisek – jen tracking; barvu řeší utilita (výchozí .text-grain-400)
   ---------------------------------------------------------- */
.mod-zsvenues__eyebrow{
    letter-spacing: .12em;
}

/* ----------------------------------------------------------
   Tlačítko – zarovnání na spodní hranu karty
   (dřív: align-self-start mt-auto v HTML)
   ---------------------------------------------------------- */
.mod-zsvenues__cta{
    margin-top: auto;
    align-self: flex-start;
}

/* ----------------------------------------------------------
   Volitelný barevný akcent podle „světů" (nadepisek + tlačítko).
   Akcent = none → nic se neděje, platí utility ze šablony/nastavení.
   !important kvůli přebití !important utilit z typography.css.
   ---------------------------------------------------------- */
.mod-zsvenues__item[data-accent="nest"]  .mod-zsvenues__eyebrow{ color: var(--world-nest) !important; }
.mod-zsvenues__item[data-accent="roots"] .mod-zsvenues__eyebrow{ color: var(--world-roots) !important; }
.mod-zsvenues__item[data-accent="apple"] .mod-zsvenues__eyebrow{ color: var(--world-apple) !important; }

.mod-zsvenues__item[data-accent="nest"]  .mod-zsvenues__cta{
    color: var(--world-nest) !important;
    border-color: color-mix(in srgb, var(--world-nest) 55%, transparent) !important;
}
.mod-zsvenues__item[data-accent="roots"] .mod-zsvenues__cta{
    color: var(--world-roots) !important;
    border-color: color-mix(in srgb, var(--world-roots) 55%, transparent) !important;
}
.mod-zsvenues__item[data-accent="apple"] .mod-zsvenues__cta{
    color: var(--world-apple) !important;
    border-color: color-mix(in srgb, var(--world-apple) 55%, transparent) !important;
}

.mod-zsvenues__item[data-accent="nest"]  .mod-zsvenues__cta:hover{ background: color-mix(in srgb, var(--world-nest) 12%, transparent) !important; }
.mod-zsvenues__item[data-accent="roots"] .mod-zsvenues__cta:hover{ background: color-mix(in srgb, var(--world-roots) 12%, transparent) !important; }
.mod-zsvenues__item[data-accent="apple"] .mod-zsvenues__cta:hover{ background: color-mix(in srgb, var(--world-apple) 12%, transparent) !important; }

/* ==========================================================
   VARIANTA „BAND" – barevný pás s vroubkovanou horní hranou
   Vroubky převzaty z mod_vipbox (radial-gradient kopule).
   Rozteč kopulí řídí --zsv-scallop, barvu pásu --zsv-band,
   barvu textu na pásu --zsv-band-ink.
   ========================================================== */

.mod-zsvenues__item--band{
    --zsv-band: var(--c-grain-400);
    --zsv-band-ink: var(--c-forest-400);
    --zsv-scallop: 14px;
    --zsv-slant: 2deg;
    --zsv-band-pad: clamp(.9rem, 2vw, 1.25rem);

    position: relative;
    border-radius: var(--radius-card, 16px);
    overflow: hidden;
    background: var(--zsv-band);
}

/* Fotka: bez vlastního zaoblení (ořezává karta), pevná dle poměru.
   Růst přebírá pás – karty v řádku se stretchují na stejnou výšku,
   fotky mají stejný poměr, takže i zlaté pásy vyjdou stejně vysoké. */
.mod-zsvenues__item--band .mod-zsvenues__media{
    border-radius: 0;
    flex: 0 0 auto;
}

/* Pás.
   Zlatou plochu i vroubky vykresluje JEDEN otočený ::before – díky tomu
   kopule kopírují sklon hrany. Náběh sklonu se počítá z šířky pásu
   (container-query jednotky), takže sedí při 2, 3 i 4 sloupcích. */
.mod-zsvenues__band{
    container-type: inline-size;
    position: relative;
    isolation: isolate;
    z-index: 1;
    flex: 1 1 auto;
    color: var(--zsv-band-ink);
    padding: var(--zsv-band-pad);
}

.mod-zsvenues__band::before{
    content: "";
    position: absolute;
    z-index: -1;

    /* přesah do stran i dolů – ořízne karta (overflow:hidden) */
    left: -30%;
    right: -30%;
    bottom: -200px;

    /* fallback pro prohlížeče bez tan() */
    top: calc(-1 * var(--zsv-scallop) / 2 - 14px);
    /* nejnižší bod sklonu (pravý konec) posadit těsně nad okraj pásu:
       ::before je 160 % šířky pásu → polovina = 80cqw */
    /* max(t, -t) = absolutní hodnota – funguje i pro záporný sklon */
    top: calc(-1 * var(--zsv-scallop) / 2 - 80cqw * max(tan(var(--zsv-slant)), 0 - tan(var(--zsv-slant))));

    transform: rotate(var(--zsv-slant));

    /* horní pruh = kopule, pod ním plná výplň */
    background:
        radial-gradient(
            calc(var(--zsv-scallop) / 2) at 50% 100%,
            var(--zsv-band) 99%, transparent 100%
        ) 0 0 / var(--zsv-scallop) calc(var(--zsv-scallop) / 2) repeat-x,
        linear-gradient(var(--zsv-band), var(--zsv-band))
            0 calc(var(--zsv-scallop) / 2 - 0.5px) / 100% 100% no-repeat;

    pointer-events: none;
}

/* Nadepisek na pásu = kurzíva bez trackingu („The") */
.mod-zsvenues__item--band .mod-zsvenues__eyebrow{
    letter-spacing: normal;
    font-style: italic;
}

/* Nadpis – přebít hardcoded h1–h6 color z typography.css */
.mod-zsvenues__band .mod-zsvenues__title{
    color: var(--zsv-band-ink);
}

/* Spodní řádek: text vlevo, tlačítko vpravo */
.mod-zsvenues__row{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.mod-zsvenues__band .mod-zsvenues__cta{
    margin-top: 0;
    align-self: auto;
    flex: none;
}

/* Barva pásu podle světa (volba „Podle akcentu karty").
   Apple projasněná kvůli kontrastu tmavého textu. */
.mod-zsvenues__item--band-world[data-accent="nest"] { --zsv-band: var(--world-nest); }
.mod-zsvenues__item--band-world[data-accent="roots"]{ --zsv-band: var(--world-roots); }
.mod-zsvenues__item--band-world[data-accent="apple"]{ --zsv-band: color-mix(in srgb, var(--world-apple) 85%, #fff); }

/* Na pásu nesmí platit akcentové obarvení z varianty „plain"
   (jinak by nadepisek/tlačítko splynuly s barvou pásu).
   Specificita (0,4,0) spolehlivě přebíjí (0,3,0) výše. */
.mod-zsvenues__item[data-accent] .mod-zsvenues__band .mod-zsvenues__eyebrow{
    color: var(--zsv-band-ink) !important;
}
.mod-zsvenues__item[data-accent] .mod-zsvenues__band .mod-zsvenues__cta{
    color: var(--zsv-band-ink) !important;
    border-color: color-mix(in srgb, var(--zsv-band-ink) 55%, transparent) !important;
    background: transparent !important;
}
.mod-zsvenues__item[data-accent] .mod-zsvenues__band .mod-zsvenues__cta:hover{
    background: color-mix(in srgb, var(--zsv-band-ink) 10%, transparent) !important;
}

/* Mobil – tlačítko pod text, ať se needituje na dva znaky */
@media (max-width: 400px){
    .mod-zsvenues__row{
        flex-direction: column;
        align-items: flex-start;
        gap: .75rem;
    }
}