/* XSITE Jobs — deep teal / gold recruitment section.
   Deliberately its own typography (Archivo / Inter),
   distinct from the landing page's Helvetica Neue. Scoped under body.jobs-page so it
   never bleeds into other sections.

   Mobile-first: base rules below target ~390-430px phones; min-width queries widen
   up from there. This is the site-wide standard going forward (see CLAUDE.md brief),
   not a one-off for this page. */

body.jobs-page {
    --jobs-teal: #0a5567;
    --jobs-teal-deep: #063b48;
    --jobs-gold: #e0a92e;
    --jobs-paper: #f5f3ee;
    --jobs-ink: #16191f;
    --jobs-ink-dim: #4d5760;
    font-family: 'Archivo', "Helvetica Neue", Arial, sans-serif;
}

body.jobs-page .site-main {
    max-width: none;
    padding: 0;
    margin: 0;
}

body.jobs-page .eyebrow,
body.jobs-page .jobs-nav a,
body.jobs-page .field-label,
body.jobs-page .btn-jobs {
    font-family: 'Inter', Arial, sans-serif;
    letter-spacing: 0.08em;
}

/* ---------- In-page nav ---------- */
.jobs-nav {
    display: flex;
    justify-content: center;
    gap: 1.2rem;
    flex-wrap: wrap;
    background: var(--jobs-teal-deep);
    padding: 0.75rem 1rem;
}

.jobs-nav a {
    color: #cfe3e8;
    font-size: 0.72rem;
    text-decoration: none;
}

.jobs-nav a:hover { color: var(--jobs-gold); }

/* ---------- Hero ---------- */
.jobs-hero {
    position: relative;
    background-image:
        linear-gradient(180deg, rgba(6, 40, 49, 0.55) 0%, rgba(6, 40, 49, 0.88) 100%),
        url("../img/hero-construction.7966cb93dc1c.jpg");
    background-size: cover;
    background-position: center;
    color: #fff;
    padding: 3rem 1.3rem;
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.eyebrow {
    font-size: 0.72rem;
    color: var(--jobs-gold);
    margin: 0 0 1rem;
    line-height: 1.6;
}

.jobs-hero .headline {
    font-family: 'Archivo', sans-serif;
    font-weight: 800;
    font-size: clamp(1.8rem, 7vw, 3.4rem);
    line-height: 1.15;
    margin: 0 0 1rem;
    max-width: none;
}

.jobs-hero .headline .accent { color: var(--jobs-gold); }

/* Greek word/character count runs longer than English at equivalent meaning,
   so the shared clamp() reads oversized next to the English hero at the same
   viewport width. Scaled down proportionately, not to an arbitrary value. */
html:lang(el) .jobs-hero .headline { font-size: clamp(1.5rem, 5.8vw, 2.8rem); }

.jobs-hero .subhead {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    color: #e4ecee;
    max-width: 52ch;
    margin: 0 0 1.6rem;
}

.btn-jobs {
    display: inline-block;
    align-self: flex-start;
    background: var(--jobs-gold);
    color: #1a1400;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.9rem 1.6rem;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    text-decoration: none;
}

.btn-jobs:hover { background: #f0bb42; }

/* ---------- Agency intro ---------- */
.jobs-intro {
    background: var(--jobs-paper);
    color: var(--jobs-ink);
    padding: 3rem 1.3rem;
}

.intro-grid {
    display: grid;
    gap: 1.2rem;
}

.jobs-intro .section-label {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    color: var(--jobs-teal);
    opacity: 0.65;
    margin: 0;
}

.intro-body p {
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 78ch;
    margin: 0 0 1.2rem;
}

.intro-body p:last-child { margin-bottom: 0; }

.intro-subhead {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--jobs-teal-deep);
    margin: 2rem 0 1rem;
}

.intro-subhead:first-child { margin-top: 0; }

.intro-list-lead { margin-bottom: 0.8rem; }

.intro-list {
    list-style: none;
    margin: 0 0 1.2rem;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.3rem;
    max-width: 78ch;
}

.intro-list li {
    position: relative;
    padding-left: 1.3rem;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 1.05rem;
    line-height: 1.75;
}

.intro-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.55em;
    width: 8px;
    height: 8px;
    border-radius: 2px;
    background: var(--jobs-gold);
}

