/* ==========================================================
   PrimeTech Solutions
   grid.css
   Grid & Layout System v1.0
   ========================================================== */

/* ---------- Containers ---------- */

.container{
    width:min(var(--container),92%);
    margin-inline:auto;
}

.container-sm{
    width:min(900px,92%);
    margin-inline:auto;
}

.container-lg{
    width:min(1320px,94%);
    margin-inline:auto;
}

/* ---------- Generic Section ---------- */

.section{
    padding:var(--section-space) 0;
}

/* ---------- Auto Grid ---------- */

.auto-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
    gap:var(--card-gap);
}

/* ---------- Reusable Layouts ---------- */

.hero-grid,
.about-grid,
.expert-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:4rem;
    align-items:center;
}

.services-grid,
.primecare-grid,
.business-grid,
.stats-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:var(--card-gap);
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:1.5rem;
}

.footer-grid{
    display:grid;
    grid-template-columns:2fr 1fr 1.3fr 1.2fr;
    gap:2rem;
}

.contact-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:2rem;
}

.cta-buttons,
.hero-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:1rem;
}

/* ---------- Alignment ---------- */

.place-center{
    display:grid;
    place-items:center;
}

.stack{
    display:flex;
    flex-direction:column;
    gap:1rem;
}

/* ---------- Responsive ---------- */

@media (max-width:992px){

    .hero-grid,
    .about-grid,
    .expert-grid,
    .footer-grid,
    .contact-grid{
        grid-template-columns:1fr;
    }

    .services-grid,
    .primecare-grid,
    .business-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media (max-width:576px){

    .section{
        padding:70px 0;
    }

    .services-grid,
    .primecare-grid,
    .business-grid,
    .stats-grid,
    .gallery-grid{
        grid-template-columns:1fr;
    }

    .cta-buttons,
    .hero-buttons{
        flex-direction:column;
    }
}