/* h2n CV Platform - Custom Styles (top-level static) */
:root {
    /* H2N palette provided by user */
    --h2n-white: #ffffff;
    --h2n-green: #75af54; /* Verde */
    --h2n-rose: #cb3455; /* Vermelho Rosado */
    --h2n-red-intense: #d6373a; /* Vermelho Intenso */
    --h2n-magenta: #c9345b; /* Magenta Avermelhado */
    --h2n-red-dark: #d73738; /* Vermelho Escuro */

    /* legacy semantic variables mapped to the palette */
    --h2n-primary: var(--h2n-green);
    --h2n-secondary: var(--h2n-magenta);
    --h2n-accent: var(--h2n-rose);
    --h2n-text: #2C3E50;
    --h2n-light: #ECF0F1;
    --h2n-success: var(--h2n-green);
    --h2n-danger: var(--h2n-red-intense);
    --h2n-warning: var(--h2n-rose);
    --h2n-info: #3498DB;
}
/* Global Styles */
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--h2n-text);
    line-height: 1.6;
}
/* Custom Bootstrap Colors */
.bg-primary {
    background-color: var(--h2n-primary) !important;
}
.text-primary {
    color: var(--h2n-primary) !important;
}
.btn-primary {
    background-color: var(--h2n-primary);
    border-color: var(--h2n-primary);
    transition: all 0.3s ease;
}
.btn-primary:hover {
    background-color: var(--h2n-secondary);
    border-color: var(--h2n-secondary);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(44, 95, 124, 0.3);
}
.btn-accent {
    background-color: var(--h2n-accent);
    border-color: var(--h2n-accent);
    color: white;
    transition: all 0.3s ease;
}
.btn-accent:hover {
    background-color: #E67E22;
    border-color: #E67E22;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(243, 156, 18, 0.3);
}
/* Manage button style: green text for 'Gerir' action in job cards */
.btn-manage {
    background: transparent;
    color: var(--h2n-success) !important; /* green text by default */
    border: 2px solid rgba(117,175,84,0.12);
    /* rely on .btn-pill padding/size for consistent dimensions */
    font-weight: 700;
    box-shadow: none;
}
.btn-manage:hover, .btn-manage:focus {
    background: transparent; /* keep transparent background */
    color: var(--h2n-accent) !important; /* change text to red on hover */
    border-color: rgba(203,52,85,0.18);
    box-shadow: 0 8px 20px rgba(203,52,85,0.08);
    transform: translateY(-2px);
}
/* Ensure compatibility with btn-pill usage */
.btn-manage.btn-pill { border-radius: 999px; }
/* Ensure action buttons in job cards are identical size on larger screens */
.job-item .card-body .d-flex > .btn-pill {
    min-width: 140px; /* consistent width for both buttons */
    max-width: 220px;
    justify-content: center;
}
@media (max-width: 575px) {
    .job-item .card-body .d-flex > .btn-pill { min-width: 0; max-width: 100%; }
}
/* Navigation */
.navbar-brand {
    font-size: 1.5rem;
    transition: all 0.3s ease;
}
.navbar-brand:hover {
    transform: scale(1.05);
}
.nav-link {
    transition: all 0.3s ease;
    border-radius: 0.375rem;
    margin: 0 0.25rem;
}
.nav-link:hover {
    background-color: rgba(255, 255, 255, 0.1);
    transform: translateY(-1px);
}
/* Logo styles for navbar and footer */
.navbar-brand-logo {
    /* reduced size for navbar logo to improve layout */
    height: 56px;
    width: auto;
    display: inline-block;
    object-fit: contain;
    background: rgba(255,255,255,0.92);
    padding: 6px;
    border-radius: 28%;
    border: 2px solid #fff; /* thin white border for contrast */
    box-shadow: 0 4px 14px rgba(0,0,0,0.12);
    -webkit-backdrop-filter: saturate(120%) blur(0.5px);
    backdrop-filter: saturate(120%) blur(0.5px);
}

.footer-logo {
    height: 48px;
    width: auto;
    display: inline-block;
    object-fit: contain;
}

