/**
 * Job Detail Page (/emploi/{slug}/{id}) — Yehaa idiom
 *
 * Mobile-first; right-rail layout activates at >= 900px.
 * Reuses tokens from style.css (loaded as base) and chip styles
 * (.yc, .yc--salary, .yc--remote, .yc--type) from yehaa.css.
 */

.page-emploi__article {
    padding: var(--space-3) var(--space-4) var(--space-8);
    max-width: 990px;
    margin: 0 auto;
}

/* ── Breadcrumbs ─────────────────────────────────────── */

.page-emploi__crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-1);
    margin-bottom: var(--space-6);
    font-size: 12px;
    color: var(--neutral-500);
}

.page-emploi__crumb-link {
    color: var(--primary-700);
    text-decoration: none;
}

.page-emploi__crumb-link:hover {
    text-decoration: underline;
}

.page-emploi__crumb-sep {
    color: var(--neutral-400);
}

/* ── Expired banner ──────────────────────────────────── */

.page-emploi__expired {
    margin: 0 0 var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: var(--neutral-50);
    border-left: 3px solid var(--neutral-400);
    color: var(--neutral-800);
    font-size: 13px;
    line-height: 1.5;
    border-radius: var(--radius-sm);
}

.page-emploi__expired strong {
    display: block;
    font-weight: 700;
    margin-bottom: 2px;
}

/* ── Header (logo + company + title + meta + chips) ──── */

.page-emploi__header {
    margin-bottom: var(--space-4);
}

.page-emploi__header-top {
    display: flex;
    gap: var(--space-3);
    align-items: center;
    margin-bottom: var(--space-3);
}

.page-emploi__logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: var(--surface-page);
}

.page-emploi__logo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    border: none;
}

.page-emploi__header-text {
    flex: 1;
    min-width: 0;
}

.page-emploi__company {
    margin: 0 0 2px;
    font-size: 13px;
    color: var(--neutral-600);
    font-weight: 500;
}

.page-emploi__title {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--neutral-950);
    word-wrap: break-word;
}

/* ── Wiki-style infobox (structured facts at a glance) ─── */

.page-emploi__infobox {
    margin: 0 0 8px;
    padding: var(--space-2) var(--space-4);
    background: var(--surface-band);
    border: 1px solid var(--neutral-100);
    border-radius: var(--radius-md);
    font-size: 13px;
    line-height: 1.5;
}

.page-emploi__infobox-row {
    display: grid;
    grid-template-columns: minmax(110px, 35%) 1fr;
    gap: var(--space-3);
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--neutral-100);
}

.page-emploi__infobox-row:last-child {
    border-bottom: none;
}

.page-emploi__infobox dt {
    margin: 0;
    color: var(--neutral-600);
    font-weight: 600;
}

.page-emploi__infobox dd {
    margin: 0;
    color: var(--neutral-900);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}

.page-emploi__infobox dd a {
    color: var(--primary-700);
    text-decoration: none;
}

.page-emploi__infobox dd a:hover {
    text-decoration: underline;
}

.page-emploi__infobox-note {
    margin-left: var(--space-1);
    color: var(--neutral-500);
    font-size: 11px;
}

/* ── Apply CTA ───────────────────────────────────────── */

/* CTA stack: Plume on top, Postuler below. Both stretch to the container's
   width so the two calls to action read as paired and equal — color carries
   the hierarchy, not size. */
.page-emploi__cta {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    margin: 0 0 var(--space-3);
}

/* Bottom CTA: previous sibling (description) owns the leading gap, so we
   zero margin-top and rely on the standard 24 px section break. The 32 px
   bottom margin is the deliberate "act on offer → learn more" major break. */
.page-emploi__cta--bottom {
    margin-top: 0;
    margin-bottom: var(--space-8);
}

/* Shared button shape — guarantees identical width / height between the
   two CTAs (each one declares only its own colors below). */
