/* ==========================================================================
   NEXUS INFORMATIKA
   Fájl.............: mobile.css
   Modul............: Reszponzív megjelenés
   Verzió...........: 1.0.0

   Feladata:
   A weboldal teljes reszponzív megjelenésének kezelése.

   Fejlesztési szabályok:
   - Desktop First felépítés.
   - Kizárólag felülírások szerepelhetnek.
   - !important használata tilos.
   - Minden komponens azonos sorrendben szerepel.
========================================================================== */


/* ==========================================================================
   TÖRÉSPONTOK

   1400 PX - Nagy asztali kijelző
   1200 PX - Kisebb asztali kijelző
    992 PX - Tablet
    768 PX - Nagy mobil
    576 PX - Kis mobil
    400 PX - Extra kis mobil
========================================================================== */


/* ==========================================================================
   NAGY ASZTALI KIJELZŐ
   1400 PX
========================================================================== */

@media (max-width:1400px){

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

    .header-container{

        padding-inline: 30px;

    }


    /* ======================================================
       HERO
    ======================================================= */

    .hero,
    .page-hero{

        padding-left: 30px;
        padding-right: 30px;

    }


    /* ======================================================
       KONTÉNEREK
    ======================================================= */

    .container{

        width: min(94%, 1320px);

    }


    /* ======================================================
       KÁRTYÁK
    ======================================================= */

    .cards,
    .services-grid,
    .pricing-grid,
    .maintenance-grid,
    .contact-wrapper,
    .footer-grid{

        gap: 24px;

    }


    /* ======================================================
       KÉPEK
    ======================================================= */

    img{

        max-width:100%;
        height:auto;

    }

}


/* ==========================================================================
   KISEBB ASZTALI KIJELZŐ
   1200 PX
========================================================================== */

@media (max-width:1200px){

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

    .header-container{

        padding-inline: 25px;
        gap: 20px;

    }


    /* ======================================================
       NAVIGÁCIÓ
    ======================================================= */

    .main-navigation ul{

        gap: 20px;

    }

    .main-navigation a{

        font-size: .95rem;

    }


    /* ======================================================
       HERO
    ======================================================= */

    .hero{

        padding: 90px 25px;

    }

    .hero-content{

        max-width: 900px;

    }


    /* ======================================================
       OLDAL HERO
    ======================================================= */

    .page-hero{

        padding: 80px 25px;

    }

    .page-hero-content{

        max-width: 900px;

    }


    /* ======================================================
       GOMBOK
    ======================================================= */

    .button,
    .button-primary,
    .button-secondary{

        padding: 14px 24px;

    }


    /* ======================================================
       KÁRTYÁK
    ======================================================= */

    .cards,
    .services-grid,
    .pricing-grid,
    .maintenance-grid{

        gap: 22px;

    }


    /* ======================================================
       ŰRLAPOK
    ======================================================= */

    .contact-wrapper{

        gap: 25px;

    }


    /* ======================================================
       TÁBLÁZATOK
    ======================================================= */

    table{

        width:100%;

    }


    /* ======================================================
       LÁBLÉC
    ======================================================= */

    .footer-grid{

        gap: 25px;

    }

}


/* ==========================================================================
   TABLET
   992 PX
========================================================================== */

@media (max-width:992px){

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

		.header{

			position: relative;

		}

		.header-container{

			padding-inline: 20px;
			min-height: 80px;

		}

		.logo img{

			height: 52px;

		}

    /* ======================================================
   NAVIGÁCIÓ
	======================================================= */

		.main-navigation ul{

			gap: 16px;
			flex-wrap: wrap;
			justify-content: center;

		}

		.main-navigation a{

			font-size: .92rem;

		}
		
    /* ======================================================
   HERO
	======================================================= */

		.hero{

			padding: 80px 20px;

		}

		.hero-content{

			max-width: 100%;
			text-align: center;

		}
		
    /* ======================================================
   OLDAL HERO
	======================================================= */

		.page-hero{

			padding: 70px 20px;

		}

		.page-hero-content{

			max-width: 100%;
			text-align: center;

		}
		
    /* ======================================================
       GOMBOK
    ======================================================= */



    /* ======================================================
   KÁRTYÁK
	======================================================= */

		.cards,
		.services-grid,
		.pricing-grid,
		.maintenance-grid,
		.footer-grid,
		.contact-wrapper{

			grid-template-columns: 1fr;
			gap: 20px;

		}
		
		
    //* ======================================================
   ŰRLAPOK
	======================================================= */

		.contact-wrapper{

			display:flex;
			flex-direction:column;

		}
		
    /* ======================================================
       TÁBLÁZATOK
    ======================================================= */



    /* ======================================================
   LÁBLÉC
	======================================================= */

		.footer-grid{

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

		}


/* ==========================================================================
   NAGY MOBIL
   768 PX
========================================================================== */

@media (max-width:768px){

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



    /* ======================================================
       NAVIGÁCIÓ
    ======================================================= */



    /* ======================================================
       HERO
    ======================================================= */



    /* ======================================================
       OLDAL HERO
    ======================================================= */



    /* ======================================================
       GOMBOK
    ======================================================= */



    /* ======================================================
       KÁRTYÁK
    ======================================================= */



    /* ======================================================
       ŰRLAPOK
    ======================================================= */



    /* ======================================================
       TÁBLÁZATOK
    ======================================================= */



    /* ======================================================
       LÁBLÉC
    ======================================================= */

}


/* ==========================================================================
   KIS MOBIL
   576 PX
========================================================================== */

@media (max-width:576px){

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



    /* ======================================================
       NAVIGÁCIÓ
    ======================================================= */



    /* ======================================================
       HERO
    ======================================================= */



    /* ======================================================
       OLDAL HERO
    ======================================================= */



    /* ======================================================
       GOMBOK
    ======================================================= */



    /* ======================================================
       KÁRTYÁK
    ======================================================= */



    /* ======================================================
       ŰRLAPOK
    ======================================================= */



    /* ======================================================
       TÁBLÁZATOK
    ======================================================= */



    /* ======================================================
       LÁBLÉC
    ======================================================= */

}


/* ==========================================================================
   EXTRA KIS MOBIL
   400 PX
========================================================================== */

@media (max-width:400px){

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



    /* ======================================================
       NAVIGÁCIÓ
    ======================================================= */



    /* ======================================================
       HERO
    ======================================================= */



    /* ======================================================
       OLDAL HERO
    ======================================================= */



    /* ======================================================
       GOMBOK
    ======================================================= */



    /* ======================================================
       KÁRTYÁK
    ======================================================= */



    /* ======================================================
       ŰRLAPOK
    ======================================================= */



    /* ======================================================
       TÁBLÁZATOK
    ======================================================= */



    /* ======================================================
       LÁBLÉC
    ======================================================= */

}