/* =============================================
   JobMarathi — Components & Layout
   Loaded after design-system.css on every page.
   ============================================= */

/* ── Layout shell ──────────────────────────────────── */
.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 var(--space-4);
}

.layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--sidebar-w);
    gap: var(--space-5);
    align-items: start;
    padding: var(--space-5) 0 var(--space-10);
}
.layout--full { grid-template-columns: minmax(0, 1fr); }

/* ── Header ────────────────────────────────────────── */
.site-header {
    background: var(--primary-700);
    color: var(--text-inverse);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--shadow-md);
}
.header-bar {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    height: var(--header-h);
}
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--text-inverse);
    font-weight: 700;
    font-size: var(--text-lg);
    white-space: nowrap;
}
.logo:hover { text-decoration: none; opacity: 0.92; }
.logo__mark {
    display: grid;
    place-items: center;
    width: 32px; height: 32px;
    /* Inverted, not a coloured chip. An orange mark on the saffron header
       vanishes, and the obvious alternative — accent blue — measures 1.48:1
       against #9a3412, which is worse: two mid-dark hues of similar lightness
       read as one smudge at 32px. White is the only reliable choice on a
       coloured header, and it inverts cleanly if the theme changes again. */
    background: #ffffff;
    color: var(--primary-700);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    font-weight: 800;
}
.logo__tag {
    font-size: var(--text-xs);
    font-weight: 400;
    opacity: 0.85;
    display: block;
    line-height: 1.1;
}

.header-spacer { flex: 1; }

.header-search {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-md);
    padding: 0 var(--space-2);
}
.header-search input {
    background: transparent;
    border: 0;
    color: var(--text-inverse);
    font: inherit;
    font-size: var(--text-sm);
    padding: var(--space-2);
    width: 180px;
}
.header-search input::placeholder { color: rgba(255, 255, 255, 0.7); }
.header-search input:focus { outline: none; }
.header-search button {
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-inverse); font-size: var(--text-md); padding: var(--space-1);
}

.nav-toggle {
    display: none;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-md);
    color: var(--text-inverse);
    font-size: var(--text-lg);
    line-height: 1;
    padding: var(--space-2) var(--space-3);
    cursor: pointer;
}

/* ── Primary nav ───────────────────────────────────── */
.site-nav { background: var(--primary-800); }
.site-nav ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
}
.site-nav a {
    display: block;
    padding: var(--space-3) var(--space-4);
    color: rgba(255, 255, 255, 0.92);
    font-size: var(--text-sm);
    font-weight: 600;
    white-space: nowrap;
}
.site-nav a:hover,
.site-nav a.active {
    background: var(--primary-600);
    color: #fff;
    text-decoration: none;
}

/* ── News ticker ───────────────────────────────────── */
.ticker {
    display: flex;
    align-items: stretch;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.ticker__label {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    background: var(--danger-600);
    color: #fff;
    font-size: var(--text-xs);
    font-weight: 700;
    padding: var(--space-2) var(--space-3);
    white-space: nowrap;
}
.ticker__viewport { overflow: hidden; flex: 1; }
.ticker__track {
    display: flex;
    gap: var(--space-8);
    padding: var(--space-2) 0;
    white-space: nowrap;
    /* Duration is set inline per page from the item count, so ten items do not
       scroll ten times faster than one. */
    animation: ticker-scroll linear infinite;
}
.ticker__track:hover { animation-play-state: paused; }
.ticker__track a { font-size: var(--text-sm); color: var(--text-primary); }
.ticker__track a:hover { color: var(--text-link); }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
/* Reduced motion: stop the marquee and let it wrap into a static list. A
   scrolling headline is unreadable for anyone with vestibular sensitivity, and
   the content is the point. */
@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
        white-space: normal;
        flex-wrap: wrap;
        gap: var(--space-2) var(--space-5);
    }
    /* The second copy of the list exists only so the scroll loop has no seam.
       With the animation off it is ten duplicate headlines. */
    .ticker__track a[aria-hidden="true"] { display: none; }
    /* And cap what remains. Unwrapped, ten headlines are ~700px on a 390px
       phone — the entire first screen, before a single job listing. The
       ticker is a glance, not a section. */
    .ticker__viewport { max-height: 4.2em; overflow-y: auto; }
}

/* ── Section card ──────────────────────────────────── */
.card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-5);
    overflow: hidden;
}
/* Section header.
   Was a solid saffron bar, with modifiers that made it solid blue / red /
   green. Seven of those stacked down the homepage was a rainbow: every section
   shouted, so none of them led. Now the header is quiet — pale ground, dark
   text — and the section's colour survives as a 4px rule on the left edge.
   The hierarchy is carried by ONE solid bar (--solid, used once per page for
   the block that matters) instead of by seven competing ones. */
