/*
=========================================================
Gallery page
=========================================================
*/

.gallery-page {
    min-height: 70vh;

    background-color: var(--color-background);
}


/*
=========================================================
Hero
=========================================================
*/

.gallery-page__hero {
    position: relative;
    overflow: hidden;

    padding-block:
        clamp(
            var(--space-2xl),
            7vw,
            var(--space-3xl)
        );

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(255, 209, 102, .22),
            transparent 24rem
        ),
        radial-gradient(
            circle at 8% 90%,
            rgba(110, 198, 255, .14),
            transparent 22rem
        ),
        linear-gradient(
            145deg,
            rgba(234, 248, 255, .92),
            rgba(255, 255, 255, 1)
        );
}

.gallery-page__breadcrumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: var(--space-sm);

    margin-bottom: var(--space-xl);

    color: var(--color-text-light);

    font-size: var(--font-size-sm);
}

.gallery-page__breadcrumbs a {
    color: var(--color-primary-strong);

    font-weight: var(--font-weight-semibold);
}

.gallery-page__breadcrumbs a:hover {
    text-decoration: underline;
}

.gallery-page__title {
    max-width: 920px;

    margin-bottom: var(--space-lg);

    color: var(--color-text);

    font-size:
        clamp(
            2.8rem,
            6vw,
            5.2rem
        );

    line-height: 1.04;
    letter-spacing: -.045em;
}

.gallery-page__description {
    max-width: 760px;

    margin: 0;

    color: var(--color-text-light);

    font-size:
        clamp(
            var(--font-size-lg),
            2vw,
            1.35rem
        );

    line-height: 1.7;
}


/*
=========================================================
Page content
=========================================================
*/

.gallery-page__content {
    padding-block:
        clamp(
            var(--space-2xl),
            7vw,
            var(--space-3xl)
        );
}

.gallery-events {
    display: flex;
    flex-direction: column;

    gap:
        clamp(
            var(--space-3xl),
            9vw,
            7rem
        );
}


/*
=========================================================
Event
=========================================================
*/

.gallery-event {
    position: relative;
}

.gallery-event:not(:last-child) {
    padding-bottom:
        clamp(
            var(--space-2xl),
            6vw,
            var(--space-3xl)
        );

    border-bottom:
        1px solid
        rgba(77, 181, 247, .16);
}

.gallery-event__header {
    display: block;

    max-width: 920px;

    margin-bottom:
        clamp(
            var(--space-xl),
            5vw,
            var(--space-2xl)
        );
}

.gallery-event__header > div {
    max-width: 820px;
}


/*
=========================================================
Event date
=========================================================
*/

.gallery-event__date {
    display: inline-flex;
    align-items: center;

    gap: var(--space-sm);

    width: fit-content;

    margin-bottom: var(--space-lg);

    color: var(--color-primary-strong);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);

    line-height: 1.2;
}

.gallery-event__date-dot {
    width: 10px;
    height: 10px;

    flex-shrink: 0;

    border-radius: 50%;

    background-color: var(--color-primary-hover);

    box-shadow:
        0 0 0 5px
        rgba(77, 181, 247, .14);
}


/*
=========================================================
Event text
=========================================================
*/

.gallery-event__title {
    margin-bottom: var(--space-md);

    color: var(--color-text);

    font-size:
        clamp(
            1.9rem,
            4vw,
            3.2rem
        );

    line-height: 1.15;
}

.gallery-event__title a {
    color: inherit;

    transition:
        color var(--transition-fast);
}

.gallery-event__title a:hover {
    color: var(--color-primary-strong);
}

.gallery-event__summary {
    max-width: 780px;

    margin-bottom: var(--space-lg);

    color: var(--color-text-light);

    font-size: var(--font-size-lg);
    line-height: 1.7;
}


/*
=========================================================
Event button
=========================================================
*/

