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

.r12-discovery {
    /* 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. */

    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-discovery * {
    box-sizing: border-box;
}

.r12-discovery__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-discovery__headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-12, 12px);
    width: 100%;
}

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

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

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

.r12-discovery__headings--sub {
    gap: var(--var-16, 16px);
}

/* ---------- Intro group: subheading text + showcase image ----------
   Figma (4006:3209) nests these two together with their own gap-40 — tighter
   than the section's outer gap-80 between major blocks. On tablet (4006:3298)
   the two are NOT nested (both sit as direct children of content-wrapper,
   spaced by the section's own gap-40) and the image comes BEFORE the text —
   reproduced below via `order` at the tablet breakpoint instead of a second
   markup structure, since --var-40 (this wrapper's gap) already equals the
   tablet section-gap (both 40), so nesting stays visually transparent there. */
.r12-discovery__intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-40, 40px);
    width: 100%;
}

/* Real showcase screenshot (replaces the old gradient placeholder — Figma
   now has actual art-direction here: desktop is 1400x680 (~2.06:1), tablet
   is a genuinely different 794x660 (~1.2:1) crop, not just a CSS resize). */
.r12-discovery__showcase {
    width: 100%;
    aspect-ratio: 1400 / 680;
    overflow: hidden;
}

.r12-discovery__showcase picture,
.r12-discovery__showcase img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- 3-column value grid ---------- */
.r12-discovery__values {
    display: flex;
    align-items: flex-start;
    gap: var(--section-horizontal-padding, 32px);
    width: 100%;
}

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

.r12-discovery__value-media {
    width: 100%;
    aspect-ratio: 1360 / 897;
    overflow: hidden;
}

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

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

.r12-discovery__value-title {
    margin: 0;
    width: 100%;
    font-weight: 600;
    /* Same h6 heading style as .subtitle above (Figma real value: 20px desktop) */
    font-size: var(--fs-h6);
    line-height: 1.15;
    color: var(--color-1st-fg);
}

.r12-discovery__value-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:3298) ---------- */
/* 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-discovery__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-discovery__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-discovery__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:3298 — chỉ có pb,
       không py đối xứng như desktop), padding-bottom hạ từ 140 xuống 72. */
    .r12-discovery {
        padding-block: 0 var(--var-72, 72px);
    }

    /* .r12-discovery__title (--fs-h2), .r12-discovery__eyebrow (--fs-label-lg),
       and .r12-discovery__subtitle/.r12-discovery__value-title (--fs-h6) all
       already resolve their tablet sizes via assets/css/global.css's own
       tablet cascade — no local override needed. */

    /* Figma tablet: showcase image comes BEFORE the subheading text (reversed
       from desktop) and is a different crop (794x660 vs desktop's 1400x680). */
    .r12-discovery__showcase {
        order: -1;
        aspect-ratio: 794 / 660;
    }

    /* Figma tablet frame (4006:3298) has no CTA button below the value grid. */
    .r12-discovery__cta {
        display: none;
    }

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