.card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    background: var(--bg-subtle);
    color: var(--text-primary);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    border-left: 4px solid var(--primary-600);
}
.card__head--accent  { border-left-color: var(--accent-600); }
.card__head--danger  { border-left-color: var(--danger-600); }
.card__head--success { border-left-color: var(--success-700); }

/* The page's anchor block — exactly one per page. */
.card__head--solid {
    background: var(--primary-700);
    border-left-color: var(--primary-700);
    border-bottom-color: var(--primary-700);
    color: #fff;
}
.card__head--solid h1, .card__head--solid h2 { color: #fff; }
.card__head--solid a { color: rgba(255, 255, 255, 0.92); }

.card__head h2, .card__head h1 {
    margin: 0;
    font-size: var(--text-md);
    color: inherit;
    font-weight: 700;
}
.card__head a { color: var(--text-link); font-size: var(--text-xs); font-weight: 600; }
.card__body { padding: var(--space-4); }
.card__body--flush { padding: 0; }

/* ── Post list (the core listing row) ──────────────── */
.post-list { list-style: none; margin: 0; padding: 0; }
.post-list li {
    margin: 0;
    border-bottom: 1px solid var(--border);
}
.post-list li:last-child { border-bottom: 0; }
.post-list li:nth-child(even) { background: var(--bg-subtle); }

.post-row {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
}
.post-row:hover { background: var(--primary-50); text-decoration: none; }
.post-row__bullet { color: var(--primary-600); flex: 0 0 auto; font-size: var(--text-xs); }
.post-row__body { flex: 1; min-width: 0; }
.post-row__title {
    color: var(--text-link);
    font-size: var(--text-base);
    font-weight: 600;
    line-height: var(--leading-tight);
}
.post-row:hover .post-row__title { text-decoration: underline; }
/* Meta line.
   Previously every fact was a coloured badge — type, vacancies, deadline, org,
   date — up to six per row. At fifteen rows that is ninety coloured chips on
   one screen and nothing stands out. Now at most TWO badges survive (the
   deadline, which is the only actionable one, and "New"), and everything else
   is plain muted text separated by dots. */
.post-row__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1) var(--space-2);
    margin-top: 3px;
    font-size: var(--text-xs);
    color: var(--text-muted);
    line-height: 1.5;
}
.post-row__meta strong { color: var(--text-secondary); font-weight: 600; }

/* Dot separator between plain-text meta items — but never before a badge,
   and never leading the line. */
.post-row__meta .sep::before {
    content: "·";
    margin-right: var(--space-2);
    color: var(--border-strong);
}

/* ── Badges ────────────────────────────────────────── */
.badge {
    display: inline-block;
    padding: 1px var(--space-2);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-weight: 700;
    line-height: 1.6;
    white-space: nowrap;
}
/* "New" no longer blinks.
   Fifteen listings each carrying a blinking badge meant ~20 elements pulsing
   at once on the homepage — the single loudest thing on the page, applied to
   the least useful signal (almost everything on a job portal is new). It is
   now a quiet red pill. WCAG 2.2.2 also asks that blinking content be
   stoppable, and prefers-reduced-motion only helped the few who set it. */
.badge--new {
    background: var(--danger-600);
    color: #fff;
}

.badge--type      { background: var(--primary-100); color: var(--primary-800); }
.badge--posts     { background: var(--success-100); color: var(--success-700); }
.badge--closing   { background: var(--danger-100);  color: var(--danger-700); }
.badge--closed    { background: var(--gray-200);    color: var(--gray-600); }
.badge--open      { background: var(--success-100); color: var(--success-700); }
.badge--external::after { content: " ↗"; }

/* ── Buttons ───────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: var(--space-2) var(--space-4);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    text-align: center;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--primary-600); color: #fff; }
.btn--primary:hover { background: var(--primary-700); }
.btn--success { background: var(--success-700); color: #fff; }
.btn--success:hover { background: var(--success-800); }
.btn--danger  { background: var(--danger-600); color: #fff; }
.btn--danger:hover { background: var(--danger-700); }
.btn--outline {
    background: transparent;
    border-color: var(--primary-600);
    color: var(--primary-600);
}
.btn--outline:hover { background: var(--primary-50); }
.btn--ghost { background: var(--gray-100); color: var(--text-secondary); }
.btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--text-xs); }
.btn--block { display: block; width: 100%; }

/* ── Post detail page ──────────────────────────────── */
.post-header { padding: var(--space-5) var(--space-4) var(--space-4); }
.post-header h1 {
    font-size: var(--text-xl);
    margin-bottom: var(--space-3);
}
.post-header__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--text-muted);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--border);
}

