/*
 * =========================================================
 * AGDC GALLERY PAGE
 * Premium Editorial Gallery
 *
 * Matches:
 * - page-gallery.php
 * - AGDC global styling
 * - About Us reveal animations
 *
 * IMPORTANT:
 * This file is written specifically for the classes
 * currently used in page-gallery.php.
 * =========================================================
 */


/* =========================================================
   01. VARIABLES / BASE
========================================================= */

.agdc-gallery-page {

    --agdc-black: #050505;
    --agdc-dark: #0b0b0b;
    --agdc-dark-soft: #111111;

    --agdc-white: #ffffff;
    --agdc-off-white: #f6f6f4;

    --agdc-orange: #db5821;
    --agdc-orange-dark: #b94315;
    --agdc-orange-light: #f08a5c;

    --agdc-gray: #777777;
    --agdc-muted: #a4a4a4;

    --agdc-border: rgba(0, 0, 0, 0.12);
    --agdc-border-dark: rgba(255, 255, 255, 0.14);

    --agdc-container-width: 1180px;

    position: relative;

    width: 100%;

    overflow: hidden;

    background: var(--agdc-black);
    color: var(--agdc-white);

    font-family: inherit;
}

.agdc-gallery-page *,
.agdc-gallery-page *::before,
.agdc-gallery-page *::after {
    box-sizing: border-box;
}

.agdc-gallery-page img {
    display: block;

    max-width: 100%;
}

.agdc-gallery-page h1,
.agdc-gallery-page h2,
.agdc-gallery-page h3,
.agdc-gallery-page p {
    margin-top: 0;
}

.agdc-gallery-page a {
    color: inherit;
    text-decoration: none;
}

.agdc-gallery-page button {
    font-family: inherit;
}

.agdc-gallery-container {
    width: min(1180px, calc(100% - 48px));
    margin-left: auto;
    margin-right: auto;

    margin-inline: auto;
}


/* =========================================================
   02. CONTENT REVEAL ANIMATIONS
   Same animation system as About Us
========================================================= */

.agdc-gallery-page .agdc-reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:
        opacity 1.1s cubic-bezier(.22, 1, .36, 1),
        transform 1.1s cubic-bezier(.22, 1, .36, 1);

    will-change:
        opacity,
        transform;
}

.agdc-gallery-page .agdc-reveal-left {
    transform: translateX(-45px);
}

.agdc-gallery-page .agdc-reveal-right {
    transform: translateX(45px);
}

.agdc-gallery-page .agdc-reveal-up {
    transform: translateY(35px);
}

.agdc-gallery-page .agdc-reveal.is-visible {

    opacity: 1;

    transform: translate3d(0, 0, 0);
}


