/* ============================================================
   FinanceFrameworks — Responsive Styles
   Mobile:  < 480px
   Tablet:  480px – 768px
   Desktop: > 768px
   Wide:    > 1200px
   ============================================================ */

/* --- Tablet & below (< 768px) --- */
@media (max-width: 768px) {

    /* Container */
    .container {
        padding: 0 16px;
    }

    /* Header */
    .site-header__inner {
        height: 54px;
    }

    .site-header__logo-img {
        height: 40px;
    }

    .site-header__toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .site-header__nav {
        display: none;
        position: absolute;
        top: 54px;
        left: 0;
        right: 0;
        background: rgba(10, 11, 15, 0.97);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid var(--color-border);
        padding: 8px 0 16px;
        z-index: 199;
    }

    .site-header__nav.is-open {
        display: block;
        animation: fadeInUp 0.18s ease both;
    }

    .site-header__menu {
        flex-direction: column;
        gap: 0;
        padding: 0 8px;
    }

    .site-header__menu a {
        display: block;
        padding: 10px 16px;
        border-radius: var(--radius-md);
        font-size: var(--text-sm);
    }

    /* Hero */
    .hero {
        padding: 44px 0 36px;
    }

    .hero__title {
        font-size: 2rem;
        letter-spacing: -0.025em;
    }

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

    /* Sections */
    .section {
        padding: 44px 0;
    }

    .section__title::before {
        display: none;
    }

    .section--ctas {
        padding: 44px 0 56px;
    }

    .section--ctas .section__title {
        font-size: var(--text-2xl);
    }

    /* Framework Grid */
    .framework-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    /* Browse Grid */
    .browse-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* Filter Bar — collapse into drawer */
    .filter-bar__toggle {
        display: flex;
    }

    .filter-bar__panel {
        display: none;
        padding: 16px;
    }

    .filter-bar__panel.is-open {
        display: block;
    }

    .filter-bar__fields {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .filter-bar__dropdown-panel {
        width: 100%;
        position: relative;
        top: 4px;
        box-shadow: none;
        border-radius: var(--radius-md);
    }

    .filter-bar__actions {
        justify-content: stretch;
        flex-direction: column;
    }

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

    /* Single Framework */
    .single-framework {
        padding: 32px 0 56px;
    }

    .single-framework__title {
        font-size: 1.75rem;
    }

    .single-framework__summary {
        font-size: var(--text-base);
    }

    .single-framework__metadata {
        padding: 16px 18px;
    }

    .metadata-row {
        flex-direction: column;
        gap: 14px;
    }

    /* Framework Sections */
    .fw-section--downloads {
        padding: 18px 20px;
    }

    .fw-section--cta {
        padding: 24px 16px;
    }

    /* CTA Row */
    .cta-row {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-row .btn {
        justify-content: center;
        text-align: center;
    }

    /* Changelog table scroll */
    .changelog-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
    }

    /* Download buttons */
    .download-buttons {
        flex-direction: column;
    }

    /* Field notes */
    .field-note {
        padding: 16px 18px;
    }

    .field-note__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .field-note__meta {
        order: -1;
    }

    /* Footer */
    .site-footer {
        padding: 32px 0 24px;
    }

    .site-footer__inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .site-footer__copy {
        text-align: left;
    }

    /* Pagination */
    .pagination ul,
    .pagination__list {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* 404 */
    .error-404 {
        padding: 72px 24px 48px;
    }

    .error-404__code {
        font-size: 4.5rem;
    }

    /* Page content */
    .page-content h2 {
        font-size: var(--text-lg);
    }

    /* Gravity Forms */
    .gform_wrapper .gfield {
        margin-bottom: 16px !important;
    }
}

/* --- Tablet range (480px – 768px) --- */
@media (min-width: 480px) and (max-width: 768px) {
    .framework-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .browse-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .filter-bar__fields {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .filter-bar__dropdown-panel {
        width: 280px;
    }

    .hero__title {
        font-size: 2.25rem;
    }

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

/* --- Mobile only (< 480px) --- */
@media (max-width: 480px) {
    .hero {
        padding: 36px 0 28px;
    }

    .hero__title {
        font-size: 1.75rem;
    }

    .hero__subtitle {
        font-size: var(--text-sm);
    }

    .section {
        padding: 36px 0;
    }

    .framework-grid {
        grid-template-columns: 1fr;
        border-radius: var(--radius-md);
    }

    .single-framework__title {
        font-size: 1.5rem;
    }

    .single-framework__meta-badges {
        gap: 5px;
    }

    .badge {
        font-size: 9px;
        padding: 2px 6px;
    }

    .btn {
        font-size: var(--text-xs);
        padding: 9px 18px;
    }

    .btn--load-more {
        font-size: 10px;
    }

    .site-footer__menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .cta-row .btn {
        padding: 10px 20px;
        font-size: var(--text-sm);
    }

    .browse-card {
        padding: 20px;
    }

    .browse-card__title {
        font-size: var(--text-lg);
    }

    .error-404__code {
        font-size: 3.5rem;
    }

    .error-404__title {
        font-size: var(--text-xl);
    }
}

/* --- Desktop (> 768px, < 1200px) --- */
@media (min-width: 768px) and (max-width: 1199px) {
    .framework-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .single-framework__title {
        font-size: 2.25rem;
    }
}

/* --- Wide desktop (>= 1200px) --- */
@media (min-width: 1200px) {
    .framework-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .hero__title {
        font-size: 4rem;
    }

    .container {
        padding: 0 40px;
    }

    .section {
        padding: 80px 0;
    }

    .section--ctas {
        padding: 96px 0;
    }
}

/* --- Ultra wide (>= 1440px) --- */
@media (min-width: 1440px) {
    .framework-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero__title {
        font-size: 4.5rem;
    }
}

/* --- Print styles --- */
@media print {
    .site-header,
    .site-footer,
    .filter-bar,
    .cta-row,
    .fw-section--cta,
    .field-notes-list,
    .pagination {
        display: none !important;
    }

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

    .single-framework__title,
    .fw-section__title,
    h1, h2, h3 {
        color: #000 !important;
        -webkit-text-fill-color: #000 !important;
    }

    .fw-section__content,
    .single-framework__summary,
    .metadata-item__value {
        color: #333 !important;
    }

    .single-framework__metadata {
        border: 1px solid #ccc !important;
        background: #f8f8f8 !important;
    }

    .badge {
        border: 1px solid #ccc !important;
        color: #333 !important;
        background: #f0f0f0 !important;
    }
}

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

    .hero::after {
        display: none;
    }
}