/* Round15 — Motivate — section-automation
   Figma: desktop 4451:12165 (>1024px) | tablet 4492:11873 (<=1024px, shared tablet+mobile)
   Interactive accordion: media graphic (left) + launch/tab feature rows (right).
   Click a tab title to expand its description + swap the media image; only 1 tab
   open at a time (JS toggles .is-active on .r15-automation__tab-item). Description
   collapse/expand is animated via max-height/opacity transitions (no display:none)
   so the accordion motion stays smooth. See assets/scripts.js for the click binding. */

/* Scroll-pin wrapper (desktop only): stays in normal flow and reserves the section's
   height via inline style (assets/scripts.js) so the page doesn't jump when the
   section itself switches to position:fixed while pinned. Mirrors Round11 homepage
   .launch-pin-wrap / .launch-section. */
.r15-automation-pin-wrap {
    position: relative;
}

.r15-automation {
    /* Local token: no matching global var for this component-specific value */
    --tab-max-wd: 450px; /* Figma: launch/tab column fixed width (desktop) */

    display: flex;
    justify-content: center;
    align-items: center;
    height: 100dvh;
    overflow: hidden;
    background: var(--color-2nd-bg, #fff);
    padding: 0 var(--section-horizontal-padding, 32px);
}

.r15-automation.is-pinned {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 50;
    /* .header-r11 is position:fixed at z-index:60 (above this section's z-index:50),
       so its ~98px measured height would otherwise overlap/hide the top of the
       vertically-centered content here. */
    padding-top: 100px;
}

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

.r15-automation__content {
    flex: 1 0 0;
    max-width: var(--container-max, 1400px);
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--section-gap, 80px);
}

/* ---------- Heading ---------- */
.r15-automation__headings {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.r15-automation__title {
    margin: 0;
    max-width: 800px;
    font-weight: 600;
    font-size: var(--fs-h2, 48px);
    line-height: 1.15;
    text-align: center;
    color: var(--color-1st-fg, #050505);
}

/* ---------- reward-list: media + tab ---------- */
.r15-automation__reward-list {
    display: flex;
    align-items: flex-start;
    gap: var(--var-40, 40px);
    width: 100%;
}

/* ---------- Media graphic (reward-item, Figma aspect 680/500) ---------- */
.r15-automation__media {
    flex: 1 0 0;
    min-width: 0;
    position: relative;
    width: 100%;
    aspect-ratio: 680 / 500;
    overflow: hidden;
}

.r15-automation__media-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1;
    transition: opacity 250ms ease;
}

.r15-automation__media-img.is-fading {
    opacity: 0;
}

/* ---------- launch/tab: feature rows ---------- */
.r15-automation__tab {
    flex: none;
    width: var(--tab-max-wd);
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-36, 36px);
}

.r15-automation__tab-item {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* No border-top here: per the actual Figma render, each row's only divider is
       its own .tab-indicator bar (gray, or gradient when active) — there is no
       separate top border. Spacing between rows comes from .r15-automation__tab's
       own `gap`. No flex `gap` here on the item itself: the button/desc spacing is
       animated via the desc's own margin-top (see .r15-automation__tab-desc) so the
       collapse transition can shrink both the height and the gap together instead
       of leaving a gap hanging under a collapsed title. */
}

/* Button wrapper around the title row — reset default <button> chrome so it
   looks/behaves exactly like the previous static title-row, just clickable. */
.r15-automation__tab-btn {
    display: block;
    width: 100%;
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    text-align: left;
    cursor: pointer;
    font: inherit;
    color: inherit;
}

.r15-automation__tab-title-row {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--var-20, 20px);
}

/* Indicator bar: gray by default, gradient when row is active (Figma: launch/tab-item indicator) */
.r15-automation__tab-indicator {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-stroke, #d3d3d3);
}

.r15-automation__tab-item.is-active .r15-automation__tab-indicator {
    background: linear-gradient(to right, var(--color-1st-brd, #ff4e41), var(--color-2nd-brd, #cc6af9));
}

.r15-automation__tab-title {
    margin: 0;
    width: 100%;
    font-weight: 600;
    font-size: var(--fs-h5, 25px);
    line-height: 1.15;
    color: var(--color-1st-fg, #050505);
}

/* Collapsed by default: 0 height + 0 gap above it, animated open on .is-active
   so the accordion expand/collapse is a smooth slide instead of a display:none cut. */
.r15-automation__tab-desc {
    margin: 0;
    width: 100%;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.4;
    color: var(--color-2nd-fg, rgba(5, 5, 5, 0.8));
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 300ms ease, opacity 200ms ease, margin-top 300ms ease;
}

.r15-automation__tab-item.is-active .r15-automation__tab-desc {
    max-height: 300px;
    margin-top: var(--var-36, 36px);
    opacity: 1;
}

/* ---------- Responsive (<=1024px: shared tablet + mobile, Figma 4492:11873) ---------- */
@media (max-width: 1024px) {
    /* Scroll-pin is desktop-only (assets/scripts.js gates it at 1025px) — fall back
       to a plain static-height section here instead of the fullscreen pin box. */
    .r15-automation {
        height: auto;
        overflow: visible;
        align-items: stretch;
        padding: 0 var(--section-horizontal-padding, 20px) var(--var-72, 72px);
    }

    .r15-automation__reward-list {
        flex-direction: column;
        align-items: stretch;
    }

    /* `flex: 1 0 0` (set for the desktop row layout, splitting width evenly with
       the tab column) governs height instead once reward-list becomes a column
       here — collapsing the image to 0 height. Let it size from its own
       width + aspect-ratio instead. */
    .r15-automation__media {
        flex: none;
    }

    .r15-automation__tab {
        width: 100%;
    }
}