/* =========================================================
   03. REVEAL STAGGER
========================================================= */

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(1) {
    transition-delay: 0s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(2) {
    transition-delay: .12s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(3) {
    transition-delay: .24s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(4) {
    transition-delay: .36s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(5) {
    transition-delay: .48s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(6) {
    transition-delay: .60s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(7) {
    transition-delay: .72s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(8) {
    transition-delay: .84s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(9) {
    transition-delay: .96s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(10) {
    transition-delay: 1.08s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(11) {
    transition-delay: 1.20s;
}

.agdc-gallery-page .agdc-reveal.is-visible:nth-child(12) {
    transition-delay: 1.32s;
}


/* =========================================================
   04. HERO
========================================================= */

.agdc-gallery-hero {

    position: relative;

    min-height: 760px;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 42%,
            rgba(219, 88, 33, .13),
            transparent 27%
        ),
        linear-gradient(
            110deg,
            #050505 0%,
            #080808 52%,
            #11100f 100%
        );

    color: var(--agdc-white);
}


/* subtle background texture */

.agdc-gallery-hero::before {

    content: "";

    position: absolute;

    inset: 0;

    pointer-events: none;

    opacity: .18;

    background-image:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size: 80px 80px;
}


/* orange glow */

.agdc-gallery-hero::after {

    content: "";

    position: absolute;

    width: 480px;
    height: 480px;

    right: -160px;
    bottom: -210px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(219,88,33,.16) 0%,
            rgba(219,88,33,.05) 38%,
            transparent 70%
        );

    pointer-events: none;
}


/* overlay */

.agdc-gallery-hero-overlay {

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,.30),
            transparent 65%
        );
}


/* hero inner */

.agdc-gallery-hero-inner {

    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(420px, .95fr);

    align-items: center;

    gap: 70px;

    width: min(
        var(--agdc-container-width),
        calc(100% - 80px)
    );

    min-height: 760px;

    margin-inline: auto;
}


/* =========================================================
   05. HERO CONTENT
========================================================= */

.agdc-gallery-hero-content {

    position: relative;

    z-index: 3;

    max-width: 720px;
}


/* eyebrow */

.agdc-gallery-eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: var(--agdc-orange);

    font-size: 11px;
    font-weight: 800;

    letter-spacing: 2.8px;

    line-height: 1.2;

    text-transform: uppercase;
}

.agdc-gallery-eyebrow::before {

    content: "";

    display: block;

    width: 42px;
    height: 2px;

    background: var(--agdc-orange);
}


/* hero title */

.agdc-gallery-title {

    margin: 0;

    max-width: 850px;

    font-size: clamp(
        58px,
        8.4vw,
        116px
    );

    line-height: .84;

    letter-spacing: -.075em;

    font-weight: 800;

    text-transform: uppercase;
}

.agdc-gallery-title span,
.agdc-gallery-title strong {

    display: block;
}

.agdc-gallery-title strong {

    color: var(--agdc-orange);

    font-weight: 800;
}


/* hero line */

.agdc-gallery-hero-line {

    width: 78px;
    height: 2px;

    margin-top: 36px;

    background: var(--agdc-orange);
}


/* description */

.agdc-gallery-hero-description {

    max-width: 560px;

    margin: 25px 0 0;

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

    font-size: 16px;

    line-height: 1.8;
}


/* =========================================================
   06. HERO VISUAL
========================================================= */

.agdc-gallery-hero-visual {

    position: relative;

    display: flex;

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

    min-height: 650px;
}


/* image wrapper */

.agdc-gallery-hero-image-wrap {

    position: relative;

    width: min(
        470px,
        100%
    );

    aspect-ratio: .78;

    overflow: hidden;

    border-radius:
        240px
        240px
        28px
        28px;

    background: #161616;

    transform: rotate(2deg);

    box-shadow:
        0 45px 110px rgba(0,0,0,.48);

    isolation: isolate;
}


/* image */

.agdc-gallery-hero-image-wrap img {

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform 1s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}

.agdc-gallery-hero-image-wrap:hover img {

    transform: scale(1.06);

    filter: saturate(1.06);
}


/* orange frame */

.agdc-gallery-hero-image-wrap::after {

    content: "";

    position: absolute;

    inset: 14px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius:
        230px
        230px
        20px
        20px;

    pointer-events: none;

    z-index: 2;
}


/* script text */

.agdc-gallery-hero-script {

    position: absolute;

    right: -2px;
    bottom: 65px;

    z-index: 4;

    color: var(--agdc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        28px,
        3.5vw,
        48px
    );

    font-style: italic;

    line-height: .86;

    text-align: right;

    transform: rotate(-7deg);

    pointer-events: none;
}


/* =========================================================
   07. INTRO SECTION
========================================================= */

.agdc-gallery-intro {

    position: relative;

    padding: 135px 0;

    background: var(--agdc-off-white);

    color: var(--agdc-black);
}


.agdc-gallery-intro > .agdc-gallery-container {

    display: grid;

    grid-template-columns:
        minmax(150px, .28fr)
        minmax(0, 1fr);

    gap: 80px;

    align-items: start;
}


/* intro label */

.agdc-gallery-intro-label {

    display: flex;

    flex-direction: column;

    gap: 9px;

    padding-top: 8px;

    color: var(--agdc-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    line-height: 1.4;

    text-transform: uppercase;
}

.agdc-gallery-intro-label span:first-child {

    font-size: 13px;

    letter-spacing: 0;
}


/* intro content */

.agdc-gallery-intro-content {

    max-width: 980px;
}


/* intro heading */

.agdc-gallery-intro-heading {

    position: relative;
}


/* section number */

.agdc-gallery-section-number {

    display: block;

    margin-bottom: 24px;

    color: var(--agdc-orange);

    font-size: 11px;

    font-weight: 800;

    letter-spacing: 2px;
}


/* intro h2 */

.agdc-gallery-intro-heading h2 {

    margin: 0;

    font-size: clamp(
        50px,
        7vw,
        96px
    );

    line-height: .88;

    letter-spacing: -.07em;

    font-weight: 800;

    text-transform: uppercase;
}

.agdc-gallery-intro-heading h2 em {

    color: var(--agdc-orange);

    font-style: normal;
}


/* intro text */

.agdc-gallery-intro-text {

    max-width: 690px;

    margin-top: 42px;

    padding-left: 2px;
}

.agdc-gallery-intro-text p {

    margin: 0;

    color: #606060;

    font-size: 17px;

    line-height: 1.85;
}


/* =========================================================
   08. GALLERY SECTION
========================================================= */

.agdc-gallery-section {

    position: relative;

    padding: 135px 0 145px;

    background: var(--agdc-black);

    color: var(--agdc-white);
}


/* =========================================================
   09. GALLERY HEADER
========================================================= */

.agdc-gallery-header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 45px;

    margin-bottom: 58px;
}


.agdc-gallery-small-label {

    display: block;

    margin-bottom: 18px;

    color: var(--agdc-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.6px;

    line-height: 1.2;

    text-transform: uppercase;
}


.agdc-gallery-header h2 {

    margin: 0;

    font-size: clamp(
        48px,
        6.5vw,
        84px
    );

    line-height: .88;

    letter-spacing: -.065em;

    font-weight: 800;

    text-transform: uppercase;
}

.agdc-gallery-header h2 span {

    color: var(--agdc-orange);
}


/* =========================================================
   10. FILTERS
========================================================= */

.agdc-gallery-filter-wrapper {

    display: flex;

    flex-wrap: wrap;

    justify-content: flex-end;

    gap: 8px;

    max-width: 620px;
}


.agdc-gallery-filter {

    display: inline-flex;

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

    min-height: 40px;

    padding: 0 17px;

    border: 1px solid rgba(255,255,255,.20);

    border-radius: 999px;

    background: transparent;

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

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.2px;

    line-height: 1;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.agdc-gallery-filter:hover {

    border-color: var(--agdc-orange);

    color: var(--agdc-white);

    transform: translateY(-2px);
}


.agdc-gallery-filter.active {

    border-color: var(--agdc-orange);

    background: var(--agdc-orange);

    color: var(--agdc-white);
}


.agdc-gallery-filter:focus-visible {

    outline: 2px solid var(--agdc-orange);

    outline-offset: 3px;
}


/* =========================================================
   11. GALLERY GRID
========================================================= */

.agdc-gallery-grid {

    display: grid;

    grid-template-columns:
        repeat(12, minmax(0, 1fr));

    gap: 18px;

    align-items: stretch;
}


/* =========================================================
   12. GALLERY ITEMS
   Equal Width + Equal Height
========================================================= */

.agdc-gallery-item,
.agdc-gallery-item-large,
.agdc-gallery-item-wide {
    position: relative;

    min-width: 0;

    width: 100%;

    /*
     * Every gallery item has exactly
     * the same width-to-height ratio.
     */
    aspect-ratio: 1 / 1;

    min-height: 0;

    grid-column: span 4;
}


/* filtered state */

.agdc-gallery-item.is-filtered-out {
    display: none !important;
}


/* =========================================================
   13. GALLERY CARD
========================================================= */

.agdc-gallery-card {

    position: relative;

    width: 100%;
    height: 100%;

    min-height: inherit;

    overflow: hidden;

    border-radius: 24px;

    background: #121212;

    cursor: pointer;

    isolation: isolate;
}


/* image */

.agdc-gallery-card img {

    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    object-position: center;

    transition:
        transform .9s cubic-bezier(.2,.7,.2,1),
        filter .6s ease;
}


.agdc-gallery-card:hover img {

    transform: scale(1.055);

    filter: saturate(1.08);
}


/* dark image gradient */

.agdc-gallery-card::after {

    content: "";

    position: absolute;

    inset: 0;

    z-index: 1;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 45%,
            rgba(0,0,0,.16) 60%,
            rgba(0,0,0,.88) 100%
        );
}


/* =========================================================
   14. GALLERY CARD OVERLAY
========================================================= */

.agdc-gallery-card-overlay {

    position: absolute;

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

    z-index: 3;

    padding: 30px;

    transform: translateY(8px);

    transition:
        transform .5s cubic-bezier(.22,1,.36,1);
}


.agdc-gallery-card:hover
.agdc-gallery-card-overlay {

    transform: translateY(0);
}


/* category */

.agdc-gallery-card-overlay > span {

    display: inline-block;

    margin-bottom: 10px;

    color: var(--agdc-orange);

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.8px;

    line-height: 1.2;

    text-transform: uppercase;
}


/* title */

.agdc-gallery-card-overlay h3 {

    margin: 0;

    max-width: 560px;

    color: var(--agdc-white);

    font-size: clamp(
        22px,
        2.3vw,
        34px
    );

    line-height: 1;

    letter-spacing: -.035em;

    font-weight: 800;
}


/* =========================================================
   15. LOAD MORE
========================================================= */

.agdc-gallery-load-more {

    display: flex;

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

    padding-top: 65px;
}


.agdc-gallery-load-button {

    display: inline-flex;

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

    gap: 22px;

    min-width: 190px;

    min-height: 54px;

    padding: 0 25px;

    border: 1px solid rgba(255,255,255,.25);

    border-radius: 999px;

    background: transparent;

    color: var(--agdc-white);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2px;

    text-transform: uppercase;

    cursor: pointer;

    transition:
        background-color .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


.agdc-gallery-load-button:hover {

    border-color: var(--agdc-orange);

    background: var(--agdc-orange);

    color: var(--agdc-white);

    transform: translateY(-3px);
}


.agdc-gallery-load-button:focus-visible {

    outline: 2px solid var(--agdc-orange);

    outline-offset: 4px;
}


.agdc-gallery-load-icon {

    display: inline-flex;

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

    font-size: 18px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.agdc-gallery-load-button:hover
.agdc-gallery-load-icon {

    transform: translateY(3px);
}


/* =========================================================
   16. CTA SECTION
========================================================= */

.agdc-gallery-cta {

    position: relative;

    overflow: hidden;

    padding: 135px 0;

    background:
        radial-gradient(
            circle at 78% 50%,
            rgba(219,88,33,.12),
            transparent 28%
        ),
        #f6f6f4;

    color: var(--agdc-black);
}


.agdc-gallery-cta::before {

    content: "";

    position: absolute;

    width: 520px;
    height: 520px;

    right: -230px;
    top: -220px;

    border-radius: 50%;

    border: 1px solid rgba(219,88,33,.16);

    pointer-events: none;
}


.agdc-gallery-cta-inner {

    position: relative;

    display: grid;

    grid-template-columns:
        minmax(0, 1.15fr)
        minmax(280px, .65fr)
        minmax(90px, .25fr);

    align-items: center;

    gap: 70px;

    min-height: 350px;
}


/* CTA content */

.agdc-gallery-cta-content {

    max-width: 700px;
}


.agdc-gallery-cta-label {

    display: block;

    margin-bottom: 18px;

    color: var(--agdc-orange);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 2.4px;

    line-height: 1.2;

    text-transform: uppercase;
}


/* CTA heading */

.agdc-gallery-cta-content h2 {

    margin: 0;

    font-size: clamp(
        56px,
        7vw,
        94px
    );

    line-height: .84;

    letter-spacing: -.075em;

    font-weight: 800;

    text-transform: uppercase;
}


.agdc-gallery-cta-content h2 span {

    display: block;

    color: var(--agdc-orange);
}


/* CTA paragraph */

.agdc-gallery-cta-content p {

    max-width: 590px;

    margin: 28px 0 0;

    color: #626262;

    font-size: 16px;

    line-height: 1.8;
}


/* CTA button */

.agdc-gallery-cta-button {

    display: inline-flex;

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

    gap: 20px;

    min-width: 185px;

    min-height: 54px;

    margin-top: 35px;

    padding: 0 27px;

    border: 1px solid var(--agdc-orange);

    border-radius: 999px;

    background: var(--agdc-orange);

    color: var(--agdc-white);

    font-size: 10px;

    font-weight: 800;

    letter-spacing: 1.8px;

    text-transform: uppercase;

    transition:
        background-color .3s ease,
        color .3s ease,
        transform .3s ease;
}


.agdc-gallery-cta-button:hover {

    background: transparent;

    color: var(--agdc-orange);

    transform: translateY(-3px);
}


.agdc-gallery-cta-button span {

    font-size: 17px;

    line-height: 1;

    transition:
        transform .3s ease;
}


.agdc-gallery-cta-button:hover span {

    transform: translateX(4px);
}


/* =========================================================
   17. CONTACT DETAILS
========================================================= */

.agdc-gallery-contact-details {

    display: flex;

    flex-direction: column;

    gap: 28px;
}


.agdc-gallery-contact-item {

    display: grid;

    grid-template-columns: 28px minmax(0, 1fr);

    gap: 13px;

    align-items: start;
}


.agdc-contact-icon {

    display: flex;

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

    width: 26px;
    height: 26px;

    color: var(--agdc-orange);

    font-size: 12px;
}


.agdc-gallery-contact-item small {

    display: block;

    margin-bottom: 7px;

    color: #888;

    font-size: 9px;

    font-weight: 800;

    letter-spacing: 1.7px;

    line-height: 1.2;

    text-transform: uppercase;
}


.agdc-gallery-contact-item a {

    display: inline-block;

    color: var(--agdc-black);

    font-size: 14px;

    line-height: 1.5;

    transition:
        color .25s ease;
}


.agdc-gallery-contact-item a:hover {

    color: var(--agdc-orange);
}


.agdc-gallery-contact-item p {

    margin: 0;

    color: #555;

    font-size: 14px;

    line-height: 1.65;
}


/* =========================================================
   18. CTA SCRIPT
========================================================= */

.agdc-gallery-cta-script {

    color: var(--agdc-orange);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: clamp(
        30px,
        3.7vw,
        50px
    );

    font-style: italic;

    line-height: .86;

    text-align: right;

    transform: rotate(-7deg);
}


/* =========================================================
   19. LIGHTBOX
   Required by gallery.js
========================================================= */

.agdc-gallery-lightbox {

    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

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

    padding: 50px;

    background: rgba(0,0,0,.94);

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    transition:
        opacity .35s ease,
        visibility .35s ease;
}


.agdc-gallery-lightbox.is-open {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;
}


.agdc-gallery-lightbox-image {

    display: block;

    width: auto;
    height: auto;

    max-width: min(
        90vw,
        1400px
    );

    max-height: 86vh;

    object-fit: contain;

    border-radius: 4px;

    box-shadow:
        0 30px 100px rgba(0,0,0,.5);

    user-select: none;
}


/* lightbox buttons */

.agdc-gallery-lightbox-close,
.agdc-gallery-lightbox-prev,
.agdc-gallery-lightbox-next {

    position: absolute;

    display: flex;

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

    border: 1px solid rgba(255,255,255,.20);

    background: rgba(0,0,0,.35);

    color: var(--agdc-white);

    cursor: pointer;

    transition:
        background-color .25s ease,
        border-color .25s ease,
        color .25s ease,
        transform .25s ease;
}


.agdc-gallery-lightbox-close {

    top: 24px;
    right: 28px;

    width: 48px;
    height: 48px;

    border-radius: 50%;

    font-size: 28px;

    line-height: 1;
}


.agdc-gallery-lightbox-prev,
.agdc-gallery-lightbox-next {

    top: 50%;

    width: 52px;
    height: 52px;

    margin-top: -26px;

    border-radius: 50%;

    font-size: 34px;

    line-height: 1;
}


.agdc-gallery-lightbox-prev {
    left: 28px;
}

.agdc-gallery-lightbox-next {
    right: 28px;
}


.agdc-gallery-lightbox-close:hover,
.agdc-gallery-lightbox-prev:hover,
.agdc-gallery-lightbox-next:hover {

    border-color: var(--agdc-orange);

    background: var(--agdc-orange);

    color: var(--agdc-white);
}


.agdc-gallery-lightbox-close:hover {

    transform: rotate(90deg);
}


/* prevent background scrolling */

body.agdc-lightbox-open {

    overflow: hidden;
}


/* =========================================================
   20. TABLET
========================================================= */

@media (max-width: 1100px) {

    .agdc-gallery-container,
    .agdc-gallery-hero-inner {

        width: min(
            100% - 64px,
            920px
        );
    }


    /* hero */

    .agdc-gallery-hero {

        min-height: 700px;
    }

    .agdc-gallery-hero-inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(340px, .8fr);

        gap: 45px;

        min-height: 700px;
    }

    .agdc-gallery-title {

        font-size: clamp(
            56px,
            8vw,
            92px
        );
    }

    .agdc-gallery-hero-visual {

        min-height: 570px;
    }

    .agdc-gallery-hero-image-wrap {

        width: min(
            390px,
            100%
        );
    }


    /* intro */

    .agdc-gallery-intro {

        padding: 110px 0;
    }

    .agdc-gallery-intro > .agdc-gallery-container {

        gap: 50px;
    }


    /* gallery */

    .agdc-gallery-section {

        padding: 110px 0 120px;
    }

    .agdc-gallery-header {

        align-items: flex-start;
    }

    .agdc-gallery-filter-wrapper {

        max-width: 440px;
    }


    /* CTA */

    .agdc-gallery-cta {

        padding: 110px 0;
    }

    .agdc-gallery-cta-inner {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(250px, .7fr);

        gap: 50px;
    }

    .agdc-gallery-cta-script {

        display: none;
    }

}


/* =========================================================
   21. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .agdc-gallery-container,
    .agdc-gallery-hero-inner {

        width: min(
            100% - 48px,
            720px
        );
    }


    /* hero */

    .agdc-gallery-hero {

        min-height: auto;
    }

    .agdc-gallery-hero-inner {

        display: grid;

        grid-template-columns: 1fr;

        gap: 10px;

        min-height: auto;

        padding: 95px 0 80px;
    }

    .agdc-gallery-hero-content {

        max-width: 700px;

        padding-bottom: 35px;
    }

    .agdc-gallery-title {

        font-size: clamp(
            58px,
            12vw,
            88px
        );
    }

    .agdc-gallery-hero-visual {

        min-height: 590px;
    }

    .agdc-gallery-hero-image-wrap {

        width: min(
            440px,
            78vw
        );
    }

    .agdc-gallery-hero-script {

        right: 3%;

        bottom: 50px;
    }


    /* intro */

    .agdc-gallery-intro > .agdc-gallery-container {

        grid-template-columns: 1fr;

        gap: 35px;
    }

    .agdc-gallery-intro-label {

        flex-direction: row;

        align-items: center;

        gap: 15px;
    }

    .agdc-gallery-intro-label span:first-child::after {

        content: "";

        display: inline-block;

        width: 28px;
        height: 1px;

        margin-left: 12px;

        vertical-align: middle;

        background: var(--agdc-orange);
    }


    /* gallery header */

    .agdc-gallery-header {

        display: grid;

        grid-template-columns: 1fr;

        gap: 30px;
    }

    .agdc-gallery-filter-wrapper {

        justify-content: flex-start;

        max-width: 100%;
    }


    /* gallery grid */

    .agdc-gallery-grid {

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

    .agdc-gallery-item,
    .agdc-gallery-item-large,
    .agdc-gallery-item-wide {

        grid-column: auto;

        min-height: 390px;
    }

    .agdc-gallery-item-large {

        grid-column: span 2;

        min-height: 540px;
    }

    .agdc-gallery-item-wide {

        grid-column: span 2;

        min-height: 450px;
    }


    /* CTA */

    .agdc-gallery-cta-inner {

        grid-template-columns: 1fr 1fr;

        gap: 45px;
    }

}


/* =========================================================
   22. MOBILE
========================================================= */

@media (max-width: 620px) {

    .agdc-gallery-container,
    .agdc-gallery-hero-inner {

        width: calc(100% - 36px);
    }


    /* hero */

    .agdc-gallery-hero-inner {

        padding: 75px 0 65px;
    }

    .agdc-gallery-eyebrow {

        margin-bottom: 20px;

        font-size: 9px;

        letter-spacing: 2px;
    }

    .agdc-gallery-eyebrow::before {

        width: 30px;
    }

    .agdc-gallery-title {

        font-size: clamp(
            50px,
            16vw,
            80px
        );

        line-height: .87;

        letter-spacing: -.065em;
    }

    .agdc-gallery-hero-line {

        width: 58px;

        margin-top: 28px;
    }

    .agdc-gallery-hero-description {

        max-width: 100%;

        margin-top: 20px;

        font-size: 14px;

        line-height: 1.75;
    }

    .agdc-gallery-hero-visual {

        min-height: 490px;
    }

    .agdc-gallery-hero-image-wrap {

        width: min(
            350px,
            84vw
        );

        border-radius:
            190px
            190px
            22px
            22px;
    }

    .agdc-gallery-hero-image-wrap::after {

        inset: 10px;

        border-radius:
            180px
            180px
            16px
            16px;
    }

    .agdc-gallery-hero-script {

        right: 0;

        bottom: 38px;

        font-size: 30px;
    }


    /* intro */

    .agdc-gallery-intro {

        padding: 90px 0;
    }

    .agdc-gallery-intro-label {

        font-size: 9px;

        letter-spacing: 1.7px;
    }

    .agdc-gallery-intro-heading h2 {

        font-size: clamp(
            46px,
            14vw,
            72px
        );

        line-height: .9;
    }

    .agdc-gallery-section-number {

        margin-bottom: 18px;
    }

    .agdc-gallery-intro-text {

        margin-top: 30px;
    }

    .agdc-gallery-intro-text p {

        font-size: 15px;

        line-height: 1.75;
    }


    /* gallery */

    .agdc-gallery-section {

        padding: 90px 0 100px;
    }

    .agdc-gallery-small-label {

        margin-bottom: 14px;

        font-size: 9px;
    }

    .agdc-gallery-header h2 {

        font-size: clamp(
            46px,
            14vw,
            72px
        );
    }

    .agdc-gallery-filter-wrapper {

        display: flex;

        flex-wrap: wrap;

        gap: 7px;
    }

    .agdc-gallery-filter {

        min-height: 38px;

        padding: 0 13px;

        font-size: 8px;

        letter-spacing: .9px;
    }


    /* grid */

    .agdc-gallery-grid {

        grid-template-columns: 1fr;

        gap: 14px;
    }

    .agdc-gallery-item,
    .agdc-gallery-item-large,
    .agdc-gallery-item-wide {

        grid-column: auto;

        min-height: 390px;
    }

    .agdc-gallery-item-large {

        min-height: 500px;
    }

    .agdc-gallery-item-wide {

        min-height: 430px;
    }

    .agdc-gallery-card {

        border-radius: 18px;
    }

    .agdc-gallery-card-overlay {

        padding: 22px;

        transform: none;
    }

    .agdc-gallery-card-overlay > span {

        font-size: 8px;

        letter-spacing: 1.5px;
    }

    .agdc-gallery-card-overlay h3 {

        font-size: 22px;

        line-height: 1.02;
    }


    /* load more */

    .agdc-gallery-load-more {

        padding-top: 45px;
    }

    .agdc-gallery-load-button {

        width: 100%;

        max-width: 250px;

        min-height: 52px;
    }


    /* CTA */

    .agdc-gallery-cta {

        padding: 90px 0;
    }

    .agdc-gallery-cta-inner {

        display: grid;

        grid-template-columns: 1fr;

        gap: 55px;

        min-height: auto;
    }

    .agdc-gallery-cta-content h2 {

        font-size: clamp(
            50px,
            15vw,
            74px
        );

        line-height: .87;
    }

    .agdc-gallery-cta-content p {

        margin-top: 22px;

        font-size: 14px;

        line-height: 1.75;
    }

    .agdc-gallery-cta-button {

        margin-top: 28px;
    }

    .agdc-gallery-contact-details {

        gap: 24px;
    }

    .agdc-gallery-cta-script {

        display: block;

        margin-top: -15px;

        font-size: 38px;

        text-align: left;
    }


    /* lightbox */

    .agdc-gallery-lightbox {

        padding: 25px;
    }

    .agdc-gallery-lightbox-image {

        max-width: 94vw;

        max-height: 78vh;
    }

    .agdc-gallery-lightbox-close {

        top: 15px;
        right: 15px;

        width: 42px;
        height: 42px;

        font-size: 24px;
    }

    .agdc-gallery-lightbox-prev,
    .agdc-gallery-lightbox-next {

        top: auto;
        bottom: 18px;

        width: 44px;
        height: 44px;

        margin-top: 0;

        font-size: 28px;
    }

    .agdc-gallery-lightbox-prev {

        left: calc(50% - 55px);
    }

    .agdc-gallery-lightbox-next {

        right: calc(50% - 55px);
    }

}


/* =========================================================
   23. SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .agdc-gallery-container,
    .agdc-gallery-hero-inner {

        width: calc(100% - 28px);
    }


    /* hero */

    .agdc-gallery-hero-inner {

        padding-top: 60px;

        padding-bottom: 55px;
    }

    .agdc-gallery-title {

        font-size: clamp(
            45px,
            16.5vw,
            68px
        );

        letter-spacing: -.055em;
    }

    .agdc-gallery-hero-description {

        font-size: 13px;
    }

    .agdc-gallery-hero-visual {

        min-height: 410px;
    }

    .agdc-gallery-hero-image-wrap {

        width: min(
            310px,
            86vw
        );
    }

    .agdc-gallery-hero-script {

        right: -2px;

        bottom: 25px;

        font-size: 25px;
    }


    /* intro */

    .agdc-gallery-intro {

        padding: 75px 0;
    }

    .agdc-gallery-intro-heading h2 {

        font-size: clamp(
            42px,
            14.5vw,
            62px
        );
    }

    .agdc-gallery-intro-text p {

        font-size: 14px;
    }


    /* filters */

    .agdc-gallery-filter-wrapper {

        display: grid;

        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        width: 100%;
    }

    .agdc-gallery-filter {

        width: 100%;

        min-height: 40px;

        padding-inline: 8px;
    }


    /* cards */

    .agdc-gallery-item,
    .agdc-gallery-item-large,
    .agdc-gallery-item-wide {

        min-height: 350px;
    }

    .agdc-gallery-item-large {

        min-height: 430px;
    }

    .agdc-gallery-item-wide {

        min-height: 380px;
    }

    .agdc-gallery-card-overlay {

        padding: 18px;
    }

    .agdc-gallery-card-overlay h3 {

        font-size: 19px;
    }


    /* CTA */

    .agdc-gallery-cta {

        padding: 75px 0;
    }

    .agdc-gallery-cta-content h2 {

        font-size: clamp(
            45px,
            14vw,
            60px
        );
    }

    .agdc-gallery-cta-button {

        width: 100%;
    }

    .agdc-gallery-contact-item {

        grid-template-columns: 24px minmax(0,1fr);

        gap: 10px;
    }

}


/* =========================================================
   GALLERY CHOOSER — RESPONSIVE FIX
   Equal image/card dimensions on all devices
========================================================= */


/* ---------------------------------------------------------
   BASE — DESKTOP
--------------------------------------------------------- */

.agdc-gallery-chooser {
    width: 100%;
    overflow: hidden;
}

.agdc-gallery-chooser > .agdc-gallery-container {
    width: min(
        var(--agdc-container-width),
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}

.agdc-gallery-chooser-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
}


/* ---------------------------------------------------------
   EQUAL CARD SIZE
--------------------------------------------------------- */

.agdc-gallery-chooser-card {
    position: relative;

    width: 100%;

    /*
     * Both cards always have exactly the same
     * responsive width/height ratio.
     */
    aspect-ratio: 4 / 5;

    min-height: 0;

    padding: 48px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #080808;

    isolation: isolate;
}


/* ---------------------------------------------------------
   BACKGROUND IMAGE
--------------------------------------------------------- */

.agdc-gallery-chooser-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.agdc-gallery-chooser-image::after {
    background-image:
        url("../images/ADF5S-59.webp");
}


.agdc-gallery-chooser-video::after {
    background-image:
        url("../images/video-cover.webp");
}


.agdc-gallery-chooser-card:hover::after {
    transform: scale(1.06);
}


/* ---------------------------------------------------------
   DARK OVERLAY
--------------------------------------------------------- */

.agdc-gallery-chooser-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, .08),
            rgba(0, 0, 0, .82)
        );
}


/* ---------------------------------------------------------
   CARD CONTENT
--------------------------------------------------------- */

.agdc-gallery-chooser-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.agdc-gallery-chooser-number {
    position: absolute;

    top: 30px;
    right: 34px;

    z-index: 3;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .12em;

    color: rgba(255,255,255,.75);
}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.agdc-gallery-chooser-label {
    display: block;

    margin-bottom: 14px;

    color: #db5821;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .16em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.agdc-gallery-chooser-content h3 {
    margin: 0;

    max-width: 100%;

    color: #fff;

    font-size: clamp(
        34px,
        4vw,
        62px
    );

    line-height: .9;

    letter-spacing: -.04em;

    font-weight: 800;

    text-transform: uppercase;

    overflow-wrap: break-word;
}

.agdc-gallery-chooser-content h3 span {
    display: block;

    color: #db5821;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.agdc-gallery-chooser-content p {
    max-width: 440px;

    margin: 24px 0 28px;

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

    font-size: 15px;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.agdc-gallery-chooser-button {
    display: inline-flex;

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

    gap: 18px;

    max-width: 100%;

    min-height: 54px;

    padding: 14px 20px;

    border: 1px solid rgba(255,255,255,.45);

    border-radius: 5px;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .14em;

    line-height: 1.3;

    text-transform: uppercase;

    white-space: normal;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.agdc-gallery-chooser-button span {
    flex: 0 0 auto;

    font-size: 17px;

    transition:
        transform .3s ease;
}

.agdc-gallery-chooser-button:hover {
    background: #db5821;

    border-color: #db5821;

    color: #fff;
}

.agdc-gallery-chooser-button:hover span {
    transform: translateY(4px);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 64px);
    }

    .agdc-gallery-chooser-grid {
        gap: 20px;
    }

    .agdc-gallery-chooser-card {
        padding: 38px;
    }

    .agdc-gallery-chooser-number {
        top: 25px;
        right: 28px;
    }

    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            32px,
            5vw,
            54px
        );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .agdc-gallery-chooser {
        padding: 90px 0;
    }

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: min(
            100% - 48px,
            720px
        );
    }

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

        gap: 18px;
    }

    .agdc-gallery-chooser-card {
        aspect-ratio: 4 / 5;

        padding: 30px;
    }

    .agdc-gallery-chooser-number {
        top: 20px;
        right: 22px;

        font-size: 13px;
    }

    .agdc-gallery-chooser-label {
        margin-bottom: 11px;

        font-size: 9px;
    }

    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            30px,
            5.8vw,
            48px
        );
    }

    .agdc-gallery-chooser-content p {
        margin: 18px 0 22px;

        font-size: 14px;

        line-height: 1.6;
    }

    .agdc-gallery-chooser-button {
        min-height: 48px;

        padding: 11px 15px;

        gap: 12px;

        font-size: 9px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .agdc-gallery-chooser {
        padding: 75px 0;
    }

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 36px);
    }


    /*
     * IMPORTANT:
     * Change to one column.
     *
     * This is the main fix for the screenshot
     * you provided.
     */
    .agdc-gallery-chooser-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /*
     * Both cards remain exactly the same
     * aspect ratio.
     */
    .agdc-gallery-chooser-card {
        width: 100%;

        aspect-ratio: 4 / 5;

        min-height: 0;

        padding: 30px;
    }


    .agdc-gallery-chooser-number {
        top: 22px;
        right: 24px;

        font-size: 13px;
    }


    .agdc-gallery-chooser-label {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: .14em;
    }


    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            38px,
            12vw,
            58px
        );

        line-height: .88;
    }


    .agdc-gallery-chooser-content p {
        max-width: 100%;

        margin: 20px 0 24px;

        font-size: 14px;

        line-height: 1.7;
    }


    .agdc-gallery-chooser-button {
        min-height: 50px;

        padding: 12px 17px;

        font-size: 9px;

        letter-spacing: .12em;
    }

}





