/* ================================================
   Little Star Birthday Theme – Digital Invitation
   Dreamy starlit-night motif, moon & stars, soft rounded type.
   All artwork is CSS/SVG — no photo assets.
   ================================================ */

/* ---------- CSS Reset & Base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --midnight:     #1E2A5E;
    --midnight-alt: #263368;
    --panel:        #2B3676;
    --panel-light:  #37437F;
    --white:        #FFFDF6;
    --body:         #C7CBE8;
    --muted:        #8D93B8;
    --lavender:      #A9B8FF;
    --lavender-light:#C9D3FF;
    --lavender-deep: #6B7FE0;
    --moon:         #FFF6DA;
    --moon-deep:    #F0DFA0;
    --blush:        #F6B8C4;
    --accent-color: var(--lavender);
    --radius:       16px;
    --btn-radius:   999px;
    --ff-display:   'Fredoka', 'Comic Sans MS', cursive, sans-serif;
    --ff-body:      'Quicksand', sans-serif;

    /* Wave curve baked into a background-image so it can auto-alternate per
       section via nth-child without repeating markup — same technique as
       the cosmic/royal themes, recolored for the dreamy night palette. */
    --bl-wave-deep:     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C83,90 167,10 250,50 C333,90 417,10 500,50 C583,90 667,10 750,50 C833,90 917,10 1000,50 L1000,100 L0,100 Z' fill='%231E2A5E'/%3E%3C/svg%3E");
    --bl-wave-alt:      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C83,90 167,10 250,50 C333,90 417,10 500,50 C583,90 667,10 750,50 C833,90 917,10 1000,50 L1000,100 L0,100 Z' fill='%23263368'/%3E%3C/svg%3E");
    --bl-wave-lavender: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C83,90 167,10 250,50 C333,90 417,10 500,50 C583,90 667,10 750,50 C833,90 917,10 1000,50 L1000,100 L0,100 Z' fill='%236B7FE0'/%3E%3C/svg%3E");

    /* Palette read by the shared <x-checkerboard-gallery-grid> lightbox engine. */
    --cbg-ink:      var(--midnight);
    --cbg-accent:   var(--midnight);
    --cbg-backdrop: #060816;
}

html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-body);
    font-weight: 500;
    color: var(--body);
    background-color: var(--midnight);
    /* Soft starfield: faint white specks + a warm moonlight speck, fixed so
       it shows through every section regardless of scroll or alternation. */
    background-image:
        radial-gradient(circle, rgba(255,255,255,.7) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,255,255,.35) 1px, transparent 1.6px),
        radial-gradient(circle, rgba(255,246,218,.7) 1.4px, transparent 2px);
    background-size: 190px 190px, 100px 100px, 280px 280px;
    background-position: 0 0, 50px 70px, 130px 30px;
    background-attachment: fixed;
    line-height: 1.7;
}

img { max-width: 100%; display: block; }
a { color: var(--lavender-light); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Utility ---------- */
.bl-container         { max-width: 1100px; margin: 0 auto; }
.bl-container--narrow { max-width: 680px; }

/* Sections alternate a subtle tint over the fixed starfield instead of a
   flat opaque color, so the stars stay visible everywhere. */
.bl-alt-sections > * {
    position: relative;
    background: transparent;
}
.bl-alt-sections > *:nth-child(even) {
    background: rgba(169,184,255,.06);
}

.bl-alt-sections > *:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 46px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}
.bl-alt-sections > *:nth-child(odd):not(:last-child)::after {
    background-image: var(--bl-wave-alt);
}
.bl-alt-sections > *:nth-child(even):not(:last-child)::after {
    background-image: var(--bl-wave-deep);
}

.bl-section-title {
    font-family: var(--ff-display);
    font-size: clamp(1.8rem, 4vw, 2.6rem);
    color: var(--white);
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
    position: relative;
    padding-bottom: 1rem;
}
.bl-section-title::after {
    content: '';
    position: absolute;
    top: -22px;
    left: 50%;
    width: 70px;
    height: 14px;
    transform: translateX(-50%);
    background-image:
        radial-gradient(circle at 10px 7px, var(--moon) 6px, transparent 6.5px),
        radial-gradient(circle at 35px 7px, var(--lavender) 6px, transparent 6.5px),
        radial-gradient(circle at 60px 7px, var(--blush) 6px, transparent 6.5px);
}

