/**
 * Stopka — wcześniejszy „tabletowy” układ (BEM: blok .stellar-footer).
 *
 * W motywie przełącznik tabletowy dla bloków layoutu jest zwykle ustawiony na
 * max-width: 1024px (por. global-visibility.css, header.css, editor.css oraz
 * style.scss siatki kontenerów). Tutaj, wyłącznie wewnątrz .stellar-footer,
 * od max-width: 1200px powielamy semantykę zmiennych *-tablet na slotach
 * *-desktop, żeby flex, odstępy siatki i liczba kolumn zachowywały się jak
 * przy tablecie już przy szerszym widoku.
 *
 * Nie ustawiamy zmiennych typograficznych (--paragraph-font-size-*,
 * --paragraph-line-height-*, font-family itd.) ani map typografii linków.
 */

.metal-gum-footer-columns .stellar-list-tag a {
    color: inherit;
    text-decoration: none;
    transition: color 160ms ease;
}

.metal-gum-footer-columns .stellar-list-tag a:hover,
.metal-gum-footer-columns .stellar-list-tag a:focus-visible {
    color: #ffffff;
}

.metal-gum-footer-columns .stellar-list-tag a:focus-visible {
    border-radius: 2px;
    outline: 2px solid #7fa9dd;
    outline-offset: 3px;
}

@media (max-width: 1200px) {
    /**
     * BEM: blok .stellar-footer — korzeń siatki (np. .wp-block-stellar-theme-containers-grid).
     * Inline’owe style zapisu bloku nadpisujemy przez !important na custom properties,
     * inaczej atrybut style na tym samym elemencie miałby pierwszeństwo.
     */
    .stellar-footer .wp-block-stellar-theme-containers-grid.stellar-containers-grid {
        /* Liczba kolumn w rzędzie — bierzemy wartość zapisu „tablet” zamiast „desktop”. */
        --columns-per-row-desktop: var(--columns-per-row-tablet) !important;
        /* Odstępy kolumnowe i rzędowe siatki (split gap) jak na tablecie. */
        --split-gap-desktop: var(--split-gap-tablet) !important;
        --split-row-gap-desktop: var(--split-row-gap-tablet) !important;

        /* Bazowe flex-basis dla każdej kolumny (do 12 slotów) — kopiujemy --col-*-flex-tablet. */
        --col-0-flex-desktop: var(--col-0-flex-tablet) !important;
        --col-1-flex-desktop: var(--col-1-flex-tablet) !important;
        --col-2-flex-desktop: var(--col-2-flex-tablet) !important;
        --col-3-flex-desktop: var(--col-3-flex-tablet) !important;
        --col-4-flex-desktop: var(--col-4-flex-tablet) !important;
        --col-5-flex-desktop: var(--col-5-flex-tablet) !important;
        --col-6-flex-desktop: var(--col-6-flex-tablet) !important;
        --col-7-flex-desktop: var(--col-7-flex-tablet) !important;
        --col-8-flex-desktop: var(--col-8-flex-tablet) !important;
        --col-9-flex-desktop: var(--col-9-flex-tablet) !important;
        --col-10-flex-desktop: var(--col-10-flex-tablet) !important;
        --col-11-flex-desktop: var(--col-11-flex-tablet) !important;
    }

    /**
     * BEM: elementy wewnątrz bloku — .stellar-container-item (kontener kolumny).
     * W SCSS motywu przy >1024px używane są --stellar-column-align-desktop oraz
     * --item-padding-*-desktop; mapujemy je na wartości zapisu tabletowego.
     */
    .stellar-footer .stellar-containers-grid .stellar-container-item {
        --stellar-column-align-desktop: var(--stellar-column-align-tablet) !important;
        --item-padding-top-desktop: var(--item-padding-top-tablet) !important;
        --item-padding-bottom-desktop: var(--item-padding-bottom-tablet) !important;
        --item-padding-left-desktop: var(--item-padding-left-tablet) !important;
        --item-padding-right-desktop: var(--item-padding-right-tablet) !important;
    }

    /**
     * Wysokość spacerów — zmienna --spacer-height-desktop (układ pionowy), bez typografii.
     */
    .stellar-footer .wp-block-stellar-theme-spacer.stellar-spacer-wrapper,
    .stellar-footer .stellar-spacer-wrapper {
        --spacer-height-desktop: var(--spacer-height-tablet) !important;
    }

    /**
     * Globalne paddingi bloku .stellar-block (jak w assets/css/editor.css przy 1024px),
     * tylko slot „desktop” nadpisujemy tokenami tabletowymi — to układ odstępów, nie fonty.
     */
    .stellar-footer .stellar-block {
        --padding-top-desktop: var(--padding-top-tablet) !important;
        --padding-right-desktop: var(--padding-right-tablet) !important;
        --padding-bottom-desktop: var(--padding-bottom-tablet) !important;
        --padding-left-desktop: var(--padding-left-tablet) !important;
    }

    /**
     * justify-content: space-between dla klasy ...--space-between-tablet
     * (wcześniej włączała się tylko od 1024px w dół w style.scss siatki).
     */
    .stellar-footer .stellar-containers-grid-container.is-grid-layout.stellar-containers-grid-container--space-between-tablet {
        justify-content: space-between;
    }

    /**
     * Wyrównanie bloków z klasami alignment-tablet-* (separator, link z ikoną, logo itd.).
     * Motyw nakłada te reguły w @media (max-width: 1024px); tutaj powielamy wyłącznie
     * text-align dla trybu tabletowego — bez zmiany font-size ani line-height.
     */
    .stellar-footer .stellar-separator.alignment-tablet-left,
    .stellar-footer .stellar-link-with-icon.alignment-tablet-left,
    .stellar-footer .stellar-logo-wrapper.alignment-tablet-left {
        text-align: left;
    }

    .stellar-footer .stellar-separator.alignment-tablet-center,
    .stellar-footer .stellar-link-with-icon.alignment-tablet-center,
    .stellar-footer .stellar-logo-wrapper.alignment-tablet-center {
        text-align: center;
    }

    .stellar-footer .stellar-separator.alignment-tablet-right,
    .stellar-footer .stellar-link-with-icon.alignment-tablet-right,
    .stellar-footer .stellar-logo-wrapper.alignment-tablet-right {
        text-align: right;
    }

    /**
     * Szerokość logo — zmienna layoutowa (--stellar-logo-width-*), nie typografia.
     */
    .stellar-footer .stellar-logo-tag {
        --stellar-logo-width-desktop: var(--stellar-logo-width-tablet) !important;
    }

    /**
     * Akapity i nagłówki: tylko zmienna wyrównania (jak --paragraph-alignment-tablet
     * w paragraph/style.scss). Świadomie nie dotykamy --paragraph-font-size-* ani
     * --heading-size-* / line-height.
     */
    .stellar-footer .stellar-paragraph {
        --paragraph-alignment: var(--paragraph-alignment-tablet) !important;
    }

    .stellar-footer .stellar-heading {
        --heading-alignment: var(--heading-alignment-tablet) !important;
    }

    /**
     * Wyrównanie przycisków: zmienne na opakowaniu (post-button/render.php, custom-button/save.js).
     */
    .stellar-footer .wp-block-stellar-theme-post-button,
    .stellar-footer .stellar-theme-post-button-wrapper,
    .stellar-footer .wp-block-stellar-theme-custom-button.stellar-custom-button {
        --button-alignment: var(--button-alignment-tablet) !important;
    }
}