/* CSS dla bloku dwie-osoby */
.dwie-osoby {
	overflow: hidden;
}

/* Zachowanie proporcji obrazków 4:3 w pionie (wysokość:szerokość) */
.dwie-osoby .w-md-50.position-relative {
    aspect-ratio: 3/4;
    min-height: auto;
}

.dwie-osoby .w-md-50 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.kresk-osoba-lewo{
	width: 140%;
    height: 1px;
    background-color: black;
    z-index: 999;
    position: relative;
}
.kresk-osoba-prawo{
	width: 140%;
    height: 1px;
    background-color: black;
    z-index: 999;
    position: relative;
	float: right;
}
.nakladka-osoba{
	background: linear-gradient(164.17deg, rgba(0, 0, 0, 0) 31.24%, rgba(0, 0, 0, 0.5) 88.03%);
}
.kreska-mala-tytul{
	width: 60%;
    margin: auto;
    height: 1px;
    background-color: white;
}

/* Desktop/tablet (>=768px): ujednolicenie szerokości zdjęć.
 * Problem wynika z tego, że elementy .w-md-50 nie mają realnie 50% szerokości
 * (to nie jest klasa z Bootstrapa), więc flex może je ściskać zależnie od treści.
 */
@media screen and (min-width: 768px){
    /* Każda połówka (col-md-6) jest flex-em z dwoma dziećmi: tekst + obraz */
    .dwie-osoby .col-md-6.d-flex{
        align-items: stretch;
    }

    /* Wymuś po 50% szerokości dla obu "półówek" w środku (tekst i obraz) */
    .dwie-osoby .col-md-6 > .w-md-50{
        flex: 0 0 50%;
        max-width: 50%;
        min-width: 0; /* pozwala zawijać tekst zamiast wypychać layout */
    }

    /* Kontener zdjęcia ma stałą szerokość i proporcje 3/4 */
    .dwie-osoby .w-md-50.position-relative{
        aspect-ratio: 3/4;
        height: auto;
    }

    /* Żeby długie słowa/tytuły nie rozpychały kolumny */
    .dwie-osoby h2,
    .dwie-osoby p{
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}

/* Responsive styles dla tablet i mniejszych ekranów */
@media screen and (max-width: 992px){
    .kresk-osoba-lewo, .kresk-osoba-prawo{
        width: 100% !important;
    }
    
    /* Zachowanie proporcji dla tablet - 4:3 w pionie */
    .dwie-osoby .w-md-50.position-relative {
        aspect-ratio: 3/4;
        min-height: auto;
    }
    
    /* Poprawa układu obrazków z tekstem dla tablet */
    .dwie-osoby .w-md-50 {
        position: relative;
        min-height: 300px;
    }
    
    /* Lepsze pozycjonowanie tekstu na obrazkach */
    .dwie-osoby .w-md-50 h2.position-absolute {
        position: absolute !important;
        bottom: 20px !important;
        left: 20px !important;
        right: 20px !important;
        text-align: center !important;
    }
}

/* Mobile styles */
@media screen and (max-width: 768px){
    /* Główny kontener */
    .dwie-osoby.container {
        padding-left: 15px;
        padding-right: 15px;
    }
    
    /* Usuwanie border-a między kolumnami na mobile */
    .dwie-osoby .col-md-6:first-child {
        border-right: none !important;
        padding-right: 0 !important;
        margin-bottom: 2rem;
    }
    
    .dwie-osoby .col-md-6:last-child {
        padding-left: 0 !important;
    }
    
    /* Sekcje tekstowe */
    .dwie-osoby .w-md-50:first-child {
        padding: 1.5rem 1rem !important;
        order: 2;
        width: 100% !important;
    }
    
    .dwie-osoby .w-md-50:last-child {
        padding: 1.5rem 1rem !important;
        text-align: left !important;
        order: 2;
        width: 100% !important;
    }
    
    /* Sekcje z obrazkami - zachowanie proporcji 3:4 (4:3 w pionie) na mobile */
    .dwie-osoby .w-md-50.position-relative {
        aspect-ratio: 3/4 !important;
        min-height: auto !important;
        margin-bottom: 0;
        order: 1;
        width: 100% !important;
        max-width: 100%;
    }
    
    /* Obrazki - usuwanie sztywnych wysokości */
    .dwie-osoby .w-md-50 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    /* Teksty na obrazkach - większe odstępy */
    .dwie-osoby .w-md-50 h2.fs-3.position-absolute {
        position: absolute !important;
        bottom: 75px !important;
        left: 20px !important;
        right: 20px !important;
        margin-bottom: 0 !important;
        font-size: 1.1rem !important;
        line-height: 1.2 !important;
        z-index: 10;
    }
    
    .dwie-osoby .w-md-50 h2.fs-6.position-absolute {
        bottom: 18px !important;
        font-size: 0.75rem !important;
        left: 20px !important;
        right: 20px !important;
        z-index: 10;
        line-height: 1.1 !important;
    }
    
    /* Kreska nad imieniem na obrazku - większy odstęp */
    .dwie-osoby .kreska-mala-tytul {
        width: 50% !important;
        margin-bottom: 0.8rem !important;
        margin-top: 0 !important;
    }
    
    /* Dodatkowe odstępy między elementami na obrazku */
    .dwie-osoby .w-md-50 h2.fs-3 .kreska-mala-tytul {
        margin-bottom: 0.8rem !important;
    }
    
    /* Tytuły sekcji */
    .dwie-osoby h2.fs-2 {
        font-size: 1.5rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Opisy */
    .dwie-osoby p {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 0;
        font-size: 0.95rem;
        line-height: 1.5;
    }
    
    /* Korekcja flex direction dla mobile */
    .dwie-osoby .d-flex.flex-md-row {
        flex-direction: column !important;
    }
    
    /* Ukrycie border-top dla drugiej sekcji */
    .dwie-osoby .col-md-6:last-child::before {
        content: '';
        display: block;
        height: 1px;
        background-color: #000;
        margin: 0 1rem 2rem 1rem;
    }
}

/* Extra small mobile */
@media screen and (max-width: 576px){
    .dwie-osoby .w-md-50:first-child,
    .dwie-osoby .w-md-50:last-child {
        padding: 1rem 0.5rem !important;
    }
    
    /* Zachowanie proporcji 3:4 (4:3 w pionie) na małych ekranach */
    .dwie-osoby .w-md-50.position-relative {
        aspect-ratio: 3/4 !important;
        min-height: auto !important;
    }
    
    .dwie-osoby .w-md-50 img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    
    .dwie-osoby h2.fs-2 {
        font-size: 1.3rem !important;
    }
    
    /* Jeszcze większe odstępy na małych ekranach */
    .dwie-osoby .w-md-50 h2.fs-3.position-absolute {
        font-size: 1rem !important;
        bottom: 30px !important;
        left: 15px !important;
        right: 15px !important;
    }
    
    .dwie-osoby .w-md-50 h2.fs-6.position-absolute {
        bottom: 80px !important;
        font-size: 0.7rem !important;
        left: 15px !important;
        right: 15px !important;
    }
    
    /* Większa kreska i odstęp */
    .dwie-osoby .kreska-mala-tytul {
        width: 40% !important;
        margin-bottom: 1rem !important;
    }
}