/* ==========================================================================
 * „Organizatorzy" — styl bloku dla natywnego core/group.
 *
 * Zastępuje płaską grafikę-baner z logotypami (która na mobile robiła się
 * nieczytelnym wąskim paskiem). Tu każde logo to osobny obraz, a układ jest
 * responsywny: desktop = etykieta + logotypy w rzędzie; mobile = etykieta na
 * górze, logotypy jedno pod drugim, wyśrodkowane i w czytelnym rozmiarze.
 *
 * Struktura (wzorzec „Organizatorzy"):
 *   .is-style-organizatorzy (panel, align wide)
 *     .organizatorzy__label   — „ORGANISERS:" (edytowalne)
 *     .organizatorzy__logos   — kontener logotypów (obrazy)
 *
 * Logo RZM to bardzo szeroki wordmark (proporcje ~25:1), więc rozmiarujemy
 * logotypy przez WYSOKOŚĆ na desktopie (rząd może się zawinąć), a na mobile
 * przez SZEROKOŚĆ (żeby wordmark się zmieścił). Ładowany na froncie i w
 * edytorze (add_editor_style) — podgląd 1:1.
 * ========================================================================== */

.wp-block-group.is-style-organizatorzy {
    background: var(--wp--preset--color--muted, #f4f6f8);
    border-radius: 6px;
    padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 4vw, 3rem);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.5rem, 4vw, 3.5rem);
    flex-wrap: wrap;
    margin-block: clamp(1.75rem, 4vw, 2.75rem);
}

.is-style-organizatorzy .organizatorzy__label {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--wp--preset--color--tertiary, #75787B);
    flex: 0 0 auto;
    white-space: nowrap;
}

.is-style-organizatorzy .organizatorzy__logos {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: clamp(1.75rem, 4vw, 3.5rem);
    flex-wrap: wrap;
    flex: 0 1 auto;
    margin: 0;
}

.is-style-organizatorzy .organizatorzy__logos .wp-block-image {
    margin: 0;
    display: flex;
    align-items: center;
}

.is-style-organizatorzy .organizatorzy__logos img {
    /* !important — w edytorze core/media dodaje własne wymiary obrazkom; bez
       tego RZM (bardzo szeroki wordmark) i logo partnera renderują się w innej
       skali niż na froncie. Stała wysokość = identycznie w edytorze i na froncie. */
    height: 28px !important;
    width: auto !important;
    max-width: 100%;
    display: block;
}

/* ---- MOBILE (≤599px): etykieta na górze, logotypy w kolumnie -------------- */
@media (max-width: 599px) {
    .wp-block-group.is-style-organizatorzy {
        flex-direction: column;
        gap: 1.25rem;
        text-align: center;
        padding: 1.75rem 1.25rem;
    }
    .is-style-organizatorzy .organizatorzy__logos {
        flex-direction: column;
        gap: 1.5rem;
        width: 100%;
    }
    .is-style-organizatorzy .organizatorzy__logos .wp-block-image {
        width: 100%;
        justify-content: center;
    }
    .is-style-organizatorzy .organizatorzy__logos img {
        height: auto !important;
        width: auto !important;
        max-height: 28px;
        max-width: 82%;
    }
}