/* ===================================================================
   The Exchange page (slug: the-exchange)
   Builds on the shared fp-* helpers from front-page.css.
   =================================================================== */

/* Hero, split-section lead/item headings/bodies, and split-section
   intro positioning are handled by the shared inner-page patterns in
   front-page.css. */

/* ── 2. Split section (Why Exchange / The Rhythm of Exchange) ── */

.tex-split {
    background: var(--color-light-grey);
    padding-block: var(--space-24);
}

.tex-split__inner {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 60px;
    align-items: start;
}

.tex-split__left {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

.tex-split__left .fp-heading {
    max-width: 507px;
}

.tex-split__intro {
    /* typography from fp-tagline group; max-width from split-intro group */
}

.tex-split__right {
    display: flex;
    flex-direction: column;
    gap: var(--space-6);
    max-width: 610px;
}

/* tex-split__lead typography is handled by the shared section
   heading group in front-page.css. */

.tex-split__rich {
    font-size: var(--font-size-base);
    line-height: var(--line-height-content);
}

.tex-split__rich p + p {
    margin-top: var(--space-4);
}

.tex-split__rich ul,
.tex-split__rich ol {
    margin: 0;
    padding-left: 1.25em;
}

.tex-split__rich ul {
    list-style: disc;
}

.tex-split__rich ol {
    list-style: decimal;
}

.tex-split__rich li {
    margin-bottom: var(--space-2);
}

/* The Rhythm of Exchange items reuse the right column of .tex-split.
   Item heading/body typography is handled by the shared inner-page
   patterns in front-page.css. */

.tex-rhythm__items {
    display: flex;
    flex-direction: column;
    gap: var(--space-8);
}

/* ── 3. Content Blocks (alternating image + text) ────── */

.tex-blocks {
    padding-block: var(--space-24);
}

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

.tex-blocks--light {
    background: var(--color-white);
    border-block: 1px solid var(--color-gray-200);
}

.tex-blocks .fp-container {
    display: flex;
    flex-direction: column;
    /* No gap: consecutive block images meet corner-to-corner. */
    gap: 0;
}

.tex-block {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* No column gap: the image stays flush to the centre line so the
       next block's image (opposite column) touches its corner. */
    gap: 0;
    align-items: center;
}

.tex-block--img-right .tex-block__media {
    order: 2;
}

.tex-block--img-right .tex-block__text {
    order: 1;
}

/* Breathing room sits on the text side so images stay edge-to-edge. */
.tex-block--img-left .tex-block__text {
    padding-left: 60px;
}

.tex-block--img-right .tex-block__text {
    padding-right: 60px;
}

.tex-block__media {
    aspect-ratio: 621 / 496;
    overflow: hidden;
    background: var(--color-gray-400);
}

.tex-block__media img,
.tex-block__media-placeholder {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tex-block__media-placeholder {
    background: var(--color-gray-400);
}

.tex-block__title {
    font-family: var(--font-serif);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text);
    line-height: var(--line-height-content);
    margin-bottom: var(--space-4);
}

.tex-block__body {
    font-family: var(--font-sans);
    font-size: var(--font-size-base);
    color: var(--color-text);
    line-height: var(--line-height-content);
}

.tex-block__body p + p {
    margin-top: var(--space-4);
}

.tex-block__body strong {
    font-weight: var(--font-weight-bold);
}

.tex-block__body ul,
.tex-block__body ol {
    margin: var(--space-4) 0 0;
    padding-left: 1.25em;
}

.tex-block__body ul {
    list-style: disc;
}

.tex-block__body ol {
    list-style: decimal;
}

.tex-block__body li {
    margin-bottom: var(--space-2);
}

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 1200px) {
    .tex-split,
    .tex-blocks {
        padding-block: var(--space-16);
    }
}

@media (max-width: 900px) {
    .tex-split__inner {
        grid-template-columns: 1fr;
        gap: var(--space-12);
    }

    .tex-block,
    .tex-block--img-right {
        grid-template-columns: 1fr;
        gap: var(--space-8);
    }

    .tex-block--img-left .tex-block__text,
    .tex-block--img-right .tex-block__text {
        padding-left: 0;
        padding-right: 0;
    }

    .tex-blocks .fp-container {
        gap: var(--space-16);
    }

    .tex-block--img-right .tex-block__media {
        order: 1;
    }

    .tex-block--img-right .tex-block__text {
        order: 2;
    }
}