/* ==========================================================================
 * „Osoby kontaktowe" — styl bloku dla natywnego core/media-text.
 *
 * To NIE jest osobny blok — to wariant stylu (register_block_style) nakładany
 * na „Media i tekst". Treść = natywne bloki wewnętrzne, zdjęcie = natywne,
 * lewo/prawo = natywny przełącznik media-text (has-media-on-the-right).
 *
 * Blok jest CONTENT-WIDTH. Tekst trzyma pełną szerokość kolumny treści (równo
 * z resztą strony). Zdjęcie „wisi" w marginesie PRZYLEGAJĄC do kolumny tekstu —
 * ujemny margines względem tekstu, OGRANICZONY do faktycznie dostępnego
 * marginesu (min/max), więc:
 *   • zdjęcie jest przy kolumnie tekstu, nie przy krawędzi strony,
 *   • samo dopasowuje się do szerokości ekranu — na węższych wchodzi łagodnie
 *     w kolumnę (nie przycina się), bez sztywnych progów,
 *   • działa tak samo w edytorze i na froncie.
 *
 * Rozmiar zdjęcia: domyślnie 260px. Sterowanie klasą na bloku (Zaawansowane →
 * Dodatkowe klasy CSS): `foto-s` (200), `foto-l` (320), `foto-xl` (400).
 *
 * Mobile (≤599px): zdjęcie NAD tekstem, na całą szerokość.
 *
 * Ładowany na froncie i w edytorze (add_editor_style) — podgląd 1:1.
 * ========================================================================== */

.wp-block-media-text.is-style-osoby-kontaktowe {
    --ok-photo: 260px;
    --ok-gap: clamp(1.25rem, 2.5vw, 2rem);
    margin-block: clamp(1.75rem, 4vw, 2.75rem);

    display: flex !important;
    align-items: flex-start;
    gap: var(--ok-gap);
    grid-template-columns: none !important;
}

/* Rozmiar zdjęcia — opcje (dodatkowa klasa CSS na bloku) */
.is-style-osoby-kontaktowe.foto-s  { --ok-photo: 200px; }
.is-style-osoby-kontaktowe.foto-l  { --ok-photo: 320px; }
.is-style-osoby-kontaktowe.foto-xl { --ok-photo: 400px; }
/* „foto-margines" — zdjęcie wypełnia cały dostępny margines (od brzegu strony
   do kolumny tekstu). Rozmiar zależny od szerokości ekranu, min. 160px. */
.is-style-osoby-kontaktowe.foto-margines {
    --ok-photo: max(160px, calc(
        (100vw - var(--wp--style--global--content-size, 800px)) / 2 - var(--ok-gap)
    ));
}

/* Zdjęcie po lewej (domyślnie): wychodzi w lewy margines, tuż przy tekście,
   ale nie dalej niż pozwala dostępny margines strony. */
.is-style-osoby-kontaktowe > .wp-block-media-text__media {
    flex: 0 0 var(--ok-photo);
    width: var(--ok-photo);
    margin-left: calc(-1 * min(
        var(--ok-photo) + var(--ok-gap),
        max(0px, (100vw - var(--wp--style--global--content-size, 800px)) / 2 - 1.5rem)
    ));
}
.is-style-osoby-kontaktowe > .wp-block-media-text__content {
    flex: 1 1 auto;
    min-width: 0;
}

/* Zdjęcie po prawej (natywny przełącznik media-text): wychodzi w prawy margines */
.is-style-osoby-kontaktowe.has-media-on-the-right > .wp-block-media-text__content {
    order: 1;
}
.is-style-osoby-kontaktowe.has-media-on-the-right > .wp-block-media-text__media {
    order: 2;
    margin-left: 0;
    margin-right: calc(-1 * min(
        var(--ok-photo) + var(--ok-gap),
        max(0px, (100vw - var(--wp--style--global--content-size, 800px)) / 2 - 1.5rem)
    ));
}

/* ---- Zdjęcie: wykończenie ------------------------------------------------- */
.is-style-osoby-kontaktowe > .wp-block-media-text__media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 8px 24px rgba(34, 50, 73, 0.14);
}

/* ---- Treść: bez wewnętrznego paddingu, komfort czytania ------------------ */
.is-style-osoby-kontaktowe > .wp-block-media-text__content {
    padding-inline: 0 !important;
}
.is-style-osoby-kontaktowe > .wp-block-media-text__content > :is(h2, h3, h4, h5, h6).wp-block-heading {
    margin: 0 0 0.3rem;
    font-size: clamp(1.35rem, 1.1rem + 0.8vw, 1.7rem);
    line-height: 1.15;
    font-weight: 600;
    color: var(--wp--preset--color--primary, #223249);
}
/* rola (akapit wyłącznie z <em> tuż pod nazwiskiem) */
.is-style-osoby-kontaktowe > .wp-block-media-text__content > p:has(> em:only-child) {
    margin: 0 0 1rem;
    color: var(--wp--preset--color--tertiary, #75787B);
    font-size: 1rem;
}
.is-style-osoby-kontaktowe > .wp-block-media-text__content > p:has(> em:only-child) em {
    font-style: normal;
    font-weight: 500;
    letter-spacing: 0.01em;
}
.is-style-osoby-kontaktowe > .wp-block-media-text__content > p {
    line-height: 1.65;
}

/* ---- Eyebrow: nagłówek tuż przed kartą (np. „Key Contacts") -------------- */
:is(h2, h3, h4).wp-block-heading:has(+ .wp-block-media-text.is-style-osoby-kontaktowe) {
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #75787B;
    margin-bottom: 0.65rem;
}

/* ---- MOBILE (≤599px): zdjęcie NAD tekstem, na całą szerokość ------------- */
@media (max-width: 599px) {
    .wp-block-media-text.is-style-osoby-kontaktowe {
        flex-direction: column;
        gap: 1rem;
    }
    .is-style-osoby-kontaktowe > .wp-block-media-text__media,
    .is-style-osoby-kontaktowe.has-media-on-the-right > .wp-block-media-text__media {
        order: -1;
        flex: 0 0 auto;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    .is-style-osoby-kontaktowe > .wp-block-media-text__content {
        width: 100% !important;
        max-width: none;
        /* długie ciągi (e-mail) łamią się dopiero gdy trzeba, nie rozpychają strony */
        overflow-wrap: break-word;
    }
}