/* ==========================================================================
   gm_infobar — Sekcja informacyjna
   Author : Gryczan.eu
   ========================================================================== */

/* --------------------------------------------------------------------------
   Zmienne
   -------------------------------------------------------------------------- */
.gm-infobar {
    --gm-infobar-bg:          #fff0f3;
    --gm-infobar-color:       #010101;
    --gm-infobar-icon-color:  #e8447a;
    --gm-infobar-color-hover: #c73367;
    --gm-infobar-font-size:   0.8125rem;
    --gm-infobar-icon-size:   1.125rem;
    --gm-infobar-gap:         1.5rem;
    --gm-infobar-padding-y:   0.5rem;
    --gm-infobar-padding-x:   1rem;
    --gm-infobar-slide-speed: 400ms;
}

/* --------------------------------------------------------------------------
   Wrapper zewnętrzny
   -------------------------------------------------------------------------- */
.gm-infobar {
    width: 100%;
    background-color: var(--gm-infobar-bg);
    color: var(--gm-infobar-color);
    font-size: var(--gm-infobar-font-size);
    padding: var(--gm-infobar-padding-y) var(--gm-infobar-padding-x);
    box-sizing: border-box;
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Widoczność wariantów — domyślnie desktop widoczny, reszta ukryta
   -------------------------------------------------------------------------- */
.gm-infobar__inner--desktop { display: flex; }
.gm-infobar__inner--tablet  { display: none; }
.gm-infobar__inner--mobile  { display: none; }

/* --------------------------------------------------------------------------
   DESKTOP — wspólny kontener
   -------------------------------------------------------------------------- */
.gm-infobar__inner--desktop {
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.25rem var(--gm-infobar-gap);
    max-width: 1320px;
    margin: 12px auto;
}

.gm-infobar__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem var(--gm-infobar-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.gm-infobar__list--left  { flex: 1 1 auto; }
.gm-infobar__list--right { flex: 0 0 auto; }

/* --------------------------------------------------------------------------
   Elementy — wspólne dla wszystkich wariantów
   -------------------------------------------------------------------------- */
.gm-infobar__item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
}

.gm-infobar__link {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.gm-infobar__link:hover,
.gm-infobar__link:focus {
    color: var(--gm-infobar-color-hover);
    text-decoration: underline;
}

.gm-infobar__icon {
    font-size: var(--gm-infobar-icon-size) !important;
    line-height: 1 !important;
    vertical-align: middle;
    color: var(--gm-infobar-icon-color);
}

.gm-infobar__text {
    line-height: 1.3;
    font-weight: 500;
    color: var(--gm-infobar-color);
}

/* --------------------------------------------------------------------------
   TABLET (≤991px) — siatka 2×2
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .gm-infobar__inner--desktop { display: none; }
    .gm-infobar__inner--tablet  { display: block; }
    .gm-infobar__inner--mobile  { display: none; }

    .gm-infobar__inner--tablet {
        max-width: 100%;
        margin: 0 auto;
    }

    .gm-infobar__grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem var(--gm-infobar-gap);
        list-style: none;
        margin: 0;
        padding: 0;
        justify-items: center;
    }

    .gm-infobar__item--grid {
        justify-content: center;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   MOBILE (≤575px) — poziomy carousel
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    .gm-infobar__inner--desktop { display: none; }
    .gm-infobar__inner--tablet  { display: none; }
    .gm-infobar__inner--mobile  { display: block; }

    .gm-infobar {
        padding: var(--gm-infobar-padding-y) 0;
    }

    /* Okno widoku — przycina track */
    .gm-infobar__carousel {
        overflow: hidden;
        width: 100%;
        position: relative;
    }

    /* Track — rząd slajdów */
    .gm-infobar__track {
        display: flex;
        list-style: none;
        margin: 0;
        padding: 0;
        /* szerokość i transform ustawia JS */
        will-change: transform;
    }

    /* Pojedynczy slajd — zajmuje 100% okna */
    .gm-infobar__slide {

        width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        gap: 0.35rem;
        padding: 0 var(--gm-infobar-padding-x);
        box-sizing: border-box;
        white-space: nowrap;
    }

    /* Animacja przesunięcia — klasa dodawana przez JS */
    .gm-infobar__track--animating {
        transition: transform var(--gm-infobar-slide-speed) ease-in-out;
    }
}