@keyframes bl-drift {
    0%, 100% { transform: translateY(0) rotate(-3deg); }
    50%      { transform: translateY(-5px) rotate(3deg); }
}

@keyframes bl-twinkle {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; }
}

/* ---------- Shape dividers ----------
   A full-width SVG with preserveAspectRatio="none" pinned to the section
   edge, so the curve stretches to any width without distorting its height. */
.bl-shape {
    position: absolute;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    direction: ltr;
    pointer-events: none;
    z-index: 1;
}
.bl-shape-top { top: -1px; }
.bl-shape-bottom { bottom: -1px; }
.bl-shape[data-negative="false"].bl-shape-bottom,
.bl-shape[data-negative="true"].bl-shape-top {
    transform: rotate(180deg);
}
.bl-shape svg {
    display: block;
    width: calc(100% + 1.3px);
    height: 60px;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
}
.bl-shape-fill {
    transform-origin: center;
}

/* ---------- Hero ---------- */
.bl-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding: 0 1.5rem 6rem;
}

.bl-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 22%, rgba(169,184,255,.3), transparent 55%),
        radial-gradient(circle at 80% 78%, rgba(255,246,218,.2), transparent 50%);
    animation: bl-twinkle 6s ease-in-out infinite;
    pointer-events: none;
}

/* Big decorative half-moon, bled off the hero's left edge (clipped by
   .bl-hero's own overflow:hidden) — a background motif, separate from the
   guest's photo frame which stays centered in .bl-hero__inner. The soft
   inset radial-gradients read as faint craters on the moon's surface. */
.bl-hero__moon-backdrop {
    position: absolute;
    top: 50%;
    left: -22%;
    transform: translateY(-50%);
    width: min(72vh, 640px);
    height: min(72vh, 640px);
    border-radius: 50%;
    background:
        radial-gradient(circle at 62% 32%, rgba(30,42,94,.16) 0 42px, transparent 44px),
        radial-gradient(circle at 38% 62%, rgba(30,42,94,.12) 0 62px, transparent 64px),
        radial-gradient(circle at 68% 72%, rgba(30,42,94,.1) 0 30px, transparent 32px),
        radial-gradient(circle at 38% 32%, var(--white), var(--moon) 55%, var(--moon-deep) 100%);
    box-shadow: 0 0 120px 40px rgba(255,246,218,.2);
    z-index: 0;
    pointer-events: none;
}

/* Scattered twinkling stars — plain positioned dots + a staggered CSS
   animation, no image assets. Each <span> below just carries its own
   top/left and animation-delay inline, same technique as a simple starfield
   sprinkle: everyone can create more by adding another span. */
.bl-stars {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 1;
}

.bl-star {
    position: absolute;
    width: 4px;
    height: 4px;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 0 6px 1px rgba(255,255,255,.8);
    animation: bl-star-twinkle 3.2s ease-in-out infinite;
}

.bl-star--lg {
    width: 7px;
    height: 7px;
    background: var(--moon);
    box-shadow: 0 0 10px 2px rgba(255,246,218,.85);
}

@keyframes bl-star-twinkle {
    0%, 100% { opacity: .25; transform: scale(.8); }
    50%      { opacity: 1; transform: scale(1.15); }
}

.bl-hero__inner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    max-width: 720px;
    margin: 0 auto;
}

/* ---------- Hero media (soft circular "moonlit window") ---------- */
.bl-hero__media {
    position: relative;
    width: min(300px, 60%);
    margin: 0 auto;
}

.bl-hero__frame {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--panel);
    border: 10px solid var(--panel-light);
    box-shadow: 0 0 0 4px var(--moon), 0 25px 60px rgba(0,0,0,.5);
}

.bl-hero__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.bl-hero__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 5rem;
}

.bl-hero__badge {
    position: absolute;
    top: -4px;
    right: 4%;
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--white);
    border-radius: 50%;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    color: var(--lavender-deep);
    animation: bl-drift 4.5s ease-in-out infinite;
    z-index: 2;
}
.bl-hero__badge svg { width: 32px; height: 32px; }

/* ---------- Hero content (centered column) ---------- */
.bl-hero__content {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.bl-hero__eyebrow {
    font-family: var(--ff-display);
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--moon);
    opacity: .9;
    margin-bottom: .5rem;
}

.bl-hero__name {
    font-family: var(--ff-display);
    font-size: 68px;
    font-weight: 600;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 1rem;
}

