/* App-wide CSS goes here. Page styling itself lives in the theme (public/theme/css/style.css) — see templates/theme/base.html.twig. */

/* Design tokens — single source of truth for color/spacing/radius/shadow,
   referenced from both this file and public/theme/css/style.css (custom
   properties resolve against the whole document, not just the file that
   declares :root). Values below are the site's existing colors, just named
   once instead of re-typed as ad-hoc hex in a dozen places (that drift is
   why e.g. #000, #111, #111827 and #333 were all in use as "the same" near-
   black, and counts/badges ended up in four unrelated color treatments). */
:root {
    --color-ink: #111827;
    --color-text: #333;
    --color-muted: #6b7280;
    --color-border: #e7ebf0;
    --color-surface: #fff;
    --color-surface-alt: #f4f7fb;
    --color-accent: #f2711c;
    --color-info-bg: #eef2f9;
    --color-info-text: #1f4f82;
    --radius-sm: 6px;
    --radius-md: 12px;
    --shadow-sm: 0 6px 14px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.1);
}

/* Unified count pill — the one visual treatment for "here's a number" across
   state tiles, category tiles, and the all-India summary badge. Deliberately
   NOT solid black: black is reserved for actual buttons (.btn-main etc) so a
   user's eye can tell "clickable action" apart from "informational count" at
   a glance, instead of every black pill on the page competing for the same
   attention. */
.count-pill {
    display: inline-block;
    background: var(--color-info-bg);
    color: var(--color-info-text);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 999px;
}

/* Numbered step badge — the one "N." indicator style, shared by the state
   browse page (Step 1/2/3) and exam-detail sections (1. Notification,
   2. Eligibility, ...), which previously used two unrelated patterns (a
   circle badge on one, plain text on the other) for the same concept. */
.step-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--color-ink);
    color: #fff;
    font-weight: 700;
    font-size: 14px;
}

.step-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 18px;
}

.step-heading h4 {
    margin: 0;
}

/* Home page intro + state grid section. The theme's own .page-wrapper adds
   70px top/bottom padding, meant for a section that's the only thing on a
   page — stacking it between the search header and the widgets section
   below left a large dead gap. This uses much tighter, single-purpose
   spacing instead, and the intro paragraph gives search engines real page
   copy instead of that gap being pure whitespace. */
.gov-intro {
    padding: 40px 0 10px;
}

.gov-intro h2 {
    margin-top: 0;
}

/* Home page dashboard widget cards (public/govdata/_exam_mini_list.html.twig).
   The plain .dashboard-wrapper box the theme ships is fine for a single panel,
   but a whole grid of them side by side had no visual hierarchy and (worse)
   uneven heights row to row since Bootstrap 3's grid doesn't stretch columns.
   .dash-row/.dash-card fix both: flexbox equal-height columns, plus an icon +
   colour accent per card so "Urgent", "Results", "Jobs" etc. read apart at a
   glance instead of being 10 identical grey boxes. Colours reuse the same
   success/info/warning/danger palette as the badges elsewhere on the site. */
.dash-row {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20px;
}

.dash-row > [class*="col-"] {
    display: flex;
    margin-bottom: 20px;
}

.dash-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    border-left: 4px solid #ccc;
    border-radius: 3px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}

.dash-card:hover {
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.dash-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    border-bottom: 1px solid #f2f2f2;
}

.dash-card-header i {
    font-size: 18px;
    color: #ccc;
}

.dash-card-header h4 {
    margin: 0;
    font-size: 15px;
}

.dash-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
}

.dash-card-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid #f8f8f8;
    font-size: 13px;
}

.dash-card-list li:last-child {
    border-bottom: none;
}

.dash-card-list li a {
    color: #333;
}

.dash-card-list li a:hover {
    color: #f2711c;
    text-decoration: none;
}

.dash-card-date {
    color: #999;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.dash-card-empty {
    flex: 1 1 auto;
    margin: 0;
    padding: 16px;
    color: #999;
    font-size: 13px;
    font-style: italic;
}

.dash-card-footer {
    padding: 10px 16px;
    border-top: 1px solid #f2f2f2;
}

