/* Round12 — Recruit — section-mlm
   Figma: 4006:3220 (desktop) | 4006:3307 (tablet) | 4006:7973 & 4006:7974 (tab states)
   Rule: spacing/typography via Figma variable tokens (--var-*, --fs-h2, --fs-h3, --fs-h6,
   --fs-label-lg... from assets/css/global.css) */

/* Pin-to-viewport wrapper (see assets/scripts.js) — mirrors
   Round11/homepage/section-launch's .launch-pin-wrap. JS sets this wrap's
   height to match .r12-mlm's rendered height so pinning .r12-mlm to
   position:fixed doesn't reflow the page around it. */
.r12-mlm-pin-wrap {
    position: relative;
}

.r12-mlm {
    /* Figma colour tokens live in assets/css/global.css's shared --color-*
       system (--color-1st-fg, --color-2nd-bg, etc.) — reused directly below,
       not redeclared locally. --media-bg is a one-off not in the shared
       system (close to but distinct from --color-3rd-bg), kept local. */
    --media-bg: #fbf9f9;
    /* Khoảng lùi khi khóa — bằng đúng padding-top đã bỏ. Một nguồn duy nhất:
       CSS dùng cho `top`, scripts.js đọc lại đúng biến này làm mốc chốt khóa. */
    --pin-offset: var(--var-140, 140px);

    display: flex;
    justify-content: center;
    background: var(--color-2nd-bg);
    /* padding-top 0: section phía trên đã có padding-bottom, không cộng thêm khoảng trên */
    padding: 0 var(--section-horizontal-padding, 32px) var(--var-140, 140px);
    font-family: "DM Sans", sans-serif;
    /* Natural content height (not 100dvh) — this section's content is taller
       than most viewports (140px padding + a 902:600 image), so forcing
       100dvh + overflow:hidden clipped the title/eyebrow off-screen. The pin
       trigger in scripts.js is top-edge-based (not center-based), so it stays
       jump-free without needing to match the viewport height. */
}

.r12-mlm * {
    box-sizing: border-box;
}

/* top: --pin-offset (không phải 0) để bù đúng padding-top đã bỏ — nếu pin sát
   đỉnh viewport thì eyebrow bị header che và hở một khoảng ở dưới. Dùng `top`
   chứ không phải padding-top: đổi padding làm hộp cao thêm 140px và reflow lại
   nội dung ngay lúc gắn class ⇒ giật. */
.r12-mlm.is-pinned {
    position: fixed;
    top: var(--pin-offset);
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
}

/* Section thấp hơn viewport nên còn khe hở trên/dưới lúc pin, và section kế tiếp
   lọt vào đó. Lấp bằng đúng màu nền section, phủ kín viewport — không phải tăng
   chiều cao section nên không phá nhịp padding. z-index -1 nằm trong stacking
   context của .is-pinned (z-index 50) ⇒ dưới nội dung section, trên nội dung trang. */
.r12-mlm.is-pinned::before {
    content: "";
    position: fixed;
    inset: 0;
    background: var(--color-2nd-bg);
    z-index: -1;
}

.r12-mlm__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap, 80px);
    max-width: var(--page-max-wd, 1400px);
    width: 100%;
}

.r12-mlm__headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-12, 12px);
    width: 100%;
}

.r12-mlm__eyebrow {
    font-weight: 500;
    font-size: var(--fs-label-lg);
    line-height: 1;
    text-transform: uppercase;
    background-image: linear-gradient(to right, var(--color-1st-brd), var(--color-2nd-brd));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.r12-mlm__title {
    margin: 0;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--color-1st-fg);
}

/* ---------- Media + tab list ---------- */
.r12-mlm__body {
    display: flex;
    align-items: flex-start;
    gap: var(--var-40, 40px);
    width: 100%;
}

.r12-mlm__media {
    position: relative;
    flex: 1 0 0;
    min-width: 0;
    aspect-ratio: 902 / 600;
    background: var(--media-bg);
    overflow: hidden;
}

.r12-mlm__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.r12-mlm__media-img.is-active {
    opacity: 1;
}