/* Language switch between the Marathi and English halves of a post. */
.lang-tabs {
    display: flex;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-4) 0;
}
.lang-tabs button {
    flex: 1;
    padding: var(--space-2) var(--space-4);
    background: var(--gray-100);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-secondary);
    cursor: pointer;
}
.lang-tabs button[aria-selected="true"] {
    background: var(--bg-card);
    color: var(--primary-700);
    border-color: var(--primary-300);
}

/* Detail rows: label on the left, value on the right. Collapses to stacked on
   mobile — a two-column grid with Devanagari labels wraps into unreadable
   slivers below ~520px. */
.detail-rows { border-top: 1px solid var(--border); }
.detail-row {
    display: grid;
    grid-template-columns: 190px minmax(0, 1fr);
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border);
    font-size: var(--text-base);
}
.detail-row:nth-child(even) { background: var(--bg-subtle); }
.detail-row__label { font-weight: 700; color: var(--primary-700); }
.detail-row__value > :last-child { margin-bottom: 0; }

/* ── Vacancy table ─────────────────────────────────── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.data-table {
    min-width: 480px;
    font-size: var(--text-sm);
}
.data-table th, .data-table td {
    border: 1px solid var(--border);
    padding: var(--space-2) var(--space-3);
    text-align: left;
    vertical-align: top;
}
.data-table thead th {
    background: var(--primary-600);
    color: #fff;
    font-weight: 700;
    white-space: nowrap;
}
.data-table tbody tr:nth-child(even) { background: var(--bg-subtle); }
.data-table tfoot td {
    background: var(--primary-50);
    font-weight: 700;
}
.data-table td.num, .data-table th.num { text-align: center; white-space: nowrap; }

/* ── Important links block ─────────────────────────── */
.links-table td { padding: var(--space-3); }
.links-table td:first-child { font-weight: 600; width: 55%; }
.links-table td:last-child  { text-align: right; }

/* ── Sidebar ───────────────────────────────────────── */
.sidebar { position: sticky; top: calc(var(--header-h) + var(--space-4)); }
.widget-list { list-style: none; margin: 0; padding: 0; }
.widget-list li { border-bottom: 1px dashed var(--border); }
.widget-list li:last-child { border-bottom: 0; }
.widget-list a {
    display: block;
    padding: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    line-height: var(--leading-tight);
    color: var(--text-primary);
}
.widget-list a:hover { background: var(--primary-50); color: var(--text-link); text-decoration: none; }
.widget-list .date { display: block; font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

/* Notice board: a fixed-height scroller so a long notice list cannot push the
   rest of the sidebar below the fold. */
.notice-scroll { max-height: 320px; overflow-y: auto; }

/* ── Chips / tags ──────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip {
    display: inline-block;
    padding: var(--space-1) var(--space-3);
    background: var(--primary-50);
    border: 1px solid var(--primary-200);
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-700);
}
.chip:hover { background: var(--primary-100); text-decoration: none; }

/* ── Quick-filter grid (homepage) ──────────────────── */
.filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: var(--space-3);
}
.filter-tile {
    display: block;
    padding: var(--space-3);
    background: var(--bg-subtle);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-primary);
}
.filter-tile:hover { background: var(--primary-50); border-color: var(--primary-300); text-decoration: none; }
.filter-tile .count { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }

/* ── Pagination ────────────────────────────────────── */
.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-5) 0;
}
.pagination a, .pagination span {
    min-width: 38px;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-card);
    text-align: center;
    font-size: var(--text-sm);
    font-weight: 600;
}
.pagination a:hover { background: var(--primary-50); text-decoration: none; }
.pagination .current { background: var(--primary-600); border-color: var(--primary-600); color: #fff; }
.pagination .gap { border: 0; background: transparent; color: var(--text-muted); }

/* ── Forms ─────────────────────────────────────────── */
.form-group { margin-bottom: var(--space-4); }
.form-group label {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--text-secondary);
}
.form-group .hint { font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }
.input, .textarea, .select {
    width: 100%;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-md);
    background: #fff;
    font-family: inherit;
    /* 16px minimum on the input itself: iOS Safari zooms the whole page when a
       focused field is under 16px, and the layout never zooms back out. */
    font-size: 1rem;
    color: var(--text-primary);
}
.input:focus, .textarea:focus, .select:focus {
    outline: none;
    border-color: var(--primary-500);
    box-shadow: 0 0 0 3px var(--primary-100);
}
.textarea { min-height: 120px; resize: vertical; line-height: var(--leading-normal); }