/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 340px) {

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 24px);
    }

    .agdc-gallery-chooser-card {
        padding: 21px;

        aspect-ratio: 4 / 5;
    }

    .agdc-gallery-chooser-number {
        top: 15px;
        right: 17px;
    }

    .agdc-gallery-chooser-content h3 {
        font-size: 32px;
    }

    .agdc-gallery-chooser-content p {
        font-size: 12px;
    }

    .agdc-gallery-chooser-button {
        min-height: 44px;

        padding: 9px 12px;

        font-size: 7px;
    }

}


/* =========================================================
   24. VERY SMALL DEVICES
========================================================= */

@media (max-width: 340px) {

    .agdc-gallery-container,
    .agdc-gallery-hero-inner {

        width: calc(100% - 24px);
    }

    .agdc-gallery-title {

        font-size: 43px;
    }

    .agdc-gallery-intro-heading h2 {

        font-size: 40px;
    }

    .agdc-gallery-header h2 {

        font-size: 40px;
    }

    .agdc-gallery-filter {

        font-size: 7px;

        letter-spacing: .6px;
    }

    .agdc-gallery-item,
    .agdc-gallery-item-large,
    .agdc-gallery-item-wide {

        min-height: 320px;
    }

}


/* =========================================================
   25. REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .agdc-gallery-page .agdc-reveal {

        opacity: 1;

        transform: none;

        transition: none;
    }

    .agdc-gallery-card img,
    .agdc-gallery-hero-image-wrap img,
    .agdc-gallery-card-overlay,
    .agdc-gallery-filter,
    .agdc-gallery-load-button,
    .agdc-gallery-cta-button,
    .agdc-gallery-lightbox,
    .agdc-gallery-lightbox-close,
    .agdc-gallery-lightbox-prev,
    .agdc-gallery-lightbox-next {

        transition: none;
    }

}


/* =========================================================
   26. WORDPRESS / THEME SAFETY
========================================================= */

