/* HORIZONTAL SCROLL
   Opt-in per page with `layout: horizontal` in the front matter. The page keeps
   the same sections as the normal page layout, but they are laid out in one
   full-height row that the document scrolls through sideways. Below the mobile
   breakpoint everything falls back to the regular vertical layout. */

@media (min-width: 60rem) {
    /* horizontal.js animates the scrolling itself; the site-wide smooth
       scrolling would fight it. */
    html:has(body.horizontal-scroll) {scroll-behavior: auto;}

    body.horizontal-scroll {
        height: 100%;
        overflow-x: auto;
        overflow-y: hidden;
    }

    /* Header and footer stay put while the content moves past them. */
    body.horizontal-scroll header nav {position: fixed;}
    body.horizontal-scroll footer {position: fixed; bottom: 0; left: 0; width: 100%;}
    body.horizontal-scroll footer a.logo {padding-block: 0;}

    body.horizontal-scroll .main-content {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        width: max-content;
        height: 100vh;
        gap: var(--gap);
        padding-left: 10vw;
    }
    /* Trailing whitespace; padding-right on a scrolling flex container is
       unreliable, a spacer is not. */
    body.horizontal-scroll .main-content::after {
        content: '';
        flex: 0 0 10vw;
    }
    body.horizontal-scroll .main-content section {
        flex: 0 0 auto;
        margin: 0;
    }
    /* Extra air between the opening text and the first image: the section's own
       margin plus the flex gap makes it three times the standard gap. */
    body.horizontal-scroll .main-content section:first-child {
        margin-right: calc(var(--gap) * 2);
    }
    body.horizontal-scroll .main-content section .container {
        max-width: none;
        padding-inline: 0;
    }

    /* TEXT */

    body.horizontal-scroll .main-content section.section-text {
        width: 35rem;
        max-height: 70vh;
        overflow-y: auto;
    }

    /* IMAGES — sized by height, so the width follows the aspect ratio. */

    body.horizontal-scroll .main-content section.section-image,
    body.horizontal-scroll .main-content section.section-images {
        height: min(70vh, 70rem);
    }
    body.horizontal-scroll .main-content section.section-images .container {
        display: flex;
        flex-wrap: nowrap;
        height: 100%;
        gap: var(--gap);
    }
    body.horizontal-scroll .main-content section.section-images .container p,
    body.horizontal-scroll .main-content section.section-images .container p:has(img.portrait) {
        width: auto;
        height: 100%;
        margin-bottom: 0;
    }
    body.horizontal-scroll .main-content section a:has(> img) {height: 100%;}
    body.horizontal-scroll .main-content section img {
        width: auto;
        height: 100%;
        max-width: none;
        max-height: none;
        object-fit: contain;
    }
}