.gallery-event__news-link {
    min-height: 46px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: var(--space-sm);

    width: fit-content;

    padding:
        var(--space-sm)
        var(--space-lg);

    border:
        1px solid
        rgba(77, 181, 247, .24);

    border-radius: var(--radius-round);

    color: var(--color-primary-strong);

    background-color: var(--color-background);

    font-weight: var(--font-weight-bold);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast);
}

.gallery-event__news-link:hover {
    transform: translateY(-2px);

    border-color:
        rgba(77, 181, 247, .44);

    background-color:
        rgba(234, 248, 255, .46);

    box-shadow: var(--shadow-md);
}

.gallery-event__news-link span {
    transition:
        transform var(--transition-fast);
}

.gallery-event__news-link:hover span {
    transform: translateX(4px);
}


/*
=========================================================
Photo grid
=========================================================
*/

.gallery-event__grid {
    display: grid;
    grid-template-columns:
        repeat(3, minmax(0, 1fr));

    gap: var(--space-lg);
}


/*
=========================================================
Photo card
=========================================================
*/

.gallery-photo {
    min-width: 0;

    margin: 0;

    overflow: hidden;

    border-radius: var(--radius-xl);

    background-color: var(--color-background-alt);

    box-shadow: var(--shadow-sm);

    transition:
        transform var(--transition-normal),
        box-shadow var(--transition-normal);
}

.gallery-photo:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow-lg);
}

.gallery-photo--featured {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery-photo__link {
    position: relative;
    overflow: hidden;

    display: block;

    width: 100%;
    height: 100%;

    min-height: 280px;

    color: var(--color-background);
}

.gallery-photo--featured .gallery-photo__link {
    min-height: 580px;
}


/*
=========================================================
Photo image
=========================================================
*/

.gallery-photo__image {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition:
        transform .75s ease,
        filter var(--transition-normal);
}

.gallery-photo:hover .gallery-photo__image {
    transform: scale(1.045);

    filter: brightness(.92);
}


.gallery-photo--clean:hover .gallery-photo__image {
    filter: none;
}


/*
=========================================================
Photo overlay
=========================================================
*/

.gallery-photo__overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(20, 35, 56, 0) 42%,
            rgba(20, 35, 56, .22) 64%,
            rgba(20, 35, 56, .84) 100%
        );

    pointer-events: none;

    transition:
        background var(--transition-normal);
}

.gallery-photo:hover .gallery-photo__overlay {
    background:
        linear-gradient(
            180deg,
            rgba(20, 35, 56, .02) 34%,
            rgba(20, 35, 56, .30) 60%,
            rgba(20, 35, 56, .90) 100%
        );
}


/*
=========================================================
Photo content
=========================================================
*/

.gallery-photo__content {
    position: absolute;
    z-index: 1;

    right: 0;
    bottom: 0;
    left: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    gap: var(--space-xs);

    padding:
        clamp(
            var(--space-md),
            3vw,
            var(--space-xl)
        );

    transform: translateY(0);

    transition:
        transform var(--transition-normal);
}

.gallery-photo__caption {
    max-width: 100%;

    color: var(--color-background);

    font-size:
        clamp(
            1.15rem,
            2vw,
            1.65rem
        );

    line-height: 1.25;
}

.gallery-photo--featured .gallery-photo__caption {
    font-size:
        clamp(
            1.5rem,
            3vw,
            2.3rem
        );
}


/*
=========================================================
Photo action
=========================================================
*/

.gallery-photo__action {
    display: inline-flex;
    align-items: center;

    gap: var(--space-sm);

    max-height: 0;

    overflow: hidden;

    color:
        rgba(255, 255, 255, .92);

    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);

    opacity: 0;

    transform: translateY(8px);

    transition:
        max-height var(--transition-normal),
        margin-top var(--transition-normal),
        opacity var(--transition-normal),
        transform var(--transition-normal);
}

.gallery-photo:hover .gallery-photo__action {
    max-height: 2rem;

    margin-top: var(--space-xs);

    opacity: 1;

    transform: translateY(0);
}

.gallery-photo__action span {
    transition:
        transform var(--transition-fast);
}