.agdc-gallery-page
.agdc-gallery-card
img {

    margin: 0;
}

.agdc-gallery-page
.agdc-gallery-hero-image-wrap
img {

    margin: 0;
}

.agdc-gallery-page
.agdc-gallery-cta
a {

    text-decoration: none;
}

.agdc-gallery-page
button {

    appearance: none;
    -webkit-appearance: none;
}

.agdc-gallery-page
button::-moz-focus-inner {

    border: 0;
}



/* =========================================================
   GALLERY CHOOSER
   ========================================================= */

.agdc-gallery-chooser {
    position: relative;
    padding: 120px 0;
    background: #f5f3ef;
    overflow: hidden;
}

.agdc-gallery-chooser-header {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
}

.agdc-gallery-chooser-header .agdc-gallery-small-label {
    display: block;
    margin-bottom: 18px;
}

.agdc-gallery-chooser-header h2 {
    margin: 0;
    font-size: clamp(42px, 6vw, 82px);
    line-height: .95;
    letter-spacing: -.04em;
    text-transform: uppercase;
    color: #000;
}

.agdc-gallery-chooser-header h2 span {
    display: block;
    color: #db5821;
}

.agdc-gallery-chooser-header p {
    max-width: 620px;
    margin: 28px auto 0;
    font-size: 17px;
    line-height: 1.75;
    color: #555;
}