.intro-list li strong {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    color: var(--jobs-ink);
}

/* ---------- Photo band ---------- */
.jobs-photoband {
    position: relative;
    background-image:
        linear-gradient(180deg, rgba(6, 40, 49, 0) 40%, rgba(6, 40, 49, 0.85) 100%),
        url("../img/band-homecare.c3d7140ca583.jpg");
    background-size: cover;
    background-position: center;
    min-height: 40vh;
    display: flex;
    align-items: flex-end;
    padding: 2rem 1.3rem;
}

.jobs-photoband p {
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: clamp(1.375rem, 2.7vw, 2.125rem);
    line-height: 1.25;
    letter-spacing: -0.01em;
    max-width: 22ch;
    margin: 0;
}

/* ---------- Sectors ---------- */
.jobs-sectors {
    background: #fff;
    color: var(--jobs-ink);
    padding: 3rem 1.3rem;
}

.jobs-sectors .section-heading {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    margin: 0 0 0.5rem;
}

.jobs-sectors .section-note {
    color: var(--jobs-ink-dim);
    font-family: 'Inter', Arial, sans-serif;
    max-width: 50ch;
    margin: 0 0 2rem;
}

.sector-grid {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.sector-card {
    display: flex;
    flex-direction: column;
    border: 1px solid #e4e1d8;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
}

.sector-card .sector-photo {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.sector-card .sector-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(85%) brightness(0.95);
    transition: filter 0.2s ease;
}

.sector-card .sector-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10, 85, 103, 0.12) 0%, rgba(6, 40, 49, 0.8) 100%);
}

.sector-card:hover .sector-photo img,
.sector-card:focus-within .sector-photo img { filter: grayscale(0%); }

.sector-icon {
    position: absolute;
    left: 14px;
    bottom: 12px;
    z-index: 2;
    width: 28px;
    height: 28px;
    stroke: var(--jobs-gold);
    stroke-width: 1.75;
    fill: none;
}

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

.sector-card .sector-text { padding: 1rem 1.1rem 1.3rem; }

.sector-title {
    display: block;
    font-family: 'Inter', Arial, sans-serif;
    font-weight: 700;
    font-size: 1.05rem;
    margin: 0 0 0.4rem;
}

.sector-blurb {
    display: block;
    font-family: 'Inter', Arial, sans-serif;
    font-size: 0.92rem;
    color: var(--jobs-ink-dim);
    margin: 0;
}

/* ---------- Enquiry form ---------- */
.jobs-form-section {
    background: var(--jobs-paper);
    color: var(--jobs-ink);
    padding: 3rem 1.3rem;
}

.jobs-form-section .form-heading {
    font-family: 'Archivo', sans-serif;
    font-weight: 700;
    font-size: clamp(1.5rem, 5vw, 2.2rem);
    margin: 0 0 0.5rem;
}

.jobs-form-section .form-subhead {
    font-family: 'Inter', Arial, sans-serif;
    color: var(--jobs-ink-dim);
    max-width: 55ch;
    margin: 0 0 2rem;
}

.enquiry-success {
    background: rgba(224, 169, 46, 0.12);
    border: 1px solid var(--jobs-gold);
    color: var(--jobs-ink);
    border-radius: 8px;
    padding: 1rem 1.2rem;
    font-family: 'Inter', Arial, sans-serif;
    margin-bottom: 1.5rem;
}

.enquiry-form {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
    background: #fff;
    border: 1px solid rgba(10, 85, 103, 0.14);
    border-radius: 10px;
    padding: 1.4rem;
}

.field-label {
    display: block;
    font-size: 0.7rem;
    color: var(--jobs-teal);
    margin-bottom: 0.4rem;
}

.enquiry-form input[type=text],
.enquiry-form input[type=email],
.enquiry-form input[type=tel],
.enquiry-form select,
.enquiry-form textarea {
    width: 100%;
    background: transparent;
    border: 1px solid rgba(10, 85, 103, 0.25);
    border-radius: 8px;
    color: var(--jobs-ink);
    padding: 0.75rem 0.8rem;
    /* 16px prevents iOS Safari auto-zoom on input focus. */
    font-size: 16px;
    font-family: inherit;
}