.gallery-photo:hover
.gallery-photo__action span {
    transform: translate(3px, -2px);
}


/*
=========================================================
Empty gallery
=========================================================
*/

.gallery-page-empty {
    max-width: 680px;

    margin-inline: auto;

    padding:
        clamp(
            var(--space-xl),
            6vw,
            var(--space-3xl)
        );

    border:
        1px solid
        rgba(77, 181, 247, .16);

    border-radius: var(--radius-xl);

    background:
        linear-gradient(
            145deg,
            rgba(234, 248, 255, .78),
            rgba(255, 255, 255, .98)
        );

    box-shadow: var(--shadow-md);

    text-align: center;
}

.gallery-page-empty__icon {
    width: 88px;
    height: 88px;

    display: flex;
    align-items: center;
    justify-content: center;

    margin:
        0 auto
        var(--space-xl);

    border-radius: 50%;

    background-color:
        rgba(255, 209, 102, .28);

    font-size: 2.5rem;
}

.gallery-page-empty__title {
    margin-bottom: var(--space-md);

    color: var(--color-text);
}

.gallery-page-empty__text {
    margin-bottom: var(--space-xl);

    color: var(--color-text-light);

    line-height: 1.7;
}


/*
=========================================================
Pagination
=========================================================
*/

.gallery-page .pagination {
    margin-top:
        clamp(
            var(--space-2xl),
            7vw,
            var(--space-3xl)
        );
}


/*
=========================================================
Responsive: tablet
=========================================================
*/

@media (max-width: 991.98px) {
    .gallery-event__header {
        max-width: 760px;
    }

    .gallery-event__grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .gallery-photo--featured {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .gallery-photo--featured .gallery-photo__link {
        min-height: 500px;
    }
}


/*
=========================================================
Responsive: small tablet
=========================================================
*/

@media (max-width: 767.98px) {
    .gallery-event__summary {
        font-size: var(--font-size-md);
    }

    .gallery-photo__link,
    .gallery-photo--featured .gallery-photo__link {
        min-height: 340px;
    }

    .gallery-event__header {
        margin-bottom: var(--space-xl);
    }
}


/*
=========================================================
Responsive: mobile
=========================================================
*/

@media (max-width: 575.98px) {
    .gallery-page__title {
        font-size:
            clamp(
                2.35rem,
                12vw,
                3.4rem
            );
    }

    .gallery-event__date {
        margin-bottom: var(--space-md);
    }

    .gallery-event__date-dot {
        width: 9px;
        height: 9px;

        box-shadow:
            0 0 0 4px
            rgba(77, 181, 247, .14);
    }

    .gallery-event__title {
        font-size:
            clamp(
                1.8rem,
                9vw,
                2.6rem
            );
    }

    .gallery-event__news-link {
        width: 100%;
    }

    .gallery-event__grid {
        grid-template-columns: 1fr;
    }

    .gallery-photo,
    .gallery-photo--featured {
        grid-column: auto;
        grid-row: auto;
    }

    .gallery-photo__link,
    .gallery-photo--featured .gallery-photo__link {
        min-height: 320px;
    }

    .gallery-photo__action {
        max-height: 2rem;

        margin-top: var(--space-xs);

        opacity: 1;

        transform: none;
    }
}


/*
=========================================================
Reduced motion
=========================================================
*/

@media (prefers-reduced-motion: reduce) {
    .gallery-event__news-link,
    .gallery-event__news-link span,
    .gallery-photo,
    .gallery-photo__image,
    .gallery-photo__overlay,
    .gallery-photo__content,
    .gallery-photo__action,
    .gallery-photo__action span {
        transition: none;
    }

    .gallery-event__news-link:hover,
    .gallery-event__news-link:hover span,
    .gallery-photo:hover,
    .gallery-photo:hover .gallery-photo__image,
    .gallery-photo:hover .gallery-photo__action span {
        transform: none;
    }

    .gallery-photo:hover .gallery-photo__image {
        filter: none;
    }
}