.dash-card--primary { border-left-color: #337ab7; }
.dash-card--primary .dash-card-header i { color: #337ab7; }

.dash-card--success { border-left-color: #5cb85c; }
.dash-card--success .dash-card-header i { color: #5cb85c; }

.dash-card--info { border-left-color: #5bc0de; }
.dash-card--info .dash-card-header i { color: #5bc0de; }

.dash-card--warning { border-left-color: #f0ad4e; }
.dash-card--warning .dash-card-header i { color: #f0ad4e; }

.dash-card--danger { border-left-color: #d9534f; }
.dash-card--danger .dash-card-header i { color: #d9534f; }

.home-faq .faq-list {
    margin-top: 20px;
}

.faq-item {
    border: 1px solid #f2f2f2;
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 10px;
}

.faq-item summary {
    cursor: pointer;
    font-weight: 600;
    list-style: none;
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::before {
    content: '+';
    display: inline-block;
    width: 1em;
    color: #337ab7;
}

.faq-item[open] summary::before {
    content: '−';
}

.faq-item p {
    margin: 10px 0 0;
    color: #666;
}

/* Reserved ad placements (theme/components/_ad_slot.html.twig). Fixed
   min-height matches the format so the page doesn't shift once a real
   <ins class="adsbygoogle"> unit replaces the placeholder — kept clear of
   buttons/nav (30px margin) per AdSense's accidental-click policy. */
.ad-slot {
    position: relative;
    max-width: 970px;
    margin: 30px auto;
    padding: 8px;
    border: 1px dashed #ddd;
    border-radius: 6px;
    background: #fafafa;
    text-align: center;
    overflow: hidden;
}

.ad-slot--horizontal {
    min-height: 100px;
}

.ad-slot--rectangle {
    min-height: 300px;
    max-width: 336px;
}

.ad-slot--skyscraper {
    min-height: 600px;
    max-width: 160px;
    margin: 0;
}

.ad-slot-tag {
    position: absolute;
    top: 4px;
    left: 8px;
    font-size: 10px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: #aaa;
}

/* Floating left/right rail (theme/components/_ad_rails.html.twig). Sits in
   the blank margin outside the 1170px container so it never overlaps
   content; the 1524px gate is the narrowest width that leaves a full
   160px-wide slot clear on both sides. Dismiss is remembered per-session
   (see _ad_rails.html.twig) so a closed rail doesn't reappear on the next
   page view. */
.ad-rail {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    z-index: 900;
    display: none;
}

.ad-rail--left {
    left: max(8px, calc((100% - 1170px) / 2 - 176px));
}

.ad-rail--right {
    right: max(8px, calc((100% - 1170px) / 2 - 176px));
}

@media (min-width: 1524px) {
    .ad-rail:not(.ad-rail--dismissed) {
        display: block;
    }
}

.ad-rail .ad-slot {
    margin: 0;
}

.ad-rail-close {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 22px;
    height: 22px;
    line-height: 20px;
    border-radius: 50%;
    border: 1px solid #ddd;
    background: #fff;
    color: #888;
    font-size: 14px;
    text-align: center;
    cursor: pointer;
    padding: 0;
}

.ad-rail-close:hover {
    color: #333;
    border-color: #bbb;
}

/* Combined India map (public/govdata/_state_grid.html.twig, theme/icons/india_map.svg).
   Each state is an <a><path></a> inside one shared SVG — style the path via
   the parent .india-map-state link, not the svg root, so hover/focus work
   per-state. */
.india-map-wrapper {
    max-width: 650px;
    margin: 10px auto 0;
}

.india-map-wrapper svg {
    width: 100%;
    height: auto;
    display: block;
}

.india-map-state path {
    fill: #333;
    stroke: #fff;
    stroke-width: 0.6;
    transition: fill 0.15s ease;
    cursor: pointer;
}

.india-map-state:hover path,
.india-map-state:focus path {
    fill: #f2711c;
}

.india-map-label {
    font-size: 13px;
    color: #777;
}

.india-map-label strong {
    color: #333;
}

/* State grid tile (public/govdata/_state_grid.html.twig) — the theme has no
   icon+text tile pattern of its own, so this is the one bit of layout CSS
   we add on top of it. Each icon is the real state outline (inline SVG,
   fill="currentColor"), not a font icon — sized here rather than via font-size. */
.state-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* Fixed height so every tile in a row matches — some state names (e.g.
       "Dadra & Nagar Haveli and Daman & Diu") wrap to 3 lines, and Bootstrap 3's
       float grid misaligns/gaps subsequent rows when row heights differ. */
    min-height: 150px;
    padding: 15px 10px;
    margin-bottom: 20px;
    text-align: center;
    color: #333;
    border: 1px solid #eee;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.state-tile:hover,
.state-tile:focus {
    text-decoration: none;
    border-color: #ccc;
    transform: translateY(-3px);
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08);
}

.state-tile:hover .state-tile-icon,
.state-tile:focus .state-tile-icon {
    color: #f2711c;
}

.state-tile:hover .state-tile-label,
.state-tile:focus .state-tile-label {
    color: #000;
}

.state-tile-icon {
    display: block;
    margin: 0 auto 8px;
    width: 40px;
    height: 40px;
}

.state-tile-icon svg {
    width: 100%;
    height: 100%;
}

.state-tile-label {
    display: block;
    font-size: 13px;
}

.state-search {
    position: relative;
    max-width: 400px;
    margin: 0 0 15px;
}

.state-search i {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    color: #999;
}

.state-search input {
    height: 44px;
    padding-left: 40px;
}

.state-group-heading {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
    color: #999;
    margin-bottom: 12px;
}

#state-search-empty {
    color: #999;
    padding: 20px 0;
}

/* Advanced search box (theme/_search_box.html.twig). The tricolor bar is a
   subtle nod to the India/government context — not an official emblem, just
   a thin accent stripe — and everything else stays plain/functional. */
.home-hero {
    background: #ffffff;
    margin-top: 12px;
    padding: 38px 0 34px;
    border-top: 1px solid #f1f3f6;
    border-bottom: 1px solid #f1f3f6;
}

.home-hero .content {
    max-width: 980px;
}

.home-hero .page-name {
    margin-bottom: 8px;
}

.home-hero p {
    margin-bottom: 18px;
    color: #4b5563;
}

.gov-search {
    max-width: 800px;
    text-align: left;
}

.gov-search-tricolor {
    height: 3px;
    border-radius: 10px 10px 0 0;
    border: 1px solid #e7ebf0;
    border-bottom: none;
    background: linear-gradient(to right, #ff9933 0 33.33%, #ffffff 33.33% 66.66%, #138808 66.66% 100%);
}

.gov-search-row {
    position: relative;
    display: flex;
    border: 1px solid #e7ebf0;
    border-top: none;
    border-radius: 0 0 10px 10px;
    background: #ffffff;
    overflow: hidden;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.06);
}

.gov-search-category,
.gov-search-input,
.gov-search-submit {
    height: 54px;
    font-size: 16px;
}

.gov-search-category {
    flex: 0 0 150px;
    border-radius: 0 !important;
    border: none !important;
    background: #ffffff !important;
    color: #344054;
    border-right: none !important;
}

.gov-search-input {
    flex: 1 1 auto;
    border: none !important;
    border-radius: 0 !important;
    border-left: none !important;
    border-right: none !important;
    background: #ffffff !important;
    box-shadow: none !important;
    padding: 10px 18px;
}

.gov-search-input::placeholder {
    color: #98a2b3;
}

.gov-search-submit {
    flex: 0 0 auto;
    border-radius: 0 !important;
    padding: 10px 36px;
}

.gov-search-suggestions {
    position: relative;
    z-index: 20;
    background: #fff;
    border: 1px solid #eee;
    border-top: none;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.gov-search-suggestion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 15px;
    border-bottom: 1px solid #f5f5f5;
    color: #333;
}

.gov-search-suggestion:last-child {
    border-bottom: none;
}

.gov-search-suggestion:hover,
.gov-search-suggestion:focus {
    background: #f9f9f9;
    color: #000;
    text-decoration: none;
}

.gov-search-suggestion span {
    font-size: 12px;
    color: #999;
}

.gov-search-suggestion__main {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.gov-search-suggestion__main strong,
.gov-search-suggestion__main span {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gov-search-suggestion__badge {
    flex: 0 0 auto;
    margin-left: 12px;
    padding: 4px 10px;
    border-radius: 999px;
    background: #111827;
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.gov-search-suggestion--sponsored {
    background: linear-gradient(90deg, #fff7ed 0%, #fffbf6 100%);
}

.gov-search-suggestion--sponsored:hover,
.gov-search-suggestion--sponsored:focus {
    background: linear-gradient(90deg, #ffedd5 0%, #fff7ed 100%);
}

.gov-search-suggestion--sponsored .gov-search-suggestion__main strong {
    color: #111827;
}

.gov-search-suggestion--sponsored .gov-search-suggestion__main span {
    color: #8a5a12;
}

.gov-search-tags {
    margin-top: 14px;
    font-size: 12px;
    color: #98a2b3;
}

.gov-search-tags a {
    display: inline-block;
    margin-left: 6px;
    padding: 4px 12px;
    border: 1px solid #e7ebf0;
    border-radius: 20px;
    background: #ffffff;
    color: #475467;
}

.gov-search-tags a:hover {
    border-color: #d0d5dd;
    color: #111827;
    text-decoration: none;
}

.search-page {
    background: #ffffff;
    padding-top: 54px;
}

.search-page__panel {
    max-width: 980px;
    margin: 0 auto;
}

.search-page__hero {
    background: #ffffff;
    border: 1px solid #e7ebf0;
    padding: 30px 32px 28px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.05);
}

.search-page__eyebrow {
    display: inline-block;
    margin-bottom: 10px;
    color: #667085;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.search-page__title {
    margin: 0 0 10px;
    color: #101828;
    font-size: 34px;
    line-height: 1.15;
}

.search-page__lead {
    margin: 0 0 20px;
    max-width: 760px;
    color: #667085;
    font-size: 15px;
    line-height: 1.8;
}

.search-page__form .gov-search {
    max-width: none;
}

.search-page__summary {
    margin-top: 28px;
    margin-bottom: 18px;
}

.search-page__summary-title {
    margin: 0 0 6px;
    color: #101828;
    font-size: 28px;
}

.search-page__summary-note {
    margin: 0;
    color: #667085;
    font-size: 14px;
}

.search-results {
    display: grid;
    gap: 18px;
}

.search-result-card {
    background: #ffffff;
    border: 1px solid #e7ebf0;
    padding: 22px 24px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.search-result-card:hover {
    border-color: #d0d5dd;
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.05);
}

.search-result-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.search-result-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 5px 10px;
    background: #111827;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-result-card__chip--muted {
    background: #f4f6f8;
    color: #344054;
}

.search-result-card__date {
    color: #667085;
    font-size: 12px;
    font-weight: 600;
}

.search-result-card__title {
    margin: 0 0 10px;
    font-size: 24px;
    line-height: 1.35;
}

.search-result-card__title a {
    color: #101828;
}

.search-result-card__title a:hover,
.search-result-card__title a:focus {
    color: #000;
    text-decoration: none;
}

.search-result-card__summary {
    margin: 0;
    color: #475467;
    font-size: 15px;
    line-height: 1.75;
}

.search-result-card__footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.search-result-card__location {
    color: #667085;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.search-result-card__link {
    color: #111827;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.search-pagination {
    margin-top: 26px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.search-pagination__item,
.search-pagination__nav {
    min-width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 14px;
    border: 1px solid #d9e1ea;
    background: #ffffff;
    color: #111827;
    font-size: 13px;
    font-weight: 700;
}

.search-pagination__item.is-active {
    background: #111827;
    border-color: #111827;
    color: #ffffff;
}

.search-pagination__ellipsis {
    color: #98a2b3;
    font-size: 18px;
    line-height: 1;
}

.search-empty {
    margin-top: 26px;
    background: #ffffff;
    border: 1px solid #e7ebf0;
    padding: 28px 30px;
}

.search-empty h3 {
    margin: 0 0 10px;
    color: #101828;
}

.search-empty p {
    margin: 0;
    color: #667085;
    line-height: 1.7;
}

@media (max-width: 767px) {
    .search-page {
        padding-top: 36px;
    }

    .search-page__hero {
        padding: 22px 18px 20px;
    }

    .search-page__title {
        font-size: 28px;
    }

    .search-result-card {
        padding: 18px;
    }

    .search-result-card__title {
        font-size: 20px;
    }

    .search-result-card__footer {
        display: block;
    }

    .search-result-card__link {
        display: inline-block;
        margin-top: 10px;
    }
}

/* Language switcher — lives in the theme's top bar (theme/_top_header.html.twig),
   next to Search, replacing the theme's non-functional EN/HI <select> placeholder.
   All 22 entries would make a single-column dropdown very tall, so it wraps into
   two columns; each language's own script is set alongside a small grey English
   label since most visitors can't visually identify every script by its native
   name alone. It sits at the far right of the page, so the dropdown must open
   right-aligned (left: auto) or it overflows off-screen. */
.lang-switcher {
    position: relative;
}

.top-header-search {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    min-height: 58px;
}

.top-header-search__shell {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100%;
    min-height: 56px;
    padding: 4px 10px 4px 6px;
    overflow: hidden;
    border: 1px solid #d7dee8;
    border-radius: 999px;
    background: linear-gradient(135deg, #ffffff 0%, #f7f9fc 100%);
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.08);
}

.top-header-search__icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: #4f647c;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.top-header-search__icon-button:hover,
.top-header-search__icon-button:focus {
    background: rgba(15, 23, 42, 0.06);
    color: #122033;
    outline: none;
}

.top-header-search__icon {
    font-size: 20px;
}

.top-header-search__input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 44px;
    margin: 0;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    font-size: 16px;
    line-height: 44px;
    color: #122033;
}

.top-header-search__input:focus {
    border: 0;
    box-shadow: none;
    outline: none;
}

.top-header-search__input::placeholder {
    color: #90a0b5;
}

.top-header .top-menu {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    min-height: 58px;
    margin: 0;
}

@media (max-width: 991px) {
    .top-header-search {
        margin: 16px 0 8px;
    }

    .top-header .top-menu {
        justify-content: center;
    }
}

.gov-search--header {
    max-width: none;
    text-align: left;
}

.gov-search--header .gov-search-suggestions {
    position: absolute;
    top: calc(100% + 8px);
    left: 18px;
    right: 18px;
    z-index: 40;
    border: 1px solid #dce3ed;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 22px 50px rgba(15, 23, 42, 0.14);
}

.gov-search--header .gov-search-suggestion {
    padding: 12px 16px;
    background: #ffffff;
}

.gov-search--header .gov-search-suggestion strong {
    font-size: 14px;
    color: #122033;
}

.gov-search--header .gov-search-suggestion span {
    font-size: 12px;
}

@media (max-width: 575px) {
    .top-header-search__shell {
        min-height: 52px;
        padding: 4px 8px 4px 4px;
    }

    .top-header-search__input {
        font-size: 15px;
    }
}

.lang-switcher-menu {
    display: flex;
    flex-wrap: wrap;
    width: 340px;
    max-width: 90vw;
    padding: 8px 0;
    left: auto;
    right: 0;
}

.lang-switcher-menu li {
    flex: 0 0 50%;
    box-sizing: border-box;
}

.lang-switcher-menu li a {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    padding: 6px 15px;
    white-space: nowrap;
    overflow: hidden;
}

.lang-switcher-menu li a.active {
    color: #f2711c;
    font-weight: bold;
}

.lang-switcher-english {
    font-size: 11px;
    color: #999;
    text-overflow: ellipsis;
    overflow: hidden;
}

.job-browse-card {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-height: 100%;
    margin-bottom: 30px;
    padding: 22px 20px 18px;
    border: 1px solid #e6ebf2;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
    box-shadow: 0 16px 34px rgba(15, 23, 42, 0.06);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.job-browse-card:hover {
    transform: translateY(-3px);
    border-color: #cfd8e3;
    box-shadow: 0 22px 42px rgba(15, 23, 42, 0.1);
}

.job-browse-card-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.job-browse-card-kicker {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.job-browse-card-date,
.job-browse-card-role {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.job-browse-card-date {
    background: #eef4ff;
    color: #214c9b;
}

.job-browse-card-role {
    background: #ecfdf3;
    color: #166534;
}

.job-browse-card-title {
    margin: 0;
    font-size: 22px;
    line-height: 1.3;
    font-weight: 700;
}

.job-browse-card-title a {
    color: #111827;
    text-decoration: none;
}

.job-browse-card-title a:hover,
.job-browse-card-title a:focus {
    color: #0f4c81;
    text-decoration: none;
}

.job-browse-card-summary {
    margin: 0;
    color: #526071;
    font-size: 15px;
    line-height: 1.7;
}

.job-browse-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.job-browse-chip {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 5px 10px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
}

.job-browse-chip--service {
    background: #f3f4f6;
    color: #374151;
}

.job-browse-chip--department {
    background: #dbeafe;
    color: #1d4ed8;
}

.job-browse-card-facts {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
}

.job-browse-fact {
    padding: 12px 14px;
    border: 1px solid #edf2f7;
    border-radius: 14px;
    background: #ffffff;
}

.job-browse-fact-label {
    display: block;
    margin-bottom: 5px;
    color: #7a8699;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.job-browse-fact-value {
    display: block;
    color: #18212f;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.5;
}

.job-browse-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 4px;
}

.job-browse-card-note {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

.job-browse-card-cta {
    flex: 0 0 auto;
    padding: 11px 16px;
    border-radius: 10px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

@media (max-width: 991px) {
    .job-browse-card {
        padding: 20px 18px 18px;
    }

    .job-browse-card-facts {
        grid-template-columns: 1fr;
    }

    .job-browse-card-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .job-browse-card-cta {
        width: 100%;
        text-align: center;
    }
}

@media (max-width: 767px) {
    .job-browse-card-title {
        font-size: 19px;
    }

    .job-browse-card-summary {
        font-size: 14px;
    }

    .job-browse-card-date,
    .job-browse-card-role {
        font-size: 10px;
    }
}