/* Round12 — Recruit — section-hero
   Figma: 4006:3202 (desktop) | 4006:3291 (tablet)
   Rule: spacing/typography via Figma variable tokens (--var-*, --fs-h1, --fs-label-md...
   from assets/css/global.css) */

.r12-hero {
    /* Figma colour tokens live in assets/css/global.css's shared --color-*
       system (--color-1st-bg, --color-1st-fg, etc.) — reused directly below,
       not redeclared locally. */
    /* assets/css/global.css defines --section-horizontal-padding: 32px at
       :root (site-wide), so the var(...,20px) fallback below never actually
       applies. This section's Figma spec (4006:3202) is 20px — override the
       real value locally. */
    --section-horizontal-padding: 20px;

    display: flex;
    justify-content: center;
    background: var(--color-2nd-bg);
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 20px);
    font-family: 'DM Sans', sans-serif;
}

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

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

/* ---------- Headings block (badges + title/desc + CTA) ---------- */
.r12-hero__headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-28, 28px);
    width: 100%;
}

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

.r12-hero__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-6, 6px);
}

.r12-hero__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-4, 4px);
}

.r12-hero__badge--bfs {
    background: var(--color-semantic-shopify-bg);
    color: var(--color-semantic-shopify-fg);
    padding: var(--var-4, 4px);
}

.r12-hero__badge--rating {
    color: var(--color-1st-fg);
}

.r12-hero__badge-icon {
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.r12-hero__badge-text {
    font-weight: 500;
    font-size: var(--fs-label-md);
    line-height: 1;
    white-space: nowrap;
}

.r12-hero__badge-divider {
    height: 22px;
    width: 1px;
    flex-shrink: 0;
}

.r12-hero__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-40, 40px);
    width: 100%;
}

.r12-hero__title {
    margin: 0;
    display: flex;
    flex-direction: column;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h1);
    line-height: 1.15;
    text-align: center;
    color: var(--color-1st-fg);
}

.r12-hero__title-line {
    display: block;
}

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

.r12-hero__cta {
    display: flex;
    align-items: center;
    gap: var(--var-12, 12px);
}

.r12-hero__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-6, 6px);
    padding: var(--var-14, 14px) var(--var-28, 28px);
    border-radius: 100px;
    background: var(--color-1st-btn-bg);
    color: var(--color-1st-btn-fg);
    font-weight: 500;
    font-size: var(--fs-label-md);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

.r12-hero__visual {
    width: 100%;
    max-width: 1033px;
}

.r12-hero__visual picture {
    display: block;
}

.r12-hero__visual-img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- Tablet + mobile (single shared breakpoint) ---------- */
/* No overrides needed here: --var-140 padding, --fs-h1 (32px), and
   --fs-label-md (12px) all already resolve correctly through
   assets/css/global.css's own tablet cascade (confirmed against Figma
   tablet 4006:3291). */
/* .r12-hero__visual now shows a distinct art-directed image below 1024px
   (design update: Figma tablet 4006:3291 uses a genuinely different crop,
   aspect ~1.57:1 vs desktop's ~1.75:1 — not just a resize), served via
   theme_picture()'s <picture><source> swap; no extra CSS needed since the
   <img> keeps its own natural aspect ratio either way. */