.agdc-gallery-chooser-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.agdc-gallery-chooser-card {
    position: relative;
    min-height: 480px;
    padding: 48px;
    display: flex;
    align-items: flex-end;
    overflow: hidden;
    background: #080808;
    isolation: isolate;
}

.agdc-gallery-chooser-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, .05),
            rgba(0, 0, 0, .82)
        );
}

.agdc-gallery-chooser-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -3;
    background-size: cover;
    background-position: center;
    transition: transform .8s cubic-bezier(.2,.7,.2,1);
}

.agdc-gallery-chooser-image::after {
    background-image:
        url("../images/ADF5S-59.webp");
}

.agdc-gallery-chooser-video::after {
    background-image:
        url("../images/video-cover.webp");
}

.agdc-gallery-chooser-card:hover::after {
    transform: scale(1.06);
}

.agdc-gallery-chooser-number {
    position: absolute;
    top: 30px;
    right: 34px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .12em;
    color: rgba(255,255,255,.65);
}

.agdc-gallery-chooser-content {
    position: relative;
    z-index: 2;
    max-width: 520px;
}

.agdc-gallery-chooser-label {
    display: block;
    margin-bottom: 14px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: #db5821;
}

.agdc-gallery-chooser-content h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(38px, 4vw, 64px);
    line-height: .9;
    letter-spacing: -.04em;
    text-transform: uppercase;
}