@media (max-width: 576px) {
    .navbar-brand-logo {
        height: 44px;
        width: auto;
        padding: 4px;
        border-radius: 30%;
        border: 2px solid #fff;
    }
    .footer-logo {
        height: 36px;
    }
}
/* Cards */
.card {
    border: none;
    border-radius: 1rem;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.card-header {
    background: linear-gradient(135deg, var(--h2n-primary), var(--h2n-secondary));
    color: white;
    border-radius: 1rem 1rem 0 0 !important;
    border: none;
}
.card-body {
    min-width: 0;
}
/* Job Cards */
.job-card {
    border-left: 4px solid var(--h2n-accent);
    transition: all 0.3s ease;
    min-width: 0; /* allow flex children to shrink without causing overflow */
}
.job-card:hover {
    border-left-color: var(--h2n-primary);
    transform: translateX(5px);
}
/* Reduce action button size inside job cards (Ver Detalhes / Candidatar) */
.job-card .btn,
.job-card .btn-sm {
    padding: 0.32rem 0.5rem; /* smaller horizontal padding */
    font-size: 0.82rem; /* slightly smaller text */
    line-height: 1.1;
    border-radius: 0.5rem;
}

.job-card .btn-outline-primary,
.job-card .btn-primary {
    padding: 0.32rem 0.6rem;
    font-size: 0.82rem;
}

/* Unified action buttons (Ver Detalhes / Candidatar) */
/* Applies to job listing cards, dashboard button groups and table action buttons */
.job-card .btn,
.btn-group .btn,
.table .btn,
.table .btn-sm {
    min-width: 120px;      /* ensure consistent width */
    height: 38px;         /* consistent height */
    padding: 0 0.75rem;   /* center the icon + label nicely */
    font-size: 0.92rem;   /* readable, consistent text size */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;          /* spacing between icon and text */
}

/* Make buttons mobile-first: allow them to shrink/wrap inside job-card to avoid forcing horizontal overflow */
.job-card .btn,
.job-card .btn-sm,
.job-card .btn-outline-primary,
.job-card .btn-primary {
    min-width: 0; /* mobile-first: don't force a min width */
    flex: 1 1 auto;
}
.job-card .btn-group {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap; /* allow buttons to wrap to next line on small screens */
}
/* Ensure job card text wraps and doesn't create horizontal scroll */
.job-card .card-body {
    overflow-wrap: anywhere;
    word-break: break-word;
}
.job-card .card-title {
    word-break: break-word;
}
/* Prevent job card rows from causing overflow: allow wrapping and make text areas shrink */
.job-card .d-flex.justify-content-between,
.job-card .d-flex.justify-content-between.align-items-center {
    flex-wrap: wrap;
    gap: 0.5rem;
}
.job-card small.text-muted {
    flex: 1 1 auto; /* allow small meta text to take remaining space and shrink */
    min-width: 0;
}
.job-card .btn-group {
    flex: 0 0 auto; /* keep button group compact */
}
/* For medium+ screens restore the compact button sizing */
@media (min-width: 576px) {
    .job-card .btn,
    .job-card .btn-sm,
    .job-card .btn-outline-primary,
    .job-card .btn-primary {
        min-width: 120px; /* restore consistent width on larger screens */
        flex: 0 0 auto;
    }
    .job-card .btn-group { flex-wrap: nowrap; }
}
/* Also make sure badges and meta do not push layout */
.job-card .badge {
    max-width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

/* Keep smaller touch targets on very small screens */
@media (max-width: 576px) {
    .job-card .btn,
    .btn-group .btn,
    .table .btn,
    .table .btn-sm {
        min-width: 0;
        height: auto;
        padding: 0.4rem 0.6rem;
        font-size: 0.9rem;
        gap: 0.35rem;
    }
}

/* Application Status Badges */
.status-submitted {
    background-color: var(--h2n-info);
}
.status-screening {
    background-color: var(--h2n-warning);
}
.status-interview {
    background-color: var(--h2n-accent);
}
.status-hired {
    background-color: var(--h2n-success);
}
.status-rejected {
    background-color: var(--h2n-danger);
}
/* Forms */
.form-control, .form-select {
    border-radius: 0.75rem;
    border: 2px solid #E9ECEF;
    transition: all 0.3s ease;
}

/* Login auth button sizing: make buttons responsive and visually consistent
   by using padding/line-height rather than fixed pixel heights. On small
   screens buttons will expand to full width and wrap. */
.auth-action-buttons {
    display: inline-flex;
    gap: 0.5rem;
    align-items: center;
}
.auth-action-buttons .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    box-sizing: border-box;
    padding: 0.45rem 0.9rem; /* balanced vertical + horizontal padding */
    font-size: 0.95rem;
    line-height: 1;
    min-height: 40px; /* ensure comfortable touch target */
    white-space: nowrap;
}
.auth-action-buttons .btn i { line-height: 1; display: inline-block; vertical-align: middle; }
.auth-action-buttons .btn-sm { padding: 0.35rem 0.75rem; min-height: 36px; }

/* On very small screens, stack buttons and make them expand to full width */
@media (max-width: 576px) {
    .auth-action-buttons { width: 100%; flex-direction: row; }
    .auth-action-buttons .btn { flex: 1 1 auto; min-height: 44px; }
}
.form-control:focus, .form-select:focus {
    border-color: var(--h2n-primary);
    box-shadow: 0 0 0 0.2rem rgba(44, 95, 124, 0.25);
}
.form-label {
    font-weight: 500;
    color: var(--h2n-text);
    margin-bottom: 0.5rem;
}
/* File Upload */
.file-upload-area {
    border: 2px dashed var(--h2n-primary);
    border-radius: 1rem;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
}
.file-upload-area:hover {
    background-color: rgba(44, 95, 124, 0.05);
    border-color: var(--h2n-secondary);
}
.file-upload-area.dragover {
    background-color: rgba(44, 95, 124, 0.1);
    border-color: var(--h2n-accent);
}
/* Stats Cards */
.stats-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 1rem;
    padding: 1.5rem;
    transition: all 0.3s ease;
}
.stats-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.stats-card.primary {
    background: linear-gradient(135deg, var(--h2n-primary), var(--h2n-secondary));
}
.stats-card.accent {
    background: linear-gradient(135deg, var(--h2n-accent), #E67E22);
}
.stats-card.success {
    background: linear-gradient(135deg, var(--h2n-success), #2ECC71);
}
.stats-card.info {
    background: linear-gradient(135deg, var(--h2n-info), #5DADE2);
}
/* Tables */
.table {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}
.table thead th {
    background-color: var(--h2n-primary);
    color: white;
    border: none;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.875rem;
    letter-spacing: 0.5px;
}
.table tbody tr {
    transition: all 0.3s ease;
}
.table tbody tr:hover {
    background-color: rgba(44, 95, 124, 0.05);
    transform: scale(1.01);
}
/* Alerts */
.alert {
    border: none;
    border-radius: 0.75rem;
    border-left: 4px solid;
}
.alert-success {
    border-left-color: var(--h2n-success);
    background-color: rgba(39, 174, 96, 0.1);
}
.alert-danger {
    border-left-color: var(--h2n-danger);
    background-color: rgba(231, 76, 60, 0.1);
}
.alert-info {
    border-left-color: var(--h2n-info);
    background-color: rgba(52, 152, 219, 0.1);
}
.alert-warning {
    border-left-color: var(--h2n-warning);
    background-color: rgba(243, 156, 18, 0.1);
}
/* Hero Section */
.hero-section {
    background: linear-gradient(135deg, var(--h2n-primary), var(--h2n-secondary));
    color: white;
    padding: 4rem 0;
    position: relative;
    overflow: hidden;
}
.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grain" width="100" height="100" patternUnits="userSpaceOnUse"><circle cx="50" cy="50" r="1" fill="white" opacity="0.1"/></pattern></defs><rect width="100" height="100" fill="url(%23grain)"/></svg>');
    opacity: 0.3;
}
.hero-content {
    position: relative;
    z-index: 1;
}
/* Loading Animation */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}
/* Responsive Design */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }
    
    .stats-card {
        margin-bottom: 1rem;
    }
    
    .table-responsive {
        border-radius: 1rem;
    }
}
/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}
/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: var(--h2n-light);
}
::-webkit-scrollbar-thumb {
    background: var(--h2n-primary);
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--h2n-secondary);
}
/* AI Score Indicator */
.ai-score {
    position: relative;
    display: inline-block;
}
.ai-score-bar {
    width: 100px;
    height: 8px;
    background-color: #E9ECEF;
    border-radius: 4px;
    overflow: hidden;
}
.ai-score-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.6s ease;
}
.ai-score-fill.excellent {
    background: linear-gradient(90deg, var(--h2n-success), #2ECC71);
}
.ai-score-fill.good {
    background: linear-gradient(90deg, var(--h2n-info), #5DADE2);
}
.ai-score-fill.fair {
    background: linear-gradient(90deg, var(--h2n-warning), #F7DC6F);
}
.ai-score-fill.poor {
    background: linear-gradient(90deg, var(--h2n-danger), #F1948A);
}
/* Departments / Listing specific styles — use H2N palette and mobile-first tweaks */
.dept-name {
    color: var(--h2n-primary);
    font-weight: 600;
    font-size: 1rem;
}
.dept-desc {
    color: var(--h2n-text);
    opacity: 0.85;
    font-size: 0.95rem;
}
/* Mobile stacked card tweaks */
.list-group-item {
    background: white;
    border: 1px solid rgba(233, 236, 239, 0.8);
    border-radius: 0.75rem;
}
.list-group-item .btn {
    font-weight: 600;
}
/* Make outline-primary follow H2N primary color */
.btn-outline-primary {
    color: var(--h2n-primary);
    border-color: var(--h2n-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: rgba(117, 175, 84, 0.08); /* subtle primary tint */
    color: var(--h2n-secondary);
    border-color: var(--h2n-secondary);
}
/* Danger outline uses H2N danger tone */
.btn-outline-danger {
    color: var(--h2n-danger);
    border-color: var(--h2n-danger);
}
.btn-outline-danger:hover, .btn-outline-danger:focus {
    background-color: rgba(214, 55, 58, 0.06);
    color: white;
}
/* Table action buttons: compact and consistent */
.table .btn-sm {
    padding: 0.375rem 0.6rem;
    font-size: 0.85rem;
}
/* Pagination small adjustments using H2N palette */
.pagination .page-link {
    color: var(--h2n-text);
}
.pagination .page-item.active .page-link {
    background: linear-gradient(90deg, var(--h2n-primary), var(--h2n-secondary));
    border-color: transparent;
    color: white;
}
/* Ensure pagination and filters don't overflow on small screens */
.pagination { flex-wrap: wrap; gap: 0.25rem; }
.form-inline .d-flex { gap: 0.5rem; flex-wrap: wrap; }
/* Improve readability on small screens */
@media (max-width: 991px) {
    .dept-name { font-size: 1.05rem; }
    .dept-desc { font-size: 0.95rem; }
    .list-group-item { padding: 1rem; }
    .btn-sm.w-100 { padding: 0.6rem 0.75rem; }
}
/* Mobile-first enhancements (new) */
/* Base small-screen friendly defaults */
html { font-size: 16px; }
.container, .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
    box-sizing: border-box; /* ensure padding included in width calculations */
}
/* Make primary interactive elements large and touch-friendly by default */
.btn, .btn-sm {
    display: block;
    width: 100%;
    padding: 0.75rem 0.75rem;
    font-size: 1rem;
    border-radius: 0.6rem;
    box-sizing: border-box;
}
.btn + .btn {
    margin-top: 0.5rem;
}
.navbar .nav-link {
    padding: 0.5rem 0.6rem;
    font-size: 1rem;
}
/* Navbar collapse tweaks for mobile */
.navbar-collapse {
    padding: 0.5rem 0;
}
.navbar-nav { gap: 0.25rem; }
/* Stack job-card content by default on small screens */
.job-card {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 0.75rem;
}
.job-card .job-meta {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}
/* Stats grid mobile-first */
.stats-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.75rem;
}
/* File upload area smaller on mobile */
.file-upload-area {
    padding: 1rem;
}
/* Forms: larger tap targets and readable font-size */
.form-control, .form-select {
    font-size: 1rem;
    padding: 0.6rem 0.75rem;
}
.form-label { font-size: 0.95rem; }
/* Hero smaller on mobile */
.hero-section {
    padding: 2rem 0;
}
/* Responsive table container with momentum scrolling */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 0.75rem;
}
.table td, .table th {
    white-space: normal; /* allow wrapping */
}
/* Safety: long titles and badges should not force horizontal scroll */
.card-title, .badge { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
/* Utility: hide less important elements on very small screens via a helper class */
.hide-on-xs { display: none !important; }
/* Accessibility: increase focus outline contrast on mobile */
:focus {
    outline: 3px solid rgba(117,175,84,0.25);
    outline-offset: 2px;
}
/* Desktop and larger screens: restore multi-column and compact controls */
@media (min-width: 576px) {
    .btn, .btn-sm {
        display: inline-flex;
        width: auto;
        padding: 0.4rem 0.8rem;
        font-size: 0.95rem;
    }
    .job-card {
        flex-direction: row;
        align-items: center;
        gap: 1rem;
    }
    .file-upload-area { padding: 2rem; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
    .container, .container-fluid { padding-left: 1.5rem; padding-right: 1.5rem; }
    .stats-grid { grid-template-columns: repeat(3, 1fr); }
    .navbar .nav-link { font-size: 0.95rem; }
}
@media (min-width: 992px) {
    .stats-grid { grid-template-columns: repeat(4, 1fr); }
}
/* Small-screen specific tweaks that complement mobile-first defaults */
@media (max-width: 480px) {
    .navbar-brand { font-size: 1.1rem; }
    .navbar-brand-logo { height: 40px; padding: 4px; }
    .footer-logo { height: 32px; }
    .hero-section { padding: 1.5rem 0; }
    /* Hide columns that are not critical in compact views when developer adds the helper class */
    .table .hide-on-xs, .table thead .hide-on-xs { display: none !important; }
}
/* Prevent layout bleed generally but allow explicit scroll containers to work */
html, body {
    max-width: 100%;
}

/* Jobs horizontal scroll on small screens */
.jobs-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem; /* space for scrollbar */
}
.jobs-track {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.job-item {
    flex: 0 0 320px; /* card width in horizontal scroller */
    min-width: 280px;
}

/* Jobs horizontal scroll: snap behavior + indicators + preferred card width */
/* Desired card width: 320px (flex-basis). Adjust .job-item { flex: 0 0 320px } if you want wider/narrower cards. */
.jobs-scroll {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
    padding-bottom: 0.5rem; /* space for scrollbar */
}
.jobs-track {
    display: flex;
    gap: 1rem;
    align-items: stretch;
}
.job-item {
    flex: 0 0 320px; /* preferred width */
    min-width: 280px;
    scroll-snap-align: start;
    scroll-snap-stop: always;
}

/* Indicators (dots) under the scroller */
.jobs-indicators {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
    padding: 0;
    list-style: none;
}
.jobs-indicators button {
    appearance: none;
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background: rgba(44,62,80,0.12);
    cursor: pointer;
    transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
    opacity: 0.9;
}
.jobs-indicators button:hover { transform: scale(1.15); }
.jobs-indicators button.active {
    background: linear-gradient(90deg, var(--h2n-primary), var(--h2n-secondary));
    box-shadow: 0 6px 18px rgba(117,175,84,0.18);
    transform: scale(1.25);
}

/* Polished button styles: pill-shaped primary and outline variants.
   Usage example (HTML):
   <a class="btn btn-pill btn-pill-primary">Candidatar</a>
   <a class="btn btn-pill btn-pill-outline">Ver detalhes</a>
*/
.btn-pill {
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(44,62,80,0.06);
    transition: transform 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.btn-pill:active { transform: translateY(1px); }
.btn-pill:focus { outline: 3px solid rgba(117,175,84,0.14); outline-offset: 2px; }

.btn-pill-primary {
    background: linear-gradient(90deg, var(--h2n-primary), color-mix(in srgb, var(--h2n-secondary) 30%));
    color: #fff;
    border: 1px solid rgba(0,0,0,0.04);
}
.btn-pill-primary:hover { box-shadow: 0 10px 30px rgba(44,95,84,0.12); transform: translateY(-2px); }

.btn-pill-outline {
    background: transparent;
    color: var(--h2n-primary);
    border: 2px solid rgba(117,175,84,0.12);
}
.btn-pill-outline:hover { background: rgba(117,175,84,0.06); color: var(--h2n-secondary); transform: translateY(-2px); }

/* Make sure pill buttons are compact on small screens when used full-width */
@media (max-width: 575px) {
    .btn-pill { width: 100%; justify-content: center; }
}

/* On medium+ screens revert to two-column grid layout */
@media (min-width: 768px) {
    .jobs-scroll { overflow: visible; }
    .jobs-track { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
    .job-item { flex: none; min-width: 0; }
}

/* Ensure job cards don't force a minimum width when in flex rows */
.job-card {
    min-width: 0; /* allow flex children to shrink without causing overflow */
}

/* Ensure button groups can shrink and not cause overflow */
.btn-group, .btn-group > .btn {
    min-width: 0;
    flex-shrink: 1;
}
/* Make hero icon responsive and never overflow */
.hero-image i {
    max-width: 100%;
    height: auto;
    font-size: clamp(4rem, 10vw, 12rem);
}
/* Extra safety rules to prevent horizontal overflow in listings */
.container .row {
    margin-left: 0;
    margin-right: 0;
    width: 100%;
    box-sizing: border-box;
}
.card {
    width: 100%;
    box-sizing: border-box;
    min-width: 0;
}
.card-body {
    min-width: 0;
}
/* Ensure icon fonts and inline svgs don't force width */
.bi, .avatar, img, svg {
    max-width: 100%;
    height: auto;
}
/* Buttons and groups should never force the row wider */
.btn, .btn-group, .btn-group > .btn {
    min-width: 0;
    max-width: 100%;
}
/* Very long words or unbroken strings in job descriptions */
.card-text, .card-title {
    overflow-wrap: anywhere;
    word-break: break-word;
}