.page-emploi__apply-btn,
.page-emploi__plume-btn {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-3) var(--space-4);
    border: 1.5px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-gentle),
                color var(--duration-normal) var(--ease-gentle),
                border-color var(--duration-normal) var(--ease-gentle);
}

.page-emploi__apply-btn {
    background: var(--primary-700);
    color: #FFFFFF;
    border-color: var(--primary-700);
}

.page-emploi__apply-btn:hover {
    background: var(--primary-800);
    border-color: var(--primary-800);
}

.page-emploi__apply-btn:focus-visible,
.page-emploi__plume-btn:focus-visible {
    outline: 2px solid var(--neutral-950);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px var(--surface-page);
}

.page-emploi__apply-icon {
    flex-shrink: 0;
}

.page-emploi__apply-note {
    margin: 0;
    font-size: 12px;
    color: var(--neutral-500);
}

/* ── Plume IA secondary CTA — sits below Postuler ─────── */

/* Plume IA — outlined royal-purple. White body keeps Postuler dominant as
   the primary blue solid; Plume reads as the offered-alternative path.
   Hover fills with the brand purple for tap-feedback parity with Postuler. */
.page-emploi__plume-btn {
    background: var(--surface-page);
    color: var(--plume-500);
    border-color: var(--plume-500);
}

.page-emploi__plume-btn:hover {
    background: var(--plume-500);
    color: #FFFFFF;
    border-color: var(--plume-500);
}

.page-emploi__plume-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
}

.page-emploi__plume-label {
    white-space: normal;
}

.page-emploi__cta--disabled .page-emploi__apply-disabled {
    display: inline-block;
    padding: var(--space-3) var(--space-5);
    background: var(--neutral-100);
    color: var(--neutral-500);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 600;
}

/* ── Sauvegarder · Partager · Signaler row ───────────── */

.page-emploi__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    margin: 12px 0 var(--space-6);
    padding: 0;
    list-style: none;
}

.page-emploi__action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0;
    background: none;
    border: none;
    color: var(--primary-700);
    font-family: var(--font-body);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
}

.page-emploi__action:hover {
    text-decoration: underline;
}

.page-emploi__action:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
}

.page-emploi__action-icon {
    flex-shrink: 0;
    color: var(--neutral-500);
}

/* ── Description body ────────────────────────────────── */

/* ── Wiki-style section heading (subject + horizontal rule) ─── */

.page-emploi__section-title {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0 0 var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 2px solid var(--neutral-900);
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    color: var(--neutral-900);
}

.page-emploi__section-title-text {
    flex: 1;
    min-width: 0;
}

/* 56×56 thumbnail — matches the top-header logo size so À-propos visually
   pairs with the page header (employer-logo on the left, text on the right). */
.page-emploi__heading-logo {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    object-fit: contain;
    background: var(--surface-page);
}

.page-emploi__heading-logo--placeholder {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 700;
    border: none;
}

.page-emploi__description {
    margin-bottom: var(--space-6);
}

.page-emploi__description-body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--neutral-800);
}

.page-emploi__description-body p {
    margin: 0 0 var(--space-3);
}

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

.page-emploi__description-body ul,
.page-emploi__description-body ol {
    margin: 0 0 var(--space-3);
    padding-left: var(--space-5);
    list-style: revert;
}

.page-emploi__description-body li {
    margin-bottom: var(--space-1);
    list-style: revert;
}

.page-emploi__description-body h3,
.page-emploi__description-body h4 {
    margin: var(--space-4) 0 var(--space-2);
    font-family: var(--font-display);
    font-weight: 700;
    color: var(--neutral-900);
}

.page-emploi__description-body h3 { font-size: 15px; }
.page-emploi__description-body h4 { font-size: 14px; }

.page-emploi__description-body strong { font-weight: 700; }
.page-emploi__description-body em { font-style: italic; }

.page-emploi__description-body a {
    color: var(--primary-700);
    text-decoration: underline;
}