.enquiry-form textarea { resize: vertical; min-height: 6rem; }

.enquiry-form input::placeholder,
.enquiry-form textarea::placeholder { color: rgba(22, 25, 31, 0.35); }

.enquiry-form input:focus,
.enquiry-form select:focus,
.enquiry-form textarea:focus {
    outline: none;
    border-color: var(--jobs-gold);
}

.field-errors {
    list-style: none;
    padding: 0;
    margin: 0.3rem 0 0;
    color: #b83a1e;
    font-size: 0.8rem;
}

.field-optional {
    color: rgba(22, 25, 31, 0.4);
    font-weight: 500;
    letter-spacing: normal;
    text-transform: none;
}

/* Honeypot: visually hidden from real visitors, still reachable by simple bots that
   fill in every text field they find (unlike a plain `type=hidden`, which bots skip). */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.turnstile-widget { margin-top: 0.2rem; }

.enquiry-form .btn-jobs {
    margin-top: 0.5rem;
    width: 100%;
    text-align: center;
}

/* ---------- Section footer strip ---------- */
.jobs-footer-strip {
    background: var(--jobs-teal);
    color: #cfe3e8;
    padding: 2rem 1.3rem;
    font-size: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.jobs-footer-strip p { line-height: 1.9; }

.jobs-footer-strip .jobs-footer-brand { color: #fff; font-weight: 600; }
.jobs-footer-strip a { color: var(--jobs-gold); text-decoration: none; }
.jobs-footer-strip a:hover { text-decoration: underline; }

/* ---------- Privacy page ---------- */
.jobs-privacy {
    background: var(--jobs-paper);
    color: var(--jobs-ink);
    padding: 3rem 1.3rem;
}

.jobs-privacy h1 {
    font-family: 'Archivo', sans-serif;
    font-size: clamp(1.6rem, 5vw, 2.4rem);
}

.jobs-privacy h2 {
    font-family: 'Archivo', sans-serif;
    font-size: 1.05rem;
    color: var(--jobs-teal);
    margin-top: 1.8rem;
}

.jobs-privacy p {
    font-family: 'Inter', Arial, sans-serif;
    line-height: 1.7;
    max-width: 65ch;
}

.jobs-privacy .updated {
    color: var(--jobs-ink-dim);
    margin-top: 2rem;
}

/* ================= Tablet / desktop ================= */
@media (min-width: 780px) {
    .jobs-hero { padding: 6rem 3rem; min-height: 72vh; }
    .jobs-intro,
    .jobs-sectors,
    .jobs-form-section,
    .jobs-privacy { padding: 5rem 3rem; }
    .jobs-sectors,
    .jobs-form-section { display: flex; flex-direction: column; align-items: center; text-align: center; }
    .jobs-sectors .section-note,
    .jobs-form-section .form-subhead { margin-left: auto; margin-right: auto; }

    .intro-grid {
        grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr);
        gap: 4.5rem;
        max-width: 1280px;
        margin: 0 auto;
    }

    .jobs-hero .headline { max-width: 18ch; }

    .jobs-photoband { padding: 3rem; min-height: 46vh; }

    .sector-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1.5rem;
        max-width: 1120px;
        width: 100%;
        text-align: left;
    }

    .sector-card { border-radius: 14px; }

    .enquiry-form {
        max-width: 640px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1.2rem;
        text-align: left;
        padding: 2.2rem;
    }

    .enquiry-form .field-full,
    .enquiry-form .hp-field,
    .enquiry-form .turnstile-widget,
    .enquiry-form .form-errors,
    .enquiry-form .btn-jobs { grid-column: 1 / -1; }

    .jobs-footer-strip {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1.4rem 3rem;
    }
}

@media (min-width: 1024px) {
    .jobs-hero .headline { max-width: 16ch; }
}

/* The Greek headline is markedly longer than the English one; the English
   ch-based caps above wrap it into 4 cramped lines. Widen it for :lang(el)
   so it reads as 2-3 balanced lines like the mockup, same as English does. */
@media (min-width: 780px) {
    html:lang(el) .jobs-hero .headline { max-width: 32ch; }
}