/* Round16 — Marketplace — section-hero
   Figma: 4096:6127 (desktop) | 4096:6249 (tablet/mobile, shared breakpoint <=1024px)
   Layout: badges (Built for Shopify + rating) -> H1 | description side-by-side -> CTA -> full-width hero graphic
   Rule: single breakpoint @ 1024px covers both tablet and mobile, no min-width usage. */

.r16-hero {
    /* Dark theme + description-lg tokens come from global.css (see body.page-template-
       static-pages-R16page-marketplace-php and --fs-description-lg) -- not redefined
       here. --media-ratio stays local: it's this section's own image aspect ratio, not
       a reusable design token. */
    --media-ratio: 2800 / 1600; /* Figma "graphic" (desktop hero) aspect ratio */

    position: relative;
    display: flex;
    justify-content: center;
    background: var(--color-1st-bg);
    /* Papers over a hairline sub-pixel gap some browsers can render between two
       adjacent same-color sections (fractional computed heights from flex/aspect-ratio
       layout round independently per element) -- paint-only, doesn't affect layout.
       Both edges: a neighbor with its own overflow:hidden (e.g. section-proven) can't
       show its own copy of this shadow, so covering both sides here is what protects it. */
    box-shadow: 0 -2px 0 0 var(--color-1st-bg), 0 2px 0 0 var(--color-1st-bg);
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 32px);
    font-family: var(--font-body);
}

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

.r16-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: var(--container-max, 1400px);
}

.r16-hero__headings {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-28, 28px);
    width: 100%;
}

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

/* ---------- Badges (Figma: section-headings/badges) ---------- */
.r16-hero__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

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

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

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

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

.r16-hero__badge--bfs .r16-hero__badge-text {
    color: var(--color-semantic-shopify-fg);
}

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

.r16-hero__divider {
    display: flex;
    flex-shrink: 0;
}

.r16-hero__divider-img {
    display: block;
    width: 1px;
    height: 22px;
}

/* ---------- Title + description (Figma: side-by-side on desktop) ---------- */
.r16-hero__row {
    display: flex;
    align-items: center;
    gap: var(--var-16, 16px);
    width: 100%;
}

.r16-hero__title {
    flex: 1 0 0;
    max-width: 800px;
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h1, 58px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

.r16-hero__desc {
    flex: 1 0 0;
    max-width: 600px;
    margin: 0;
    font-weight: 400;
    font-size: var(--fs-description-lg);
    line-height: var(--lh-body, 1.4);
    color: var(--color-2nd-fg);
}

/* ---------- CTA (Figma: button-group gap-12, button/text px-28 py-14 rounded-100) ---------- */
.r16-hero__actions {
    display: flex;
    align-items: center;
    gap: var(--var-12, 12px);
}

.r16-hero__cta {
    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: var(--radius-pill, 999px);
    background: var(--color-1st-btn-bg);
    color: var(--color-1st-btn-fg);
    font-weight: 500;
    font-size: var(--fs-label-md, 14px);
    line-height: var(--lh-label, 1);
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Hero graphic (Figma: full-width image below headings, no explicit gap) ---------- */
.r16-hero__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: var(--media-ratio);
}

.r16-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.r16-hero__img--tablet {
    display: none;
}

/* ---------- Responsive (tablet + mobile share this single breakpoint) ---------- */
@media (max-width: 1024px) {
    .r16-hero {
        --media-ratio: 1788 / 1768; /* Figma tablet "graphic (1) 1" aspect ratio */
    }

    .r16-hero__row {
        flex-direction: column;
        align-items: flex-start;
    }

    .r16-hero__title,
    .r16-hero__desc {
        max-width: 100%;
    }

    .r16-hero__img--desktop {
        display: none;
    }

    .r16-hero__img--tablet {
        display: block;
    }
}