.page-emploi__description-body a:hover {
    color: var(--primary-900);
}

/* ── Employer-alerts CTA (placeholder; future-wired) ── */
/* Sits under "Plus chez {Company}" in the rail when that section renders;
   falls back to under the about-company section in the main column. Visual
   weight: neutral outlined card, no color claim — Postuler keeps the blue,
   Plume keeps the purple. */

/* Alert CTA sits inside the about-company section after the stats
   sentence. Needs its own top spacing because the parent isn't a
   flex container. Bumped from --space-1 (4 px, read cramped) to
   --space-4 (16 px) on 2026-05-13 to match the inter-section
   rhythm elsewhere on the page. */
.page-emploi__alert-cta {
    margin: var(--space-4) 0 0;
}

.page-emploi__alert-btn {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    width: 100%;
    padding: var(--space-3);
    background: var(--surface-page);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    color: var(--neutral-800);
    font-family: var(--font-body);
    font-size: 13px;
    line-height: 1.4;
    text-align: left;
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-gentle),
                border-color var(--duration-normal) var(--ease-gentle);
}

.page-emploi__alert-btn:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-300);
}

.page-emploi__alert-btn:focus-visible {
    outline: 2px solid var(--neutral-950);
    outline-offset: 2px;
}

.page-emploi__alert-icon {
    flex-shrink: 0;
    color: var(--primary-700);
}

.page-emploi__alert-text {
    flex: 1;
    min-width: 0;
}

.page-emploi__alert-text strong {
    color: var(--neutral-950);
}

.page-emploi__alert-arrow {
    flex-shrink: 0;
    color: var(--neutral-400);
}

/* ── About-company section ───────────────────────────── */

/* About-company is the last block in the main column on mobile; the
   .page-emploi__layout flex `gap` already separates it from the rail
   beneath. Zeroing margin-bottom keeps the gap symmetric with what the
   layout owns elsewhere. */
.page-emploi__about-company {
    margin-bottom: 0;
}

.page-emploi__about-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--neutral-800);
}

.page-emploi__about-body p {
    margin: 0 0 var(--space-2);
}

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

.page-emploi__about-placeholder {
    color: var(--neutral-500);
    font-style: italic;
    font-size: 13px;
}

/* ── Right rail (M2.2: CV picker / Plume / Employer / Similar) ── */

.page-emploi__rail {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
}

/* ── Mobile-first stack → desktop right-rail at >= 990px ─
   Breakpoint aligned with home's M2.1 two-column at 990 px. Rail width
   matches home's 260 px so the visual rhythm reads consistent across
   the two desktop surfaces. Sticky offset uses --search-row-height
   (same token home rail uses). No max-height / overflow — rail grows
   with its natural content and sticky carries it through long
   descriptions (per M2.2 direction doc Q1, 2026-05-13). */

.page-emploi__layout {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

@media (min-width: 990px) {
    .page-emploi__article {
        padding: var(--space-3) var(--container-padding) var(--space-8);
    }

    .page-emploi__title {
        font-size: 26px;
    }

    .page-emploi__layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 30px;
    }

    .page-emploi__main {
        flex: 1;
        min-width: 0;
    }

    .page-emploi__rail {
        flex: 0 0 260px;
        position: sticky;
        top: var(--search-row-height, 65px);
        align-self: flex-start;
    }

    /* Desktop: existing inline Plume IA buttons in .page-emploi__cta
       (top + bottom apply stacks) hide because the rail's plume-adapt
       tile takes over the Plume affordance. Apply stack reduces to
       Postuler-only at desktop. */
    .page-emploi__plume-btn {
        display: none;
    }

    /* Desktop: hide the TOP inline apply CTA — the rail's
       .rail-tile--apply (Postuler maintenant button under Plume)
       takes over. The BOTTOM apply CTA (.page-emploi__cta--bottom)
       stays as the "after-description" punctuation. Selector matches
       any .page-emploi__cta that is NOT the bottom one — also catches
       the disabled-expired variant, which is fine because the
       expired banner at the top already announces the status. */
    .page-emploi__cta:not(.page-emploi__cta--bottom) {
        display: none;
    }
}

