/* Round12 — Recruit — section-referral
   Figma: 4006:3216 (desktop) | 4006:3303 (tablet)
   Rule: spacing/typography via Figma variable tokens (--var-*, --fs-h2, --fs-h5,
   --fs-label-lg... from assets/css/global.css) */

.r12-referral {
    /* Figma colour tokens live in assets/css/global.css's shared --color-*
       system (--color-1st-fg, --color-1st-bg, etc.) — reused directly below,
       not redeclared locally. */

    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;
}

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

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

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

.r12-referral__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-referral__title {
    margin: 0;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 1.15;
    color: var(--color-1st-fg);
}

/* ---------- 2-item list ---------- */
.r12-referral__list {
    display: flex;
    align-items: flex-start;
    gap: var(--var-40, 40px);
    width: 100%;
}

.r12-referral__item {
    display: flex;
    flex: 1 0 0;
    min-width: 0;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-40, 40px);
}

.r12-referral__item-media {
    width: 100%;
    aspect-ratio: 1896 / 1200;
    overflow: hidden;
    position: relative;
}

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

/* Item 1 only: extra soft background screenshot behind the tight foreground
   crop — both pre-rendered by Figma at the same 1896x1200 canvas, so they
   just stack full-bleed (later image in the DOM paints over the earlier). */
.r12-referral__item-media--layered img {
    position: absolute;
    inset: 0;
}

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

.r12-referral__item-title {
    margin: 0;
    width: 100%;
    font-weight: 600;
    font-size: var(--fs-h5);
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.r12-referral__item-desc {
    margin: 0;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg);
}

/* ---------- CTA button (new — desktop only, not present in tablet frame 4006:3303) ---------- */
/* 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-referral__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-referral__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-referral__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:3303 — chỉ có pb,
       không py đối xứng như desktop), padding-bottom hạ từ 140 xuống 72. */
    .r12-referral {
        padding-block: 0 var(--var-72, 72px);
    }

    /* .r12-referral__title (--fs-h2), .r12-referral__eyebrow (--fs-label-lg),
       and .r12-referral__item-title (--fs-h5) all already resolve their
       tablet sizes via assets/css/global.css's own tablet cascade — no local
       override needed. */

    /* Figma tablet frame (4006:3303) has no CTA button below the list. */
    .r12-referral__cta {
        display: none;
    }

    .r12-referral__list {
        flex-direction: column;
        gap: var(--var-40, 40px);
    }
}