/* Section: giving back. */

.home-giving {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
    isolation: isolate;
    background: var(--color-primary);
    color: var(--color-white);
    /* Inner sizes stay capped against svh so the section never outgrows the viewport. */
    padding: clamp(1.25rem, 5svh, 5rem) 0;

    /* The box tracks dvh so a retracting mobile URL bar can't leave a strip of
       the wrapper showing underneath; the contents above stay on svh, so they
       are still sized for the shortest state the viewport ever takes. */
    height: 100vh;
    height: 100dvh;
}

.home-giving > .container {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-auto-rows: minmax(0, 1fr);
}

.home-giving__pattern {
    position: absolute;
    display: block;
    left: 50%;
    bottom: -10%;
    z-index: 1;
    width: min(522px, 70vw, 60svh);
    height: auto;
    aspect-ratio: 1 / 1;
    transform: translateX(-50%);
    opacity: 0.65;
    pointer-events: none;
    object-fit: contain;
}

.home-giving__inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* An explicit flexible row keeps the media column's height definite, which is
       what the carousel measures itself against. */
    grid-template-rows: minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.5rem, 5vw, 5rem);
    height: 100%;
    min-height: 0;
}

.home-giving__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 2.5rem;
    min-height: 0;
}

.home-giving__title {
    font-family: var(--font-display);
    color: var(--color-white);
    margin: 0;
}

.home-giving__title-lead {
    display: block;
    font-style: italic;
    font-weight: var(--fw-bold);
    font-size: var(--text-display);
    line-height: 1.05;
}

.home-giving__title-rest {
    display: block;
    font-weight: var(--fw-bold);
    font-size: var(--text-h2);
    line-height: 1.12;
    margin-top: 8px;
}

.home-giving__desc {
    font-family: var(--font-body);
    font-size: var(--text-title6);
    line-height: var(--lh-copy);
    color: rgba(255, 255, 255, 0.9);
    max-width: 480px;
    margin: 0;
}

.home-giving__desc :is(strong, b) {
    color: #fff;
    font-weight: var(--fw-bold);
}

.home-giving__desc a {
    color: inherit;
    text-decoration: underline;
}

/* Logo, copy and button share one line. The card is its own query container, so
   everything inside scales against the card's width instead of the viewport —
   that is what keeps the row from wrapping when the column narrows. Its own gap
   and padding stay in vw/rem, since an element cannot query itself. */
.home-giving__card {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(0.5rem, 1.2vw, 1.5rem);
    width: min(100%, 34rem);
    background: #000;
    border-radius: 18px;
    padding: clamp(0.625rem, 1.6vw, 1.25rem) clamp(0.75rem, 1.8vw, 1.5rem);
    container-type: inline-size;
}

.home-giving__logo {
    width: 8.875rem;
    height: auto;
    flex: 0 0 auto;
}

.home-giving__card-text {
    flex: 1 1 auto;
    min-width: 0;
    font-family: var(--font-medium);
    font-size: var(--text-copy);
    font-weight: var(--fw-bold);
    line-height: 1.35;
    color: var(--color-white);
    margin: 0;
}

.home-giving__donate {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: clamp(0.25rem, 1.2cqi, 0.5rem);
    background: #f47a20;
    color: var(--color-white);
    font-family: var(--font-body);
    font-weight: var(--fw-bold);
    font-size: clamp(0.6875rem, 2.9cqi, 1.05rem);
    padding: clamp(0.375rem, 1.5cqi, 0.7rem) clamp(0.625rem, 3cqi, 1.4rem);
    border-radius: 100px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
}

.home-giving__donate svg {
    width: 1em;
    height: 1em;
    flex: 0 0 auto;
}

.home-giving__donate:hover {
    background: #d96712;
    color: var(--color-white);
    transform: translateY(-1px);
}

.home-giving__media {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 0;
    min-width: 0;
    /* Sizing container so the square below can take the smaller of this box's two
       axes; every layout that places .home-giving__media gives it a definite row. */
    container-type: size;
}

