/* ============================================================
   Blok „Právě probíhá – data z IS“ (custom/block-soubezne-probiha-is), 1.9.9.
   Vlastní třídy .abf-sb* — záměrně BEZ .red-bg (přebarvuje li/p na bílou)
   a bez .banner-slider (slick). Pás bere barvu a čitelné popředí ze stejných
   tokenů jako ostatní barevné sekce (--container-bg-gradient, --abf-on-container).
   Jedna akce = varianta C (věta vlevo, karta vpravo), víc akcí = mřížka,
   na mobilu kompaktní řádky s ponechaným popisem akce.
   ============================================================ */

.section.abf-sb {
    background-color: var(--heading-red-solid, #d91920);
    background-image:
        linear-gradient(var(--abf-container-scrim, transparent), var(--abf-container-scrim, transparent)),
        var(--container-bg-gradient, linear-gradient(#d91920, #d91920));
    color: var(--abf-on-container, #fff);
}

.abf-sb .abf-sb__in {
    align-items: stretch;
    gap: 32px;
}

.abf-sb .abf-sb__hlava,
.abf-sb .abf-sb__seznam {
    width: 100%;
}

.abf-sb .abf-sb__nadpis {
    margin: 0;
    font-size: clamp(26px, 2.6vw, 36px);
    font-weight: 900;
    line-height: 1.1;
    text-transform: uppercase;
    color: inherit;
}

.abf-sb .abf-sb__veta {
    margin: 12px 0 0;
    max-width: 44ch;
    font-size: 18px;
    line-height: 1.5;
    color: inherit;
}

.abf-sb .abf-sb__veta strong {
    font-weight: 900;
    white-space: nowrap;
}

/* Víc akcí: hlavička přes celou šířku, věta se nemusí lámat tak brzy. */
.abf-sb--vice .abf-sb__veta {
    max-width: 64ch;
}

/* ---------- karty ---------- */
.abf-sb .abf-sb__seznam {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.abf-sb .abf-sb__seznam[data-n="2"],
.abf-sb .abf-sb__seznam[data-n="4"] {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.abf-sb .abf-sb__seznam[data-n="3"],
.abf-sb .abf-sb__seznam[data-n="5"],
.abf-sb .abf-sb__seznam[data-n="6"] {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.abf-sb .abf-sb__karta {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    margin: 0;
    padding: 24px 24px 20px;
    border-radius: 8px;
    background: #fff;
    color: #191919;
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transition: transform 0.16s ease-out, box-shadow 0.16s ease-out;
}

.abf-sb .abf-sb__telo {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

/* Pořadí na kartě podle návrhu C: štítek → termín → název → popis.
   V HTML je název první (nadpis karty), pořadí řídí CSS. */
.abf-sb .abf-sb__stitek { order: 0; }
.abf-sb .abf-sb__termin { order: 1; }
.abf-sb .abf-sb__nazev  { order: 2; }
.abf-sb .abf-sb__popis  { order: 3; }

.abf-sb .abf-sb__stitek {
    align-self: flex-start;
    margin: 0 0 12px;
    padding: 4px 10px;
    border-radius: 3px;
    background: var(--heading-red-solid, #d91920);
    color: var(--abf-on-brand, #fff);
    font-size: 11px;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

/* Termín a odkaz jsou tmavé: barva značky na bílé kartě na části webů nesplní kontrast. */
.abf-sb .abf-sb__termin {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #191919;
}

.abf-sb .abf-sb__nazev {
    margin: 0 0 8px;
    font-size: 21px;
    font-weight: 900;
    line-height: 1.18;
    text-transform: uppercase;
    overflow-wrap: anywhere;
    color: inherit;
}

.abf-sb .abf-sb__seznam[data-n="4"] .abf-sb__nazev,
.abf-sb .abf-sb__seznam[data-n="5"] .abf-sb__nazev,
.abf-sb .abf-sb__seznam[data-n="6"] .abf-sb__nazev {
    font-size: 19px;
}

.abf-sb .abf-sb__odkaz {
    color: inherit;
    text-decoration: none;
}

/* Celá karta je klikací, odkaz ale zůstává na názvu (čtečka ho přečte jako název akce). */
.abf-sb .abf-sb__odkaz::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
}

.abf-sb .abf-sb__odkaz:focus {
    outline: none;
}

.abf-sb .abf-sb__karta:focus-within {
    outline: 3px solid var(--abf-on-container, #fff);
    outline-offset: 3px;
}

.abf-sb .abf-sb__popis {
    margin: 0 0 18px;
    max-width: 52ch;
    font-size: 15px;
    line-height: 1.5;
    color: rgba(25, 25, 25, 0.72);
}

.abf-sb .abf-sb__vic {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #191919;
}

.abf-sb .abf-sb__sipka {
    flex: 0 0 auto;
    transition: transform 0.16s ease-out;
}

.abf-sb .abf-sb__karta:has(.abf-sb__odkaz):hover {
    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.24);
}

.abf-sb .abf-sb__karta:hover .abf-sb__sipka {
    transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
    .abf-sb .abf-sb__karta,
    .abf-sb .abf-sb__sipka {
        transition: none;
    }
    .abf-sb .abf-sb__karta:has(.abf-sb__odkaz):hover,
    .abf-sb .abf-sb__karta:hover .abf-sb__sipka {
        transform: none;
    }
}

/* ---------- jedna akce = varianta C: věta vlevo, karta vpravo ---------- */
.abf-sb--jedna .abf-sb__in {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: center;
    gap: 56px;
}

.abf-sb--jedna .abf-sb__seznam {
    grid-template-columns: minmax(0, 1fr);
}

.abf-sb--jedna .abf-sb__karta {
    padding: 30px 32px 26px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.22);
}

.abf-sb--jedna .abf-sb__nazev {
    font-size: clamp(28px, 2.8vw, 36px);
    line-height: 1.05;
}

.abf-sb--jedna .abf-sb__popis {
    font-size: 16px;
    line-height: 1.45;
}

/* ---------- tablet ---------- */
@media (max-width: 1099.98px) {
    .abf-sb .abf-sb__seznam[data-n="3"],
    .abf-sb .abf-sb__seznam[data-n="5"],
    .abf-sb .abf-sb__seznam[data-n="6"] {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 991.98px) {
    .abf-sb--jedna .abf-sb__in {
        grid-template-columns: minmax(0, 1fr);
        gap: 24px;
    }
}

/* ---------- mobil: kompaktní řádky, popis akce zůstává ---------- */
@media (max-width: 767.98px) {
    .abf-sb .abf-sb__in {
        gap: 22px;
    }

    .abf-sb .abf-sb__veta {
        font-size: 15px;
    }

    .abf-sb--jedna .abf-sb__karta {
        padding: 22px 20px 18px;
    }

    .abf-sb--jedna .abf-sb__nazev {
        font-size: 28px;
    }

    .abf-sb--jedna .abf-sb__popis {
        font-size: 15px;
    }

    .abf-sb--vice .abf-sb__seznam,
    .abf-sb--vice .abf-sb__seznam[data-n] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .abf-sb--vice .abf-sb__karta {
        flex-direction: row;
        align-items: center;
        gap: 14px;
        min-height: 60px;
        padding: 16px 18px;
        box-shadow: none;
    }

    /* Řádek: název → termín → štítek → popis, šipka vpravo. */
    .abf-sb--vice .abf-sb__nazev  { order: 0; margin: 0; font-size: 17px; }
    .abf-sb--vice .abf-sb__seznam[data-n] .abf-sb__nazev { font-size: 17px; }
    .abf-sb--vice .abf-sb__termin { order: 1; margin: 3px 0 0; font-size: 12.5px; }
    .abf-sb--vice .abf-sb__stitek { order: 2; margin: 6px 0 0; padding: 2px 7px; font-size: 10px; }
    .abf-sb--vice .abf-sb__popis  { order: 3; margin: 4px 0 0; font-size: 14px; line-height: 1.45; }

    /* Když platí vstupenka na všechny akce, říká to už věta nad řádky. */
    .abf-sb--vice.abf-sb--vse-v-cene .abf-sb__stitek {
        display: none;
    }

    .abf-sb--vice .abf-sb__vic {
        flex: 0 0 auto;
        margin: 0 0 0 auto;
    }

    .abf-sb--vice .abf-sb__vic-text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

/* ---------- tmavý režim ---------- */
html[data-theme="dark"] .abf-sb .abf-sb__karta {
    background: var(--abf-surface-1, #171719);
    color: var(--abf-text, #f2f2f3);
}

html[data-theme="dark"] .abf-sb .abf-sb__termin,
html[data-theme="dark"] .abf-sb .abf-sb__vic {
    color: var(--abf-text, #f2f2f3);
}

html[data-theme="dark"] .abf-sb .abf-sb__popis {
    color: var(--abf-text, #f2f2f3);
    opacity: 0.78;
}