/* ────────────────────────────────────────────────────────
   M2.2 rail tiles — CV picker + Plume adapt + Employer +
   Similar (2026-05-13)
   ────────────────────────────────────────────────────────
   Four tiles render inside .page-emploi__rail:
     1. .rail-tile--cv-picker     (apply with stored CV)
     2. .rail-tile--plume-adapt   (AI: adapter mon CV)
     3. .rail-tile--employer-jobs (autres offres du même employeur)
     4. .rail-tile--similar-jobs  (offres similaires — consolidates
                                   city / category / fallback)

   At ≥ 990 px: rail is a sticky 260 px right column. Tiles render in
   DOM order.

   At < 990 px: rail becomes display:contents — children get hoisted
   to siblings of .page-emploi__main inside .page-emploi__layout's
   flex column. `order` repositions per locked decision Q3 (intake
   2026-05-13): CV picker order:-1 (above main = above apply CTA);
   Plume adapt hidden (the existing inline .page-emploi__plume-btn
   in .page-emploi__cta is the mobile expression); Employer + Similar
   order:1/2 (after main).

   Visual treatment distinct from home's .page-home .rail-tile (which
   uses an uppercase header bar on a neutral-50 strip) — detail tiles
   are flat cards with heading + body + CTA inside a single padded
   container. Reason: detail tiles are small CTA cards; home tiles
   contain dense interactive widgets (Salaires picker, Top employeurs
   leaderboard) and the header-bar gives those widgets structure. */

.page-emploi__rail .rail-tile {
    background: var(--surface-page);
    border: 1px solid var(--neutral-200);
    border-radius: var(--radius-md);
    padding: var(--space-3);
}

.page-emploi__rail .rail-tile__title {
    /* Body font (not display) — matches home's .page-home .rail-pl__title
       and the rest of home's rail typography. Display font is reserved
       for the job page's h1 title; rail tiles read as compact UI, not
       editorial type. */
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-2);
    font-family: var(--font-body);
    font-size: 14px;
    font-weight: 700;
    color: var(--neutral-900);
    line-height: 1.3;
}

.page-emploi__rail .rail-tile__title-text {
    /* Wrap long company names to a second line instead of silent-truncating.
       "Plus chez Société de transport de Montréal" should remain comprehensible
       inside the 260 px rail; align-items:center on the parent flex row keeps
       the leading 20 px icon vertically centered against the multi-line label. */
    min-width: 0;
    overflow-wrap: anywhere;
}

.page-emploi__rail .rail-tile__icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    object-fit: contain;
}

.page-emploi__rail .rail-tile__icon--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.page-emploi__rail .rail-tile__body {
    margin: 0 0 var(--space-3);
    font-size: 13px;
    line-height: 1.4;
    color: var(--neutral-700);
}

.page-emploi__rail .rail-tile__cta {
    display: block;
    width: 100%;
    padding: var(--space-2) var(--space-3);
    background: var(--surface-page);
    border: 1px solid var(--neutral-300);
    border-radius: var(--radius-sm);
    color: var(--neutral-900);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background var(--duration-normal) var(--ease-gentle),
                border-color var(--duration-normal) var(--ease-gentle);
}

.page-emploi__rail .rail-tile__cta:hover {
    background: var(--neutral-50);
    border-color: var(--neutral-400);
}

.page-emploi__rail .rail-tile__cta:focus-visible {
    outline: 2px solid var(--primary-500);
    outline-offset: 2px;
    /* Halo for visual separation from the 1 px tile border — matches the
       focus pattern used on .page-emploi__apply-btn so the indicators read
       consistent across the apply CTAs and the rail CTAs. */
    box-shadow: 0 0 0 4px var(--surface-page);
}