/* ── Alerts ────────────────────────────────────────── */
.alert {
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border-left: 4px solid;
    margin-bottom: var(--space-4);
    font-size: var(--text-sm);
}
.alert--info    { background: var(--primary-50); border-color: var(--primary-500); color: var(--primary-900); }
.alert--success { background: var(--success-50); border-color: var(--success-500); color: var(--success-700); }
/* Amber tokens, NOT --accent: the accent is blue in this theme, and a blue
   warning box says nothing. See the --warn note in design-system.css. */
.alert--warn    { background: var(--warn-50);    border-color: var(--warn-500);    color: var(--warn-700); }
.alert--error   { background: var(--danger-50);  border-color: var(--danger-500);  color: var(--danger-700); }

/* ── Empty state ───────────────────────────────────── */
.empty {
    padding: var(--space-10) var(--space-4);
    text-align: center;
    color: var(--text-muted);
    font-size: var(--text-sm);
}

/* ── Breadcrumb ────────────────────────────────────── */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3) 0;
    font-size: var(--text-xs);
    color: var(--text-muted);
    list-style: none;
    margin: 0;
}
.breadcrumb li + li::before { content: "›"; margin-right: var(--space-2); color: var(--text-muted); }

/* ── Tools grid ────────────────────────────────────── */
.tool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--space-4);
}
.tool-card {
    display: block;
    padding: var(--space-4);
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    color: inherit;
}
.tool-card:hover { border-color: var(--primary-300); box-shadow: var(--shadow-md); text-decoration: none; }
.tool-card__icon { font-size: 1.75rem; }
.tool-card__title { font-weight: 700; margin: var(--space-2) 0 var(--space-1); color: var(--text-link); }
.tool-card__desc { font-size: var(--text-xs); color: var(--text-muted); line-height: var(--leading-tight); }

/* ── Article body (prose from the admin editor) ────── */
.prose { font-size: var(--text-base); line-height: var(--leading-normal); }
.prose h3 { margin-top: var(--space-5); color: var(--primary-700); font-size: var(--text-md); }
.prose table { margin-bottom: var(--space-4); font-size: var(--text-sm); }
.prose th, .prose td { border: 1px solid var(--border); padding: var(--space-2); }
.prose th { background: var(--bg-subtle); }
.prose img { border-radius: var(--radius-md); }

/* ── Section tabs ──────────────────────────────────
   Admit cards / results / current affairs were three full-height stacked
   sections. Combined into one card they cost a third of the scroll. Every pane
   is in the HTML at all times — JS only toggles [hidden] — so crawlers index
   all three and a JS-less browser shows all three stacked. Same contract as
   the bilingual panes on a post. */
.section-tabs { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.section-tabs button {
    padding: var(--space-1) var(--space-3);
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--text-muted);
    cursor: pointer;
}
.section-tabs button:hover { color: var(--text-link); }
.section-tabs button[aria-selected="true"] {
    background: var(--bg-card);
    border-color: var(--border-strong);
    color: var(--primary-700);
}
.sec-pane__more {
    display: block;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: right;
}

/* ── Ad slots ──────────────────────────────────────── */
/* An UNCONFIGURED slot renders no markup at all, so it occupies zero space —
   that is handled in PHP, not here.
   A CONFIGURED slot reserves a modest min-height: AdSense fills
   asynchronously, and without a reserve the whole page jumps down as the unit
   loads, which on a listing means the row under the reader's thumb moves. The
   reserve is deliberately smaller than a typical unit — enough to absorb most
   of the shift, small enough that an unfilled unit is not a crater. */
.ad-slot {
    margin: var(--space-4) 0;
    text-align: center;
    overflow: hidden;
    min-height: 110px;
}
.ad-slot__label {
    display: block;
    font-size: 0.625rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: var(--space-1);
}

/* In-feed: sits inside the listing card, so it needs the row's own padding and
   separators or it reads as a broken row. The label is not optional here —
   an unlabelled ad inside a list of jobs is exactly the pattern that makes
   people distrust a job site. */
.ad-slot--feed {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-subtle);
}

