/* =========================================================================
   STORIES / ACF GALLERY  -- 2 large cards per row, captions, lightbox
   ========================================================================= */
.stg {
    --stg-border: #c9c9c9; --stg-ink: #21242a; --stg-muted: #6c7075; --stg-accent: #d9482c;
    max-width: 1320px; margin: 56px auto; padding: 0 clamp(14px, 4vw, 40px);
}
.stg__header { border: 1px solid var(--stg-border); padding: 22px 28px; margin-bottom: 32px; }
.stg__title { margin: 0; font-family: 'Montserrat','Inter',Arial,sans-serif; font-size: 24px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--stg-ink); }
.stg__intro { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--stg-muted); }
.stg__intro p { margin: 0 0 8px; }

/* exactly 2 per row, generous size */
.stg__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 32px; }
.stg__item {
    margin: 0; display: flex; flex-direction: column; background: #fff; border: 1px solid var(--stg-border);
    border-radius: 16px; overflow: hidden; box-shadow: 0 2px 10px rgba(20,20,30,.05);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.stg__item:hover { transform: translateY(-5px); box-shadow: 0 22px 44px rgba(20,20,30,.16); border-color: #b9bcc1; }
/* lone last photo sits centred instead of hanging left */
.stg__grid > .stg__item:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 16px); }
.stg--single .stg__grid { grid-template-columns: minmax(0, 760px); justify-content: center; }
.stg--single .stg__grid > .stg__item:last-child:nth-child(odd) { width: auto; }

.stg__link { display: block; text-decoration: none; cursor: zoom-in; }

/* Generous, consistent image area -- tall enough to read clearly, capped
   so very tall photos don't blow the card out. */
.stg__thumb {
    position: relative; display: block; aspect-ratio: 3 / 2; min-height: 300px; max-height: 460px;
    overflow: hidden; background: #e9ecef;
}
.stg__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .6s ease; }
.stg__item:hover .stg__thumb img { transform: scale(1.05); }
.stg__thumb::after { /* subtle base shade so the enlarge pill is always legible, even on light photos */
    content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.38) 0%, rgba(0,0,0,0) 34%);
    opacity: 0; transition: opacity .3s ease;
}
.stg__item:hover .stg__thumb::after, .stg__link:focus-visible .stg__thumb::after { opacity: 1; }

/* Always-visible "click to enlarge" cue -- not hidden behind hover, so it
   reads clearly as an action rather than something to discover. */
.stg__zoom {
    position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px 8px 10px; border-radius: 999px; background: rgba(20,20,26,.62); backdrop-filter: blur(2px);
    color: #fff; font-family: 'Montserrat','Inter',Arial,sans-serif; font-size: 12.5px; font-weight: 600; letter-spacing: .3px;
    transition: background .25s ease, transform .25s ease;
}
.stg__item:hover .stg__zoom { background: var(--stg-accent); transform: translateY(-2px); }
.stg__zoom svg { flex: none; }

.stg__cap { display: block; padding: 20px 24px 24px; border-top: 1px solid #eef0f2; }
.stg__cap-title { display: block; font-family: 'Montserrat','Inter',Arial,sans-serif; font-size: 19px; font-weight: 700; line-height: 1.35; color: var(--stg-ink); }
.stg__cap-text { display: block; margin-top: 8px; font-size: 14.5px; line-height: 1.6; color: var(--stg-muted); }

@media (max-width: 900px) {
    .stg__thumb { min-height: 240px; }
    .stg__cap { padding: 16px 18px 18px; }
    .stg__cap-title { font-size: 17px; }
}
@media (max-width: 767px) {
    .stg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }
    .stg__grid > .stg__item:last-child:nth-child(odd) { width: calc(50% - 6px); }
    .stg__item { border-radius: 11px; }
    .stg__thumb { min-height: 130px; aspect-ratio: 1 / 1; }
    .stg__thumb::after { opacity: 1; background: linear-gradient(to top, rgba(0,0,0,.42) 0%, rgba(0,0,0,0) 55%); }
    .stg__zoom { right: 8px; bottom: 8px; padding: 6px 6px; }
    .stg__zoom span { display: none; } /* icon only on small cards */
    .stg__cap { padding: 10px 12px 14px; }
    .stg__cap-title { font-size: 13.5px; line-height: 1.3; }
    .stg__cap-text { font-size: 12px; margin-top: 4px; }
    .stg__header { padding: 18px 20px; } .stg__title { font-size: 20px; }
}

/* ---------------- lightbox ---------------- */
.stg-lb { position: fixed; inset: 0; z-index: 99999; display: none; flex-direction: column; align-items: center; justify-content: center; padding: 56px 64px 24px; background: rgba(8,10,14,.93); }
.stg-lb.is-open { display: flex; animation: stgFade .18s ease; }
@keyframes stgFade { from { opacity: 0; } to { opacity: 1; } }
.stg-lb__stage { flex: 1; min-height: 0; width: 100%; display: flex; align-items: center; justify-content: center; }
.stg-lb__img { max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 6px; box-shadow: 0 20px 60px rgba(0,0,0,.6); user-select: none; -webkit-user-drag: none; transition: opacity .15s; }
.stg-lb__img.is-loading { opacity: .25; }
.stg-lb__cap { width: 100%; max-width: 900px; padding-top: 14px; text-align: center; color: #fff; }
.stg-lb__title { font-size: 17px; font-weight: 700; line-height: 1.35; }
.stg-lb__text { margin-top: 4px; font-size: 14px; line-height: 1.5; color: rgba(255,255,255,.75); }
.stg-lb__count { margin-top: 8px; font-size: 12px; letter-spacing: 1px; color: rgba(255,255,255,.5); }
.stg-lb__btn { position: absolute; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background .2s; }
.stg-lb__btn:hover, .stg-lb__btn:focus-visible { background: var(--stg-accent); outline: none; }
.stg-lb__close { top: 12px; right: 14px; }
.stg-lb__prev { left: 12px; top: 50%; margin-top: -22px; }
.stg-lb__next { right: 12px; top: 50%; margin-top: -22px; }
.stg-lb--single .stg-lb__prev, .stg-lb--single .stg-lb__next, .stg-lb--single .stg-lb__count { display: none; }
body.stg-lb-open { overflow: hidden; }
@media (max-width: 767px) {
    .stg-lb { padding: 56px 12px 16px; }
    .stg-lb__prev, .stg-lb__next { top: auto; bottom: 14px; margin: 0; width: 40px; height: 40px; }
    .stg-lb__prev { left: 14px; } .stg-lb__next { right: 14px; }
    .stg-lb__cap { padding: 12px 52px 0; } .stg-lb__title { font-size: 15px; }
}