.page-emploi__rail .rail-tile__cta--primary {
    background: var(--primary-700);
    border-color: var(--primary-700);
    color: #fff;
}

.page-emploi__rail .rail-tile__cta--primary:hover {
    background: var(--primary-800);
    border-color: var(--primary-800);
}

/* Plume adapt — brand purple via --plume-500, matches the existing
   inline .page-emploi__plume-btn so the brand reads consistent across
   desktop (rail) and mobile (inline button). */
.page-emploi__rail .rail-tile--plume-adapt {
    background: var(--surface-band);
    border-color: var(--primary-100);
}

.page-emploi__rail .rail-tile__title--plume {
    color: var(--plume-500);
}

.page-emploi__rail .rail-tile__cta--plume {
    background: var(--plume-500);
    border-color: var(--plume-500);
    color: #fff;
}

.page-emploi__rail .rail-tile__cta--plume:hover {
    background: var(--plume-700);
    border-color: var(--plume-700);
}

.page-emploi__rail .rail-tile__cta--plume:focus-visible {
    outline: 2px solid var(--plume-700);
    outline-offset: 2px;
}

/* Job list inside Employer + Similar tiles. Reuses .yehaa-job row
   styling (defined in yehaa.css) and tightens the per-row padding
   for the narrower rail column. */
.page-emploi__rail .rail-tile__job-list {
    margin-top: var(--space-2);
}

.page-emploi__rail .rail-tile__job-list .yehaa-job {
    padding: var(--space-2) 0;
    border-bottom: 1px solid var(--neutral-100);
}

.page-emploi__rail .rail-tile__job-list .yehaa-job:last-child {
    border-bottom: none;
}

/* Stacked CTAs inside the Plume IA tile (Adapter mon CV → Postuler
   maintenant) — the apply pair sits inside the same tile so the
   visual unit reads as "rewrite + apply." Mirrors mobile's inline
   .page-emploi__cta button stack. */
.page-emploi__rail .rail-tile .rail-tile__cta + .rail-tile__cta {
    margin-top: var(--space-2);
}

.page-emploi__rail .rail-tile__cta--apply {
    /* Apply CTA sits at the SAME size as the tile title (14 px / 700) —
       weight + color do the visual lifting, not size. Avoids the
       "button bigger than the title" rhythm break Filipe flagged. */
    padding: var(--space-3) var(--space-4);
    font-size: 13px;
    font-weight: 700;
    background: var(--primary-700);
    border-color: var(--primary-700);
    color: #fff;
}

.page-emploi__rail .rail-tile__cta--apply:hover {
    background: var(--primary-800);
    border-color: var(--primary-800);
}

.page-emploi__rail .rail-tile__note {
    margin: var(--space-2) 0 0;
    font-size: 12px;
    color: var(--neutral-600);
    text-align: center;
}

/* Mobile (< 990 px) — rail dissolves; tiles flow inline after main.
   The <aside aria-label="..."> landmark dissolves with the container
   at mobile (intentional) — each .rail-tile is its own labelled
   <section>, so SR users still get region-level navigation per tile.
   Plume adapt + Apply tiles hide on mobile because the existing
   inline .page-emploi__cta block at the top of .page-emploi__main
   already carries both the Plume button and the Postuler button.
   Employer + Similar render in DOM order after main, no reordering
   needed. */
@media (max-width: 989px) {
    .page-emploi__rail {
        display: contents;
    }

    /* Plume tile carries both buttons at desktop; on mobile the
       existing inline .page-emploi__cta block at top of main has the
       same (Plume → Postuler) pair. Hide the rail tile to avoid
       duplication. */
    .page-emploi__rail .rail-tile--plume-adapt {
        display: none;
    }
}

/* ── Reduced-motion preference ───────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .page-emploi__apply-btn,
    .page-emploi__plume-btn,
    .page-emploi__alert-btn,
    .page-emploi__rail .rail-tile__cta {
        transition: none;
    }
}