/*
 * Mise en page robuste de la page Vie du club.
 * Ce fichier se charge apres site.css afin de garantir les proportions
 * sur ordinateur, tablette et telephone, meme si l'ancien CSS est en cache.
 */

.club-life-page,
.club-life-page * {
    box-sizing: border-box;
}

.club-life-page {
    background: var(--cream);
    margin: 0;
    overflow-x: hidden;
    width: 100%;
}

.club-life-page img {
    display: block;
    height: auto;
    max-width: 100%;
}

.club-life-page main {
    overflow: hidden;
    width: 100%;
}

.club-life-hero {
    min-height: clamp(660px, 88svh, 840px);
}

.club-life-hero__image {
    height: calc(100% - 108px);
    max-width: none;
    object-fit: cover;
    width: 100%;
}

.club-life-hero__content {
    max-width: 650px;
}

.club-life-intro,
.club-portraits,
.art-gallery,
.next-portrait {
    max-width: 1280px;
    width: 100%;
}

.club-life-intro {
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
    min-height: 0;
}

.club-life-intro__media {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.club-life-intro__media img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.club-life-intro__copy {
    padding: clamp(48px, 6vw, 80px);
}

.club-portraits {
    background: var(--chocolate);
    padding: clamp(72px, 8vw, 96px) clamp(28px, 5vw, 70px);
}

.club-portraits__heading {
    align-items: end;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.38fr);
}

.club-portraits h2 {
    max-width: 760px;
}

.club-portraits__story-line {
    margin-top: 0.32em;
}

.portrait-grid {
    gap: 16px;
}

.portrait-card,
.portrait-card figure,
.portrait-card > div {
    min-width: 0;
}

.portrait-card figure {
    aspect-ratio: 4 / 5;
    min-height: 0;
}

.portrait-card figure img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.portrait-card:nth-child(2) figure img {
    background: #fff;
    object-fit: contain;
    padding: 0;
}

.portrait-card:nth-child(2) figure {
    background: #fff;
}

.portrait-card > div {
    min-height: 205px;
    padding: 22px;
}

.member-story {
    align-items: stretch;
    column-gap: 16px;
    grid-template-columns: minmax(0, 1fr) minmax(340px, 0.86fr);
    margin: 52px auto;
    max-width: 1180px;
    min-height: 0;
    padding: 16px;
    width: calc(100% - 48px);
}

.member-story__copy {
    min-height: 0;
    padding: clamp(52px, 6vw, 82px);
}

.member-story__visual {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 0;
    padding: clamp(18px, 2.4vw, 32px);
}

.member-story__visual img,
.member-story__visual--logo img {
    height: auto;
    max-height: 680px;
    object-fit: contain;
    width: 100%;
}

.member-story__visual--logo {
    padding: clamp(34px, 5vw, 68px);
}

.member-story__external-link {
    color: currentColor;
    font-weight: 600;
    text-decoration-color: var(--gold);
    text-decoration-thickness: 1px;
    text-underline-offset: 4px;
}

.member-story__external-link:hover,
.member-story__external-link:focus-visible {
    color: var(--gold);
}

.member-story__visual-link {
    color: inherit;
    display: block;
    text-decoration: none;
    width: 100%;
}

.member-story__visual-link img {
    transition: transform 300ms ease;
}

.member-story__visual-link:hover img,
.member-story__visual-link:focus-visible img {
    transform: scale(1.015);
}

.member-story__visual-link figcaption {
    text-decoration: underline;
    text-decoration-color: transparent;
    text-underline-offset: 4px;
    transition: text-decoration-color 200ms ease;
}

.member-story__visual-link:hover figcaption,
.member-story__visual-link:focus-visible figcaption {
    text-decoration-color: currentColor;
}

.art-gallery {
    padding: clamp(72px, 8vw, 100px) clamp(28px, 5vw, 70px);
}

.art-gallery figure {
    aspect-ratio: 4 / 3;
    min-height: 0;
}

.art-gallery__poster {
    aspect-ratio: 3 / 4;
    min-height: 0 !important;
}

.gallery-zoom {
    aspect-ratio: inherit;
    min-height: 0;
}

.gallery-zoom img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.gallery-zoom--poster img,
.art-gallery__poster img {
    object-fit: contain;
}

