/* Round15 — Motivate — section-overview
   Figma: 4361:9615 (desktop) | 4361:9711 (tablet/mobile, shared breakpoint <=1024px)
   Layout: section-wrapper > content-wrapper (badges+title+desc+CTA) > full-width hero graphic
   Rule: single breakpoint @ 1024px covers both tablet and mobile, no min-width usage. */

.r15-overview {
    /* Local tokens not covered by global.css */
    --content-max: 1400px;               /* Figma content-wrapper max-width: desktop 1400px */
    --media-ratio: 4096 / 1755;          /* Figma "image 35" (desktop hero) aspect ratio */

    display: flex;
    justify-content: center;
    position: relative;
    background: var(--color-2nd-bg);
    padding: var(--var-140, 140px) var(--section-horizontal-padding, 32px);
    font-family: var(--font-body);
}

.r15-overview * {
    box-sizing: border-box;
}

.r15-overview__content {
    flex: 1 0 0;
    min-width: 0;
    max-width: var(--content-max);
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

/* ---------- Headings block (Figma: section-headings, gap-28) ---------- */
.r15-overview__headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-28, 28px);
    width: 100%;
}

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

/* Badges row: "Built for Shopify" + divider + rating (Figma: w-[298px] gap-[6px]) */
.r15-overview__badges {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    max-width: 298px;
}

.r15-overview__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--var-4, 4px);
    flex-shrink: 0;
}

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

.r15-overview__badge-icon {
    display: block;
    width: 14px;
    height: 14px;
    object-fit: contain;
    flex-shrink: 0;
}

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

.r15-overview__badge--bfs .r15-overview__badge-text {
    color: var(--color-semantic-shopify-fg);
}

.r15-overview__badge--rating .r15-overview__badge-text {
    color: var(--color-1st-fg);
}

.r15-overview__divider {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    flex-shrink: 0;
}

.r15-overview__divider-img {
    display: block;
    width: 1px;
    height: 100%;
}

/* Title + description (Figma: inner div gap-40) */
.r15-overview__copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--var-40, 40px);
    width: 100%;
}

.r15-overview__title {
    margin: 0;
    max-width: 800px;
    width: 100%;
    font-weight: 600;
    font-size: var(--fs-h1, 58px);
    line-height: 1.15;
    color: var(--color-1st-fg);
    text-align: center;
}

.r15-overview__desc {
    margin: 0;
    max-width: 600px;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-1st-fg);
    text-align: center;
}

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

.r15-overview__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: 1;
    text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- Hero graphic (Figma: full-width image below headings, no explicit gap —
   whitespace is baked into the source graphic itself) ---------- */
.r15-overview__media {
    position: relative;
    width: 100%;
    overflow: hidden;
    aspect-ratio: var(--media-ratio);
}

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

.r15-overview__img--tablet {
    display: none;
}

/* ---------- Responsive (tablet + mobile share this single breakpoint) ---------- */
@media (max-width: 1024px) {
    .r15-overview {
        --content-max: 1200px; /* Figma tablet content-wrapper max-width */
        --media-ratio: 593 / 340; /* Figma tablet "motivate-hero" frame aspect ratio */
    }

    .r15-overview__img--desktop {
        display: none;
    }

    /* Tablet hero image is art-directed: oversized + offset to crop within the frame
       (Figma: w-133.9% h-129.94% top--14.93% left--18.55% of the media container) */
    .r15-overview__img--tablet {
        display: block;
        position: absolute;
        inset: auto;
        top: -14.93%;
        left: -18.55%;
        width: 133.9%;
        height: 129.94%;
        object-fit: cover;
    }
}