/* ---------- Milestone stats strip (first birthday only) ---------- */
.bl-hero__stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin-bottom: 1.25rem;
}

.bl-hero__stat {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(30,35,80,.55);
    border: 1px solid rgba(169,184,255,.35);
    border-radius: var(--btn-radius);
    padding: .5rem 1rem;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.bl-hero__stat-icon { font-size: 1rem; }

.bl-hero__stat-value {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .9rem;
    color: var(--white);
}

.bl-hero__stat-label {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--muted);
}

.bl-hero__date-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--midnight);
    background: var(--moon);
    border: 3px solid var(--moon-deep);
    border-radius: var(--btn-radius);
    padding: .65rem 1.25rem;
    box-shadow: 0 4px 15px rgba(255,246,218,.3);
}

.bl-hero__meta {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: .55rem;
    margin-top: 1.25rem;
}

.bl-hero__meta span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,.18);
    border-radius: var(--btn-radius);
    padding: .5rem 1.15rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--white);
    box-shadow: 0 2px 8px rgba(0,0,0,.25);
}

@media (max-width: 560px) {
    /* On desktop this circle is sized to bleed in from the hero's left edge
       as a subtle side accent, never reaching the centered text column. Below
       560px the hero stacks into one narrow column, so at its desktop size
       (min(72vh, 640px)) the circle is wider than the viewport itself and
       ends up as a full-bleed cream background sitting directly behind the
       white/moon-colored hero text — unreadable. Shrinking it and anchoring
       it near the top keeps it behind the photo (which is opaquely framed
       and immune to this) instead of behind the text block below. */
    .bl-hero__moon-backdrop {
        top: 8%;
        left: -30%;
        transform: none;
        width: min(58vw, 260px);
        height: min(58vw, 260px);
    }
    .bl-hero__name { font-size: clamp(2rem, 10vw, 68px); }
}

/* Floating topbar */
.bl-topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 200;
    padding: .9rem 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    transition: background .3s ease, backdrop-filter .3s ease;
}

/* Desktop only (mobile hides these links behind the hamburger toggle, which
   already has its own self-contained dark-blur backdrop — the bar itself
   stays transparent unconditionally there). Give the bar a solid/blurred
   background past the scroll threshold (.scrolled toggled by data-topbar in
   theme.js) — dark here (matching var(--midnight), this theme's own page
   tone) since .bl-topbar__links a is light var(--body) text throughout. */
@media (min-width: 601px) {
    .bl-topbar.scrolled {
        background: color-mix(in srgb, var(--midnight) 92%, transparent);
        backdrop-filter: blur(10px);
    }
}

.bl-topbar__links {
    display: flex;
    gap: 1.25rem;
}
.bl-topbar__links a {
    font-size: .72rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--body);
    transition: color .2s;
}
.bl-topbar__links a:hover { color: var(--moon); text-decoration: none; }

.bl-topbar__toggle { display: none; }

/* Demo-only Basic/Standard switch + close + cart badge — shared look defined
   globally in layouts/theme.blade.php, just positioned here at opposite bottom
   corners, at every screen width. */
.dpb-switch,
.dpb-fab {
    position: fixed;
    bottom: 1rem;
    z-index: 9999;
}
.dpb-fab { right: 1rem; }
.dpb-close { right: 4rem; }
.dpb-switch {
    left: 1rem;
    display: flex;
    align-items: center;
    height: 2.5rem;
    padding: 0 .25rem;
}
.dpb-switch a {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 .9rem;
    font-size: 12px;
}

/* Mobile: collapse the link row behind a bordered hamburger button, opening a
   dropdown panel with the same links stacked. .bl-topbar is space-between
   (brand left, toggle right) on desktop — pin the toggle to the left instead
   on mobile, matching every other theme. */
