/* ZGV V2: scoped photo-display corrections from the editor's 9 October screenshot.
 * Source attachments, captions, article status and editorial selection are unchanged.
 * Desktop photo fixes affect posts 21 and 25; the mobile section also refines supporting and Extra cards.
 */

/* Remove the tiny full-length strip and its blurred side panels.
 * A taller, full-width window keeps the lantern and the person's head/upper body
 * together; it is a display crop, not a rewritten attachment.
 */
body.zgv-v2 .secondary[data-post-id="25"] .story-photo.media-portrait {
    height: 240px;
    background: var(--deep);
}
body.zgv-v2 .secondary[data-post-id="25"] .media-portrait::before {
    display: none;
}
body.zgv-v2 .secondary[data-post-id="25"] .media-portrait img {
    object-fit: cover;
    object-position: 50% 37%;
    transform: none;
}

/* The lead's old near-square cover cut the tram off on the left and devoted most
 * of the visible photo to sky. Use a wider photo window above the text, align
 * with the lower-left of the existing landscape, and fade into the navy base.
 */
body.zgv-v2 .lead[data-post-id="21"] .story-photo {
    inset: 0 0 auto;
    height: 76%;
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 63%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 63%, transparent 100%);
}
body.zgv-v2 .lead[data-post-id="21"] .story-photo img {
    object-position: 0% 100%;
}

@media (max-width: 767px) {
    body.zgv-v2 .secondary[data-post-id="25"] .story-photo.media-portrait {
        height: 170px;
    }
    body.zgv-v2 .lead[data-post-id="21"] .story-photo {
        height: 72%;
    }
}
@media (max-width: 374px) {
    /* Preserve the already-approved single-row mobile card at the narrowest size. */
    body.zgv-v2 .secondary[data-post-id="25"] .story-photo.media-portrait {
        height: 100%;
        min-height: 180px;
    }
}

/* Mobile QA 0.1.3: readable supporting headlines and partner cards.
 * Desktop/tablet rules above 600px and editorial queries are unchanged.
 */
@media (max-width: 600px) {
    body.zgv-v2 .supporting {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: auto;
        gap: 12px;
    }
    body.zgv-v2 .supporting .secondary .story-link {
        display: grid;
        grid-template-columns: clamp(100px, 30vw, 132px) minmax(0, 1fr);
        align-items: stretch;
        min-height: 156px;
        height: auto;
    }
    body.zgv-v2 .supporting .secondary .story-photo,
    body.zgv-v2 .supporting .secondary[data-post-id="25"] .story-photo.media-portrait {
        height: auto;
        min-height: 156px;
        align-self: stretch;
    }
    body.zgv-v2 .supporting .secondary .story-photo img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    body.zgv-v2 .supporting .secondary .story-copy {
        min-width: 0;
        padding: 12px;
    }
    body.zgv-v2 .supporting .secondary h2 {
        font-size: 20px;
        line-height: 1.18;
        letter-spacing: -.025em;
        margin: 7px 0;
    }
    body.zgv-v2 .supporting .secondary .kicker {
        font-size: 9px;
        letter-spacing: .05em;
    }
    body.zgv-v2 .supporting .secondary .story-meta {
        font-size: 10px;
        line-height: 1.45;
    }
    body.zgv-v2 .extra { padding: 18px; }
    body.zgv-v2 .extra-grid { gap: 22px; }
    body.zgv-v2 .extra-grid .story-link {
        display: block;
        height: auto;
    }
    body.zgv-v2 .extra-grid .story-photo {
        width: 100%;
        height: auto;
        aspect-ratio: 3 / 2;
    }
    body.zgv-v2 .extra-grid .story-copy { padding: 12px 0 0; }
    body.zgv-v2 .extra-grid h2 {
        font-size: 21px;
        line-height: 1.2;
        letter-spacing: -.025em;
        margin: 0 0 8px;
    }
    body.zgv-v2 .extra-grid .story-meta {
        font-size: 11px;
        line-height: 1.45;
    }
    body.zgv-v2 .extra-grid .story + .story {
        border-top: 1px solid var(--line);
        padding-top: 20px;
    }
}


/* ZGV nav tuning: centered desktop navigation + uppercase labels. */
body.zgv-v2 .nav-inner{position:relative}
body.zgv-v2 .nav-inner>a:not(.nav-extra){
    text-transform:uppercase;
    letter-spacing:.085em;
    font-size:13px;
    font-weight:700;
}
@media(min-width:768px){
    body.zgv-v2 .nav-inner{justify-content:center}
}
@media(min-width:1200px){
    body.zgv-v2 .nav-inner .nav-extra{
        position:absolute;
        right:0;
        margin-left:0;
    }
}
@media(max-width:767px){
    body.zgv-v2 .nav-inner{justify-content:flex-start}
    body.zgv-v2 .nav-inner>a:not(.nav-extra){
        font-size:11px;
        letter-spacing:.07em;
    }
}