/* Styles for About component */
@layer components {
    .about {
        & .about__inner {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: var(--space-xl);
            align-items: start;
        }

        & .about__text {
            --flow-space: var(--space-m);
            color: var(--color-text-muted);
        }

        & .about__closing {
            --flow-space: var(--space-l);
            display: flex;
            flex-wrap: wrap;
            align-items: baseline;
            gap: var(--space-2xs) var(--space-m);
            padding-inline-start: var(--space-s);
            border-inline-start: 2px solid var(--color-accent);
        }

        & .about__closing-text {
            color: var(--color-text);
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 0.01em;
        }

        & .about__aside {
            display: flex;
            flex-direction: column;
            gap: var(--space-l);
        }

        /* Width and aspect ratio come from the bundle, off the real file - see
           the note at the bottom of Hero.css. What is left here is the frame
           and the treatment. */
        & .about__photo {
            border: 1px solid var(--color-border);
            background-color: var(--color-surface-raised);
        }

        & .about__benefits-title {
            font-family: var(--font-display);
            font-size: var(--size-step-1);
            line-height: 1.1;
            text-transform: uppercase;
            letter-spacing: 0.01em;
            color: var(--color-accent);
            margin-block-end: var(--space-s);
        }

        & .about__list {
            display: flex;
            flex-direction: column;
            gap: var(--space-xs);
            padding: 0;
            list-style: none;
        }

        & .about__item {
            display: grid;
            grid-template-columns: auto 1fr;
            gap: var(--space-xs);
            align-items: start;
            padding-block-end: var(--space-xs);
            border-block-end: 1px solid var(--color-border);
            font-size: var(--size-step--1);
            line-height: 1.5;

            &:last-child {
                padding-block-end: 0;
                border-block-end: none;
            }
        }

        & .about__item-icon {
            margin-block-start: 0.2em;
            font-size: 1.05em;
            color: var(--color-accent);
        }

        & .about__item-title {
            color: var(--color-text);
            font-weight: 700;
        }
    }

    /* Below the two-column breakpoint the columns stack, which would put the
       stock photo of the woman after the bag-wall strip photo - the text
       column (with the strip photo at its end) comes first in the markup,
       the aside (with the lead photo) second. `display: contents` dissolves
       both columns into the band's own grid so `order` can pull the lead
       photo ahead of the strip photo without touching the two-column layout
       above the breakpoint. Grid `gap` is turned off here because it would
       otherwise stack on top of the flow spacing every item still carries;
       each item gets its own `margin-block-start` instead. */
    @media (width < 64rem) {
        .about .about__inner {
            gap: 0;

            & .about__text,
            & .about__aside {
                display: contents;
            }

            & .section-heading { order: 1; }

            & .about__intro {
                order: 2;
                margin-block-start: var(--space-m);
            }

            & .about__closing {
                order: 3;
                margin-block-start: var(--space-l);
            }

            & .about__photo--lead {
                order: 4;
                margin-block-start: var(--space-xl);
            }

            & .about__photo--strip {
                order: 5;
                margin-block-start: var(--space-l);
            }

            & .about__benefits {
                order: 6;
                margin-block-start: var(--space-xl);
            }
        }
    }

    @media (width >= 64rem) {
        .about .about__inner {
            grid-template-columns: 1fr 1fr;
            gap: var(--space-2xl);
        }
    }
}

/*
 * Outside every layer, so it outranks the bundle's `@layer vendor` - the same
 * trick as at the bottom of Hero.css, and for the same reason.
 *
 * The bundle's width comes from its own 12-column grid. This band is not on
 * that grid: it is two equal columns with a --space-2xl gutter between them,
 * which is far wider than the grid's 24px, so the width the bundle computes
 * overflows the column it lands in. The column decides the width here; the
 * `sizes` attribute is only there to tell the browser which file to fetch.
 * The aspect ratio stays the bundle's, because that is what reserves the box.
 */
.about__photo.progressive-image-container {
    inline-size: 100%;
    max-inline-size: none;
}