@media (max-width: 600px) {
    .bl-topbar { justify-content: flex-start; }
    .bl-topbar__toggle { order: -1; }

    .bl-topbar__toggle {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 3rem;
        height: 3rem;
        padding: 0;
        border: 1.5px solid rgba(255,255,255,.25);
        border-radius: 50%;
        background: rgba(30,42,94,.55);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        cursor: pointer;
        transition: background .2s;
    }
    .bl-topbar__toggle span {
        display: block;
        width: 20px;
        height: 2px;
        border-radius: 1px;
        background: #fff;
        transition: transform .25s ease, opacity .2s ease;
    }
    .bl-topbar__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
    .bl-topbar__toggle.is-active span:nth-child(2) { opacity: 0; }
    .bl-topbar__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

    .bl-topbar__links {
        display: flex;
        flex-direction: column;
        gap: .25rem;
        position: absolute;
        top: calc(100% + .5rem);
        left: 1rem;
        right: 1rem;
        padding: .5rem;
        background: rgba(30,42,94,.97);
        border: 1px solid var(--moon-deep);
        border-radius: 12px;
        box-shadow: 0 12px 32px rgba(0,0,0,.4);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        transition: opacity .2s ease, transform .2s ease, visibility .2s;
    }
    .bl-topbar__links.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }
    .bl-topbar__links a {
        text-align: center;
        padding: .65rem 1rem;
        border-radius: 8px;
        color: var(--body);
    }
    .bl-topbar__links a:hover { background: rgba(240,223,160,.12); color: var(--moon-deep); }

}

/* ---------- Audio ---------- */
.bl-audio {
    position: relative;
    padding: 5rem 1.25rem 8rem;
    overflow: hidden;
}

/* ---------- Countdown ---------- */
.bl-countdown {
    position: relative;
    padding: 5rem 1.25rem 8rem;
    overflow: hidden;
}

.bl-countdown__inner {
    position: relative;
    z-index: 2;
}

.bl-countdown__intro {
    text-align: center;
    color: var(--body);
    font-size: 1.05rem;
    max-width: 480px;
    margin: 0 auto;
}

/* Illustrated CSS "scene" (moon + stars) behind the timer, in place of a
   photo — there's no night-sky photography in the app, so this keeps the
   theme fully self-contained. */
.bl-countdown__photo-wrap {
    position: relative;
    max-width: 900px;
    margin: 2.5rem auto 0;
    aspect-ratio: 1143 / 502;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 40px;
    overflow: hidden;
}

.bl-countdown__scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 30% 25%, rgba(169,184,255,.28), transparent 60%), var(--panel);
}

.bl-countdown__scene::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.6px);
    background-size: 48px 48px;
    opacity: .5;
}

.bl-countdown__moon {
    position: absolute;
    right: 9%;
    top: 16%;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, var(--white), var(--moon) 55%, var(--moon-deep) 100%);
    box-shadow: -30px 0 0 -14px var(--panel), 0 0 45px rgba(255,246,218,.45);
}

.bl-countdown__stars {
    position: absolute;
    right: 22%;
    top: 55%;
    width: 160px;
    height: 60px;
    background-image:
        radial-gradient(circle, var(--moon) 2px, transparent 2.5px),
        radial-gradient(circle, var(--lavender-light) 1.5px, transparent 2px);
    background-size: 40px 40px, 26px 26px;
    background-position: 0 0, 15px 20px;
    opacity: .8;
}

.bl-countdown__timer {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.bl-countdown__unit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: rgba(30,42,94,.75);
    border: 2px solid rgba(255,246,218,.35);
    padding: 40px 0 25px;
    border-radius: 30px;
    box-shadow: 0 5px 15px rgba(0,0,0,.3);
    min-width: 100px;
}

.bl-countdown__number {
    font-family: var(--ff-display);
    font-size: 2.6rem;
    font-weight: 600;
    color: var(--moon);
    line-height: 1;
}

.bl-countdown__label {
    font-family: var(--ff-display);
    font-size: .72rem;
    font-weight: 600;
    color: rgba(255,255,255,.85);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-top: .35rem;
}

/* ---------- Program ---------- */
.bl-program {
    padding: 5rem 1.25rem 8rem;
}

.bl-timeline { margin-top: 1rem; }

.bl-timeline__item {
    display: grid;
    grid-template-columns: 80px 20px 1fr;
    gap: 0 1rem;
    align-items: start;
    margin-bottom: 1.5rem;
}

.bl-timeline__time {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .88rem;
    color: var(--moon);
    text-align: right;
    padding-top: .15rem;
}

.bl-timeline__dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--moon);
    border: 3px solid var(--lavender);
    margin-top: .25rem;
    position: relative;
}

.bl-timeline__dot::after {
    content: '';
    position: absolute;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: rgba(255,255,255,.15);
    height: calc(100% + 1.5rem + 14px);
}

.bl-timeline__item:last-child .bl-timeline__dot::after { display: none; }

