/* Plik: kontakt.css lub <style> w PHP - Wersja OSTATECZNA */

/* ==========================================================================
   1. ZMIENNE I PODSTAWOWE USTAWIENIA
========================================================================== */
:root {
    --clr-primary: #f26522;
    --clr-dark: #2d3748;
    --clr-light: #ffffff;
    --clr-bg: #f7fafc;
    --clr-text: #4a5568;
    --clr-border: #e2e8f0;
    --gap: 2rem;
    --radius: 0.75rem;
    --shadow-light: 0 4px 12px rgba(0, 0, 0, 0.06);
    --shadow-medium: 0 8px 25px rgba(45, 55, 72, 0.1);
    --container-max: 1200px;
}

/* ==========================================================================
   2. NOWY NAGŁÓWEK - BANER PEŁNEJ SZEROKOŚCI
========================================================================== */
.site-contact__header-banner {
    background-color: var(--clr-light);
    padding: calc(var(--gap) * 1.5) var(--gap);
    text-align: center;
    border-bottom: 1px solid var(--clr-border);
    box-shadow: 0 4px 12px rgba(0,0,0,0.04);
    margin-bottom: calc(var(--gap) * 1);
}

.site-contact__header-title {
    font-size: clamp(2rem, 5vw, 2.75rem);
    color: var(--clr-dark);
    margin: 0;
}

/* ==========================================================================
   3. GŁÓWNY UKŁAD I TREŚĆ
========================================================================== */
.site-contact {
    padding-bottom: calc(var(--gap) * 2); /* Dodajemy tylko dolny padding */
}
.site-contact__people-wrapper {
    display: grid;
    gap: var(--gap); 
}


.site-contact__content {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--gap);
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap);
}

/* --- LEWA KOLUMNA: DANE FIRMY, GODZINY --- */
.site-contact__info {
    display: flex;
    flex-direction: column;
    gap: var(--gap);
}

.site-contact__data-block {
    background: var(--clr-light);
    padding: var(--gap);
    border-radius: var(--radius);
    box-shadow: var(--shadow-light);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- PRAWA KOLUMNA: KARTY OSÓB --- */
.site-contact__person {
    background: var(--clr-light);
    border-radius: var(--radius);
    box-shadow: var(--shadow-light);
    padding: var(--gap);
    text-align: center;
    display: flex; /* Flexbox zapewni równe rozciągnięcie w pionie */
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.site-contact__person:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-medium);
}

.site-contact__details {
    margin-top: auto; /* Wypycha dane kontaktowe na dół karty, kluczowe dla równej wysokości */
}

/* --- POZOSTAŁE STYLE (bez zmian) --- */
.site-contact__list { display: grid; gap: 1.25rem 1.5rem; grid-template-columns: max-content 1fr; margin: 0; padding: 0; }
.site-contact__term { font-weight: 600; color: var(--clr-primary); padding-top: 0.15em; }
.site-contact__value { margin: 0; color: var(--clr-text); line-height: 1.6; word-break: break-word; }
.site-contact__value address { font-style: normal; }
.site-contact__swift { display: block; font-size: 0.9rem; color: #777; }
.site-contact__block-title { margin: 0 0 0.5rem; font-size: 1.25rem; color: var(--clr-dark); }
.site-contact__hours-text { margin: 0; font-size: 1.1rem; color: var(--clr-text); }
.site-contact__photo { width: 120px; height: 120px; border-radius: 50%; object-fit: cover; margin-bottom: 1rem; border: 4px solid var(--clr-primary); }
.site-contact__name { margin: 0 0 0.25rem; color: var(--clr-dark); font-size: 1.5rem; }
.site-contact__role { margin: 0 0 1.5rem; color: var(--clr-primary); font-weight: 600; }
.site-contact__link { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--clr-text); transition: color 0.2s; }
.site-contact__link:hover { color: var(--clr-primary); }
.site-contact__separator { border: none; border-top: 1px solid var(--clr-border); margin: calc(var(--gap) * 2.5) auto; width: 90%; max-width: var(--container-max); }
.site-contact__map-section { animation: fadeInUp 0.6s ease-out 0.4s forwards; opacity: 0; }
.site-contact__map-title { text-align: center; font-size: 1.75rem; color: var(--clr-dark); margin: 0 0 var(--gap) 0; }
.site-contact__map { max-width: var(--container-max); margin: 0 auto; }
.site-contact__map iframe { width: 100%; height: 450px; border-radius: var(--radius); display: block; border: 0; }
.site-contact__cta-wrap { text-align: center; margin-top: var(--gap); }
.site-contact__cta-button { display: inline-flex; align-items: center; gap: 0.75rem; padding: 0.8rem 1.6rem; border: 2px solid var(--clr-border); background-color: var(--clr-light); color: var(--clr-dark); border-radius: 50px; font-weight: 600; text-decoration: none; transition: all 0.3s ease; box-shadow: var(--shadow-light); }
.site-contact__cta-button:hover { background-color: var(--clr-primary); border-color: var(--clr-primary); color: var(--clr-light); transform: translateY(-3px); box-shadow: var(--shadow-medium); }
.site-contact__cta-button svg { transition: transform 0.3s ease; }
.site-contact__cta-button:hover svg { transform: scale(1.1); }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* ==========================================================================
   8. UKŁAD NA KOMPUTERZE
========================================================================== */
@media (min-width: 992px) {
    .site-contact__content {
        grid-template-columns: 1fr 1.5fr; /* Dwie główne kolumny, prawa szersza */
        align-items: start;
        gap: calc(var(--gap) * 2);
    }
    
    .site-contact__people-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Dwie równe kolumny wewnątrz prawej */
        gap: var(--gap);
        /* Domyślne align-items: stretch sprawi, że karty będą miały równą wysokość */
    }
}

@media (max-width: 767px) {
    .site-contact__list {
        /* ZMIANA: Na mobile przechodzimy na jedną kolumnę */
        grid-template-columns: 1fr;
        /* ZMIANA: Zmniejszamy odstęp pionowy między etykietą a wartością */
        gap: 0.5rem;
    }

    .site-contact__term {
        /* Dodajemy większy odstęp nad każdą nową etykietą, aby oddzielić sekcje */
        margin-top: 1.5rem;
    }

    /* Usuwamy dodatkowy margines z pierwszej etykiety, żeby nie było pustej przestrzeni na górze */
    .site-contact__list .site-contact__term:first-of-type {
        margin-top: 0;
    }
}