/* Breakpoint: 48rem (tablet and up). Plain CSS cannot read custom properties in media queries. */

.page-video,
.page-section {
    width: 100%;
    max-width: calc(var(--content-width) + 2 * var(--gutter));
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Full-width band like .page-footer: the sketch runs edge to edge, the title stays on the content column.
   The white wash is strong at the top, lets the crowd through in the middle, and runs to solid white at the
   bottom: the title reads there and the band melts into the page instead of ending on a hard edge. */
.page-hero {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: clamp(20rem, 55vw, 36rem);
    padding-block: 3rem 3rem;
    padding-inline: max(var(--gutter), (100% - var(--content-width)) / 2);
    background:
        linear-gradient(
            rgb(255 255 255 / 0.0),
            rgb(255 255 255 / 0.0) 60%,
            rgb(255 255 255 / 0.7) 70%,
            rgb(255 255 255 / 1) 100%,
            rgb(255 255 255)
        ),
        url(/img/movement.webp) center 40% / cover no-repeat;
}

/* A container so both lines can be sized to the column width, not the viewport. */
.page-hero-title {
    container-type: inline-size;
    text-transform: uppercase;
}

/* Both lines end at the same width, about 70% of the column; the floors keep that ratio so phones get a
   readable title. Tuned to Lato (measured from the woff2 files): at 11.5cqi / 5.7cqi a line fills the column.
   Retune both when Gilroy (--font-heading) arrives. */
.page-hero-title h1 {
    font-size: max(8cqi, 2rem);
    line-height: 1.05;
    margin: 0;
}

.page-hero-subtitle {
    font-size: max(3.95cqi, 0.99rem);
    color: var(--accent-color);
    margin: 0;
}

.page-video {
    display: grid;
    justify-items: center;
    padding-block: 1rem 1rem;
}

.video-embed {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    background: var(--color-ink);
}

.page-section {
    padding-block: 2rem;
}

.page-intro-question {
    font-size: 1.375rem;
    color: var(--accent-color);
    font-weight: 600;
}

/* Justified only where the column is wide enough; on phones it would open rivers between words. No hyphenation. */
@media (min-width: 48rem) {
    .page-intro p:not(.page-intro-question) {
        text-align: justify;
    }
}

.people-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.people-list li {
    padding-block: 0.625rem;
    border-bottom: 1px solid var(--border-color);
}

/* Full-width band; the inline padding keeps its content on the same column as the sections above. */
.page-footer {
    margin-top: 2rem;
    padding-block: 2.5rem 4rem;
    padding-inline: max(var(--gutter), (100% - var(--content-width)) / 2);
    background: var(--color-blue);
    color: var(--color-white);
}

.page-footer :focus-visible {
    outline-color: var(--color-white);
}

/* Mobile: logos stacked, left-aligned. Tablet and up: one row spanning the content width, first logo flush left,
   last flush right. Not equal columns: the wide DDF logo would hit its column width before its height. */
.partner-logos {
    --logo-height: 7rem;

    list-style: none;
    margin: 2rem 0 0;
    padding: 0;
    display: grid;
    gap: 2.5rem;
}

.partner-logos li {
    display: flex;
}

.partner-logos a {
    display: block;
    max-width: 100%;
}

.partner-logos img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: var(--logo-height);
}

@media (min-width: 48rem) {
    .partner-logos {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}