/* ============================================================
   DAB microsite – overridy nad redesign style.css
   Načítá se AŽ PO style.css (stejná specificita → vyhrává pořadí).
   ============================================================ */

/* --- 0) Obsah na celou šířku stránky, bez prázdného pravého sloupce ---
   DAB shell obaluje obsah do #main > .container (Bootstrap, ~1170px) a
   redesign .main__body má třídu .container (max 1440px). Pro tuto stránku
   oba capy vyřadíme a odebereme rezervaci pravého sloupce (.main__body-right
   je odebraný i z markupu, tohle je pojistka). */
#main > .container {
    max-width: none;
    width: 100%;
    padding: 0;
}

.main .main__content--category .main__body {
    max-width: none;
    width: 100%;
}

.main .main__content--category .main__body .main__body-right {
    display: none;
}

.main .main__content--category .main__body .main__body-left {
    width: 100%;
}

/* --- 1) 3-sloupcový layout karet (redesign má 2 sloupce = 50 %) ---
   gap je 24px, 2 mezery na 3 karty → odečítáme 16px na kartu.
   Pod 768px ponecháváme redesign 1-sloupec (jeho mobilní media query). */
@media screen and (min-width: 48rem) {
    .main .main__content--category .main__body .main__body-left .main__section .cards--category-layout .card {
        flex-basis: calc(33.3333% - 16px);
    }
}

/* --- 2) Přepínač mřížka/seznam do řádku s nadpisem "Program", vpravo --- */
.main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

/* Ovládací prvky byly původně stylované přes předka .main__toolbar,
   který jsme odebrali – doplníme styly zpět ve scope title-wrapperu. */
.main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls .main__toolbar-button {
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    transition-duration: 0.1s;
}

.main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls .main__toolbar-button svg {
    width: auto;
    height: 1.0625rem;
}

.main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls .main__toolbar-button.js--show-list {
    opacity: 0.5;
}

.main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls .main__toolbar-button:hover {
    opacity: 1;
}

/* aktivní indikace v list módu (redesign měl scoped pod .main__toolbar) */
.is-list-layout .main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls .main__toolbar-button.js--show-list {
    opacity: 1;
}

.is-list-layout .main .main__content--category .main__body .main__body-left .main__section .main__section-title-wrapper .main__toolbar-layout-controls .main__toolbar-button.js--show-grid {
    opacity: 0.5;
}

/* --- Merch sekce (might-like) – redesign ji scopuje pod #main-content,
   v DAB shellu (#main) ji proto musíme zpřístupnit a zarovnat na plnou
   šířku jako události. .merch-carousel/.merch-card jsou samostatné. --- */
#main .main__section--might-like {
    padding: 48px 0;
}

#main .main__section--might-like.container {
    max-width: none;
    width: 100%;
}

#main .main__section--might-like .main__header {
    background: transparent;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    margin-bottom: 32px;
}