/* Mobile-first — base styles are in main.css; this file upgrades to larger screens */

/* ── Small mobile only (up to 479px) ─────────────────────────────────────── */
@media (max-width: 479px) {
    .tfj-hero__search { flex-direction: column; border-radius: var(--radius); }
    .tfj-hero__search-field { border-right: none; border-bottom: 1px solid var(--c-border); }
    .tfj-hero__search-btn { border-radius: 0 0 var(--radius) var(--radius); }
    .tfj-plan-cards { flex-direction: column; }
}

/* ── Tablet and up (768px+) ──────────────────────────────────────────────── */
@media (min-width: 768px) {
    .tfj-container { padding: 0 24px; }
    .tfj-section { padding: 80px 0; }

    /* Nav */
    .tfj-nav__hamburger { display: none; }
    .tfj-nav__links { display: block !important; }
    .tfj-nav__ctas { display: flex; }

    /* Hero */
    .tfj-hero { padding: 90px 0 100px; }

    /* Jobs Grid */
    .tfj-jobs-grid { grid-template-columns: 1fr; }

    /* Sectors */
    .tfj-sectors__grid { grid-template-columns: repeat(4, 1fr); }

    /* How It Works */
    .tfj-how__steps { flex-direction: row; }
    .tfj-how__step { flex-direction: column; text-align: center; align-items: center; border-bottom: none; border-right: 1px solid var(--c-border-soft); flex: 1; padding: 0 24px; }
    .tfj-how__step:last-child { border-right: none; }

    /* Jobs sidebar — show on desktop */
    .tfj-jobs-sidebar { display: block; }
    .tfj-filters-mobile-btn { display: none; }

    /* Footer */
    .tfj-footer__inner { grid-template-columns: 2fr 1fr 1fr 1fr; }

    /* Post-job layout shows side-by-side */
    .tfj-post-job-layout { flex-direction: row; }
    .tfj-post-job-preview { display: block; }
}

/* ── Desktop (1024px+) ───────────────────────────────────────────────────── */
@media (min-width: 1024px) {
    .tfj-jobs-grid { grid-template-columns: 1fr; gap: 14px; }
    .tfj-single-job__layout { flex-direction: row; }
    .tfj-sectors__grid { grid-template-columns: repeat(4, 1fr); }
}

/* ── Mobile only (below 768px) ───────────────────────────────────────────── */
@media (max-width: 767px) {
    /* Nav mobile */
    .tfj-nav__hamburger { display: flex; }
    .tfj-nav__ctas { display: none; }
    .tfj-nav__links {
        display: none;
        position: fixed;
        top: var(--nav-h);
        left: 0; right: 0;
        background: var(--c-surface);
        border-bottom: 1px solid var(--c-border);
        padding: 12px 0 20px;
        z-index: 100;
        box-shadow: var(--shadow);
    }
    .tfj-nav__links.is-open { display: block; }
    .tfj-nav__menu { flex-direction: column; padding: 0 16px; gap: 0; }
    .tfj-nav__menu li a { display: block; padding: 12px 14px; }
    .tfj-nav-overlay { display: none; }
    .tfj-nav-overlay.is-open { display: block; }

    /* Hero */
    .tfj-hero__stats { gap: 20px; }

    /* Sectors */
    .tfj-sectors__grid { grid-template-columns: repeat(2, 1fr); }

    /* Jobs layout — hide sidebar, show mobile filter button */
    .tfj-jobs-sidebar { display: none; }
    .tfj-filters-mobile-btn { display: block; }
    .tfj-jobs-page__layout { flex-direction: column; }
    .tfj-jobs-main { width: 100%; }

    /* Single job layout */
    .tfj-single-job__layout { flex-direction: column; }
    .tfj-single-job__sidebar { width: 100%; }
    .tfj-single-job__sticky { position: static; }

    /* Filter bar */
    .tfj-filter-bar__inner { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
    .tfj-filter-bar__inner::-webkit-scrollbar { height: 0; }
    .tfj-filter-bar__count { display: none; }

    /* Footer */
    .tfj-footer__inner { grid-template-columns: 1fr; gap: 32px; }
    .tfj-footer__bottom { flex-direction: column; text-align: center; }

    /* Post-job layout */
    .tfj-post-job-layout { flex-direction: column; }
    .tfj-post-job-preview { width: 100%; position: static; }

    /* How it works */
    .tfj-how__step { flex-direction: row; }
}

/* ── Print ────────────────────────────────────────────────────────────────── */
@media print {
    .tfj-nav, .tfj-footer, .tfj-wa-float, .tfj-filter-bar { display: none; }
    .tfj-single-job__sidebar { display: none; }
    .tfj-single-job__main { width: 100%; }
}