.bl-timeline__label {
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .95rem;
    color: var(--white);
}

.bl-timeline__location {
    display: block;
    font-size: .8rem;
    color: var(--muted);
    margin-top: .15rem;
}
.bl-timeline__location a { margin-left: .4em; opacity: .85; font-size: .9em; color: var(--lavender-light); }

/* ---------- A Little Note (message / quote card) ---------- */
.bl-poem {
    padding: 5rem 1.25rem 8rem;
    text-align: center;
    position: relative;
}

.bl-poem__card {
    position: relative;
    background: var(--panel);
    border: 3px dashed rgba(255,246,218,.35);
    border-radius: var(--radius);
    padding: 3rem 2rem 2.25rem;
    max-width: 640px;
    margin: 0 auto;
    box-shadow: 0 15px 40px rgba(0,0,0,.3);
}

.bl-poem__quote {
    width: 40px;
    height: 40px;
    margin: 0 auto 1rem;
    color: var(--moon);
    opacity: .85;
}
.bl-poem__quote svg { width: 100%; height: 100%; }

.bl-poem__text {
    font-family: var(--ff-display);
    font-size: 1.2rem;
    line-height: 1.8;
    white-space: pre-line;
    color: var(--white);
}

.bl-poem__star {
    margin-top: 1.25rem;
    font-size: 1.4rem;
    opacity: .8;
}

/* ---------- Growing Up Story ---------- */
.bl-story {
    padding: 5rem 1.25rem 8rem;
    text-align: center;
}

.bl-story__intro {
    max-width: 34rem;
    margin: 0 auto 1rem;
    font-size: 1rem;
    line-height: 1.7;
}

.bl-story__timeline {
    position: relative;
    max-width: 780px;
    margin: 3rem auto 0;
    text-align: left;
}

.bl-story__timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 3px;
    background: repeating-linear-gradient(
        to bottom,
        var(--accent-color) 0,
        var(--accent-color) 10px,
        transparent 10px,
        transparent 20px
    );
    transform: translateX(-50%);
}

.bl-story__item {
    position: relative;
    width: 50%;
    padding-bottom: 3.5rem;
}

.bl-story__item:last-child {
    padding-bottom: 0;
}

.bl-story__item--left {
    padding-right: 3rem;
    text-align: right;
}

.bl-story__item--right {
    width: 50%;
    margin-left: 50%;
    padding-left: 3rem;
    text-align: left;
}

.bl-story__dot {
    position: absolute;
    top: .3rem;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--moon);
    border: 3px solid var(--midnight);
    box-shadow: 0 0 0 3px var(--accent-color);
    z-index: 2;
}

.bl-story__item--left .bl-story__dot { right: -9px; }
.bl-story__item--right .bl-story__dot { left: -9px; }

/* Photo framed with a plain soft moon-glow border instead of an overlay image. */
.bl-story__photo {
    position: relative;
    width: min(100%, 260px);
    aspect-ratio: 675 / 697;
    margin-bottom: 1rem;
    display: inline-block;
}

.bl-story__item--left .bl-story__photo { margin-left: auto; }
.bl-story__item--right .bl-story__photo { margin-right: auto; }

.bl-story__photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--radius);
    border: 3px solid var(--moon);
    box-shadow: 0 10px 25px rgba(0,0,0,.4);
    display: block;
}

.bl-story__photo-caption {
    position: absolute;
    left: .6rem;
    right: .6rem;
    bottom: .6rem;
    font-size: .75rem;
    font-weight: 700;
    text-align: center;
    color: var(--white);
    background: rgba(30,42,94,.75);
    border-radius: var(--btn-radius);
    padding: .3rem .5rem;
    z-index: 2;
}

.bl-story__period {
    display: block;
    font-family: var(--ff-display);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--moon);
    margin-bottom: .25rem;
}

