/* ./css/images.css - Dedykowane style dla grafik i galerii */

#biuro-image {
    width: 100% !important;        /* Relacja do kontenera */
    max-width: 35rem !important;    /* Relacja do fontu (~560px na komputerze) */
    height: auto !important;        /* Automatyczne zachowanie proporcji */
    max-height: 20rem !important;   /* Ograniczenie wysokości (~320px) */
    object-fit: contain !important;   /* Docięcie kadru przy ograniczeniu wysokości */
    display: block;
    margin: 0 auto;                 /* Wyśrodkowanie */
}

#naglowek-dojazd
{
margin-bottom: 15px;
text-align: center;
}


/* Estetyczne kadrowanie zdjęć w kartach (Grid) */
.img-card {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: center;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 12px rgba(0, 87, 156, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: block;
    border: 1px solid var(--border-color);
}

/* Efekt po najechaniu myszką */
.img-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0, 87, 156, 0.15);
}

/* Duże zdjęcie nagłówkowe (Hero image) */
.img-hero {
    width: 100%;
    max-height: 320px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 1.5rem;
    box-shadow: 0 6px 16px rgba(0, 87, 156, 0.12);
    border: 1px solid var(--border-color);
}

/* Kadrowanie proporcjonalne 16:9 */
.img-responsive-16-9 {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}

/* Wygładzenie na urządzeniach mobilnych */
@media (max-width: 768px) {
    .img-card {
        height: 160px;
        margin-bottom: 1rem;
    }

    .img-hero {
        max-height: 200px;
    }
}