/**
 * Ridgeway Maker Theme - Responsive Breakpoints
 *
 * Breakpoints:
 *   Phone portrait:    below 480px
 *   Phone landscape:   480-767px
 *   Tablet portrait:   768-899px
 *   Tablet landscape:  900-1199px
 *   Desktop:           1200px+
 */

/* ========================================
   TABLET PORTRAIT AND BELOW (< 900px)
   ======================================== */
@media screen and (max-width: 899px) {
    :root {
        --spacing-2xl: 4rem;
        --spacing-xl: 3rem;
        --ridge-header-clearance: 70px;
    }

    .grid--3 {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }

    .grid--4 {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ========================================
   PHONE LANDSCAPE AND BELOW (< 768px)
   ======================================== */
@media screen and (max-width: 767px) {
    :root {
        --spacing-2xl: 3rem;
        --spacing-xl: 2rem;
        --spacing-lg: 2rem;
    }

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

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

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

    .section__subtitle {
        font-size: var(--font-size-base);
    }

    .footer__nav ul {
        flex-direction: column;
        align-items: center;
        gap: var(--spacing-sm);
    }
}

/* ========================================
   PHONE PORTRAIT (< 480px)
   ======================================== */
@media screen and (max-width: 479px) {
    :root {
        --spacing-md: 1.5rem;
    }

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

    .btn--large {
        padding: 0.75rem 1.5rem;
        font-size: var(--font-size-sm);
    }
}