/* sekcja01.css */

/* Kontener główny dla modułu */
.module-container {
    background-color: #f5f5f5; /* Jasnoszare tło dla spójności */
    padding: 30px 15px; /* Wewnętrzny odstęp */
    border-radius: 10px; /* Zaokrąglone rogi */
    margin: 20px 0; /* Odstęp zewnętrzny */
    width: 100%; /* Pełna szerokość */
    box-sizing: border-box; /* Uwzględnia padding w szerokości */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Delikatny cień dla głębi */
}

/* Kontener główny sekcji */
.photo-cert-section {
    padding: 0; /* Nadpisz padding z .module-container */
    background: none; /* Usuń tło, bo mamy je w .module-container */
    box-shadow: none; /* Usuń cień, bo mamy go w .module-container */
}

/* Siatka dla kolumn */
.photo-cert-grid {
    display: grid; /* Układ siatki */
    grid-template-columns: repeat(2, 1fr); /* Dwie kolumny o równej szerokości */
    gap: 20px; /* Odstęp między kolumnami */
    width: 100%; /* Pełna szerokość */
    max-width: 1200px; /* Maksymalna szerokość dla dużych ekranów */
    margin: 0 auto; /* Wyśrodkowanie */
}

/* Kolumna */
.photo-cert-column {
    display: flex; /* Wyśrodkowanie zawartości */
    justify-content: center; /* Poziome wyśrodkowanie */
    align-items: center; /* Pionowe wyśrodkowanie */
}

/* Kontener dla obrazów */
.photo-cert-image-wrapper {
    position: relative; /* Pozycjonowanie relatywne dla certyfikatu */
    width: 100%; /* Pełna szerokość */
    padding: 10px; /* Wewnętrzny odstęp */
    border-radius: 10px; /* Zaokrąglone rogi */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); /* Delikatny cień */
    background-color: #ffffff; /* Białe tło dla kontrastu */
    box-sizing: border-box; /* Uwzględnia padding w szerokości */
}

/* Obraz główny */
.photo-cert-image {
    width: 100%; /* Pełna szerokość */
    height: auto; /* Proporcjonalna wysokość */
    border-radius: 8px; /* Zaokrąglone rogi obrazu */
    display: block; /* Usunięcie marginesów inline */
}

/* Certyfikat (obraz nachodzący) */
.photo-cert-overlay {
    position: absolute; /* Pozycjonowanie absolutne */
    top: -20px; /* Przesunięcie w górę, aby nachodził na obraz główny */
    right: 10px; /* Lekkie przesunięcie od prawej krawędzi */
    width: 40%; /* Skalowanie certyfikatu */
    height: auto; /* Proporcjonalna wysokość */
    z-index: 1; /* Certyfikat na wierzchu */
}

/* Responsywność */
@media (max-width: 1024px) {
    .photo-cert-grid {
        gap: 15px; /* Mniejszy odstęp na tabletach */
    }

    .photo-cert-overlay {
        width: 35%; /* Mniejszy certyfikat na tabletach */
        top: -15px; /* Mniejsze przesunięcie */
        right: 8px; /* Mniejsze przesunięcie */
    }
}

@media (max-width: 768px) {
    .photo-cert-grid {
        grid-template-columns: 1fr; /* Jedna kolumna na telefonach */
        gap: 10px; /* Jeszcze mniejszy odstęp */
    }

    .photo-cert-image-wrapper {
        padding: 8px; /* Mniejszy padding */
    }

    .photo-cert-overlay {
        width: 30%; /* Jeszcze mniejszy certyfikat na telefonach */
        top: -10px; /* Jeszcze mniejsze przesunięcie */
        right: 5px; /* Jeszcze mniejsze przesunięcie */
    }
}