/**
 * moa/assets/css/moments.css   (v3 — single-flow gallery, MOA type system)
 *
 * Clones the Danielle/Lucas single-story LAYOUT, in MOA's own typography & motion.
 * SELF-CONTAINED — depends on NOTHING from single-story.css. Everything moments
 * needs (the fade-up keyframe, the Gutenberg block-width system) is defined below.
 * Header/footer use the site's DEFAULT chrome (transparent overlay, like the homepage).
 *
 * Sections (top → bottom):
 *   HERO (template)  — full-screen featured photo, text overlaid bottom-left
 *   ABOUT            — eyebrow + text-left + two offset verticals
 *   PARALLAX ×2      — full-width image (JS parallax) + a quad of 4 verticals (JS drift)
 *   SLIDER           — full-width horizontal filmstrip, drag (desktop) / swipe (mobile)
 *   CTA ×2           — staggered image pair + serif statement + button (→ Weddings / Christenings)
 *
 * Type tokens: var(--wp--preset--font-family--lora | noir-pro)
 * Colour tokens: var(--wp--preset--color--white | black | accent)
 * Signature easing: cubic-bezier(0.16, 1, 0.3, 1)
 *
 * Motion hooks driven by moments.js (graceful: no JS = static, still readable).
 */

 :root { --moments-gap: 10px; }

 /* ============================================================
    0. FOUNDATION — self-contained (replaces what we used to borrow
       from single-story.css). Block widths match theme.json:
       contentSize 800px / wideSize 1200px.
    ============================================================ */
 @keyframes moaMomentsFadeUp {
     to { opacity: 1; transform: translateY(0); }
 }
 
 .moa-moments__body { width: 100%; margin: 0; padding: 0; }
 
 /* default block width — centered narrow column (contentSize) */
 .moa-moments__body > * {
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
     padding-left: 1.2rem;
     padding-right: 1.2rem;
     margin-bottom: 2rem;
 }
 .moa-moments__body > .alignwide { max-width: 1200px; }
 .moa-moments__body > .alignfull {
     max-width: none;
     width: 100%;
     padding-left: 0;
     padding-right: 0;
 }
 .moa-moments__body p {
     font-family: var(--wp--preset--font-family--noir-pro);
     color: var(--wp--preset--color--black);
 }
 .moa-moments__body img,
 .moa-moments__body figure { max-width: 100%; height: auto; }
 
 /* ============================================================
    1. HERO — full-screen photo, text overlaid bottom-left
       (rendered by page-moments.php; featured image = LCP)
    ============================================================ */
 .moa-moments .moments-hero {
     position: relative;
     width: 100%;
     height: 100vh;
     min-height: 600px;
     margin: 0;
     overflow: hidden;
     background-color: #1a1a1a;
 }

 .moa-moments .moments-hero::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000;
    opacity: .1;
    z-index: 1;
 }
 .moments-hero__img {
     position: absolute;
     inset: 0;
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: center;
 }
 .moments-hero__overlay {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: flex-end;
     justify-content: flex-start;
     padding: clamp(2rem, 6vw, 6rem);
     background: linear-gradient(to top,
         rgba(0,0,0,0.62) 0%,
         rgba(0,0,0,0.12) 34%,
         rgba(0,0,0,0) 62%);
     z-index: 2;
 }
 .moments-hero__text { max-width: 1100px; text-align: left; }
 
 /* hero title motion — self-contained fade-up (moaMomentsFadeUp, defined above) */
 .moments-hero__eyebrow {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(0.8rem, 1.447vw);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: #fff;
     margin: 0 0 .5rem;
     opacity: 0;
     transform: translateY(20px);
     animation: moaMomentsFadeUp 1.2s 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 .moments-hero__title {
     font-family: var(--wp--preset--font-family--lora);
     font-weight: 400;
     font-size: max(2.8rem, 9vw);
     line-height: 1.0;
     letter-spacing: 2px;
     text-transform: uppercase;
     color: #fff;
     margin: 0;
     opacity: 0;
     transform: translateY(30px);
     animation: moaMomentsFadeUp 1.6s 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
 }
 .moments-hero__meta {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(0.8rem, 1.2vw);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: #fff;
     margin: 1.75rem 0 0;
     opacity: 0;
     transform: translateY(15px);
     animation: moaMomentsFadeUp 1.0s 1.0s cubic-bezier(0.22, 1, 0.36, 1) forwards;
 }
 
 /* shared eyebrow + serif helpers (body sections, black on white) */
 .moments-eyebrow {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(0.9rem, 1.447vw);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--wp--preset--color--black);
     opacity: 0.85;
     margin: 0;
 }
 
 /* ============================================================
    2. ABOUT — eyebrow + text-left + two offset verticals
       (native blocks: group > paragraph + columns > column > image)
    ============================================================ */
 .moa-moments__body > .moments-about {
     max-width: 1200px;
     margin: clamp(4rem, 7vw, 7.5rem) auto !important;
     padding: 0 clamp(1.1rem, 4vw, 4rem);
 }
 .moments-about__eyebrow { margin: 0 0 clamp(2rem, 5vw, 4rem) !important; text-align: left; }
 .moments-about__grid {
     gap: clamp(2rem, 5vw, 5rem) !important;
     align-items: flex-start;
     margin: 0 !important;
 }
 .moments-about__grid > .wp-block-column { flex: 1 1 0 !important; padding: 0 !important; }
 .moments-about__text {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(1.0625rem, 1.15vw);
     line-height: 1.7;
     color: var(--wp--preset--color--black);
     max-width: 46ch;
     margin: 0 0 1.4em;
 }
 .moments-about__text:last-of-type { margin-bottom: 0; }
 .moments-about figure.wp-block-image { margin: 0; }
 .moments-about__img--sub { margin-top: clamp(3rem, 5.5vw, 7rem) !important; width: 82%; }
 .moments-about__img--main { width: 100%; }
 .moments-about__right { padding-top: clamp(2rem, 6vw, 6rem) !important; }
 .moments-about img { display: block; width: 100%; height: auto; will-change: transform; }
 
 /* word-reveal spans (About text) */
 .moments-word-reveal .moments-word {
     display: inline-block;
     will-change: opacity, transform;
 }
 
 /* ============================================================
    3. PARALLAX — full-width image (JS-driven vertical parallax)
    ============================================================ */
 .moa-moments__body > .moments-parallax {
     position: relative;
     width: 100%;
     height: 100vh;
     min-height: 480px;
     margin: clamp(3rem, 5.5vw, 6rem) 0 !important;
     margin-bottom: clamp(1rem, 5.5vw, 6rem)!important;
     overflow: hidden;
 }
 .moments-parallax img {
     position: absolute;
     left: 0;
     top: -8%;
     width: 100%;
     height: 130%!important;
     object-fit: cover;
     object-position: center;
     max-width: none !important;
     will-change: transform;
 }
 
 /* desktop: extra air ONLY between About and the first parallax that follows it
    (adjacency selector → never touches the 2nd parallax, the quads, or About) */
 @media (min-width: 769px) {
     .moa-moments__body > .moments-about + .moments-parallax {
         margin-top: clamp(7rem, 12vw, 12rem) !important;
     }
 }
 
 /* ============================================================
    4. QUAD — two columns × two verticals, staggered (no scroll motion:
    it sits between two parallaxes that already move, so drift here dizzies)
    ============================================================ */
 .moments-quad {
     display: flex !important;
     gap: clamp(1.5rem, 3vw, 3rem) !important;
     align-items: flex-start;
     max-width: 1100px;
     margin: clamp(1rem, 5vw, 5rem) auto clamp(2.5rem, 5vw, 5rem) !important;
     padding: 0 clamp(1.1rem, 4vw, 4rem);
 }
 .moments-quad > .wp-block-column {
     flex: 1 1 0 !important;
     padding: 0 !important;
     display: flex;
     flex-direction: column;
     gap: clamp(2rem, 4vw, 4rem);          /* vertical gap between the 2 images in a column */
 }
 .moments-quad figure.wp-block-image { margin: 0; }
 .moments-quad img { width: 100%; height: auto; display: block; }
 
 /* stagger: offset one column so the pair reads as a scattered grid.
    --a → left pushed down (right column sits higher, like the reference)
    --b → mirror (right pushed down) for rhythm between the two sections */
 .moments-quad--a > .wp-block-column:nth-child(1) { margin-top: clamp(3rem, 7vw, 7rem); }
 .moments-quad--b > .wp-block-column:nth-child(2) { margin-top: clamp(3rem, 7vw, 7rem); }
 
 /* ============================================================
    5. SLIDER — full-width filmstrip, fixed height, drag/swipe
    ============================================================ */
 .moments-slider__head {
     max-width: 1200px;
     margin: clamp(4rem, 7vw, 7.5rem) auto clamp(2rem, 4vw, 3rem);
     padding: 0 clamp(1.1rem, 4vw, 3rem);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 0.6rem;
     text-align: center;
 }
 .moments-slider__eyebrow {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(0.9rem, 1.447vw);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--wp--preset--color--black);
     opacity: 0.85;
     margin: 0;
 }
 .moments-slider__title {
     font-family: var(--wp--preset--font-family--lora);
     font-weight: 400;
     font-size: clamp(1.6rem, 3.5vw, 2.6rem);
     line-height: 1.15;
     color: var(--wp--preset--color--black);
     margin: 0;
 }
 .moments-slider__nav { display: flex; gap: clamp(1.25rem, 3vw, 2.25rem); margin-top: 0.35rem; }
 .moments-slider__btn {
     -webkit-appearance: none; appearance: none;
     background: none; border: 0; padding: 0.5rem 0; cursor: pointer;
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(0.68rem, 0.72vw);
     letter-spacing: 0.08em;
     text-transform: uppercase;
     color: var(--wp--preset--color--black);
     opacity: 0.55;
     display: inline-flex; align-items: center; gap: 0.5rem;
     transition: opacity 0.3s ease;
 }
 .moments-slider__btn:hover { opacity: 1; }
 .moments-slider__btn svg { display: block; width: 15px; height: auto; }
 
 .moments-slider {
     display: flex !important;
     gap: var(--moments-gap);
     height: 70vh;
     min-height: 420px;
     margin-bottom: clamp(4rem, 7vw, 7.5rem) !important;
     overflow-x: auto;
     overflow-y: hidden;
     scroll-snap-type: x mandatory;
     -webkit-overflow-scrolling: touch;
     padding: 0 clamp(1.1rem, 4vw, 3rem) !important;
     scrollbar-width: none;
     cursor: grab;
 }
 .moments-slider::-webkit-scrollbar { display: none; }
 .moments-slider.is-dragging { cursor: grabbing; }
 .moments-slider.is-dragging,
 .moments-slider.is-snapping { scroll-snap-type: none; }
 .moments-slider > figure,
 .moments-slider > .wp-block-image {
     flex: 0 0 auto !important;
     height: 100%;
     max-width: none !important;
     margin: 0 !important;
     scroll-snap-align: center;
 }
 .moments-slider img {
     height: 100%;
     width: auto;
     display: block;
     object-fit: cover;
     -webkit-user-drag: none;
     user-select: none;
 }
 
 /* ============================================================
    6. CTA — staggered image pair + serif statement + button
       eyebrow + serif label + arrow lockup, forward-oriented (arrow →)
    ============================================================ */
 .moa-moments__body > .moments-cta {
     max-width: 1200px;
     margin: clamp(4rem, 7vw, 7.5rem) auto !important;
     padding: 0 clamp(1.1rem, 4vw, 3rem);
     display: grid;
     grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
     gap: clamp(2.5rem, 6vw, 6rem);
     align-items: center;
 }
 .moments-cta--media-right .moments-cta__media { order: 2; }
 .moments-cta--media-right .moments-cta__body  { order: 1; }
 
 .moments-cta__media { position: relative; }
 .moments-cta__media figure { margin: 0; }
 .moments-cta__media img { display: block; width: 100%; height: auto; }
 /* PAIR 1 (Weddings, media-right): vertical IN FRONT (narrow, shifted left),
    horizontal BEHIND (full width, drops below-right). Offsets are % not px so the
    overlap stays identical from desktop all the way down to mobile. */
 .moments-cta__img-1 {
     display: block; width: 52%; min-width: 140px; height: auto; margin: 0;
     position: relative; z-index: 2; left: -12.5%;        /* ≈ -63px at desktop width, scales below */
 }
 .moments-cta__img-2 {
     display: block; width: 100%; min-width: 209px; height: auto; margin: 0;
     position: absolute; right: 0; bottom: -40%; z-index: 1;
 }
 .moments-cta--media-right .moments-cta__img-1 { margin-left: 0; }
 .moments-cta--media-right .moments-cta__img-2 { left: auto; right: 0; }
 
 /* PAIR 2 (Christenings, media-left): two VERTICALS side by side. The right one
    sits higher; the left one sits lower, overlaps the right by 3px, and is on top. */
    .moments-cta:not(.moments-cta--media-right) .moments-cta__media {
        display: flex; align-items: flex-start; justify-content: center;
        gap: 0;
    }
 

    .moments-cta:not(.moments-cta--media-right) .moments-cta__img-1,
    .moments-cta:not(.moments-cta--media-right) .moments-cta__img-2 {
        width: auto; max-width: none;        /* figure: κανένα όριο πλάτους */
        margin: 0; left: auto; right: auto; bottom: auto;
    }
    .moments-cta:not(.moments-cta--media-right) .moments-cta__img-1 img,
    .moments-cta:not(.moments-cta--media-right) .moments-cta__img-2 img {
        width: auto !important;              /* νικάει το γενικό .moments-cta__media img { width:100% } */
        max-width: none !important;          /* κανένα ταβάνι — το πλάτος ακολουθεί το ύψος */
        height: clamp(240px, 43vh, 560px); /* ΜΟΝΟ το ύψος ορίζεται· πλάτος = ύψος × aspect */
    }
