/* ==========================================
   Story Card (shared visual language for both
   the static pattern and the live Query Loop)
========================================== */

.narrative-story-card,
.narrative-story-grid .wp-block-post {
    max-width: 900px;
    margin: 0 auto var(--space-6);
}

.story-card-image,
.narrative-story-grid .wp-block-post-featured-image {
    display: block;
    margin-bottom: 0;
}

.story-card-image img,
.narrative-story-grid .wp-block-post-featured-image img {
    width: 100%;
    height: auto;
    display: block;
}

.story-card-content {
    padding: var(--space-4) 0;
}

.story-card-title,
.narrative-story-grid .wp-block-post-title {
    margin: 0 0 var(--space-2);
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

.story-card-title a,
.narrative-story-grid .wp-block-post-title a {
    color: inherit;
    text-decoration: none;
}

.story-divider {
    width: 70px;
    height: 1px;
    background: var(--color-heading);
    margin: var(--space-3) 0;
}

.story-location {
    margin-bottom: var(--space-3);
    color: var(--color-muted);
    font-style: italic;
    letter-spacing: .04em;
}

.story-excerpt,
.narrative-story-grid .wp-block-post-excerpt {
    max-width: 38rem;
    line-height: 1.8;
    color: var(--color-muted);
    margin-bottom: var(--space-4);
}

.story-link,
.narrative-story-grid .wp-block-read-more {
    display: inline-block;
    text-decoration: none;
    color: var(--color-heading);
    font-weight: 500;
    transition: padding-left .25s ease;
}

.story-link:hover,
.narrative-story-grid .wp-block-read-more:hover {
    padding-left: 8px;
    opacity: 1;
}

.narrative-story-grid .wp-block-post-date {
    color: var(--color-muted);
    font-size: .85rem;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-bottom: var(--space-2);
    display: block;
}

/* ==========================================
   Editorial Photo Grid (jacobimages.com-style
   edge-to-edge gallery with native lightbox)
========================================== */

.narrative-editorial-gallery {
    margin-block: 0;
}

/* Guaranteed edge-to-edge, regardless of the block editor's own
   alignfull margin math holding up through nested contexts. */
.narrative-photo-grid.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.narrative-photo-grid {
    gap: 4px !important;
    margin: 0 !important;
}

.narrative-photo-grid .wp-block-image {
    margin: 0;
}

.narrative-photo-grid .wp-block-image img {
    /* Uncropped: each photo keeps its own natural (landscape) ratio,
       so row heights vary slightly image to image -- this is intentional. */
    width: 100%;
    height: auto;
    display: block;
    transition: opacity .25s ease;
}

.narrative-photo-grid .wp-block-image:hover img {
    opacity: .85;
}

/* ==========================================
   Hero Slideshow (pure CSS crossfade, no JS)
========================================== */

.narrative-slideshow {
    position: relative;
    height: 100vh;
    overflow: hidden;
    margin-block: 0;
}

@supports (height: 100svh) {
    .narrative-slideshow {
        height: 100svh;
    }
}

/* Guaranteed edge-to-edge, same technique as the photo grid. */
.narrative-slideshow.alignfull {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}

.narrative-slideshow .narrative-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    animation: narrative-slide-fade 25s infinite;
}

.narrative-slideshow .narrative-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Tuned for exactly 5 slides: each gets a 5s-apart delay so they
   take turns crossfading in and out over a 25s total cycle. */
.narrative-slideshow .narrative-slide:nth-child(1) { animation-delay: 0s; }
.narrative-slideshow .narrative-slide:nth-child(2) { animation-delay: 5s; }
.narrative-slideshow .narrative-slide:nth-child(3) { animation-delay: 10s; }
.narrative-slideshow .narrative-slide:nth-child(4) { animation-delay: 15s; }
.narrative-slideshow .narrative-slide:nth-child(5) { animation-delay: 20s; }

@keyframes narrative-slide-fade {
    0%   { opacity: 0; }
    4%   { opacity: 1; }
    16%  { opacity: 1; }
    20%  { opacity: 0; }
    100% { opacity: 0; }
}

/* Respect users who've asked for reduced motion: freeze on the
   first slide instead of animating. */
@media (prefers-reduced-motion: reduce) {
    .narrative-slideshow .narrative-slide {
        animation: none;
        opacity: 0;
    }

    .narrative-slideshow .narrative-slide:first-child {
        opacity: 1;
    }
}

/* Single story template */
.narrative-single-meta {
    color: var(--color-muted);
    font-style: italic;
    margin-bottom: var(--space-5);
}

.narrative-post-navigation a {
    font-family: var(--font-serif);
    font-size: 1.3rem;
}