.agdc-gallery-chooser-content h3 span {
    display: block;
    color: #db5821;
}

.agdc-gallery-chooser-content p {
    max-width: 440px;
    margin: 24px 0 28px;
    color: rgba(255,255,255,.78);
    font-size: 15px;
    line-height: 1.7;
}

.agdc-gallery-chooser-button {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    padding: 14px 20px;
    border: 1px solid rgba(255,255,255,.45);
    border-radius: 5px;
    color: #fff;
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease;
}

.agdc-gallery-chooser-button span {
    font-size: 17px;
    transition: transform .3s ease;
}

.agdc-gallery-chooser-button:hover {
    background: #db5821;
    border-color: #db5821;
    color: #fff;
    border-radius: 5px;
}

.agdc-gallery-chooser-button:hover span {
    transform: translateY(4px);
}


/* =========================================================
   VIDEO GALLERY
   ========================================================= */

.agdc-video-gallery-section {
    position: relative;
    padding: 120px 0;
    background: #fff;
    color: #000;
    overflow: hidden;
    scroll-margin-top: 90px;
}


/* ---------------------------------------------------------
   VIDEO HEADER
--------------------------------------------------------- */

.agdc-video-gallery-header {
    max-width: 760px;
    margin: 0 auto 64px;
    text-align: center;
}