.moments-cta:not(.moments-cta--media-right) .moments-cta__img-1 {
    position: relative; z-index: 2;                  /* left → on top */
    margin: clamp(2.5rem, 6vw, 5rem) -3px 0 0;       /* pushed DOWN; -3px covers the right */
}
.moments-cta:not(.moments-cta--media-right) .moments-cta__img-2 {
    position: relative; z-index: 1;                  /* right → behind, higher */
}

.moa-moments__body > .moments-cta + .moments-cta {
    margin-top: clamp(5rem, 12vw, 13rem) !important;
}
 
 .moments-cta__statement {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(1.0625rem, 1.15vw);
     line-height: 1.7;
     color: var(--wp--preset--color--black);
     margin: 0 0 1.75rem;
 }
 .moments-cta__link {
     display: inline-flex; align-items: center; justify-content: center;
     margin: 0;
     padding: 0.9em 2.1em;
     border: 1px solid var(--wp--preset--color--black);
     border-radius: 999px;
     text-decoration: none;
     background: transparent;
     color: var(--wp--preset--color--black);
     transition: background-color 0.45s cubic-bezier(0.16, 1, 0.3, 1),
                 color 0.45s cubic-bezier(0.16, 1, 0.3, 1);
     cursor: pointer;
 }
 .moments-cta__link:hover {
     background: var(--wp--preset--color--black);
     color: var(--wp--preset--color--white);
 }
 .moments-cta__eyebrow {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 400;
     font-size: max(0.9rem, 1.447vw);
     letter-spacing: 0.06em;
     text-transform: uppercase;
     color: var(--wp--preset--color--black);
     opacity: 0.85;
     margin: 0 0 1rem;
 }
 .moments-cta__text {
     font-family: var(--wp--preset--font-family--noir-pro);
     font-weight: 500;
     font-size: max(0.78rem, 0.85vw);
     letter-spacing: 0.12em;
     text-transform: uppercase;
     line-height: 1;
     color: inherit;
 }
 .moments-cta__arrow { display: none; }

 /* ---------- LIGHTBOX (single-image zoom) ---------- */