.r12-mlm__tabs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-20, 20px);
    width: var(--tab-max-wd, 450px);
    flex-shrink: 0;
}

.r12-mlm__tab {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-20, 20px);
    width: 100%;
    cursor: pointer;
}

.r12-mlm__tab-indicator {
    width: 100%;
    height: 2px;
    background: var(--color-stroke);
}

.r12-mlm__tab.is-active .r12-mlm__tab-indicator {
    background: linear-gradient(to right, var(--color-1st-brd), var(--color-2nd-brd));
}

.r12-mlm__tab-title {
    margin: 0;
    width: 100%;
    font-weight: 600;
    /* Figma exports this as "h1" or "h5" depending on instance, but
       get_variable_defs confirms the real bound token is h6 (20px desktop). */
    font-size: var(--fs-h6);
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.r12-mlm__tab-desc-wrap {
    display: grid;
    grid-template-rows: 0fr;
    width: 100%;
    opacity: 0;
    transition:
        grid-template-rows 0.3s ease,
        opacity 0.3s ease;
}

.r12-mlm__tab.is-active .r12-mlm__tab-desc-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
}

.r12-mlm__tab-desc {
    margin: 0;
    min-height: 0;
    overflow: hidden;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

/* Desktop uses the separate .r12-mlm__media panel instead — this per-tab
   inline media only shows on tablet/mobile (see media query below). */
.r12-mlm__tab-media {
    display: none;
}

/* ---------- CTA button (new — desktop only, not present in tablet frame 4006:3307) ---------- */
/* TEMP: hidden until this button has a real destination URL (currently
   href="#" in index.php). Remove this `display: none` once a real link is
   set and swap the base display back to `inline-flex` to re-show it. */
.r12-mlm__cta {
    display: none;
    align-items: center;
    justify-content: center;
    gap: var(--var-6, 6px);
    padding: var(--var-14, 14px) var(--var-28, 28px);
    border: 1px solid var(--color-stroke);
    border-radius: 100px;
    background: var(--color-2nd-btn-bg);
    text-decoration: none;
    cursor: pointer;
}

.r12-mlm__cta-label {
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    text-align: center;
    text-transform: uppercase;
    color: var(--color-2nd-btn-fg);
    white-space: nowrap;
}

.r12-mlm__cta-icon {
    display: block;
    width: 12px;
    height: 12px;
}

/* ---------- Tablet + mobile (single shared breakpoint) ---------- */
@media (max-width: 1024px) {
    /* Nhịp dọc ≤1024: bỏ padding-top (khớp Figma tablet 4006:3307 — chỉ có pb,
       không py đối xứng như desktop), padding-bottom hạ từ 140 xuống 72.
       Đặt trên .r12-mlm (không phải .r12-mlm-pin-wrap): wrap chỉ là spacer, chiều
       cao của nó do scripts.js đồng bộ theo chiều cao render của .r12-mlm. */
    .r12-mlm {
        padding-block: 0 var(--var-72, 72px);
    }

    .r12-mlm__cta {
        display: none;
    }

    /* Figma tablet (4006:3307) binds this title to h3 (--fs-h3, 25px), not h2
       (--fs-h2, 28px) like discovery/referral — a smaller heading level
       specific to this section, so it needs an explicit override (the other
       two tokens below don't: .r12-mlm__eyebrow's --fs-label-lg and
       .r12-mlm__tab-title's --fs-h6 already resolve correctly through
       assets/css/global.css's own tablet cascade). */
    .r12-mlm__title {
        font-size: var(--fs-h3);
    }

    .r12-mlm__body {
        flex-direction: column;
    }

    .r12-mlm__tabs {
        width: 100%;
    }

    /* Figma tablet: no separate media panel — the image lives inside the
       active accordion tab-item itself, right after its description. */
    .r12-mlm__media {
        display: none;
    }

    .r12-mlm__tab-media {
        width: 100%;
        aspect-ratio: 902 / 600;
        background: var(--media-bg);
        overflow: hidden;
    }

    .r12-mlm__tab-media img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .r12-mlm__tab.is-active .r12-mlm__tab-media {
        display: block;
    }
}