/*
 * Responsive Stylesheet - Cloudridge Studios
 * Media queries for tablet and mobile devices
 */

/* ===== TABLET (max-width: 1024px) ===== */
@media (max-width: 1024px) {
    :root {
        --text-5xl: 2.5rem;
        --text-6xl: 3rem;
        --text-7xl: 3.5rem;
    }

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

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

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

/* ===== MOBILE LANDSCAPE (max-width: 768px) ===== */
@media (max-width: 768px) {
    :root {
        --text-4xl: 2rem;
        --text-5xl: 2.25rem;
        --text-6xl: 2.5rem;
        --text-7xl: 3rem;
    }

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

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

    .section-header {
        margin-bottom: var(--space-10);
    }

    .section-title {
        font-size: var(--text-3xl);
    }

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

    .btn-lg {
        padding: var(--space-3) var(--space-6);
        font-size: var(--text-base);
    }

    /* Hide on mobile */
    .hide-mobile {
        display: none !important;
    }

    /* Show on mobile */
    .show-mobile {
        display: block !important;
    }
}

/* ===== MOBILE PORTRAIT (max-width: 480px) ===== */
@media (max-width: 480px) {
    :root {
        --text-3xl: 1.5rem;
        --text-4xl: 1.75rem;
        --text-5xl: 2rem;
        --text-6xl: 2.25rem;
    }

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

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

    .card {
        padding: var(--space-4);
    }

    .feature-card {
        padding: var(--space-5);
    }

    .stat-number {
        font-size: var(--text-4xl);
    }

    .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== LARGE SCREENS (min-width: 1536px) ===== */
@media (min-width: 1536px) {
    .container {
        max-width: 1600px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .header,
    .footer,
    .btn,
    .scroll-to-top {
        display: none !important;
    }

    body {
        color: #000;
        background: #fff;
    }

    section {
        padding: 20px 0;
        page-break-inside: avoid;
    }
}