.agdc-video-gallery-header .agdc-gallery-small-label {
    display: block;
    margin-bottom: 18px;
    color: #db5821;
}

.agdc-video-gallery-header h2 {
    margin: 0;
    font-size: clamp(46px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -.05em;
    text-transform: uppercase;
    color: #000;
}

.agdc-video-gallery-header h2 span {
    display: block;
    color: #db5821;
}

.agdc-video-gallery-header p {
    max-width: 620px;
    margin: 28px auto 0;
    color: #000;
    font-size: 16px;
    line-height: 1.8;
}


/* ---------------------------------------------------------
   VIDEO GRID
--------------------------------------------------------- */

.agdc-video-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
}


/* ---------------------------------------------------------
   VIDEO ITEM
--------------------------------------------------------- */

.agdc-video-item {
    min-width: 0;
}


/* ---------------------------------------------------------
   YOUTUBE WRAPPER
--------------------------------------------------------- */

.agdc-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #151515;
    border-radius: 15px;
}


/* ---------------------------------------------------------
   YOUTUBE IFRAME
--------------------------------------------------------- */

.agdc-video-wrapper iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}


/* ---------------------------------------------------------
   SUBTLE HOVER EFFECT
--------------------------------------------------------- */

.agdc-video-item {
    transition:
        transform .4s ease,
        opacity .4s ease;
}

.agdc-video-item:hover {
    transform: translateY(-5px);
}


/* ---------------------------------------------------------
   OPTIONAL BORDER
--------------------------------------------------------- */

