/* =========================================================
   ECOSYSTEM SECTION
   One Group • Five Specialized Divisions
   ========================================================= */


/*--------------------------------------------------
Section Container
--------------------------------------------------*/

.ecosystem {
    background: var(--color-white);
}


/*--------------------------------------------------
Main Layout
--------------------------------------------------*/

.ecosystem__inner {
    display: grid;
    grid-template-columns:
        minmax(0, 0.9fr)
        minmax(0, 1.1fr);

    align-items: start;
    gap: clamp(3rem, 7vw, 6rem);
}


/*--------------------------------------------------
Introduction Panel
--------------------------------------------------*/

.ecosystem__intro {
    position: sticky;
    top: 120px;
}

.ecosystem__intro .button {
    margin-top: var(--space-5);
}


/*--------------------------------------------------
Division List
--------------------------------------------------*/

.ecosystem__list {
    border-top: 1px solid var(--color-border);
}


/*--------------------------------------------------
Division Row
--------------------------------------------------*/

.division-row {
    position: relative;

    display: grid;
    grid-template-columns: 52px 1fr 44px;

    align-items: center;
    gap: var(--space-4);

    padding-block: var(--space-5);

    border-bottom: 1px solid var(--color-border);

    transition:
        padding-left var(--transition-base),
        background-color var(--transition-base),
        transform var(--transition-base),
        opacity var(--transition-base);
}

.division-row__number {
    color: var(--color-gold-dark);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.division-row h3 {
    margin-bottom: var(--space-2);

    color: var(--color-navy);
}

.division-row p {
    margin: 0;
}


/*--------------------------------------------------
Division Link
--------------------------------------------------*/

.division-row > a {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border: 1px solid var(--color-border);
    border-radius: 50%;

    color: var(--color-navy);
    font-size: 1.25rem;

    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform 320ms cubic-bezier(0.22, 1, 0.36, 1);
}


/*--------------------------------------------------
Hover Decoration
--------------------------------------------------*/

.division-row::before {
    content: "";

    position: absolute;
    bottom: -1px;
    left: 0;

    width: 0;
    height: 2px;

    background: var(--color-gold);

    transition:
        width 420ms cubic-bezier(0.22, 1, 0.36, 1);
}


/*--------------------------------------------------
Interactive States
--------------------------------------------------*/

.division-row:hover {
    padding-left: var(--space-3);

    background: var(--color-background-soft);
}

.division-row:hover::before {
    width: 100%;
}

.division-row:hover > a {
    background: var(--color-navy);
    color: var(--color-white);

    transform: translateX(6px) rotate(-8deg);
}

.division-row > a:focus-visible {
    outline: 3px solid rgba(244, 180, 0, 0.45);
    outline-offset: 4px;
}



/*--------------------------------------------------
Tablet — 900px and Below
--------------------------------------------------*/

@media (max-width: 900px) {
    .ecosystem__inner {
        grid-template-columns: 1fr;
    }

    .ecosystem__intro {
        position: static;
    }
}


/*--------------------------------------------------
Mobile — 600px and Below
--------------------------------------------------*/

@media (max-width: 600px) {
    .division-row {
        grid-template-columns: 36px 1fr 38px;

        gap: var(--space-3);
    }

    .division-row p {
        font-size: var(--font-size-sm);
    }
}


/*--------------------------------------------------
Reduced Motion
--------------------------------------------------*/

@media (prefers-reduced-motion: reduce) {
    .ecosystem__intro.reveal,
    .division-row.reveal {
        opacity: 1;

        transform: none;
        transition: none;
    }

    .division-row,
    .division-row > a,
    .division-row::before {
        transition: none;
    }

    .division-row:hover,
    .division-row:hover > a {
        transform: none;
    }
}