/* ============================================================
   Archiv akcí (.aa-*) — frontend. Versovaný soubor (filemtime),
   NIKDY nepřidávat do additionalStyle.css (Cloudflare cache).
   ============================================================ */

.aa-section .aa-filters {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin: 8px 0 28px;
}

.aa-section .aa-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.aa-section .aa-chip {
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 8px 16px;
    border: 1px solid var(--heading-red-solid, #d91920);
    border-radius: 999px;
    background: transparent;
    color: var(--heading-red-solid, #d91920);
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.aa-section .aa-chip.is-on {
    background: var(--heading-red-solid, #d91920);
    color: #fff;
}

.aa-section .aa-chip:focus-visible {
    outline: 2px solid #1e1e1e;
    outline-offset: 2px;
}

.aa-section .aa-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.aa-section .aa-sel,
.aa-section .aa-search {
    font-family: Lato, sans-serif;
    font-size: 14px;
    padding: 9px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 4px;
    background: #fff;
    color: #1e1e1e;
    min-width: 130px;
}

.aa-section .aa-search {
    flex: 1 1 220px;
}

.aa-section .aa-sel:focus-visible,
.aa-section .aa-search:focus-visible {
    outline: 2px solid var(--heading-red-solid, #d91920);
    outline-offset: 1px;
}

.aa-section .aa-empty,
.aa-section .aa-none {
    color: #6b6b6b;
    padding: 12px 0;
}

.aa-section .aa-group {
    margin: 0 0 26px;
}

.aa-section .aa-group-title {
    font-family: Lato, sans-serif;
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .01em;
    margin: 0 0 12px;
}

.aa-section .aa-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.aa-section .aa-card {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr) auto;
    align-items: center;
    gap: 18px;
    background: #fff;
    border: 1px solid #e6e6e6;
    border-radius: 6px;
    padding: 16px 20px;
    text-decoration: none;
    color: #1e1e1e;
    transition: border-color .15s, box-shadow .15s;
}

.aa-section .aa-card:hover {
    border-color: var(--heading-red-solid, #d91920);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
}

.aa-section .aa-card:focus-visible {
    outline: 2px solid var(--heading-red-solid, #d91920);
    outline-offset: 2px;
}

.aa-section .aa-card-date {
    font-weight: 700;
    color: var(--heading-red-solid, #d91920);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.aa-section .aa-card-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.aa-section .aa-card-title {
    font-weight: 700;
    font-size: 17px;
    line-height: 1.3;
}

.aa-section .aa-card-type {
    font-size: 12.5px;
    color: #6b6b6b;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.aa-section .aa-card-arrow {
    color: var(--heading-red-solid, #d91920);
    display: flex;
    transition: transform .15s;
}

.aa-section .aa-card:hover .aa-card-arrow {
    transform: translateX(4px);
}

.aa-section .aa-more {
    display: block;
    margin: 6px auto 0;
    font-family: Lato, sans-serif;
    font-size: 14px;
    font-weight: 700;
    padding: 11px 26px;
    border: 1px solid var(--heading-red-solid, #d91920);
    border-radius: 4px;
    background: transparent;
    color: var(--heading-red-solid, #d91920);
    cursor: pointer;
}

.aa-section .aa-more:hover {
    background: var(--heading-red-solid, #d91920);
    color: #fff;
}

@media (max-width: 767px) {
    .aa-section .aa-card {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 8px 14px;
    }

    .aa-section .aa-card-date {
        grid-column: 1 / -1;
        order: -1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aa-section .aa-card,
    .aa-section .aa-card-arrow,
    .aa-section .aa-chip {
        transition: none;
    }
}

/* .content-container má align-items:center → děti bez šířky se smrsknou (nahlášeno:
   „extrémně úzký viewport"). Obsahové části roztáhnout na šířku kontejneru. */
.aa-section .aa-filters,
.aa-section .aa-groups,
.aa-section .aa-empty,
.aa-section .aa-none {
    width: 100%;
}

/* ── Skupina „Právě probíhá" (jen ve výpisu nadcházejících) ────────────
   Vizuálně ji oddělujeme od měsíců, ať je jasné, že nejde o termín, ale
   o stav. Nadpis dostane značkovou barvu a jemnou linku pod sebou. */
.aa-section .aa-group--ongoing .aa-group-title {
    color: var(--heading-red-solid, #d91920);
}

.aa-section .aa-group--ongoing {
    padding-bottom: 8px;
    border-bottom: 1px solid var(--gray_line, #e6e6e6);
    margin-bottom: 28px;
}

/* Odkaz na protější výpis (archiv ↔ nadcházející). */
.aa-section .aa-crosslink {
    margin: 36px 0 0;
    text-align: center;
}

/* ============================================================
   Kalendář akcí — řádek s fotkou (cardStyle = 'rich', 1.9.7)
   Fotka vlevo, vpravo datum → název → typ → krátký popis → tlačítko
   Vstupenky. Vzor pvaexpo.cz/cs/akce, jen fotka na LEVÉ straně podle
   přání klienta. Podklad, rámeček, hover, datum, typ i tmavý režim dědí
   z .aa-section .aa-card výš — tady jen mřížka řádku a jeho vnitřek.
   Stejná specificita (0,2,0) jako základ → blok MUSÍ zůstat ZA základní
   kartou i jejím @media 767. Soubor se načítá PŘED Webflow exportem,
   proto typové vlastnosti z Webflow (img, p) nastavujeme výslovně.
   ============================================================ */

.aa-section .aa-cards--rich {
    gap: 16px;
}

.aa-section--rich .aa-group-title {
    font-size: 26px;
}

.aa-section .aa-card--rich {
    position: relative;
    isolation: isolate;               /* překryv názvu (z-index) nevyteče z karty */
    grid-template-columns: 300px minmax(0, 1fr);
    align-items: stretch;             /* základ má center → sloupec s fotkou by neměl výšku */
    gap: 0;
    min-height: 188px;                /* 300 × 188 = 16:10 jako dlaždice Nejbližších akcí */
    padding: 0;
    overflow: hidden;                 /* fotka respektuje zaoblení karty */
}

/* Karta bez fotky i loga — jen text přes celou šířku. */
.aa-section .aa-card--rich.aa-card--bez-media {
    grid-template-columns: minmax(0, 1fr);
}

/* ── Fotka / logo ── */
.aa-section .aa-card--rich .aa-card-media {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f2f2f2;
}

.aa-section .aa-card--rich .aa-card-media--logo {
    padding: 24px;
}

.aa-section .aa-card--rich .aa-card-img {
    display: block;                   /* Webflow: img { display: inline-block } */
}

.aa-section .aa-card--rich .aa-card-media--foto .aa-card-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Cizí loga bývají tmavá na průhledném — patří na světlou plošku a celá. */
.aa-section .aa-card--rich .aa-card-media--logo .aa-card-img {
    width: auto;
    height: auto;
    max-width: 70%;
    max-height: 96px;
    object-fit: contain;
}

/* ── Text ── */
.aa-section .aa-card--rich .aa-card-telo {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    min-width: 0;
    padding: 20px 24px 20px 28px;
}

.aa-section .aa-card--rich .aa-card-title {
    font-size: 20px;
    line-height: 1.25;
    color: inherit;
    text-decoration: none;
}

/* Klikatelná je celá karta, ale odkaz je jen jeden — na názvu. */
.aa-section .aa-card--rich .aa-card-odkaz::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.aa-section .aa-card--rich:hover .aa-card-title {
    color: var(--heading-red-solid, #d91920);
}

.aa-section .aa-card--rich .aa-card-odkaz:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.aa-section .aa-card--rich .aa-card-perex {
    margin: 4px 0 0;
    font-size: 15px;
    line-height: 1.5;
    color: #6b6b6b;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}

/* Tlačítka u dolní hrany i bez popisku → v seznamu lícují. */
.aa-section .aa-card--rich .aa-card-akce {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: auto;
    padding-top: 14px;
}

/* Více informací — vedlejší akce (požadavek ABF č. 11), proto tlumenější než
   Vstupenky: bez stínu a šipky, neutrální rámeček. Vede na tentýž detail jako
   název karty; musí být nad překryvem názvu stejně jako Vstupenky. */
.aa-section .aa-btn-vice {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 10px 18px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, .25);
    border-radius: 4px;
    color: #1e1e1e;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    transition: border-color .15s ease, color .15s ease;
}

.aa-section .aa-btn-vice:hover,
.aa-section .aa-btn-vice:focus-visible {
    border-color: var(--heading-red-solid, #d91920);
    color: var(--heading-red-solid, #d91920);
}

.aa-section .aa-btn-vice:focus-visible {
    outline: 2px solid #1e1e1e;
    outline-offset: 2px;
}

/* ── Tlačítko Vstupenky — podle pvaexpo.cz: bílé, rámeček v barvě webu,
   verzálky, šipka ›. Stejný jazyk jako tlačítko v dlaždicích Nejbližších akcí. ── */
.aa-section .aa-btn-vstupenky {
    position: relative;
    z-index: 2;                       /* nad překryvem názvu, jinak klik spadne na detail */
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;                 /* dotyková plocha */
    padding: 10px 18px;
    background: #fff;
    border: 1px solid var(--heading-red-solid, #d91920);
    border-radius: 4px;
    color: var(--heading-red-solid, #d91920);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    transition: background-color .15s ease, color .15s ease;
}

/* Šipka kreslená rámečkem, ne znakem — čtečka by „›“ přečetla jako součást popisku. */
.aa-section .aa-btn-vstupenky::after {
    content: "";
    flex: 0 0 auto;
    width: 6px;
    height: 6px;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    transform: rotate(45deg);
}

.aa-section .aa-btn-vstupenky:hover,
.aa-section .aa-btn-vstupenky:focus-visible {
    background: var(--heading-red-solid, #d91920);
    color: #fff;
}

.aa-section .aa-btn-vstupenky:focus-visible {
    outline: 2px solid #1e1e1e;
    outline-offset: 2px;
}

@media screen and (max-width: 991px) {
    .aa-section .aa-card--rich {
        grid-template-columns: 220px minmax(0, 1fr);
        min-height: 150px;
    }
    .aa-section .aa-card--rich.aa-card--bez-media {
        grid-template-columns: minmax(0, 1fr);
    }
    .aa-section .aa-card--rich .aa-card-telo {
        padding: 16px 20px;
    }
    .aa-section .aa-card--rich .aa-card-title {
        font-size: 18px;
    }
}

/* Telefon: fotka nahoře přes celou šířku (jako pvaexpo na mobilu) — 220 px
   vlevo by na 375 px nechalo názvu sotva dvě slova na řádek. */
@media screen and (max-width: 767px) {
    .aa-section .aa-card--rich {
        grid-template-columns: minmax(0, 1fr);
        min-height: 0;
    }
    /* Šířku nastavujeme výslovně: položka mřížky s aspect-ratio se sama neroztáhne
       (justify-self: normal se u ní chová jako start). Fotka je absolutně umístěná,
       plošce nic šířku nedá — podle prohlížeče zůstala užší, nebo zmizela úplně;
       logo plošku zúžilo na svou šířku. */
    .aa-section .aa-card--rich .aa-card-media {
        width: 100%;
        justify-self: stretch;
    }
    .aa-section .aa-card--rich .aa-card-media--foto {
        aspect-ratio: 16 / 10;
        max-height: 260px;            /* na 767 px by 16:10 dalo 427 px vysokou fotku */
    }
    /* Logo na nízkém pruhu — 16:7 dávalo na 767 px přes 300 px šedé plochy kolem loga. */
    .aa-section .aa-card--rich .aa-card-media--logo {
        height: 120px;
        padding: 16px 24px;
    }
    .aa-section .aa-card--rich .aa-card-media--logo .aa-card-img {
        max-height: 72px;
    }
    .aa-section .aa-card--rich .aa-card-telo {
        padding: 16px 18px 18px;
    }
    .aa-section .aa-card--rich .aa-card-perex {
        -webkit-line-clamp: 3;
    }
    .aa-section .aa-card--rich .aa-card-akce {
        width: 100%;
    }
    .aa-section :is(.aa-btn-vstupenky, .aa-btn-vice) {
        width: 100%;
        justify-content: center;
    }
    .aa-section--rich .aa-group-title {
        font-size: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .aa-section :is(.aa-btn-vstupenky, .aa-btn-vice) {
        transition: none;
    }
}

/* Filtrace přepíná `hidden`, ale vlastní display z gridu by ho přebil. */
.aa-section [hidden] {
    display: none !important;
}