/* Explain: Editorial spacing, gallery grid, and sticky layout helpers */
.section-pad {
    padding-bottom: clamp(5rem, 10vw, 10rem);
    padding-top: clamp(5rem, 10vw, 10rem);
}

.hero-stage::after {
    background-image: radial-gradient(circle at 20% 20%, rgba(194, 161, 138, 0.18), transparent 34%), radial-gradient(circle at 80% 70%, rgba(166, 106, 63, 0.16), transparent 38%);
    content: "";
    inset: 0;
    pointer-events: none;
    position: absolute;
}

.gallery-grid {
    display: grid;
    gap: 1rem;
    grid-auto-flow: dense;
    grid-template-columns: 1fr;
}

.gallery-item {
    aspect-ratio: 4 / 5;
    background: #080808;
    border: 1px solid rgba(244, 239, 231, 0.12);
    border-radius: var(--radius-large);
    overflow: hidden;
    position: relative;
}

.gallery-wide {
    aspect-ratio: 16 / 10;
}

.gallery-tall {
    aspect-ratio: 3 / 5;
}

.sticky-panel {
    align-self: start;
}

@media (min-width: 768px) {
    .gallery-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .gallery-wide {
        grid-column: span 2;
    }
}

@media (min-width: 1024px) {
    .gallery-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .gallery-wide {
        grid-column: span 2;
    }

    .gallery-tall {
        grid-row: span 2;
    }

    .sticky-panel {
        position: sticky;
        top: 7rem;
    }
}