.moa-moments .moments-about__grid img,
.moa-moments .moments-quad img,
.moa-moments .moments-slider img { cursor: zoom-in; }

.moa-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 12, 0.94);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.28s ease, visibility 0s linear 0.28s;
    -webkit-tap-highlight-color: transparent;
}
.moa-lightbox.is-open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: opacity 0.28s ease;
}
.moa-lightbox__img {
    max-width: 90vw;
    max-height: 90vh;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.985);
    transition: transform 0.28s ease;
}
.moa-lightbox.is-open .moa-lightbox__img { transform: scale(1); }

.moa-lightbox__close {
    position: absolute;
    top: max(1rem, 2.4vmin);
    right: max(1rem, 2.4vmin);
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.85;
    transition: opacity 0.2s ease;
}
.moa-lightbox__close:hover { opacity: 1; }
.moa-lightbox__close:focus-visible {
    outline: unset;
}

html.moa-lb-open { overflow: hidden; }
 
 /* ============================================================
    7. MOBILE
    ============================================================ */
 @media (max-width: 768px) {
     .moa-moments .moments-hero { height: 88vh; min-height: 520px; }
     .moments-hero__overlay { padding: clamp(1.1rem, 6.1vw, 2.5rem); }
 
     /* About → composed duo: text, AIR, then BIG image with the SMALL one
        overlapping its lower-right corner (like the reference). display:contents
        dissolves the two columns so text + both images share one flex context. */
     .moments-about__grid { display: flex !important; flex-direction: column; position: relative; gap: 0 !important; }
     .moments-about__left,
     .moments-about__right { display: contents; }
     .moments-about__text { max-width: none; width: 100%; order: 0; }
     .moments-about__img--main {
         order: 1; align-self: flex-start; width: 82% !important;
         margin: clamp(2.5rem, 10vw, 4rem) 0 0 0 !important;   /* air between text and images */
     }
     .moments-about__img--sub {
         order: 2; align-self: flex-end; width: 52% !important;
         margin: -30% 0 0 0 !important;   /* pull up to overlap the big image's corner */
         position: relative; z-index: 2;
     }
 
     .moa-moments__body > .moments-parallax { height: max-content; min-height: 370px; }
 
     .moments-quad { gap: clamp(0.6rem, 2vw, 1rem) !important; max-width: none; padding: 0 clamp(1rem, 4vw, 1.5rem); }
     .moments-quad > .wp-block-column { gap: clamp(0.6rem, 2vw, 1rem); }
     .moments-quad--a > .wp-block-column:nth-child(1),
     .moments-quad--b > .wp-block-column:nth-child(2) { margin-top: clamp(1.5rem, 6vw, 3rem); }
 
     .moments-slider { height: 58vh; min-height: 360px; }
 
     .moa-moments__body > .moments-cta { grid-template-columns: 1fr; gap: clamp(1rem, 5vw, 4.5rem); }
     /* media ABOVE text; internal overlap untouched → identical composition */
     .moments-cta--media-right .moments-cta__media { order: 0; }
     .moments-cta--media-right .moments-cta__body  { order: 1; }
     /* reserve room for the horizontal that hangs below in pair 1 */
     .moments-cta--media-right .moments-cta__media { margin-bottom: clamp(6rem, 36vw, 11rem); }
     .moments-cta:not(.moments-cta--media-right) .moments-cta__media { margin-bottom: clamp(2rem, 8vw, 4rem); }
     .moments-cta__img-1 {
        left: 0;
     }
     .moments-cta__img-2 {
        bottom: -55%;
        max-width: 69vw!important;
    }
    .moments-cta__media {
        height: auto;
        aspect-ratio: 1 / 0.95;     /* σταθερό κουτί για το absolute positioning */
        overflow: hidden;           /* δίχτυ: τίποτα δεν φεύγει εκτός οθόνης */
    }
    .moments-cta__img-1,
    .moments-cta__img-2 {
        height: auto;               /* σβήνει το desktop 82%/100% */
        max-width: none;            /* σβήνει τα desktop caps 50%/75% */
    }
    .moments-cta__img-1 {           /* ΑΡΙΣΤΕΡΗ — πιο φαρδιά % → πιο ψηλή */
        width: 56%;
        top: 0; left: 0;
        right: auto; bottom: auto;
    }
    .moments-cta__img-2 {           /* ΔΕΞΙΑ — πιο στενή % → πιο κοντή */
        width: 50%;
        right: 0; bottom: 0;
        left: auto; top: auto;
    }

    .moments-cta:not(.moments-cta--media-right) .moments-cta__img-1 img, .moments-cta:not(.moments-cta--media-right) .moments-cta__img-2 img {
        height: clamp(240px, 33vh, 560px)!important;
    }

    .moments-cta__img-2 {
        min-width: unset!important;
    }
 }
 
 @media screen and (max-width: 400px) {
    .moments-hero__img {
        object-position: 58%;
    }

    
 }
 
 /* ============================================================
    8. REDUCED MOTION
    ============================================================ */
 @media (prefers-reduced-motion: reduce) {
     .moments-hero__eyebrow,
     .moments-hero__title,
     .moments-hero__meta { animation: none !important; opacity: 1 !important; transform: none !important; }
     .moments-parallax img,
     .moments-about img { transform: none !important; }
     .moments-word-reveal .moments-word { opacity: 1 !important; transform: none !important; }
 }