/* ================================
   RESPONSIVE STYLES
   Mobile-First Approach
   ================================ */

/* Tablet (768px - 1024px) */
@media (max-width: 1024px) {
    :root {
        --spacing-xl: 32px;
        --spacing-lg: 24px;
    }

    .container {
        grid-template-columns: 180px 1fr 300px;
        gap: var(--spacing-lg);
        padding: var(--spacing-lg) var(--spacing-md);
    }

    h1 {
        font-size: 2.25rem;
    }

    h2 {
        font-size: 1.875rem;
    }

    h3 {
        font-size: 1.5rem;
    }
}

/* Tablet Small (768px - 900px) - Two Column Layout */
@media (max-width: 900px) {
    .container {
        grid-template-columns: 1fr;
        grid-template-areas:
            "content"
            "sidebar-right";
    }

    .sidebar-left {
        display: none; /* Hidden on smaller tablets */
    }

    /* Show mobile header on tablets */
    .mobile-header {
        display: block;
    }

    .content {
        grid-area: content;
        max-width: 100%;
    }

    .sidebar-right {
        grid-area: sidebar-right;
        position: static;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--spacing-md);
    }

    /* Show mobile footer on tablets */
    .mobile-footer {
        display: flex;
        justify-content: space-around;
    }

    /* Add bottom padding to content to account for mobile footer */
    body {
        padding-bottom: 70px;
    }
}

/* Mobile (< 768px) - Single Column Layout */
@media (max-width: 768px) {
    :root {
        --font-size-base: 1rem;
        --spacing-xl: 24px;
        --spacing-lg: 20px;
        --spacing-md: 16px;
    }

    html {
        font-size: 15px;
    }

    .container {
        grid-template-columns: 1fr;
        padding: var(--spacing-md);
        gap: var(--spacing-md);
    }

    /* Typography adjustments */
    h1 {
        font-size: 2rem;
        line-height: var(--line-height-tight);
    }

    h2 {
        font-size: 1.75rem;
    }

    h3 {
        font-size: 1.375rem;
    }

    /* Hide left sidebar completely */
    .sidebar-left {
        display: none;
    }

    /* Show mobile header on mobile */
    .mobile-header {
        display: block;
    }

    /* Content takes full width */
    .content {
        max-width: 100%;
        width: 100%;
    }

    /* Post adjustments */
    .section {
        padding: var(--spacing-lg);
        border-radius: var(--radius-sm);
    }

    /* Right sidebar stacks below content */
    .sidebar-right {
        position: static;
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .promo-image {
        height: 180px;
    }

    /* Packages grid adjustments */
    .packages-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .package-card {
        margin-bottom: var(--spacing-md);
    }

    /* Mobile footer visible */
    .mobile-footer {
        display: flex;
        justify-content: space-around;
    }

    /* Add bottom padding to body for mobile footer */
    body {
        padding-bottom: 70px;
    }
}

/* Mobile - Small (< 480px) - Extra small phones */
@media (max-width: 480px) {
    .container {
        padding: var(--spacing-sm);
    }

    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.5rem;
    }

    h3 {
        font-size: 1.25rem;
    }

    .section {
        padding: var(--spacing-md);
    }

    .promo-image {
        height: 140px;
    }

    .package-image {
        height: 180px;
    }

    /* Features grid becomes single column on mobile */
    .features-grid {
        grid-template-columns: 1fr;
    }

    /* Tighter spacing */
    .mobile-footer a {
        padding: 6px;
    }
}

/* Desktop - Large (> 1400px) - Wider screens */
@media (min-width: 1400px) {
    .container {
        max-width: 1600px;
        grid-template-columns: 220px 1fr 380px;
    }

    .content {
        max-width: 750px;
    }
}

/* Print Styles */
@media print {
    .sidebar-left,
    .sidebar-right,
    .mobile-footer,
    .btn {
        display: none !important;
    }

    .container {
        display: block;
        max-width: 100%;
    }

    .section {
        box-shadow: none;
        border: none;
        padding: 0;
    }

    body {
        background-color: white;
        color: black;
        padding-bottom: 0;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}

/* Reduced Motion - Accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}