/* ================================
   KÖZPONTI TARTALMI SZÉLESSÉG
================================ */

.container {
    width: 90%;
    max-width: var(--content-width);

    margin: 0 auto;
}


/* ================================
   SZEKCIÓK
================================ */

section {
    padding: 80px 0;
}


/* ================================
   FEJLÉC
================================ */

.site-header .container {
    display: flex;

    justify-content: space-between;
    align-items: center;
}


/* ================================
   HERO ELRENDEZÉS
================================ */

.hero-grid {
    display: grid;

    grid-template-columns: 1.05fr 0.95fr;

    gap: 60px;

    align-items: center;
}


/*
   Megakadályozza, hogy a kép vagy a szöveg
   szétnyomja a grid oszlopait.
*/
.hero-content,
.hero-visual {
    min-width: 0;
}


/* ================================
   SZOLGÁLTATÁSOK
================================ */

.services {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


/* ================================
   PROJEKTEK
================================ */

.projects {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
}


/* ================================
   RÓLUNK
================================ */

.about-grid {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: start;
}


/* ================================
   KAPCSOLAT
================================ */

.contact-box {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 80px;

    align-items: center;
}


/* ================================
   MOBIL NÉZET
================================ */

@media (max-width: 768px) {

    /* ---------- FEJLÉC ---------- */

    .site-header .container {
        flex-direction: column;
        align-items: flex-start;

        gap: 15px;
    }


    .main-nav {
        flex-wrap: wrap;

        gap: 15px;
    }


    /* ---------- HERO ---------- */

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 40px;
    }


    .hero {
        min-height: auto;

        padding: 90px 0;
    }


    .hero h1 {
        font-size: 42px;

        letter-spacing: -1px;
    }


    .hero-description {
        font-size: 18px;
    }


    .hero-actions {
        flex-direction: column;

        align-items: flex-start;
    }


    /* ---------- SZOLGÁLTATÁSOK / PROJEKTEK ---------- */

    .services,
    .projects {
        grid-template-columns: 1fr;
    }


    /* ---------- RÓLUNK ---------- */

    .about-grid {
        grid-template-columns: 1fr;

        gap: 35px;
    }


    .about-heading h2 {
        font-size: 34px;
    }


    .about-feature {
        grid-template-columns: 1fr;

        gap: 4px;
    }


    /* ---------- KAPCSOLAT ---------- */

    .contact-box {
        grid-template-columns: 1fr;

        gap: 30px;
    }

}