.next-portrait {
    background: var(--cocoa);
}

@media (max-width: 1080px) {
    .club-life-intro {
        grid-template-columns: minmax(0, 1fr) minmax(340px, 0.9fr);
    }

    .member-story {
        grid-template-columns: minmax(0, 1fr) minmax(310px, 0.82fr);
    }

    .member-story__copy {
        padding: 52px 44px;
    }
}

@media (max-width: 760px) {
    .club-life-hero {
        min-height: 680px;
    }

    .club-life-hero__image {
        height: calc(100% - 78px);
        object-position: 50% center;
    }

    .club-life-hero h1 {
        font-size: clamp(64px, 20vw, 86px);
    }

    .club-life-hero__content > p:not(.eyebrow) {
        font-size: 24px;
    }

    .club-life-intro,
    .member-story,
    .next-portrait {
        grid-template-columns: minmax(0, 1fr);
    }

    .club-life-intro__media {
        aspect-ratio: 4 / 3;
        min-height: 0;
    }

    .club-life-intro__copy {
        padding: 48px 24px 56px;
    }

    .club-life-intro h2 {
        font-size: 41px;
    }

    .club-portraits {
        padding: 64px 20px 72px;
    }

    .club-portraits__heading {
        gap: 22px;
        grid-template-columns: minmax(0, 1fr);
        margin-bottom: 42px;
    }

    .club-portraits h2 {
        font-size: clamp(42px, 12vw, 54px);
    }

    .portrait-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .portrait-card {
        grid-template-columns: minmax(128px, 0.75fr) minmax(0, 1.25fr);
    }

    .portrait-card figure {
        aspect-ratio: auto;
        min-height: 280px;
    }

    .portrait-card > div {
        min-height: 280px;
        padding: 22px 20px;
    }

    .portrait-card h3 {
        font-size: 32px;
    }

    .member-story {
        column-gap: 0;
        margin: 28px auto;
        padding: 8px;
        width: calc(100% - 24px);
    }

    .member-story--reverse .member-story__copy,
    .member-story--reverse .member-story__visual,
    .member-story--daniel .member-story__visual {
        order: initial;
    }

    .member-story__copy {
        padding: 46px 24px 52px;
    }

    .member-story h2 {
        font-size: 56px;
    }

    .member-story__visual,
    .member-story__visual--logo {
        min-height: 0;
        padding: 18px;
    }

    .member-story__visual img,
    .member-story__visual--logo img {
        height: auto;
        max-height: 560px;
        object-fit: contain;
        width: 100%;
    }

    .art-gallery {
        padding: 64px 20px 74px;
    }

    .art-gallery h2 {
        font-size: 50px;
    }

    .art-gallery figure,
    .art-gallery__wide,
    .art-gallery__poster {
        aspect-ratio: auto;
        grid-column: 1 / -1 !important;
        min-height: 0 !important;
    }

    .gallery-zoom {
        aspect-ratio: 4 / 3;
        height: auto;
    }

    .gallery-zoom--poster {
        aspect-ratio: 3 / 4;
    }

    .next-portrait h2 {
        font-size: 48px;
    }
}

@media (max-width: 480px) {
    .portrait-card {
        display: block;
    }

    .portrait-card figure {
        aspect-ratio: 4 / 5;
        min-height: 0;
    }

    .portrait-card > div {
        min-height: 0;
    }

    .club-portraits h2 {
        font-size: 42px;
    }

    .member-story h2 {
        font-size: 52px;
    }
}

/* La photographie conserve sa lumiere naturelle. Le voile reste juste assez
   present pour garantir la lisibilite du titre. */
.club-life-hero__veil {
    background:
        linear-gradient(90deg, rgb(31 16 10 / 43%) 0%, rgb(31 16 10 / 15%) 44%, transparent 74%),
        linear-gradient(0deg, rgb(31 16 10 / 27%) 0%, transparent 40%);
}

@media (max-width: 700px) {
    .club-life-hero__veil {
        background:
            linear-gradient(0deg, rgb(31 16 10 / 58%) 0%, rgb(31 16 10 / 14%) 62%, transparent 100%),
            linear-gradient(90deg, rgb(31 16 10 / 16%), transparent 72%);
    }
}