/* ==========================================
   GLOBAL RESPONSIVE STYLES
   Treasure Pelo Industries
========================================== */

/*
|--------------------------------------------------------------------------
| Large Desktop
| 1400px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 1400px) {
    :root {
        --container-width: 1140px;
        --font-size-4xl: 3rem;
        --font-size-3xl: 2.35rem;
    }
}

/*
|--------------------------------------------------------------------------
| Standard Desktop / Small Laptop
| 1200px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 1200px) {
    :root {
        --container-width: 1080px;
        --section-padding: 80px;
        --section-padding-sm: 55px;
        --font-size-4xl: 2.85rem;
        --font-size-3xl: 2.25rem;
        --font-size-2xl: 1.85rem;
    }

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

/*
|--------------------------------------------------------------------------
| Tablet Landscape / Small Laptop
| 1024px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 1024px) {
    :root {
        --container-width: 960px;
        --section-padding: 75px;
        --section-padding-sm: 50px;
        --font-size-4xl: 2.65rem;
        --font-size-3xl: 2.1rem;
    }

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

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

/*
|--------------------------------------------------------------------------
| Tablet Portrait
| 900px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 900px) {
    :root {
        --container-width: 820px;
        --font-size-4xl: 2.45rem;
        --font-size-3xl: 2rem;
        --font-size-2xl: 1.7rem;
    }

    .grid-2 {
        grid-template-columns: 1fr;
    }

    .section-title,
    .section-intro {
        max-width: 100%;
    }
}

/*
|--------------------------------------------------------------------------
| Mobile / Tablet
| 768px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
    :root {
        --container-padding: 15px;
        --section-padding: 60px;
        --section-padding-sm: 45px;

        --font-size-4xl: 2.25rem;
        --font-size-3xl: 1.85rem;
        --font-size-2xl: 1.6rem;
        --font-size-xl: 1.35rem;
        --font-size-lg: 1.15rem;
    }

    .container {
        width: min(100% - 30px, var(--container-width));
    }

    .grid-2,
    .grid-3,
    .grid-4 {
        grid-template-columns: 1fr;
    }

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

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

    .section-label {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
    }

    .section-label::before {
        width: 28px;
    }

    .cta-panel {
        padding: 35px 25px;
    }
}

/*
|--------------------------------------------------------------------------
| Large Mobile
| 640px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 640px) {
    :root {
        --section-padding: 54px;
        --section-padding-sm: 38px;

        --font-size-4xl: 2.1rem;
        --font-size-3xl: 1.75rem;
        --font-size-2xl: 1.5rem;
    }

    body {
        font-size: 0.95rem;
    }

    .card {
        padding: 24px;
    }

    .cta-panel {
        padding: 32px 22px;
        border-radius: var(--radius-md);
    }
}

/*
|--------------------------------------------------------------------------
| Standard Mobile
| 575px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 575px) {
    :root {
        --font-size-4xl: 2rem;
        --font-size-3xl: 1.68rem;
        --font-size-2xl: 1.42rem;
        --font-size-xl: 1.25rem;
    }

    .container {
        width: min(100% - 26px, var(--container-width));
    }

    h1,
    h2,
    h3 {
        overflow-wrap: break-word;
    }

    .section-label {
        display: inline-flex;
        max-width: 100%;
        line-height: 1.4;
    }

    .btn {
        width: 100%;
    }

    .btn + .btn {
        margin-top: 10px;
    }
}

/*
|--------------------------------------------------------------------------
| Small Mobile
| 480px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 480px) {
    :root {
        --section-padding: 48px;
        --section-padding-sm: 34px;

        --font-size-4xl: 1.85rem;
        --font-size-3xl: 1.55rem;
        --font-size-2xl: 1.35rem;
        --font-size-xl: 1.18rem;
        --font-size-lg: 1.05rem;
    }

    body {
        font-size: 0.92rem;
    }

    .container {
        width: min(100% - 24px, var(--container-width));
    }

    .card {
        padding: 22px 20px;
    }

    .cta-panel {
        padding: 28px 20px;
    }
}

/*
|--------------------------------------------------------------------------
| Extra Small Mobile
| 390px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 390px) {
    :root {
        --font-size-4xl: 1.72rem;
        --font-size-3xl: 1.45rem;
        --font-size-2xl: 1.28rem;
    }

    .container {
        width: min(100% - 22px, var(--container-width));
    }

    .card {
        padding: 20px 18px;
    }

    .section-label {
        font-size: 0.7rem;
    }
}

/*
|--------------------------------------------------------------------------
| Very Small Mobile
| 340px and below
|--------------------------------------------------------------------------
*/

@media (max-width: 340px) {
    :root {
        --font-size-4xl: 1.58rem;
        --font-size-3xl: 1.34rem;
        --font-size-2xl: 1.2rem;
    }

    .container {
        width: min(100% - 18px, var(--container-width));
    }

    .btn {
        min-height: 44px;
        padding: 11px 16px;
        font-size: 0.8rem;
    }
}

/*
|--------------------------------------------------------------------------
| Landscape Phones
|--------------------------------------------------------------------------
*/

@media (max-height: 500px) and (orientation: landscape) {
    :root {
        --section-padding: 42px;
        --section-padding-sm: 30px;
    }
}

/*
|--------------------------------------------------------------------------
| Reduced Motion
|--------------------------------------------------------------------------
*/

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}