/**
 * Responsive Styles - Mobile First Approach
 */

/* Tablet and below (768px) */
@media (max-width: 768px) {
    :root {
        --spacing-xl: 2rem;
        --spacing-2xl: 3rem;
    }

    /* Typography */
    h1 { font-size: 2rem; }
    h2 { font-size: 1.75rem; }
    h3 { font-size: 1.5rem; }

    .hero h1 {
        font-size: 2.25rem;
    }

    .hero p {
        font-size: 1.125rem;
    }

    /* Navigation */
    .mobile-menu-toggle {
        display: block;
    }

    .nav-wrapper {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        flex-direction: column;
        padding: var(--spacing-md);
        box-shadow: var(--shadow-lg);
        gap: var(--spacing-md);
    }

    .nav-wrapper.active {
        display: flex;
    }

    .nav {
        flex-direction: column;
        gap: var(--spacing-sm);
        width: 100%;
    }

    .nav a {
        padding: var(--spacing-sm);
        width: 100%;
        text-align: center;
    }

    /* Search */
    .search-container {
        width: 100%;
        justify-content: center;
    }

    .search-container.active .search-input-wrapper {
        width: 250px;
    }

    .search-results {
        width: 350px;
        max-width: calc(100vw - 2rem);
    }

    /* Grid adjustments */
    .grid-2,
    .grid-3 {
        grid-template-columns: 1fr;
    }

    /* Footer */
    .footer-content {
        grid-template-columns: 1fr;
    }

    /* Newsletter form */
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form .btn {
        width: 100%;
    }

    /* Cards */
    .card-image {
        height: 180px;
    }

    /* Hide thumbnails on tablets and below */
    .card-thumbnail {
        display: none;
    }

    .card-footer-with-thumbnail {
        justify-content: flex-start;
    }

    /* Container padding */
    .container,
    .container-narrow {
        padding: 0 var(--spacing-sm);
    }

    /* Section spacing */
    .section {
        padding: var(--spacing-xl) 0;
    }
}

/* Mobile phones (480px and below) */
@media (max-width: 480px) {
    body {
        font-size: 14px;
    }

    h1 { font-size: 1.75rem; }
    h2 { font-size: 1.5rem; }
    h3 { font-size: 1.25rem; }

    .hero {
        padding: var(--spacing-xl) 0;
    }

    .hero h1 {
        font-size: 1.875rem;
    }

    .hero p {
        font-size: 1rem;
    }

    .btn {
        padding: 0.625rem 1.25rem;
        font-size: 0.875rem;
    }

    .btn-large {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }

    .logo {
        font-size: 1.25rem;
    }

    .logo-image {
        height: 80px;
        width: auto;
    }

    /* Search */
    .search-container.active .search-input-wrapper {
        width: 200px;
    }

    .search-results {
        width: 300px;
    }

    .search-input {
        font-size: 0.875rem;
    }

    .card-content {
        padding: var(--spacing-sm);
    }

    .post-content {
        font-size: 1rem;
    }
}

/* Large screens (1440px and above) */
@media (min-width: 1440px) {
    .container {
        max-width: 1400px;
    }

    .hero h1 {
        font-size: 3.5rem;
    }

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

/* Print styles */
@media print {
    .header,
    .footer,
    .btn,
    .newsletter-form {
        display: none;
    }

    body {
        font-size: 12pt;
        color: #000;
    }

    a {
        text-decoration: underline;
        color: #000;
    }
}