.bl-story__title {
    font-family: var(--ff-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: .35rem;
}

.bl-story__desc {
    font-size: .92rem;
    line-height: 1.65;
    color: var(--body);
}

@media (max-width: 720px) {
    .bl-story__timeline::before {
        left: 1.4rem;
        transform: none;
    }

    .bl-story__item,
    .bl-story__item--right {
        width: 100%;
        margin-left: 0;
        padding-left: 3rem;
        padding-right: 0;
        text-align: left;
    }

    .bl-story__item--left .bl-story__dot,
    .bl-story__item--right .bl-story__dot {
        left: 1.4rem;
        right: auto;
        transform: translateX(-50%);
    }

    .bl-story__item--left .bl-story__photo,
    .bl-story__item--right .bl-story__photo {
        margin-left: 0;
        margin-right: auto;
    }
}

/* ---------- Gallery / Guest Wall ---------- */
.bl-gallery { padding: 5rem 1.25rem 8rem; text-align: center; }
.bl-guest-wall { padding: 5rem 1.25rem 8rem; text-align: center; }
.bl-gallery-upload { padding: 5rem 1.25rem 8rem; text-align: center; }

.bl-gallery-upload .gu-form {
    max-width: 620px;
    padding: 0 1.5rem;
    background: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* ---------- Dress Code / Good to Know ---------- */
.bl-dress-code { padding: 5rem 1.25rem 8rem; text-align: center; }
.bl-good-to-know { padding: 5rem 1.25rem 8rem; text-align: center; }

/* ---------- Closing ---------- */
.bl-closing {
    padding: 2.5rem 1.25rem;
    text-align: center;
}

.bl-closing p {
    font-family: var(--ff-display);
    font-size: .95rem;
    color: var(--white);
    opacity: .65;
    margin: 0;
}

/* ---------- Map ---------- */
.bl-location { padding: 5rem 1.25rem 8rem; }

.bl-location__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 3rem;
    margin-top: 1.5rem;
}

@media (max-width: 820px) {
    .bl-location__grid {
        grid-template-columns: 1fr;
    }
}

.bl-location__map iframe {
    width: 100%;
    height: 380px;
    border: 0;
    display: block;
    border-radius: 100px 30px 100px 30px;
    box-shadow: 0 12px 30px rgba(0,0,0,.4);
    filter: grayscale(.15) invert(.92) hue-rotate(200deg);
}

.bl-location__info {
    text-align: center;
}

.bl-location__icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--panel);
    border: 3px solid var(--moon);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
}

.bl-location__name {
    font-family: var(--ff-display);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--white);
    margin-bottom: .5rem;
}

.bl-location__address {
    color: var(--muted);
    margin-bottom: 1.5rem;
}

/* ---------- Album ---------- */
.bl-album { padding: 5rem 1.25rem; text-align: center; }
.bl-album__text { opacity: .75; margin-bottom: 2rem; }

/* ---------- RSVP ---------- */
.bl-rsvp {
    position: relative;
    padding: 5rem 1.25rem 8rem;
}
.bl-rsvp .rsvp-deadline {
    background: transparent;
    margin-bottom: 10px;
}
.bl-rsvp::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 46px;
    background-image: var(--bl-wave-lavender);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    pointer-events: none;
    z-index: 1;
}

.bl-rsvp__subtitle {
    text-align: center;
    color: var(--white);
    opacity: .8;
    margin-bottom: 2rem;
    font-size: 1rem;
}

.bl-alert--success {
    background: var(--panel);
    color: var(--white);
    border: 2px solid var(--moon);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1.5rem;
    font-weight: 700;
    text-align: center;
}

/* Soft "starlit" card — asymmetric radius echoes the hero moon window. */
.rsvp-layout-wrap {
    max-width: 560px;
    margin: 0 auto;
    background: var(--panel);
    border: 2px solid rgba(255,246,218,.35);
    border-radius: 100px 30px 100px 30px;
    box-shadow: 0 20px 50px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
    padding: 3.5rem 2.5rem;
}

@media (max-width: 500px) {
    .rsvp-layout-wrap {
        border-radius: 40px 20px 40px 20px;
        padding: 2.5rem 1.25rem;
    }
}

.bl-rsvp .form__group label {
    display: block;
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: .82rem;
    color: var(--moon);
    margin-bottom: .4rem;
    text-transform: uppercase;
    letter-spacing: .05em;
}

.bl-rsvp .form__group input[type="text"],
.bl-rsvp .form__group input[type="email"],
.bl-rsvp .form__group input[type="tel"],
.bl-rsvp .form__group select,
.bl-rsvp .form__group textarea {
    width: 100%;
    padding: .95rem 1.25rem;
    border: 0;
    border-radius: 8px;
    font-family: var(--ff-body);
    font-weight: 500;
    font-size: .95rem;
    color: var(--white);
    background-color: var(--panel-light);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    transition: box-shadow .2s;
    outline: none;
}
.bl-rsvp .form__group .rsvp-stepper {
    background: var(--panel-light);
}

