/* ============================================
   What's On Worcester — Responsive Styles
   ============================================ */

/* ============================================
   Tablet (< 1024px)
   ============================================ */
@media (max-width: 1024px) {
    /* Events list layout: stack sidebar above */
    .events-page-layout,
    .events-page-layout.filters-collapsed {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg);
        transition: none;
    }
    .filters-sidebar {
        position: static;
    }
    /* On mobile, hide/show the sidebar as a block (no slide) */
    .filters-collapsed .filters-sidebar {
        display: none;
        transform: none;
    }

    /* Event detail sidebar below main */
    .event-detail-content {
        grid-template-columns: 1fr;
    }
    .event-sidebar {
        position: static;
    }

    /* Homepage events grid: 2-col, first still spans 2 */
    .events-grid {
        grid-template-columns: repeat(2, 1fr);
    }

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

/* ============================================
   Mobile (< 768px)
   ============================================ */
@media (max-width: 768px) {
    /* ---- Navigation ---- */
    .mobile-menu-toggle {
        display: block;
    }

    .nav-links {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--color-surface);
        border-bottom: 2px solid var(--color-text);
        flex-direction: column;
        gap: 0;
        padding: var(--spacing-md) 0;
        box-shadow: var(--shadow-lg);
        z-index: 99;
    }
    .nav-links.active {
        display: flex;
    }
    .nav-links li {
        width: 100%;
    }
    .nav-link {
        display: block;
        padding: var(--spacing-md) var(--container-padding);
        font-size: var(--font-size-sm);
    }
    .nav-link.active::after {
        display: none;
    }
    .nav-cta {
        margin: var(--spacing-sm) var(--container-padding);
        display: block;
        text-align: center;
    }

    /* Dropdown: show as block in mobile menu */
    .nav-dropdown .dropdown-menu {
        display: block;
        position: static;
        transform: none;
        box-shadow: none;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 0;
        background: var(--color-bg);
        padding: var(--spacing-sm) 0;
        animation: none;
    }
    .nav-dropdown .dropdown-menu li a {
        padding: var(--spacing-sm) calc(var(--container-padding) + var(--spacing-lg));
    }

    /* ---- Hero ---- */
    .hero {
        padding: var(--spacing-2xl) 0;
    }
    .hero::after {
        display: none;
    }
    .hero-kicker {
        margin-bottom: var(--spacing-md);
    }
    .hero-subtitle {
        font-size: 1rem;
        margin-bottom: var(--spacing-xl);
    }

    /* ---- Category strip ---- */
    .category-section {
        padding: 0;
    }
    .category-row {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
    }

    /* Mobile: toggle becomes a tappable button */
    .category-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        padding: var(--spacing-md) var(--container-padding);
        cursor: pointer;
        pointer-events: auto;
        border-bottom: 1px solid var(--color-border);
    }
    .category-toggle-chevron {
        display: block;
        color: var(--color-text-muted);
        transition: transform var(--transition-normal);
    }
    .category-toggle[aria-expanded="true"] .category-toggle-chevron {
        transform: rotate(180deg);
    }

    .category-grid {
        padding: var(--spacing-md) var(--container-padding);
        border-bottom: 1px solid var(--color-border);
    }
    .category-grid.category-collapsed {
        display: none;
    }
    .category-grid.category-animating {
        animation: categoryFadeIn 200ms ease;
    }
    @keyframes categoryFadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    /* ---- Homepage events grid ---- */
    .events-grid {
        grid-template-columns: 1fr;
    }
    .events-grid > .event-card:first-child {
        grid-column: span 1;
    }
    .events-grid > .event-card:first-child .event-card-image {
        height: 220px;
    }
    .events-grid > .event-card:first-child .event-card-title {
        font-size: var(--font-size-xl);
    }

    /* ---- Section headers ---- */
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }

    /* ---- Info section ---- */
    .info-grid {
        grid-template-columns: 1fr;
    }
    .info-card {
        padding: var(--spacing-xl) 0;
    }
    .info-card + .info-card {
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
        padding-left: 0;
    }

    /* ---- Footer ---- */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-xl);
    }
    .footer-bottom {
        flex-direction: column;
        gap: var(--spacing-sm);
        text-align: center;
    }
    .site-footer {
        margin-top: var(--spacing-2xl);
    }

    /* ---- Events list page ---- */
    .events-toolbar {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--spacing-md);
    }
    .toolbar-controls {
        width: 100%;
        justify-content: space-between;
    }

    /* ---- Event detail ---- */
    .event-detail-hero {
        height: 280px;
    }
    .quick-info-item {
        grid-template-columns: 1fr;
    }
    .event-quick-info {
        grid-template-columns: 1fr;
    }

    /* ---- Typography scale ---- */
    .section-title { font-size: var(--font-size-2xl); }
}

/* ============================================
   Small mobile (< 480px)
   ============================================ */
@media (max-width: 480px) {
    .hero-title {
        font-size: 2.25rem;
    }
    .search-button span:not(.search-icon) {
        display: none;
    }
    .search-button {
        padding: 0.9rem 1rem;
    }
    .events-results-grid {
        grid-template-columns: 1fr;
    }
    .category-card {
        font-size: var(--font-size-xs);
        padding: 0.35rem 0.7rem;
    }
}

/* ============================================
   Reduced motion
   ============================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
   Print
   ============================================ */
@media print {
    .site-header,
    .site-footer,
    .filters-sidebar,
    .share-buttons,
    .search-bar,
    .category-section {
        display: none !important;
    }
    body {
        background: white;
        color: black;
    }
    .event-detail-content {
        grid-template-columns: 1fr;
    }
}