/*
|--------------------------------------------------------------------------
| Studio Core - Main CSS
|--------------------------------------------------------------------------
|
| File per regole globali leggere.
| Qui non inserire componenti specifici.
|
*/

@import url('./components.css');
@import url('./animations.css');
@import url('./tokens.css');
@import url('./utilities.css');
@import url('./layouts/navbar.css');
@import url('./layouts/hero.css');
@import url('./layouts/footer.css');
@import url('./layouts/services.css');
@import url('./layouts/about.css');
@import url('./layouts/portfolio-bridge.css');
@import url('./layouts/portfolio.css');
@import url('./layouts/method.css');
@import url('./pages/services-page.css');
@import url('./pages/service-hero.css');
@import url('./pages/service-contact.css');
@import url('./pages/contact.css');
@import url('./homepage-temp.css');

/* ==========================================================
   GAD | GLOBAL PAGE SPACING
   Riferimento orizzontale comune a tutte le sezioni
========================================================== */

:root {
    --gad-page-side: clamp(28px, 6vw, 110px);
}


/* STANDARD DESKTOP / LARGE LAPTOP
   1181px → 1599px
========================================================== */

@media (min-width: 1181px) and (max-width: 1599px) {

    :root {
        --gad-page-side: clamp(45px, 5vw, 85px);
    }

}


/* COMPACT LAPTOP
   961px → 1180px
========================================================== */

@media (min-width: 961px) and (max-width: 1180px) {

    :root {
        --gad-page-side: 42px;
    }

}


/* TABLET
   641px → 960px
========================================================== */

@media (min-width: 641px) and (max-width: 960px) {

    :root {
        --gad-page-side: 34px;
    }

}


/* MOBILE
   ≤ 640px
========================================================== */

@media (max-width: 640px) {

    :root {
        --gad-page-side: 20px;
    }

}


/* SMALL MOBILE
   ≤ 480px
========================================================== */

@media (max-width: 480px) {

    :root {
        --gad-page-side: 17px;
    }

}


/* VERY SMALL MOBILE
   ≤ 380px
========================================================== */

@media (max-width: 380px) {

    :root {
        --gad-page-side: 14px;
    }

}