.bl-rsvp .form__group input[type="text"]:focus,
.bl-rsvp .form__group input[type="email"]:focus,
.bl-rsvp .form__group input[type="tel"]:focus,
.bl-rsvp .form__group select:focus,
.bl-rsvp .form__group textarea:focus {
    box-shadow: 0 0 0 3px rgba(255,246,218,.25), 0 0 0 5px var(--moon);
    background-color: var(--panel-light);
}

.bl-rsvp .form__error {
    display: block;
    color: var(--blush);
    font-size: .82rem;
    margin-top: .3rem;
}

.bl-btn {
    display: block;
    width: 100%;
    padding: .9rem 2rem;
    background: var(--lavender-deep);
    color: var(--white);
    font-family: var(--ff-display);
    font-weight: 600;
    font-size: 1.05rem;
    border: 3px solid var(--lavender);
    border-radius: var(--btn-radius);
    cursor: pointer;
    transition: transform .15s, box-shadow .15s, background .15s;
    box-shadow: 0 4px 15px rgba(107,127,224,.4);
    letter-spacing: .02em;
    margin-top: .5rem;
}

.bl-btn:hover {
    background: var(--blush);
    border-color: #ffd0da;
    color: var(--midnight);
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(246,184,196,.4);
    text-decoration: none;
}

.bl-location .bl-btn,
.bl-album .bl-btn { display: inline-block; width: auto; margin-top: 1.5rem; }

/* ---------- Footer ---------- */
.bl-footer {
    background: var(--lavender-deep);
    color: rgba(255,255,255,.75);
    text-align: center;
    padding: 2.5rem 1.25rem;
    font-size: .9rem;
}

.bl-footer p { margin-bottom: .35rem; }
.bl-footer a { color: var(--moon); }
.bl-footer__ornament {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 13rem;
    margin: 0 auto 1rem;
    color: rgba(255,255,255,.5);
}
.bl-footer__ornament-line { flex: 1; height: 1px; background: linear-gradient(to right, transparent, currentColor); }
.bl-footer__ornament-line:last-child { background: linear-gradient(to left, transparent, currentColor); }
.bl-footer__ornament-mark { flex-shrink: 0; font-size: 1rem; line-height: 1; }
.bl-footer__signoff { max-width: 24rem; margin: 0 auto 1.5rem; opacity: .8; }
/* Not .bl-btn — its background matches the footer; a white pill lifts off it. */
.bl-footer__cal {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    padding: .7rem 1.5rem;
    background: #fff;
    color: #1f2937 !important;
    border-radius: 999px;
    font-weight: 700;
    font-size: .9rem;
    box-shadow: 0 4px 15px rgba(0,0,0,.22);
    transition: transform .15s, box-shadow .15s;
}
.bl-footer__cal:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(0,0,0,.3); text-decoration: none; }
.bl-footer__cal-icon { width: 1rem; height: 1rem; flex-shrink: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 500px) {
    /* nowrap + scroll fallback guarantees all 4 units stay on one row down to
       360px, instead of flex-wrap letting them fall to a 2x2 block once
       their min-width no longer fits. */
    .bl-countdown__timer {
        gap: .5rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .bl-countdown__timer::-webkit-scrollbar { display: none; }
    .bl-countdown__unit {
        padding: .9rem 1rem;
        min-width: 58px;
        flex-shrink: 0;
    }
    .bl-countdown__number { font-size: 2rem; }

    .bl-poem__card { padding: 2.5rem 1.25rem 1.75rem; }
}

/* Standardized horizontal gutter across every content section on mobile
   (padding-x: 1rem), matching wedding-romantic-bloom's convention — several
   sections here otherwise use a wider desktop-only gutter (1.25rem/1.5rem)
   that just eats into already-limited mobile width. Appended at the very end
   of the file (not folded into an earlier @media block) so equal-specificity
   source order guarantees this wins over each section's own base padding
   rule, which is declared later in the file than this file's other,
   topbar-only 600px media query. */
@media (max-width: 600px) {
.bl-hero,
.bl-countdown,
.bl-program,
.bl-poem,
.bl-story,
.bl-gallery,
.bl-guest-wall,
.bl-gallery-upload,
.bl-dress-code,
.bl-good-to-know,
.bl-closing,
.bl-location,
.bl-album,
.bl-rsvp,
.bl-footer {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}