/* ── Footer ────────────────────────────────────────── */
.site-footer {
    background: var(--gray-800);
    color: var(--gray-300);
    padding: var(--space-8) 0 var(--space-5);
    font-size: var(--text-sm);
}
.footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--space-6);
    margin-bottom: var(--space-6);
}
.site-footer h3 {
    color: #fff;
    font-size: var(--text-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-3);
}
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--space-2); }
.site-footer a { color: var(--gray-300); }
.site-footer a:hover { color: #fff; }
.footer-bottom {
    border-top: 1px solid var(--gray-700);
    padding-top: var(--space-4);
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--space-3);
    font-size: var(--text-xs);
    color: var(--gray-400);
}
.social-row { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.social-row a {
    display: grid; place-items: center;
    width: 34px; height: 34px;
    background: var(--gray-700);
    border-radius: var(--radius-md);
    color: #fff;
}
.social-row a:hover { background: var(--primary-600); }

/* The legal disclaimer every job-aggregator needs in the footer: this site
   republishes notices, it does not recruit. */
.footer-disclaimer {
    font-size: var(--text-xs);
    color: var(--gray-400);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-4);
}

/* ── Back to top ───────────────────────────────────── */
.to-top {
    position: fixed;
    right: var(--space-4);
    bottom: var(--space-4);
    width: 42px; height: 42px;
    display: none;
    place-items: center;
    background: var(--primary-600);
    color: #fff;
    border: 0;
    border-radius: 50%;
    box-shadow: var(--shadow-lg);
    cursor: pointer;
    font-size: var(--text-lg);
    z-index: 40;
}
.to-top.visible { display: grid; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   Mobile is the majority of this audience — every rule below is a fix for a
   real 360px-wide phone, not a nicety.
   ═══════════════════════════════════════════════════ */

@media (max-width: 1024px) {
    .layout { grid-template-columns: minmax(0, 1fr); }
    .sidebar { position: static; }
}

/* Drawer search — only exists inside the open mobile nav. */
.nav-search { display: none; }
.nav-search input {
    flex: 1;
    min-width: 0;
    padding: var(--space-2) var(--space-3);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font: inherit;
    font-size: 1rem;   /* 16px — anything smaller zooms iOS Safari on focus */
}
.nav-search input::placeholder { color: rgba(255, 255, 255, 0.65); }
.nav-search button {
    padding: var(--space-2) var(--space-4);
    border: 0;
    border-radius: var(--radius-md);
    background: var(--accent-600);
    color: #fff;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}

@media (max-width: 768px) {
    .nav-toggle { display: block; }
    .header-search { display: none; }
    .nav-search {
        display: flex;
        gap: var(--space-2);
        padding: var(--space-3) 0;
        border-bottom: 1px solid var(--primary-700);
    }

    /* Off-canvas nav. `display:none` rather than a transform: an off-screen but
       rendered menu is still in the tab order, and keyboard users end up
       tabbing into an invisible menu. */
    .site-nav { display: none; }
    .site-nav.open { display: block; }
    .site-nav ul { flex-direction: column; }
    .site-nav a { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--primary-700); }

    .detail-row {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-1);
    }
    .detail-row__label { font-size: var(--text-sm); }

    .post-header h1 { font-size: var(--text-lg); }
    .logo__tag { display: none; }
}

@media (max-width: 480px) {
    /* Drop the published date from listing rows on a phone.
       The meta line carries deadline + vacancies + organisation + date, which
       wraps to two lines at 390px and doubles the height of every row. Of the
       four, the published date is the one that changes no decision — the
       deadline already answers "is this still worth opening". It stays in the
       HTML for crawlers and on wider screens. */
    .post-row__meta time { display: none; }
}

@media (max-width: 420px) {
    .container { padding: 0 var(--space-3); }
    .card__body { padding: var(--space-3); }
    .post-row { padding: var(--space-3); }
    .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ═══════════════════════════════════════════════════
   PRINT
   Job seekers print notices and take them to a CSC centre. Strip the
   navigation, the ads and the sidebar; keep the notice.
   ═══════════════════════════════════════════════════ */
@media print {
    .site-header, .site-nav, .ticker, .sidebar, .site-footer,
    .ad-slot, .to-top, .lang-tabs, .pagination, .breadcrumb { display: none !important; }
    body { background: #fff; font-size: 11pt; }
    .layout { grid-template-columns: 1fr; padding: 0; }
    .card { border: 0; margin: 0; }
    .card__head { background: none !important; color: #000 !important; border-bottom: 2px solid #000; }
    .card__head h1, .card__head h2 { color: #000 !important; }
    /* Print BOTH languages regardless of which tab was open on screen. */
    .lang-pane { display: block !important; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
}

/* ── Post hero image ────────────────────────────────
   Optional featured image at the top of a job post. Fixed aspect via the
   width/height attributes plus this rule, so nothing reflows when it loads. */
.post-hero {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 640 / 336;
    object-fit: cover;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}