/* ============================================================
   Fitlane AI — job-offer page (light, minimalist, mobile-first)
   Reuses tokens, buttons, inputs and modal from style.css
   (the page forces data-theme="light"). Scoped under .page-offer.
   ============================================================ */

.page-offer {
    background: var(--color-bg);
    color: var(--color-text);
}

/* near-black primary CTA on the light theme (per design brief);
   dark theme uses the default electric-blue primary from style.css */
[data-theme="light"] .page-offer .btn--primary {
    --btn-bg: #111827;
    color: #ffffff;
    box-shadow: 0 8px 24px rgb(17 24 39 / .14);
}
[data-theme="light"] .page-offer .btn--primary:hover { --btn-bg: #000000; }

.offer-wrap { width: 100%; max-width: 46rem; margin: 0 auto; padding: 0 var(--space-5); }

/* ---------------- header ---------------- */
.offer-top {
    position: sticky; top: 0; z-index: 40;
    background: var(--color-header-bg); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--color-border-soft);
}
.offer-top__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); height: 60px; min-width: 0; }
.offer-top .brand { min-width: 0; }
.offer-top .brand__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.offer-top__actions { display: flex; align-items: center; gap: var(--space-3); flex: 0 0 auto; }

/* ---------------- layout ---------------- */
.offer-main { padding: var(--space-8) var(--space-5) var(--space-12); display: grid; gap: var(--space-5); }
.offer-card {
    background: var(--color-dialog-bg);
    border: 1px solid var(--color-border);
    border-radius: 24px;
    box-shadow: 0 1px 2px rgb(15 23 42 / .04), 0 12px 32px rgb(15 23 42 / .05);
    padding: var(--space-8);
}

/* ---------------- hero job card ---------------- */
.offer-hero { display: grid; gap: var(--space-4); }
.offer-badge {
    justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2);
    padding: 6px 13px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 600;
    background: color-mix(in srgb, var(--color-success) 12%, transparent); color: var(--color-success);
}
.offer-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); }
.offer-title { font-size: clamp(30px, 6vw, 46px); letter-spacing: -.02em; }
.offer-salary { font-size: clamp(22px, 4vw, 30px); font-weight: 700; margin: 0; }
.offer-salary span { color: var(--color-muted); font-weight: 500; font-size: .6em; }
.offer-loc { display: inline-flex; align-items: center; gap: 7px; color: var(--color-muted-2); margin: 0; font-size: 15px; }
.offer-loc svg { color: var(--color-muted); }
.offer-tags { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: var(--space-1) 0 var(--space-3); padding: 0; }
.offer-tags li { padding: 6px 13px; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500;
    background: var(--color-primary-soft); color: var(--color-accent-soft-text); }

/* ---------------- compensation + params ---------------- */
.offer-params { display: grid; gap: var(--space-5); }
.offer-comp { display: grid; gap: 2px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-border-soft); }
.offer-comp__label { color: var(--color-muted); font-size: 13px; text-transform: uppercase; letter-spacing: .05em; }
.offer-comp__value { font-size: clamp(26px, 5vw, 34px); font-weight: 700; }
.offer-comp__note { color: var(--color-muted); font-size: 14px; }
.offer-specs { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 0; }
.offer-specs div { display: grid; gap: 2px; }
.offer-specs dt { color: var(--color-muted); font-size: 13px; }
.offer-specs dd { margin: 0; font-weight: 600; }

/* ---------------- description ---------------- */
.offer-desc h2 { font-size: 19px; margin-bottom: var(--space-3); }
.offer-desc h1 { font-size: 26px; margin-bottom: var(--space-4); }
.offer-desc p { color: var(--color-muted-2); margin: 0 0 var(--space-3); }
.offer-desc .ticks { gap: var(--space-2); }

/* ---------------- footer ---------------- */
.offer-foot { border-top: 1px solid var(--color-border-soft); }
.offer-foot__inner { display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
    padding: var(--space-6) var(--space-5); color: var(--color-muted); font-size: 14px; }
.offer-foot__inner a:hover { color: var(--color-text); }

/* ---------------- modal: optional fields disclosure ---------------- */
.lead-optional { margin: var(--space-2) 0 var(--space-4); border: 1px solid var(--color-border-soft); border-radius: var(--radius-sm); }
.lead-optional > summary { cursor: pointer; padding: var(--space-3) var(--space-4); font-weight: 600; font-size: 14px; color: var(--color-muted-2); list-style: none; }
.lead-optional > summary::-webkit-details-marker { display: none; }
.lead-optional > summary::after { content: " +"; color: var(--color-muted); }
.lead-optional[open] > summary::after { content: " −"; }
.lead-optional[open] > summary { border-bottom: 1px solid var(--color-border-soft); margin-bottom: var(--space-4); }
.lead-optional .field { padding: 0 var(--space-4); }

@media (max-width: 560px) {
    .page-offer .brand__sub { display: none; }
}
@media (max-width: 480px) {
    .offer-card { padding: var(--space-6) var(--space-5); border-radius: 20px; }
    .offer-specs { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
    .offer-wrap { padding: 0 var(--space-4); }
    .offer-top__actions { gap: var(--space-2); }
    .offer-top__actions .btn--sm { padding: 8px 11px; font-size: 13px; }
    .offer-top .langsw__btn { padding: 8px 9px; }
}