/* ==========================================================================
   Editorial Page Headers (Photography Gallery & Video Portfolio)
   High-End Publication / Gallery Masthead Aesthetics (Clean Title & Subtitle)
   ========================================================================== */

.page-editorial-header {
    width: 100%;
    margin: 0 auto;
    padding: 12px 20px 36px;
    text-align: center;
    box-sizing: border-box;
}

.page-editorial-inner {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* Primary Headline: Rock-solid font sizing, weight, and line-height */
.page-editorial-header h1.page-editorial-title,
.page-editorial-title {
    font-family: var(--font-sans, Inter, -apple-system, sans-serif);
    font-size: 38px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.035em !important;
    color: #111827 !important;
    margin: 0 0 10px 0 !important;
    max-width: 720px;
}

/* Subtitle Descriptor */
.page-editorial-desc {
    font-family: var(--font-sans, Inter, -apple-system, sans-serif);
    font-size: 15.5px !important;
    font-weight: 400 !important;
    line-height: 1.6 !important;
    color: #52525b !important;
    max-width: 600px;
    margin: 0 auto;
}

/* Responsive Adjustments */
@media (max-width: 1023px) {
    .page-editorial-header h1.page-editorial-title,
    .page-editorial-title {
        font-size: 30px !important;
    }
}

@media (max-width: 767px) {
    .page-editorial-header {
        padding: 6px 16px 22px !important;
    }

    .page-editorial-header h1.page-editorial-title,
    .page-editorial-title {
        font-size: 24px !important;
        margin-bottom: 8px !important;
    }

    .page-editorial-desc {
        font-size: 13.5px !important;
        line-height: 1.5 !important;
    }
}

/* ==========================================================================
   Gallery Grid Card Upward Float Entrance Animation
   Smoothly cascades cards up from bottom when Masonry initializes
   ========================================================================== */

@keyframes cardSlideUp {
    0% {
        opacity: 0;
        transform: translateY(48px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.post-feed.initialized .grid-item figure.post {
    animation: cardSlideUp 0.65s cubic-bezier(0.16, 1, 0.3, 1) backwards;
    animation-delay: 0.15s;
}

/* Staggered entrance timing for initial gallery cards (child 1 is grid-sizer) */
.post-feed.initialized .grid-item:nth-child(2) figure.post  { animation-delay: 0.04s; }
.post-feed.initialized .grid-item:nth-child(3) figure.post  { animation-delay: 0.08s; }
.post-feed.initialized .grid-item:nth-child(4) figure.post  { animation-delay: 0.12s; }
.post-feed.initialized .grid-item:nth-child(5) figure.post  { animation-delay: 0.16s; }
.post-feed.initialized .grid-item:nth-child(6) figure.post  { animation-delay: 0.20s; }
.post-feed.initialized .grid-item:nth-child(7) figure.post  { animation-delay: 0.24s; }
.post-feed.initialized .grid-item:nth-child(8) figure.post  { animation-delay: 0.28s; }
.post-feed.initialized .grid-item:nth-child(9) figure.post  { animation-delay: 0.32s; }
.post-feed.initialized .grid-item:nth-child(10) figure.post { animation-delay: 0.36s; }
.post-feed.initialized .grid-item:nth-child(11) figure.post { animation-delay: 0.40s; }
.post-feed.initialized .grid-item:nth-child(12) figure.post { animation-delay: 0.44s; }
.post-feed.initialized .grid-item:nth-child(13) figure.post { animation-delay: 0.48s; }
.post-feed.initialized .grid-item:nth-child(14) figure.post { animation-delay: 0.52s; }
.post-feed.initialized .grid-item:nth-child(15) figure.post { animation-delay: 0.56s; }
.post-feed.initialized .grid-item:nth-child(16) figure.post { animation-delay: 0.60s; }
.post-feed.initialized .grid-item:nth-child(17) figure.post { animation-delay: 0.64s; }

/* Accessibility: respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .post-feed.initialized .grid-item figure.post {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}