.agdc-video-wrapper {
    border: 1px solid rgba(255, 255, 255, .10);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .agdc-video-gallery-section {
        padding: 90px 0;
    }

    .agdc-video-gallery-header {
        margin-bottom: 48px;
    }

    .agdc-video-gallery-grid {
        grid-template-columns: 1fr;
        gap: 28px;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .agdc-video-gallery-section {
        padding: 75px 0;
    }

    .agdc-video-gallery-header {
        margin-bottom: 38px;
    }

    .agdc-video-gallery-header h2 {
        font-size: clamp(42px, 14vw, 64px);
    }

    .agdc-video-gallery-header p {
        margin-top: 22px;
        font-size: 14px;
        line-height: 1.7;
    }

    .agdc-video-gallery-grid {
        gap: 22px;
    }

}


/* =========================================================
   SMALL MOBILE
   ========================================================= */

@media (max-width: 420px) {

    .agdc-video-gallery-section {
        padding: 65px 0;
    }

    .agdc-video-wrapper {
        aspect-ratio: 16 / 9;
    }

}

/* =========================================================
   GALLERY CHOOSER — RESPONSIVE FIX
   Equal image/card dimensions on all devices
========================================================= */


/* ---------------------------------------------------------
   BASE — DESKTOP
--------------------------------------------------------- */

.agdc-gallery-chooser {
    width: 100%;
    overflow: hidden;
}

.agdc-gallery-chooser > .agdc-gallery-container {
    width: min(
        var(--agdc-container-width),
        calc(100% - 48px)
    );

    margin-left: auto;
    margin-right: auto;
}

.agdc-gallery-chooser-grid {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 24px;

    width: 100%;
}


/* ---------------------------------------------------------
   EQUAL CARD SIZE
--------------------------------------------------------- */

.agdc-gallery-chooser-card {
    position: relative;

    width: 100%;

    /*
     * Both cards always have exactly the same
     * responsive width/height ratio.
     */
    aspect-ratio: 4 / 5;

    min-height: 0;

    padding: 48px;

    display: flex;
    align-items: flex-end;

    overflow: hidden;

    background: #080808;

    isolation: isolate;
}


/* ---------------------------------------------------------
   BACKGROUND IMAGE
--------------------------------------------------------- */

.agdc-gallery-chooser-card::after {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -3;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    transition:
        transform .8s cubic-bezier(.2,.7,.2,1);
}


.agdc-gallery-chooser-image::after {
    background-image:
        url("../images/ADF5S-59.webp");
}


.agdc-gallery-chooser-video::after {
    background-image:
        url("../images/video-cover.webp");
}


.agdc-gallery-chooser-card:hover::after {
    transform: scale(1.06);
}


/* ---------------------------------------------------------
   DARK OVERLAY
--------------------------------------------------------- */

.agdc-gallery-chooser-card::before {
    content: "";

    position: absolute;

    inset: 0;

    z-index: -2;

    background:
        linear-gradient(
            145deg,
            rgba(0, 0, 0, .08),
            rgba(0, 0, 0, .82)
        );
}


/* ---------------------------------------------------------
   CARD CONTENT
--------------------------------------------------------- */

.agdc-gallery-chooser-content {
    position: relative;

    z-index: 2;

    width: 100%;
    max-width: 520px;
}


/* ---------------------------------------------------------
   NUMBER
--------------------------------------------------------- */

.agdc-gallery-chooser-number {
    position: absolute;

    top: 30px;
    right: 34px;

    z-index: 3;

    font-size: 14px;
    font-weight: 700;

    letter-spacing: .12em;

    color: rgba(255,255,255,.75);
}


/* ---------------------------------------------------------
   LABEL
--------------------------------------------------------- */

.agdc-gallery-chooser-label {
    display: block;

    margin-bottom: 14px;

    color: #db5821;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .16em;

    line-height: 1.3;

    text-transform: uppercase;
}


/* ---------------------------------------------------------
   HEADING
--------------------------------------------------------- */

.agdc-gallery-chooser-content h3 {
    margin: 0;

    max-width: 100%;

    color: #fff;

    font-size: clamp(
        34px,
        4vw,
        62px
    );

    line-height: .9;

    letter-spacing: -.04em;

    font-weight: 800;

    text-transform: uppercase;

    overflow-wrap: break-word;
}

.agdc-gallery-chooser-content h3 span {
    display: block;

    color: #db5821;
}


/* ---------------------------------------------------------
   DESCRIPTION
--------------------------------------------------------- */

.agdc-gallery-chooser-content p {
    max-width: 440px;

    margin: 24px 0 28px;

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

    font-size: 15px;

    line-height: 1.7;
}


/* ---------------------------------------------------------
   BUTTON
--------------------------------------------------------- */

.agdc-gallery-chooser-button {
    display: inline-flex;

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

    gap: 18px;

    max-width: 100%;

    min-height: 54px;

    padding: 14px 20px;

    border: 1px solid rgba(255,255,255,.45);

    border-radius: 5px;

    color: #fff;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: .14em;

    line-height: 1.3;

    text-transform: uppercase;

    white-space: normal;

    transition:
        background .3s ease,
        border-color .3s ease,
        color .3s ease,
        transform .3s ease;
}

.agdc-gallery-chooser-button span {
    flex: 0 0 auto;

    font-size: 17px;

    transition:
        transform .3s ease;
}

.agdc-gallery-chooser-button:hover {
    background: #db5821;

    border-color: #db5821;

    color: #fff;
}

.agdc-gallery-chooser-button:hover span {
    transform: translateY(4px);
}


/* =========================================================
   LARGE TABLET
========================================================= */

@media (max-width: 1100px) {

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 64px);
    }

    .agdc-gallery-chooser-grid {
        gap: 20px;
    }

    .agdc-gallery-chooser-card {
        padding: 38px;
    }

    .agdc-gallery-chooser-number {
        top: 25px;
        right: 28px;
    }

    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            32px,
            5vw,
            54px
        );
    }

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .agdc-gallery-chooser {
        padding: 90px 0;
    }

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: min(
            100% - 48px,
            720px
        );
    }

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

        gap: 18px;
    }

    .agdc-gallery-chooser-card {
        aspect-ratio: 4 / 5;

        padding: 30px;
    }

    .agdc-gallery-chooser-number {
        top: 20px;
        right: 22px;

        font-size: 13px;
    }

    .agdc-gallery-chooser-label {
        margin-bottom: 11px;

        font-size: 9px;
    }

    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            30px,
            5.8vw,
            48px
        );
    }

    .agdc-gallery-chooser-content p {
        margin: 18px 0 22px;

        font-size: 14px;

        line-height: 1.6;
    }

    .agdc-gallery-chooser-button {
        min-height: 48px;

        padding: 11px 15px;

        gap: 12px;

        font-size: 9px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 620px) {

    .agdc-gallery-chooser {
        padding: 75px 0;
    }

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 36px);
    }


    /*
     * IMPORTANT:
     * Change to one column.
     *
     * This is the main fix for the screenshot
     * you provided.
     */
    .agdc-gallery-chooser-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    /*
     * Both cards remain exactly the same
     * aspect ratio.
     */
    .agdc-gallery-chooser-card {
        width: 100%;

        aspect-ratio: 4 / 5;

        min-height: 0;

        padding: 30px;
    }


    .agdc-gallery-chooser-number {
        top: 22px;
        right: 24px;

        font-size: 13px;
    }


    .agdc-gallery-chooser-label {
        margin-bottom: 12px;

        font-size: 9px;

        letter-spacing: .14em;
    }


    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            38px,
            12vw,
            58px
        );

        line-height: .88;
    }


    .agdc-gallery-chooser-content p {
        max-width: 100%;

        margin: 20px 0 24px;

        font-size: 14px;

        line-height: 1.7;
    }


    .agdc-gallery-chooser-button {
        min-height: 50px;

        padding: 12px 17px;

        font-size: 9px;

        letter-spacing: .12em;
    }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 420px) {

    .agdc-gallery-chooser {
        padding: 65px 0;
    }

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 28px);
    }


    .agdc-gallery-chooser-grid {
        grid-template-columns: 1fr;

        gap: 15px;
    }


    .agdc-gallery-chooser-card {
        /*
         * Same dimensions for both cards.
         */
        aspect-ratio: 4 / 5;

        padding: 24px;
    }


    .agdc-gallery-chooser-number {
        top: 18px;
        right: 20px;

        font-size: 12px;
    }


    .agdc-gallery-chooser-label {
        margin-bottom: 10px;

        font-size: 8px;

        letter-spacing: .12em;
    }


    .agdc-gallery-chooser-content h3 {
        font-size: clamp(
            34px,
            12vw,
            50px
        );

        line-height: .9;
    }


    .agdc-gallery-chooser-content p {
        margin: 17px 0 21px;

        font-size: 13px;

        line-height: 1.6;
    }


    .agdc-gallery-chooser-button {
        width: auto;

        min-height: 47px;

        padding: 10px 14px;

        font-size: 8px;

        letter-spacing: .11em;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 340px) {

    .agdc-gallery-chooser > .agdc-gallery-container {
        width: calc(100% - 24px);
    }

    .agdc-gallery-chooser-card {
        padding: 21px;

        aspect-ratio: 4 / 5;
    }

    .agdc-gallery-chooser-number {
        top: 15px;
        right: 17px;
    }

    .agdc-gallery-chooser-content h3 {
        font-size: 32px;
    }

    .agdc-gallery-chooser-content p {
        font-size: 12px;
    }

    .agdc-gallery-chooser-button {
        min-height: 44px;

        padding: 9px 12px;

        font-size: 7px;
    }

}