/* Creative showcase — keep the phone collage, give it room to breathe. */

.brand-creative-stage {
    padding: 2.1rem;
}

.brand-creative-stage .brand-creative-grid {
    align-items: center;
    grid-template-columns: minmax(0, 1fr) minmax(250px, 300px) minmax(0, 1fr);
    gap: 1.5rem;
}

.brand-creative-stage .brand-creative-column {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 1.5rem;
    min-height: 0;
}

.brand-creative-stage .brand-campaign-card,
.brand-creative-stage .brand-campaign-card-tall,
.brand-creative-stage .brand-campaign-card-short {
    min-height: 20.5rem;
    height: 100%;
    border-radius: 1.65rem;
}

.brand-creative-stage .brand-campaign-card-tall,
.brand-creative-stage .brand-campaign-card-short {
    min-height: 20.5rem;
}

.brand-creative-stage .brand-campaign-card:after {
    background: linear-gradient(180deg, hsla(0, 0%, 4%, 0) 28%, hsla(0, 0%, 4%, 0.72) 72%, hsla(0, 0%, 4%, 0.94));
}

.brand-campaign-media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
}

.brand-creative-stage .brand-campaign-copy {
    padding: 1.25rem 1.2rem 1.35rem;
}

.brand-creative-stage .brand-campaign-title {
    font-size: clamp(1.2rem, 1.5vw, 1.55rem);
    line-height: 1.08;
}

.brand-creative-stage .brand-campaign-text {
    display: block;
    overflow: visible;
    margin-top: 0.4rem;
    font-size: 0.9rem;
    line-height: 1.4;
}

.brand-creative-stage .brand-phone-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.brand-creative-stage .brand-phone-shell {
    width: min(100%, 300px);
}

.brand-creative-more {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.brand-creative-more .brand-campaign-card,
.brand-creative-more .brand-campaign-card-tall,
.brand-creative-more .brand-campaign-card-short {
    min-height: 20.5rem;
    height: 20.5rem;
}

.brand-creative-more .brand-campaign-text {
    display: block;
}

.brand-creative-stage .brand-campaign-image {
    transition: object-position 4s linear, transform 0.45s ease;
}

.brand-creative-more .brand-campaign-image {
    transition: object-position 4s linear, transform 0.45s ease;
}

@media (max-width: 1100px) {
    .brand-creative-stage {
        display: block;
        padding: 1.15rem;
    }

    .brand-creative-stage .brand-creative-grid,
    .brand-creative-more {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.9rem;
    }

    .brand-creative-stage .brand-creative-column {
        display: contents;
    }

    .brand-creative-stage .brand-phone-stage {
        grid-column: 1 / -1;
        order: -1;
        padding: 0.15rem 0 0.55rem;
    }

    .brand-show-desktop {
        display: none !important;
    }

    .brand-campaign-card-last-mobile {
        grid-column: 1 / -1;
    }

    .brand-creative-stage .brand-phone-shell {
        width: min(58%, 270px);
    }

    .brand-creative-more {
        margin-top: 0.9rem;
    }

    .brand-creative-stage .brand-campaign-card,
    .brand-creative-stage .brand-campaign-card-tall,
    .brand-creative-stage .brand-campaign-card-short,
    .brand-creative-more .brand-campaign-card,
    .brand-creative-more .brand-campaign-card-tall,
    .brand-creative-more .brand-campaign-card-short {
        display: grid;
        grid-template-rows: minmax(11rem, 1fr) auto;
        height: 23.25rem;
        min-height: 23.25rem;
        overflow: hidden;
    }

    .brand-campaign-card-last-mobile {
        height: 23.25rem;
        min-height: 23.25rem;
    }

    .brand-creative-stage .brand-campaign-card:after,
    .brand-creative-more .brand-campaign-card:after {
        display: none;
    }

    .brand-creative-stage .brand-campaign-media,
    .brand-creative-more .brand-campaign-media {
        position: relative;
        inset: auto;
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        touch-action: pan-y;
        background: #07090a;
    }

    .brand-creative-stage .brand-campaign-image,
    .brand-creative-more .brand-campaign-image {
        position: relative;
        inset: auto;
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        flex: none;
        object-fit: contain;
        object-position: top center;
        border-radius: 0;
        pointer-events: none;
    }

    .brand-creative-stage .brand-campaign-copy,
    .brand-creative-more .brand-campaign-copy {
        position: relative;
        inset: auto;
        padding: 0.9rem 0.95rem 1.05rem;
        background: rgba(6, 10, 11, 0.92);
        border-radius: 0 0 1.65rem 1.65rem;
    }

    .brand-creative-stage .brand-campaign-title {
        font-size: 1.08rem;
        line-height: 1.15;
    }

    .brand-creative-stage .brand-campaign-text,
    .brand-creative-more .brand-campaign-text {
        display: block;
        overflow: visible;
        font-size: 0.8rem;
        line-height: 1.4;
        -webkit-line-clamp: unset;
    }

    .brand-creative-stage .brand-phone-title {
        font-size: 1.15rem;
        line-height: 1.05;
    }

    .brand-creative-stage .brand-campaign-image {
        transition: object-position 4s linear, transform 0.45s ease;
    }

    .brand-creative-stage .brand-reels-track {
        animation-duration: 32s;
    }
}

@media (hover: none) {
    .brand-campaign-card:hover .brand-campaign-image,
    .brand-creative-stage .brand-campaign-card:hover .brand-campaign-image {
        object-position: top center;
        transform: none;
    }

    .brand-creative-stage .brand-campaign-image {
        transition: none;
    }
}

@media (max-width: 640px) {
    .brand-creative-stage {
        padding: 0.9rem;
        border-radius: 1.4rem;
        gap: 0.8rem;
    }

    .brand-creative-stage .brand-creative-grid,
    .brand-creative-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.8rem;
    }

    .brand-creative-stage .brand-phone-shell {
        width: 58%;
        max-width: 230px;
    }

    .brand-creative-stage .brand-campaign-card,
    .brand-creative-stage .brand-campaign-card-tall,
    .brand-creative-stage .brand-campaign-card-short,
    .brand-creative-more .brand-campaign-card,
    .brand-creative-more .brand-campaign-card-tall,
    .brand-creative-more .brand-campaign-card-short,
    .brand-campaign-card-last-mobile {
        height: 21.75rem;
        min-height: 21.75rem;
        border-radius: 1.25rem;
        overflow: hidden;
    }

    .brand-creative-stage .brand-campaign-image,
    .brand-creative-more .brand-campaign-image {
        height: auto;
    }

    .brand-creative-stage .brand-campaign-label {
        font-size: 0.62rem;
        letter-spacing: 0.12em;
        margin-bottom: 0.3rem;
    }

    .brand-creative-stage .brand-campaign-title {
        font-size: 0.96rem;
    }

    .brand-creative-stage .brand-campaign-copy,
    .brand-creative-more .brand-campaign-copy {
        padding: 0.8rem 0.8rem 0.9rem;
        border-radius: 0 0 1.25rem 1.25rem;
    }

    .brand-creative-stage .brand-phone-title {
        font-size: 1.2rem;
    }

    .brand-creative-stage .brand-phone-text {
        font-size: 0.78rem;
    }
}

@media (max-width: 359px) {
    .brand-creative-stage .brand-creative-grid,
    .brand-creative-more {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}