/* Round16 — Marketplace — section-introducing
   Figma: 4401:4397 (desktop, updated 2026-09) | 4096:6271 (tablet/mobile, shared
   breakpoint <=1024px). 5 brand-offer cards, center one ("MidtownUmbrellas")
   emphasized; row scrolls horizontally when narrower than its content (tablet/mobile,
   and some in-between desktop widths). */

.r16-introducing {
    /* 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. */

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

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

.r16-introducing__headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-16, 16px);
    max-width: 800px;
    text-align: center;
}

.r16-introducing__title {
    margin: 0;
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: var(--lh-heading, 1.15);
    color: var(--color-1st-fg);
}

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

/* ---------- Static row (no carousel JS, no auto-focus, no click-to-center) ---------- */
.r16-introducing__track {
    /* Figma only ever shows 5 cards at once (1 lg + 2 md + 2 sm = 1130px + this row's own
       24px of horizontal padding = 1154px). Capping the track's width and centering it
       stops wider viewports from also revealing extra empty space unevenly either side.
       Narrower viewports that can't fit the row just scroll it horizontally (plain
       overflow -- no scroll-snap, nothing JS-driven). */
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-20, 20px);
    width: 100%;
    max-width: 1154px;
    margin: 0 auto;
    padding: 10px 12px;
    overflow-x: auto;
    scrollbar-width: none;
}

.r16-introducing__track::-webkit-scrollbar {
    display: none;
}

.r16-introducing__card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    border: 1px solid var(--color-reverse-stroke, #4a4949);
    border-radius: var(--var-16, 16px);
    opacity: 0.8;
}

.r16-introducing__card.is-active {
    opacity: 1;
}

.r16-introducing__card--sm { width: 190px; gap: var(--var-12, 12px); padding: var(--var-14, 14px) var(--var-12, 12px); }
.r16-introducing__card--md { width: 210px; gap: var(--var-14, 14px); padding: var(--var-18, 18px) var(--var-14, 14px); }
.r16-introducing__card--lg { width: 250px; gap: var(--var-18, 18px); padding: var(--var-20, 20px) var(--var-16, 16px); }

/* Wrapper handles absolute positioning (plain div stretches via inset:0 against an
   auto-height ancestor); the <img> inside sizes normally with width/height:100%.
   An <img> given inset:0 directly (no explicit size) uses its INTRINSIC size instead
   of stretching -- CSS 2.1 10.3.8's replaced-element carve-out -- which let the
   1264x848 source bleed past the card and paint over its right/bottom border. */
.r16-introducing__card-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: var(--var-16, 16px);
    pointer-events: none;
    z-index: 0;
}

.r16-introducing__card-bg-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.r16-introducing__card > *:not(.r16-introducing__card-bg) {
    position: relative;
    z-index: 1;
}

.r16-introducing__avatar {
    position: relative;
    flex-shrink: 0;
    box-sizing: content-box;
    border-radius: 999px;
    background: #ffffff;
    overflow: hidden;
}

/* Scoped to the ancestor card's fixed size modifier (see index.php's $cards['size'])
   rather than the avatar's own class. md/lg get a white "ring" around the logo (padding
   over the avatar's own white bg) -- sm stays flush, matching Figma exactly. */
.r16-introducing__card--sm .r16-introducing__avatar { width: 44px; height: 44px; padding: 0; }
.r16-introducing__card--md .r16-introducing__avatar { width: 48px; height: 48px; padding: 2px; }
.r16-introducing__card--lg .r16-introducing__avatar { width: 56px; height: 56px; padding: 4px; }

.r16-introducing__avatar-img {
    display: block;
    width: 100%;
    height: 100%;
}

.r16-introducing__avatar-img--cover { object-fit: cover; }
.r16-introducing__avatar-img--contain { object-fit: contain; }

.r16-introducing__card-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-8, 8px);
    width: 100%;
    text-align: center;
    line-height: 1;
}

.r16-introducing__card-name {
    margin: 0;
    font-weight: 500;
    color: var(--color-1st-fg);
}

.r16-introducing__card--sm .r16-introducing__card-name,
.r16-introducing__card--md .r16-introducing__card-name { font-size: var(--fs-label-md, 14px); }
.r16-introducing__card--lg .r16-introducing__card-name { font-size: var(--fs-label-lg, 16px); }

.r16-introducing__card-category {
    margin: 0;
    font-size: 11px;
    color: var(--color-2nd-fg);
}

.r16-introducing__card-stats {
    display: flex;
    flex-direction: column;
    gap: var(--var-6, 6px);
    width: 100%;
    line-height: 1;
    white-space: nowrap;
}

.r16-introducing__stat {
    display: flex;
    align-items: center;
    gap: var(--var-4, 4px);
    width: 100%;
    font-family: 'Poppins', var(--font-body);
    font-size: 11px;
}

.r16-introducing__stat-label {
    font-weight: 400;
    color: var(--color-2nd-fg);
}

.r16-introducing__stat-value {
    color: var(--color-1st-fg);
    font-weight: 500;
}

@media (max-width: 1024px) {
    .r16-introducing {
        /* Figma tablet (4096:6271): py-[var(--var-72,72px)] -- --var-140 doesn't
           auto-respond to the breakpoint on its own, unlike --section-horizontal-padding. */
        padding-top: var(--var-72, 72px);
        padding-bottom: var(--var-72, 72px);
    }
}