.home-giving__carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: 0;
    min-width: 0;
}

.home-giving__slides {
    position: relative;
    /* Width-first is the fallback where container units are missing; cqmin is the
       real rule — the largest square that fits the column AND the row, so a short
       viewport crops the photo instead of bleeding it past the section. */
    width: 100%;
    width: 100cqmin;
    max-width: 100%;
    flex: 0 0 auto;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 28px;
}

.home-giving__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: scale(1.025);
    transition: opacity 700ms ease, transform 1200ms ease;
    pointer-events: none;
}

.home-giving__slide.is-active {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.home-giving__photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ── Stacked, taller than the screen ──
   Side by side the two columns share the viewport's height; stacked they add
   up instead, and the total runs past it — 1443px of content inside a 1366px
   box on a portrait tablet, 890px inside 844px on a phone, both clipped by the
   section's own overflow. A floor rather than a fixed height keeps the
   full-screen look wherever the content still fits and lets the section grow
   where it doesn't. The exception is the short viewports that go back to two
   columns, which are budgeted for the fixed box: that swap needs 600px of
   width, so a narrow short screen is still stacked and still wants the release
   — hence the second query rather than a plain min-height floor. */
@media (max-width: 1024px) and (min-height: 621px),
       (max-width: 599px) and (min-height: 421px) {
    .home-giving {
        height: auto;
        min-height: 100svh;
    }

    /* The section no longer hands the media a definite row, and `size`
       containment needs one on both axes or it collapses the square to
       nothing. The photo takes its height from its own width instead. */
    .home-giving__media,
    .home-giving__carousel {
        height: auto;
    }

    .home-giving__media {
        container-type: inline-size;
    }

    .home-giving__slides {
        width: min(100%, 62svh);
        margin-inline: auto;
    }
}

@media (max-width: 1024px) {
    .home-giving {
        text-align: center;
    }

    .home-giving__inner {
        grid-template-columns: 1fr;
        /* Copy takes the height it needs, the carousel takes what is left. */
        grid-template-rows: minmax(0, 1fr) minmax(0, auto);
        justify-items: center;
        gap: clamp(1rem, 3svh, 2.5rem);
    }

    .home-giving__content {
        align-items: center;
        width: 100%;
    }

    .home-giving__desc {
        margin-inline: auto;
    }

    .home-giving__media {
        order: -1;
        width: 100%;
    }

    .home-giving__card {
        margin-inline: auto;
        text-align: left;
    }
}

@media (max-width: 540px) {
    .home-giving__title-lead {
        font-size: clamp(1.75rem, min(12vw, 6svh), 3.25rem);
    }

    .home-giving__title-rest {
        font-size: clamp(1.1rem, min(8vw, 3.4svh), 2.25rem);
    }

    .home-giving__slides {
        border-radius: 20px;
    }
}

/* ── Narrow card ──
   The mark alone is 142px. Under about 380px of screen that leaves the line
   beside it a couple of dozen pixels, so it breaks one word to a row and the
   button lands on top of it: 193px of card at 320px wide, against 161px at 390.
   In the stacked pose that height comes straight off the photo, which is
   sharing the row. So the three pieces take a row each and the mark scales
   with the card. The switch is a media query rather than a container one
   because flex-wrap sits on the card, and a container cannot query itself. */
@media (max-width: 380px) {
    .home-giving__card {
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.625rem;
        text-align: center;
    }

    .home-giving__logo {
        width: min(8.875rem, 45cqi);
    }

    .home-giving__card-text {
        flex-basis: 100%;
    }
}

.home-giving.is-grid-migrated > .container.grid > .home-giving__inner {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
    grid-template-rows: minmax(0, 1fr);
    gap: var(--grid-gap);
}

.home-giving.is-grid-migrated .home-giving__inner {
    align-items: center;
    height: 100%;
    min-height: 0;
}

.home-giving.is-grid-migrated .home-giving__content {
    grid-column: 1 / span 5;
}

.home-giving.is-grid-migrated .home-giving__media {
    grid-column: 7 / -1;
}

@media (max-width: 1024px) {
    .home-giving.is-grid-migrated .home-giving__content,
    .home-giving.is-grid-migrated .home-giving__media {
        grid-column: 1 / -1;
    }

    .home-giving.is-grid-migrated .home-giving__media {
        grid-row: 1;
    }

    .home-giving.is-grid-migrated .home-giving__content {
        grid-row: 2;
    }

    .home-giving.is-grid-migrated > .container.grid > .home-giving__inner {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(0, 1fr) minmax(0, auto);
        align-content: center;
        gap: clamp(1rem, 3.5svh, 4rem);
    }
}

/* Very short and narrow (small phones, landscape splits): tighten the copy stack. */
@media (max-height: 620px) and (max-width: 599px) {
    .home-giving__content {
        gap: clamp(0.5rem, 1.6svh, 1rem);
    }

    .home-giving.is-grid-migrated > .container.grid > .home-giving__inner {
        gap: clamp(0.75rem, 2.5svh, 2rem);
    }
}

/* Short viewports (landscape phones, split screens): stay side by side, shrink hard. */
@media (max-height: 620px) and (min-width: 600px) {
    .home-giving__desc {
        max-width: 42ch;
    }
}

/* Short + narrow: side-by-side beats stacking, there is no vertical room.
   Two plain columns rather than the 12-col track — below 1024px the grid is only 6 or 4 wide.
   The copy column stretches to the row so it can scroll itself instead of spilling out. */
@media (max-height: 620px) and (max-width: 1024px) and (min-width: 600px) {
    .home-giving.is-grid-migrated > .container.grid > .home-giving__inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
    }

    .home-giving.is-grid-migrated .home-giving__content {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
        align-items: flex-start;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .home-giving.is-grid-migrated .home-giving__media {
        grid-column: 2;
        grid-row: 1;
    }

    .home-giving__desc {
        margin-inline: 0;
    }
}

/* Cover-screen phones (~280px wide): drop the type floors so the stack still fits. */
@media (max-width: 340px) {
    .home-giving {
        padding: clamp(0.75rem, 4svh, 5rem) 0;
    }

    .home-giving__title-lead {
        font-size: clamp(1.5rem, min(12vw, 6svh), 3.25rem);
    }

    .home-giving__title-rest {
        font-size: clamp(1rem, min(8vw, 3.4svh), 2.25rem);
    }

    .home-giving__desc {
        font-size: clamp(0.85rem, min(4vw, 2.1svh), var(--text-copy));
    }
}

/* Ultra-short (landscape phones under ~420px tall): side by side at any width, and the
   copy column scrolls on its own rather than pushing past the fold. */
@media (max-height: 420px) {
    .home-giving.is-grid-migrated > .container.grid > .home-giving__inner {
        grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
        grid-template-rows: minmax(0, 1fr);
        align-items: stretch;
        gap: clamp(0.75rem, 3vw, 2rem);
    }

    .home-giving.is-grid-migrated .home-giving__content {
        grid-column: 1;
        grid-row: 1;
        text-align: left;
        align-items: flex-start;
        justify-content: center;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    .home-giving.is-grid-migrated .home-giving__media {
        grid-column: 2;
        grid-row: 1;
    }

    .home-giving__title-lead {
        font-size: clamp(1.5rem, min(6vw, 7svh), 4.5rem);
    }

    .home-giving__title-rest {
        font-size: clamp(1rem, min(3.4vw, 4svh), 2.75rem);
    }

    .home-giving__desc {
        font-size: clamp(0.85rem, min(1.4vw, 2.1svh), var(--text-copy));
        margin-inline: 0;
        max-width: none;
    }

    .home-giving__card {
        width: 100%;
    }
}

.section-giving-back {
    overflow: hidden;
}

/* The builder's wrapper falls back to the light surface, which behind a
   full-bleed section can only ever surface as a pale seam along its edges. */
.section-bg:has(> .section-giving-back) {
    background: var(--color-primary);
}