/* Intro - Hero */
.home-hero {
    padding: 150px 0 100px;
}

.home-hero h1 {
    font-size: 3.2rem;
    font-weight: 500;
    line-height: 1.5;
    max-width: 900px;
}




.news-inner {
    position: relative;
    z-index: 2;
}

.news-label-outline {
    display: inline-block;
    border: 1px solid #1a2b3c;
    padding: 5px 15px;
    margin-bottom: 40px;
    font-weight: 600;
    text-decoration: underline;
}

.news-flex {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 60px;
    align-items: end;
}

/* Siatka projektów */
.section-heading-main {
    font-size: 1.5rem;
    font-weight: 500;
    margin-bottom: 50px;
}



.project-tile {
    min-height: 450px;
    padding: 80px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Tekst na dole */
    color: #fff;
}

.project-tile h3 {
    font-size: 2.2rem;
    margin-bottom: 20px;
}

.project-tile p {
    font-size: 1rem;
    line-height: 1.6;
    max-width: 450px;
}



/* =========================================
   STRONA GŁÓWNA - OBRÓCONY ŻÓŁTY BLOK (Zgodnie z PDF)
   ========================================= */

/* 1. Resetujemy stare, zepsute style ze skosami */
.news-slanted-section::before {
    display: none !important; 
}

/* 2. Główny kontener bloku z aktualnością */
.news-grid {
    position: relative;
    padding: 60px 50px; /* Przestrzeń wewnątrz żółtego pola dla tekstów */
    display: flex;
    gap: 40px;
    align-items: center; /* Trzyma teksty w równej linii na środku wysokości */
    z-index: 2;
    background-color: transparent; 
    margin: 80px auto; /* Zapewnia oddech od dużego napisu "Tworzymy..." i sekcji poniżej */
}

/* 3. MAGIA: Wirtualny, obrócony w całości prostokąt w tle */
.news-grid::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-yellow); /* Upewnij się, że masz tę zmienną, ew. wpisz #d0b84c */
    
    /* Obrót całego prostokąta, dokładnie ten sam kąt co na podstronie! */
    transform: rotate(1.5deg); 
    transform-origin: center;
    z-index: -1;
}

/* Kolumny wewnątrz bloku */
.news-left {
    flex: 1;
}

.news-right {
    flex: 1.2; /* Dajemy tekstowi trochę więcej miejsca, by nie rósł za mocno w dół */
}

/* 4. Responsywność dla telefonów */
@media (max-width: 768px) {
    .news-grid {
        flex-direction: column;
        padding: 40px 30px;
        gap: 20px;
    }
    .news-grid::before {
        transform: rotate(1.5deg); /* Na wąskim ekranie telefonu mniejszy kąt wygląda naturalniej */
    }
}