/* ============================================================
   Editorial gallery layout — image-focused rhythm
   Shared across all gallery pages. Pairs with editorial-gallery.js.
   Acrylicize-informed: few large images, generous whitespace,
   natural aspect ratios (no forced crop), quiet motion.
   ============================================================ */

.editorial {
    --ed-gap: clamp(2.75rem, 6vw, 6rem);  /* whitespace between blocks */
    --ed-pad: clamp(1rem, 5vw, 4rem);     /* side padding */
    --ed-full-max-h: 80vh;                /* cap so tall images don't blow past the viewport */
    --ed-full-max-w: 1080px;              /* contained full-width image */
    --ed-pair-max-w: 980px;               /* contained two-up row */
}

.ed-block { margin-top: var(--ed-gap); }
.ed-block:first-child { margin-top: 0; }

/* Full-width single — large impact image.
   The figure hugs the image at any aspect (no letterbox bars): landscapes cap
   at 1400px wide, tall portraits cap at viewport height, and the leftover space
   is just white page — never a grey box. */
.ed-full { padding: 0 var(--ed-pad); text-align: center; }
.ed-full .ed-figure { display: inline-block; max-width: 100%; vertical-align: top; }
.ed-full .ed-frame { display: block; }
.ed-full .ed-frame img {
    width: auto;
    height: auto;
    max-width: min(100%, var(--ed-full-max-w));
    max-height: var(--ed-full-max-h);
}

/* Two-up pair — contained, collapses on mobile */
.ed-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(0.75rem, 2vw, 1.75rem);
    max-width: var(--ed-pair-max-w);
    margin-left: auto;
    margin-right: auto;
    padding: 0 var(--ed-pad);
    align-items: start;
}
@media (max-width: 680px) {
    .ed-pair { grid-template-columns: 1fr; gap: 2rem; }
}

/* Figure / frame */
.ed-figure { margin: 0; cursor: zoom-in; }
.ed-frame {
    overflow: hidden;
    background: transparent;
    border-radius: 3px;
    line-height: 0;
}
.ed-frame img {
    width: 100%;
    height: auto;             /* natural aspect — never crop */
    display: block;
    transition: transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}
.ed-figure:hover .ed-frame img { transform: scale(1.03); }

/* Scroll reveal */
.reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1; transform: none; transition: none; }
    .ed-frame img { transition: none; }
    .ed-figure:hover .ed-frame img { transform: none; }
}