/* ============================================================
   MarriageEmporium 2026 — Homepage editorial layer
   Loaded after app.css and extends it: the split editorial hero
   with the arched portrait, and imagery layers on the blessing
   and testimonial bands. All colors come from the app.css
   tokens — this file introduces no new palette.
   ============================================================ */

/* ---------------- Editorial split hero ---------------- */

.hero-split {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
}

.hero-visual {
    position: relative;
    display: flex;
    justify-content: center;
}

/* blush echo behind the arch, tilted for depth */
.hero-visual::before {
    content: "";
    position: absolute;
    inset: 9% -5% -3% 12%;
    border-radius: 999px 999px var(--radius) var(--radius);
    background: linear-gradient(170deg, rgba(212, 175, 106, 0.24), rgba(201, 79, 124, 0.10));
    transform: rotate(3.5deg);
}

.hero-arch {
    position: relative;
    width: min(100%, 440px);
    aspect-ratio: 3 / 4;
    border-radius: 999px 999px var(--radius) var(--radius);
    overflow: hidden;
    border: 6px solid rgba(255, 249, 244, 0.92);
    outline: 1.5px solid rgba(212, 175, 106, 0.65);
    outline-offset: 7px;
    box-shadow: var(--shadow-lift);
    background: var(--blush);
}

/* Two stacked slides inside the arch; app.js crossfades them. The arch keeps
   its own size from width + aspect-ratio, so absolute children cost no layout. */
.hero-arch img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Shared by every rotator (hero arch and both band backdrops).

   Only the incoming slide animates; app.js stacks it above the outgoing one,
   which holds full opacity underneath until the fade ends. Fading both at once
   leaves the container's background showing through at the midpoint (alpha
   compositing is not additive: 0.5 over 0.5 still lets ~28% through), which
   reads as a bright flash mid-transition. app.js reads this duration from the
   computed style, so this declaration is the single source of truth. */
.rot-slide {
    opacity: 0;
    transition: opacity 2s ease-in-out;
}

.rot-slide.on {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .rot-slide { transition: none; }
}

/* ---------------- Section imagery layers ---------------- */

/* world-map connections behind the blessing band (dark wine) */
/* Holds the rotator's two slides rather than a single background-image: a
   background-image cannot be crossfaded, and this band rotates like the hero. */
.blessing-map {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 0.16;
    pointer-events: none;
}

.blessing-map img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* soft pastel backdrop behind the testimonials band, under an
   ivory wash that keeps quote text at contrast */
.band-quotes {
    position: relative;
}

/* Rotator layer behind the quotes. The ivory wash that keeps quote text at
   contrast used to be the first background layer on the band itself; it is now
   ::after inside this container, sitting above both slides (z-index 3 beats the
   slides' 1/2) but still below .band-inner, which is lifted in the band's own
   stacking context. */
.band-quotes .band-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}

.band-quotes .band-bg img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.band-quotes .band-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 3;
    background: linear-gradient(180deg, rgba(251, 240, 228, 0.86), rgba(255, 249, 244, 0.94));
}

.band-quotes > .band-inner {
    position: relative;
    z-index: 1;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1080px) {
    .hero-split { grid-template-columns: 1fr; }
    .hero-visual { justify-content: flex-start; margin-top: 2.2rem; }
    .hero-arch { width: min(62vw, 360px); }
}

@media (max-width: 620px) {
    .hero-visual { justify-content: center; margin-top: 1.6rem; }
    .hero-arch { width: min(76vw, 300px); }
    .hero-visual::before { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .hero-visual::before { transform: none; }
}