/*
 * tablet.css — tablet a mobil na šířku dostávají mobilní layout
 *
 * Šablona přepíná desktop/mobil Bootstrap breakpointem sm (576 px):
 * mobilní stav je výchozí třída (d-none, col-12, flex-column, mt-3…),
 * desktop ho přebíjí třídou -sm-/-md-/-lg-. V pásmu 576–1199 px tady
 * ty přebíjející třídy vracíme na výchozí hodnotu, takže platí mobilní.
 *
 * Mobilní pravidla z mobile.css a nabidka-detail.css jsou v bloku
 * @media (max-width: 1199px), aby do pásma dosáhla taky.
 *
 * Načítá se v tpl.php hned za mobile.css. Utility Bootstrapu mají
 * !important, proto ho mají i tyhle a přebíjejí je pořadím nebo
 * vyšší specificitou (dvě třídy proti jedné).
 */

@media (min-width: 576px) and (max-width: 1199px) {

    /* --- kontejner přes celou šířku jako na mobilu --- */

    .container {
        max-width: 100%;
    }

    /* hlavní fotka detailu se na šířku vejde na obrazovku i s nadpisem */
    section.nabidka-info .detail-gallery .detail-gallery-main.gallery-wraper img {
        max-height: 70vh;
    }

    /* --- zobrazení: d-sm-* / d-md-* / d-lg-* zpět na výchozí --- */

    .d-sm-none, .d-sm-block, .d-sm-flex, .d-sm-inline-block,
    .d-md-flex, .d-lg-flex {
        display: block !important;
    }

    .d-none.d-sm-block, .d-none.d-sm-flex, .d-none.d-sm-inline-block,
    .d-none.d-sm-none {
        display: none !important;
    }

    .d-flex.d-sm-none, .d-flex.d-sm-flex {
        display: flex !important;
    }

    .d-block.d-sm-none, .d-block.d-sm-flex, .d-block.d-md-flex {
        display: block !important;
    }

    /* --- sloupce: col-sm-* / col-md-* zpět na col-12, col-6, col-4, col --- */

    .row > [class*="col-sm-"],
    .row > [class*="col-md-"] {
        flex: 0 0 auto;
        width: 100%;
    }

    .row > .col-6[class*="col-sm-"],
    .row > .col-6[class*="col-md-"] {
        width: 50%;
    }

    .row > .col-4[class*="col-sm-"],
    .row > .col-4[class*="col-md-"] {
        width: 33.33333333%;
    }

    .row > .col[class*="col-md-"] {
        flex: 1 0 0%;
        width: auto;
    }

    /* row-cols: detail (galerie | info) a patička jdou pod sebe */
    .row-cols-1.row-cols-sm-2 > *,
    .row-cols-1.row-cols-sm-4 > * {
        flex: 0 0 auto;
        width: 100%;
    }

    /* --- směr a pořadí flexu --- */

    .flex-column.flex-sm-row {
        flex-direction: column !important;
    }

    .flex-sm-fill {
        flex: 0 1 auto !important;
    }

    .order-1.order-sm-2 {
        order: 1 !important;
    }

    .order-2.order-sm-1 {
        order: 2 !important;
    }

    /* --- zarovnání --- */

    .justify-content-sm-start, .justify-content-sm-center,
    .justify-content-sm-between, .justify-content-md-center,
    .justify-content-lg-end {
        justify-content: normal !important;
    }

    .justify-content-start.justify-content-sm-between {
        justify-content: flex-start !important;
    }

    .align-items-sm-center {
        align-items: normal !important;
    }

    /* --- odsazení: *-sm-* bez výchozí třídy na 0, jinak na výchozí --- */

    .mt-sm-0.mt-3 { margin-top: 1rem !important; }
    .mt-sm-0.mt-4 { margin-top: 1.5rem !important; }
    .mt-sm-0.mt-5 { margin-top: 3rem !important; }
    .mt-sm-5      { margin-top: 0 !important; }

    .mb-sm-4.mb-2 { margin-bottom: .5rem !important; }

    .mx-sm-5 { margin-left: 0 !important; margin-right: 0 !important; }
    .me-sm-5 { margin-right: 0 !important; }

    .px-sm-5 { padding-left: 0 !important; padding-right: 0 !important; }
    .ps-sm-5 { padding-left: 0 !important; }
    .pe-sm-5 { padding-right: 0 !important; }

    .py-sm-4.pt-3.pb-2 { padding-top: 1rem !important; padding-bottom: .5rem !important; }
    .py-sm-4.py-1      { padding-top: .25rem !important; padding-bottom: .25rem !important; }
    .py-sm-5.py-3      { padding-top: 1rem !important; padding-bottom: 1rem !important; }

    .pb-sm-3.pb-0, .pb-sm-5.pb-0 { padding-bottom: 0 !important; }
    .pt-sm-1.pt-0                { padding-top: 0 !important; }
    .pt-sm-0.p-5                 { padding-top: 3rem !important; }

    .gap-sm-2.gap-1 { gap: .25rem !important; }
}