/* ============================================================
   BOHEMIAN EARTH - Template stylesheet
   ============================================================ */

/* ---------- Fonts ---------- */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Karla:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Pinyon+Script&display=swap');

/* ---------- Lange-woorden & URL safety ---------- */
html {
    overflow-wrap: anywhere;
    word-break: normal;
}

:where(h1, h2, h3, h4, p, li, blockquote, figcaption,
    .text-content, .form-intro, .form-label,
    .timeline-title, .timeline-description,
    .title-blok-h1, .title-blok-h2, .title-blok-h3,
    .header-namen, .hero-card .couple-names) {
    overflow-wrap: anywhere;
    word-break: normal;
    hyphens: auto;
}

a, .is-url, .is-email, code, pre {
    overflow-wrap: anywhere;
    word-break: break-word;
}

.countdown-value,
.countdown-number {
    word-break: keep-all;
    hyphens: none;
}

/* ============================================================
   BASE
   ============================================================ */
body {
    margin: 0;
    padding: 0;
    background: var(--color-background);
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

main {
    padding-bottom: 60px;
}

/* Section spacing tussen blocks */
[data-card-id] {
    padding: 40px 0 !important;
}
[data-card-id]:first-child {
    padding-top: 0 !important;
}
[data-card-id]:last-child {
    padding-bottom: 0 !important;
}
[data-card-id]:has(.hero-card) {
    padding-top: 0 !important;
}

/* ============================================================
   HEADER & NAVIGATION
   ============================================================ */
header {
    background: var(--color-background);
    position: relative;
    z-index: 50;
}

#publicNav {
    position: relative;
    padding: 28px 24px 22px;
}

/* Mobile-first: logo links, hamburger rechts */
.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

/* Logo "A & D" — Pinyon Script calligrafie (extra line-height voor descenders) */
.header-namen {
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    color: var(--color-primary);
    font-size: 46px;
    line-height: 1.3;
    letter-spacing: 0;
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    position: relative;
    padding: 4px 0;
}
.header-namen .en-teken {
    font-family: 'Pinyon Script', cursive;
    font-weight: 400;
    font-size: 0.9em;
}

/* Hamburger — 2 dunne terracotta lijntjes */
.nav-toggle {
    --size: 38px;
    --line-w: 28px;
    --line-h: 1.5px;
    --gap: 7px;
    --color: var(--color-primary);

    position: relative;
    display: inline-block;
    width: var(--size);
    height: var(--size);
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    outline-offset: 4px;
}
.nav-toggle::before,
.nav-toggle::after {
    content: "";
    position: absolute;
    left: 50%;
    width: var(--line-w);
    height: var(--line-h);
    background: var(--color);
    border-radius: 2px;
    transform-origin: center;
    transform: translateX(-50%);
    transition: transform 220ms ease, top 220ms ease;
}
.nav-toggle::before {
    top: calc(50% - (var(--gap) / 2) - var(--line-h));
}
.nav-toggle::after {
    top: calc(50% + (var(--gap) / 2));
}
.nav-toggle.is-open::before {
    top: 50%;
    transform: translateX(-50%) rotate(45deg);
}
.nav-toggle.is-open::after {
    top: 50%;
    transform: translateX(-50%) rotate(-45deg);
}
@media (prefers-reduced-motion: reduce) {
    .nav-toggle::before,
    .nav-toggle::after { transition: none; }
}

/* Nav-menu — mobile (dropdown drawer) */
.nav-menu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-background);
    list-style: none;
    margin: 0;
    padding: 14px 28px 26px;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 100;
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--color-primary) 22%, transparent);
}
.nav-menu.active { display: flex; }
.nav-menu li { list-style: none; }
.nav-menu .nav-link {
    font-family: 'Karla', sans-serif;
    font-size: 12px;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    padding: 14px 0;
    display: block;
    letter-spacing: 0.24em;
    text-transform: uppercase;
}
.nav-menu .nav-link.is-active {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1px;
}

@media (max-width: 899px) {
    .nav-menu {
        border-top: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    }
    .nav-menu li {
        border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 10%, transparent);
    }
    .nav-menu li:last-child {
        border-bottom: 0;
    }
}

/* Desktop: logo gecentreerd + botanisch ornament + horizontale nav */
@media (min-width: 900px) {
    #publicNav {
        padding: 22px 40px 16px;
    }
    .header-container {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
    }
    .header-namen {
        font-size: 52px;
        padding: 2px 0;
    }
    /* Botanisch ornament onder logo */
    .header-container::after {
        content: '';
        display: block;
        width: 200px;
        height: 36px;
        margin-top: 2px;
        background-color: var(--color-primary);
        opacity: 0.7;
        -webkit-mask-image: url('header-ornament.png');
        mask-image: url('header-ornament.png');
        -webkit-mask-size: contain;
        mask-size: contain;
        -webkit-mask-repeat: no-repeat;
        mask-repeat: no-repeat;
        -webkit-mask-position: center;
        mask-position: center;
    }
    .nav-toggle { display: none; }

    .nav-menu {
        position: static;
        background: transparent;
        display: flex !important;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        gap: 32px;
        padding: 14px 0 0;
        margin: 0;
        box-shadow: none;
    }
    .nav-menu .nav-link {
        font-size: 11px;
        padding: 4px 0;
        letter-spacing: 0.26em;
    }
    .nav-menu .nav-link:hover {
        text-decoration: underline;
        text-underline-offset: 6px;
        text-decoration-thickness: 1px;
    }
}

/* Hide decoration helper */
.hide-deco-namen .header-namen { display: none !important; }

/* ---------- LANGUAGE SWITCHER (in nav) ---------- */
.language-switcher { position: relative; display: inline-flex; align-items: center; }
.lang-toggle {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 6px 14px !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase;
    border-radius: 999px !important;
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
    cursor: pointer;
    transition: background 180ms ease;
}
.lang-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 8%, transparent) !important;
}
.lang-toggle svg { width: 10px; height: 10px; stroke: currentColor; }
.lang-dropdown {
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    margin: 0 !important;
    background: var(--color-background) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 16px !important;
    box-shadow: 0 8px 24px -12px color-mix(in srgb, var(--color-primary) 28%, transparent) !important;
    min-width: 200px !important;
    z-index: 100;
    overflow: hidden;
}
.lang-option {
    display: block !important;
    padding: 12px 16px !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    letter-spacing: 0.06em !important;
    transition: background 150ms ease;
}
.lang-option:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}

@media (max-width: 899px) {
    .nav-menu .language-switcher { padding: 8px 0; }
    /* Taalknop staat onderaan de mobiele menu-drawer; dropdown OMHOOG openen
       zodat het niet onder de drawer valt en afgesneden wordt. */
    .lang-dropdown {
        left: 0 !important;
        right: auto !important;
        top: auto !important;
        bottom: calc(100% + 6px) !important;
    }
}

/* ============================================================
   BLOCK STYLING - per block-type
   (wordt block-voor-block ingevuld)
   ============================================================ */

/* ---------- TITLE ---------- */
.title-blok-h1,
.title-blok-h2,
.title-blok-h3 {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    font-weight: 400;
    text-align: center;
}

/* H1 - italic voor warme editorial accent (anders dan all-caps elders) */
.title-blok-h1 {
    font-style: italic;
    font-size: clamp(36px, 5.4vw, 60px);
    line-height: 1.1;
    letter-spacing: 0.005em;
    margin: 36px 0 24px;
}

/* H2 - regular DM Serif Display */
.title-blok-h2 {
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    letter-spacing: 0.005em;
    margin: 28px 0 20px;
}

/* H3 - kleiner met iets meer letter-spacing voor leesbaarheid */
.title-blok-h3 {
    font-size: clamp(20px, 2.6vw, 28px);
    line-height: 1.25;
    letter-spacing: 0.02em;
    margin: 24px 0 16px;
}
/* ---------- TEXT ---------- */
.text-card {
    display: flex;
    justify-content: center;
    padding: 0 24px;
}
.text-card .text-content {
    max-width: 640px;
    width: 100%;
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.8;
    font-weight: 400;
    text-align: left;
}
.text-card .text-content p { margin: 0 0 1.1em; }
.text-card .text-content p:last-child { margin-bottom: 0; }
.text-card .text-content strong { font-weight: 600; }
.text-card .text-content em { font-style: italic; }
.text-card .text-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}
.text-card .text-content ul,
.text-card .text-content ol {
    margin: 0 0 1.1em;
    padding-left: 1.4em;
}
.text-card .text-content li {
    margin: 0.4em 0;
}
.text-card .text-content h1,
.text-card .text-content h2,
.text-card .text-content h3 {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    font-weight: 400;
    margin: 1.4em 0 0.5em;
}
.text-card .text-content h1 { font-style: italic; }
/* ---------- DIVIDER ---------- */
/* Line variant — dunne terracotta lijn */
hr.border-t-2.border-gray-300 {
    border: 0;
    border-top: 1px solid var(--color-primary);
    opacity: 0.5;
}
/* Dashed variant — gestreepte terracotta lijn */
hr.border-t-2.border-dashed {
    border: 0;
    border-top: 1px dashed var(--color-primary);
    opacity: 0.55;
}
/* Fancy variant — twee dunne lijntjes flankeren het botanisch ornament (matcht header) */
.text-gray-500 span.border-t {
    border-color: var(--color-primary);
    opacity: 0.45;
}
.text-gray-500 { color: var(--color-primary) !important; }
/* Vervang 💍 door kleine CSS-diamond (geroteerd vierkant) */
.text-gray-500 span.text-xl {
    font-size: 0 !important;
    width: 8px;
    height: 8px;
    background-color: var(--color-primary);
    transform: rotate(45deg);
    opacity: 0.6;
    flex-shrink: 0;
    margin: 0 4px;
}
/* ---------- WHITESPACE ---------- */
/* ---------- BANNER ---------- */
.hero-card {
    position: relative;
    margin: 0 16px;
    overflow: hidden;
    border-radius: 20px;
}
@media (min-width: 768px) {
    .hero-card { margin: 0 24px; }
}
.hero-card img {
    display: block;
    width: 100%;
    height: 82vh;
    min-height: 500px;
    object-fit: cover;
    border-radius: 20px;
}

.hero-card .hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 24px;
    background: linear-gradient(180deg, rgba(0,0,0,0.10) 0%, rgba(0,0,0,0.04) 45%, rgba(0,0,0,0.04) 55%, rgba(0,0,0,0.20) 100%);
    /* currentColor wordt overgeërfd door names + subtitle + ornament */
    color: var(--color-primary);
}

.hero-card .couple-names {
    font-family: 'Pinyon Script', cursive !important;
    color: currentColor;
    font-size: clamp(72px, 13vw, 160px) !important;
    font-weight: 400 !important;
    line-height: 1.1;
    margin: 0;
    letter-spacing: 0;
    padding: 6px 0;
    text-shadow: 0 2px 16px rgba(0,0,0,0.32), 0 1px 4px rgba(0,0,0,0.25);
}

/* Thin scheidingslijn onder names (CSS-only, geen ornament-asset) */
.hero-card .couple-names::after {
    content: '';
    display: block;
    width: 56px;
    height: 1px;
    margin: 18px auto 0;
    background-color: currentColor;
    opacity: 0.7;
}

.hero-card .hero-title {
    font-family: 'Karla', sans-serif !important;
    color: currentColor;
    font-size: clamp(11px, 1.3vw, 14px) !important;
    font-weight: 500 !important;
    text-transform: uppercase;
    letter-spacing: 0.34em;
    margin: 16px 0 0 !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.32);
    font-style: normal;
}
/* ---------- IMAGE - foto_tekst ---------- */
.image-card {
    margin: 48px 0;
}
.image-card .foto-tekst {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
}
.image-card .foto-tekst .image-side {
    width: 100%;
    max-width: 440px;
}
.image-card .foto-tekst .image-side img {
    width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    display: block;
    border-radius: 24px;
}
.image-card .foto-tekst .text-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    gap: 18px;
}
.image-card .foto-tekst .text-side h2 {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(28px, 3.8vw, 42px);
    line-height: 1.15;
    margin: 0;
    letter-spacing: 0.005em;
    max-width: 16ch;
}
.image-card .foto-tekst .text-side .description {
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
    text-align: center;
    max-width: 380px;
}
.image-card .foto-tekst .text-side .description p { margin: 0 0 1em; }
.image-card .foto-tekst .text-side .description p:last-child { margin-bottom: 0; }
.image-card .foto-tekst .text-side .description a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 900px) {
    .image-card .foto-tekst {
        flex-direction: row;
        gap: 72px;
        align-items: center;
        justify-content: center;
    }
    .image-card .foto-tekst .image-side {
        flex: 0 1 440px;
        max-width: 440px;
    }
    .image-card .foto-tekst .text-side {
        flex: 0 1 400px;
    }
}
/* ---------- IMAGE - grote_foto ---------- */
.image-card .grote-foto {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: none;
    padding: 0 16px;
    margin: 0;
}
@media (min-width: 768px) {
    .image-card .grote-foto { padding: 0 24px; }
}
.image-card .grote-foto img {
    order: 1;
    width: 100%;
    height: 65vh;
    min-height: 440px;
    max-height: 680px;
    object-fit: cover;
    display: block;
    border-radius: 20px;
}
.image-card .grote-foto h2 {
    order: 2;
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--color-primary);
    font-weight: 400;
    text-align: center;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.2;
    margin: 24px 24px 0;
    letter-spacing: 0.005em;
}
.image-card .grote-foto h2:empty {
    display: none;
}
/* ---------- IMAGE - collage ---------- */
.collage-layout {
    padding: 0 20px;
    max-width: 1280px;
    margin: 0 auto;
}
@media (min-width: 768px) {
    .collage-layout { padding: 0 32px; }
}
.collage-layout > h2 {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    text-align: center;
    font-weight: 400;
    font-size: clamp(26px, 3.6vw, 38px);
    line-height: 1.15;
    margin: 0 0 32px;
    letter-spacing: 0.005em;
}

.collage-grid {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}
.collage-grid:last-child { margin-bottom: 0; }

.collage-grid .tile {
    overflow: hidden;
    border-radius: 16px;
}
.collage-grid .tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Layout-varianten op aantal foto's */
.collage-grid.l1 { grid-template-columns: 1fr; }
.collage-grid.l1 .tile { aspect-ratio: 16 / 9; }

.collage-grid.l2 { grid-template-columns: 1fr 1fr; }
.collage-grid.l2 .tile { aspect-ratio: 4 / 5; }

.collage-grid.l3 { grid-template-columns: repeat(3, 1fr); }
.collage-grid.l3 .tile { aspect-ratio: 4 / 5; }

.collage-grid.l4 { grid-template-columns: repeat(2, 1fr); }
.collage-grid.l4 .tile { aspect-ratio: 1; }

.collage-grid.l5,
.collage-grid.l6,
.collage-grid.lmasonry { grid-template-columns: repeat(3, 1fr); }
.collage-grid.l5 .tile,
.collage-grid.l6 .tile,
.collage-grid.lmasonry .tile { aspect-ratio: 4 / 5; }

@media (max-width: 640px) {
    .collage-grid.l3,
    .collage-grid.l5,
    .collage-grid.l6,
    .collage-grid.lmasonry { grid-template-columns: repeat(2, 1fr); }
}
/* ---------- QUOTE ---------- */
.quote-card {
    max-width: 760px;
    margin: 56px auto;
    padding: 0 24px;
    text-align: center;
}
.quote-card .quote-img { display: none; }
.quote-card .quote-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.quote-card blockquote {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: clamp(22px, 2.8vw, 32px);
    line-height: 1.45;
    margin: 0;
    font-weight: 400;
    max-width: 640px;
}
.quote-card h2 {
    font-family: 'Pinyon Script', cursive;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(24px, 2.8vw, 32px);
    line-height: 1.3;
    margin: 0;
    padding: 4px 0;
    text-align: center;
}
/* ---------- COUNTDOWN ---------- */
.card-countdown {
    max-width: 900px;
    margin: 56px auto;
    padding: 0 24px;
    text-align: center;
}
.countdown-title {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(24px, 3.4vw, 38px);
    line-height: 1.2;
    margin: 0 0 36px;
    letter-spacing: 0.005em;
}

.countdown-timers {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
}
.countdown-unit {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 0 12px;
}
.countdown-value {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: clamp(48px, 7.2vw, 88px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}
.countdown-label {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin-top: 18px;
    opacity: 0.85;
}

@media (max-width: 640px) {
    .countdown-unit { padding: 0 4px; }
    .countdown-value { font-size: clamp(36px, 11vw, 56px); }
    .countdown-label { font-size: 9px; letter-spacing: 0.22em; margin-top: 12px; }
}
/* ---------- SCHEDULE ---------- */
.schedule-wrapper {
    max-width: 620px;
    margin: 56px auto;
    padding: 0 24px;
}
.schedule-container {
    padding: 0 !important;
}
.schedule-heading {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    text-align: center;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    margin: 0 0 44px;
    letter-spacing: 0.005em;
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
}

.timeline-item {
    padding: 28px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 15%, transparent);
    text-align: center;
}
.timeline-item:first-child { padding-top: 0; }
.timeline-item:last-child {
    border-bottom: 0;
    padding-bottom: 0;
}
.timeline-item::before { display: none !important; }
.timeline-dot { display: none; }

.timeline-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.timeline-content img { display: none; }

.timeline-time {
    order: 1;
    font-family: 'Pinyon Script', cursive;
    color: var(--color-primary);
    font-size: clamp(28px, 3.6vw, 36px);
    line-height: 1.1;
    margin: 0;
    padding: 4px 0 2px;
}

.timeline-title {
    order: 2;
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(20px, 2.4vw, 24px);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.005em;
}

.timeline-description {
    order: 3;
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.65;
    font-weight: 400;
    margin: 6px 0 0;
    max-width: 360px;
}
/* ---------- COLUMNS TITLE+TEXT ---------- */
.title-text-section {
    padding: 48px 24px;
}
.title-text-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    max-width: 900px !important;
    margin: 0 auto;
}
.title-text-grid > h2 {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(28px, 4vw, 44px);
    line-height: 1.15;
    margin: 0;
    text-align: center;
    letter-spacing: 0.005em;
    max-width: 20ch;
}
.title-text-grid .text-content {
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 400;
    text-align: center;
    max-width: 560px;
}
.title-text-grid .text-content p { margin: 0 0 1em; }
.title-text-grid .text-content p:last-child { margin-bottom: 0; }
.title-text-grid .text-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}
/* ---------- COLUMNS COUNTDOWN+MAP ---------- */
.countdown-map {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 56px auto;
    padding: 0 24px;
    display: flex !important;
    flex-direction: column-reverse;
    gap: 32px;
    align-items: center;
    justify-content: center;
}
@media (min-width: 900px) {
    .countdown-map {
        flex-direction: row-reverse;
        gap: 64px;
        align-items: center;
    }
}

/* MAP zijde (visueel links op desktop) - rounded 20px (matcht hero) */
.countdown-map .map {
    width: 100%;
    max-width: 400px;
    flex: 0 1 400px;
    aspect-ratio: 4 / 5;
}
.countdown-map .map > * {
    width: 100% !important;
    height: 100% !important;
}
.countdown-map .map .map-click-area,
.countdown-map .map .forever-map {
    display: block;
    border-radius: 20px;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

/* COUNTDOWN zijde (visueel rechts op desktop) */
.countdown-map .countdown {
    flex: 0 1 400px;
    max-width: 400px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    text-align: center;
}

/* Reorder: title → location subtitle → 2x2 countdown */
.countdown-map .countdown h2 { order: 1; margin: 0 0 10px; }
.countdown-map .map-link-wrapper { order: 2; margin: 0 0 32px; }
.countdown-map .live-countdown { order: 3; }
.countdown-map .countdown-days { display: none; }

.countdown-map .countdown h2 {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    letter-spacing: 0.005em;
    text-align: center;
}

.countdown-map .map-link-wrapper { text-align: center; }
.countdown-map .map-link {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.85;
}
.countdown-map .map-link:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* 2x2 grid zonder borders - alleen whitespace */
.countdown-map .countdown-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 16px;
    row-gap: 32px;
}
.countdown-map .countdown-item {
    padding: 0;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}
.countdown-map .countdown-number {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: clamp(38px, 4.6vw, 54px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.01em;
}
.countdown-map .countdown-text {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.28em;
    font-weight: 500;
    margin-top: 12px;
    opacity: 0.85;
}
/* ---------- GOOGLEMAPS ---------- */
.googlemaps-card {
    max-width: 1200px;
    margin: 56px auto;
    padding: 0 24px;
}
@media (min-width: 768px) {
    .googlemaps-card { padding: 0 32px; }
}
.googlemaps-card .map-click-area,
.googlemaps-card .forever-map {
    display: block;
    width: 100% !important;
    height: clamp(360px, 50vw, 480px) !important;
    border-radius: 20px !important;
    border: 0 !important;
    overflow: hidden;
    box-shadow: none !important;
}
.googlemaps-card .map-link-wrapper {
    display: block;
    text-align: center;
    margin-top: 22px;
    padding: 0 20px;
}
.googlemaps-card .map-link {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    text-decoration: none;
    opacity: 0.9;
}
.googlemaps-card .map-link:hover {
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-thickness: 1px;
}
/* ---------- PERSON ---------- */
.people-grid,
.my-8.max-w-\[1280px\] {
    max-width: 1200px !important;
    margin: 56px auto !important;
    padding: 0 20px;
    gap: 32px !important;
}
@media (min-width: 768px) {
    .people-grid,
    .my-8.max-w-\[1280px\] { padding: 0 32px; }
}
.my-8.max-w-\[1280px\] > .grid { gap: 32px !important; }

/* Force 3-koloms op desktop */
@media (min-width: 1024px) {
    .people-grid {
        grid-template-columns: repeat(3, 1fr) !important;
    }
}

.person-card {
    padding: 0;
    text-align: center;
    align-items: center;
}

.person-card img {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 50%;
    margin: 0 auto 20px !important;
    display: block;
    height: auto !important;
}

.person-card .avatar {
    width: 100%;
    max-width: 220px;
    aspect-ratio: 1 / 1;
    height: auto;
    border-radius: 50%;
    margin: 0 auto 20px;
}

.person-card h3 {
    font-family: 'DM Serif Display', serif;
    font-style: italic;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.2;
    margin: 0;
    letter-spacing: 0.005em;
}

.person-card p {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    margin: 8px 0 0;
    opacity: 0.85;
}
/* ---------- GUESTBOOK ---------- */
.card-guestbook {
    box-sizing: border-box;
    max-width: 580px;
    margin: 56px auto;
    padding: 0 24px;
}

/* Title (hergebruikt .schedule-heading class) */
.card-guestbook .schedule-heading {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    text-align: center;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 38px);
    line-height: 1.15;
    margin: 0;
    letter-spacing: 0.005em;
}

/* Subtitle */
.card-guestbook .text-content {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-text) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    text-align: center !important;
    line-height: 1.6;
    margin: 10px 0 0 !important;
    opacity: 0.85 !important;
}

/* Inputs, textarea, select - soft 16px rounded */
.card-guestbook input[type="text"],
.card-guestbook input[type="email"],
.card-guestbook textarea,
.card-guestbook select {
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 16px !important;
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 12px 18px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    letter-spacing: 0.01em !important;
}
.card-guestbook input::placeholder,
.card-guestbook textarea::placeholder {
    color: var(--color-primary) !important;
    opacity: 0.45 !important;
    font-weight: 400 !important;
}
.card-guestbook input:focus,
.card-guestbook textarea:focus,
.card-guestbook select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}
.card-guestbook textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

/* Select met mini caret */
.card-guestbook select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
                      linear-gradient(135deg, var(--color-primary) 50%, transparent 50%) !important;
    background-position: calc(100% - 20px) 20px, calc(100% - 14px) 20px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 36px !important;
    cursor: pointer;
}

/* Submit button: refined terracotta pill */
.card-guestbook button[type="submit"] {
    background: var(--color-primary) !important;
    color: var(--color-background) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Karla', sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 14px 44px !important;
    cursor: pointer;
    transition: opacity 220ms ease;
}
.card-guestbook button[type="submit"]:hover {
    opacity: 0.85;
}

/* Inline-styled p tags overrulen */
.card-guestbook p[style*="text-align: center"] {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
}
/* ---------- FORM (RSVP) ---------- */
.form-container,
.card-form {
    max-width: 600px;
    margin: 48px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.form-title {
    font-family: 'DM Serif Display', serif;
    color: var(--color-primary);
    text-align: center;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 40px);
    line-height: 1.15;
    margin: 0 0 12px;
    letter-spacing: 0.005em;
}

.form-intro {
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
    margin: 0 0 36px;
    font-weight: 400;
    opacity: 0.9;
}

.form-success {
    font-family: 'Pinyon Script', cursive;
    color: var(--color-primary);
    font-size: clamp(28px, 3.6vw, 36px);
    text-align: center;
    padding: 32px 0;
    line-height: 1.2;
}

.form-fields {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 0 10px;
}

.form-label {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0;
}
.form-required {
    color: var(--color-primary);
    margin-left: 4px;
}

/* Underline-only inputs en selects */
.card-form input.form-input,
.card-form select.form-select,
.form-container input.form-input,
.form-container select.form-select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-bottom: 1px solid var(--color-primary) !important;
    border-radius: 0 !important;
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 8px 0 10px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    transition: border-color 180ms ease;
}
.card-form input.form-input:focus,
.card-form select.form-select:focus,
.form-container input.form-input:focus,
.form-container select.form-select:focus {
    outline: none !important;
    background: transparent !important;
    border-bottom-color: var(--color-primary) !important;
    box-shadow: none !important;
}

/* Select met mini caret */
.card-form select.form-select,
.form-container select.form-select {
    background-image: linear-gradient(45deg, transparent 50%, var(--color-primary) 50%),
                      linear-gradient(135deg, var(--color-primary) 50%, transparent 50%) !important;
    background-position: calc(100% - 14px) 18px, calc(100% - 8px) 18px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 28px !important;
    cursor: pointer;
}

/* Number input arrows verbergen */
.card-form input[type="number"].form-input,
.form-container input[type="number"].form-input {
    -moz-appearance: textfield !important;
}
.card-form input[type="number"].form-input::-webkit-outer-spin-button,
.card-form input[type="number"].form-input::-webkit-inner-spin-button,
.form-container input[type="number"].form-input::-webkit-outer-spin-button,
.form-container input[type="number"].form-input::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    appearance: none !important;
    margin: 0;
}

/* Textarea: 20px rounded (matcht hero/grote_foto design taal) */
.form-group.full-width { padding-top: 24px; }
.card-form textarea.form-textarea,
.form-container textarea.form-textarea {
    appearance: none !important;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 20px !important;
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    padding: 14px 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical;
    min-height: 140px;
    box-shadow: none !important;
}
.card-form textarea.form-textarea:focus,
.form-container textarea.form-textarea:focus {
    outline: none !important;
    background: transparent !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}

/* Submit button: terracotta pill */
.form-actions {
    margin-top: 36px;
    text-align: center;
}
.form-submit {
    background: var(--color-primary);
    color: var(--color-background);
    border: 0;
    border-radius: 999px;
    font-family: 'Karla', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 14px 48px;
    cursor: pointer;
    transition: opacity 220ms ease;
}
.form-submit:hover {
    opacity: 0.85;
}

/* RSVP code-entry error overrulen (inline #e53e3e) */
.card-form .form-error,
.form-container .form-error {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 12px !important;
    text-align: center !important;
    margin: 12px 0 0 !important;
    padding: 8px 12px !important;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
    border-radius: 12px !important;
}
/* ---------- PASSWORD SCREEN ---------- */
.password-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    background: var(--color-background);
}
.password-card {
    width: 100%;
    max-width: 480px;
    padding: 48px 32px;
    background: var(--color-background);
    border: 1px solid var(--color-primary);
    border-radius: 24px;
    text-align: center;
}
.password-card .couple-names {
    font-family: 'Pinyon Script', cursive;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(52px, 9vw, 78px);
    line-height: 1.1;
    margin: 0 0 18px;
    letter-spacing: 0;
    padding: 4px 0;
}
.password-card .subtitle {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.28em;
    margin: 0 0 18px;
}
.password-card .info-text {
    font-family: 'Karla', sans-serif;
    color: var(--color-text);
    font-size: 13px;
    line-height: 1.7;
    font-weight: 400;
    margin: 0 0 28px;
    opacity: 0.9;
}
.password-card .error-text {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 12px;
    text-align: center;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    border-radius: 12px;
}
.password-card form { margin-top: 12px; }
.password-card input[type="password"],
.password-card input[type="text"] {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 400;
    padding: 12px 18px;
    margin-bottom: 14px;
    appearance: none;
    -webkit-appearance: none;
}
.password-card input::placeholder {
    color: var(--color-primary);
    opacity: 0.45;
}
.password-card input:focus {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent);
}
.password-card button[type="submit"],
.password-card #inviteBtn {
    width: 100%;
    background: var(--color-primary);
    color: var(--color-background);
    border: 0;
    border-radius: 999px;
    font-family: 'Karla', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 14px 32px;
    cursor: pointer;
    transition: opacity 220ms ease;
}
.password-card button[type="submit"]:hover,
.password-card #inviteBtn:hover { opacity: 0.85; }

@keyframes fae-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.animate-fade-in {
    animation: fae-fade-in 600ms ease-out both;
}

/* ============================================================
   PHOTO ALBUM (public.blade.php) - Bohemian Earth overrides
   ============================================================ */
.album-header {
    border-bottom: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent) !important;
    background: var(--color-background) !important;
}
.album-header .couple-names {
    font-family: 'Pinyon Script', cursive !important;
    color: var(--color-primary) !important;
    font-size: 30px !important;
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: 0 !important;
    padding: 2px 0 !important;
}
.album-header .album-title {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.26em !important;
    text-transform: uppercase !important;
    opacity: 0.85 !important;
    margin-top: 6px !important;
}
.photo-count {
    background: var(--color-primary) !important;
    color: var(--color-background) !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 10px !important;
    font-weight: 500 !important;
    letter-spacing: 0.24em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
    border-radius: 999px !important;
}
.upload-card {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 24px !important;
    box-shadow: none !important;
}
.upload-heading {
    font-family: 'DM Serif Display', serif !important;
    color: var(--color-primary) !important;
    font-weight: 400 !important;
    font-size: 28px !important;
    letter-spacing: 0.005em !important;
}
.upload-subtitle {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-text) !important;
    opacity: 0.85 !important;
    font-size: 13px !important;
    font-weight: 400 !important;
}
.name-input {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 16px !important;
    color: var(--color-primary) !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 14px !important;
    font-weight: 400 !important;
}
.name-input::placeholder { color: var(--color-primary) !important; opacity: 0.45 !important; }
.name-input:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 10%, transparent) !important;
}
.dropzone {
    background: transparent !important;
    border: 1px dashed var(--color-primary) !important;
    border-radius: 20px !important;
    color: var(--color-primary) !important;
}
.dropzone:hover,
.dropzone.drag-over {
    background: color-mix(in srgb, var(--color-primary) 4%, transparent) !important;
    border-color: var(--color-primary) !important;
}
.dropzone-text {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.dropzone-hint {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
    opacity: 0.6 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
}
.btn-primary {
    background: var(--color-primary) !important;
    color: var(--color-background) !important;
    border-radius: 999px !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
}
.btn-secondary {
    background: transparent !important;
    color: var(--color-primary) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 999px !important;
    font-family: 'Karla', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
}
.btn-secondary:hover {
    background: color-mix(in srgb, var(--color-primary) 6%, transparent) !important;
}
.gallery-heading {
    font-family: 'DM Serif Display', serif !important;
    color: var(--color-primary) !important;
    font-weight: 400 !important;
    font-size: 22px !important;
    letter-spacing: 0.005em !important;
}
.masonry-item { border-radius: 16px !important; }
.empty-state,
.closed-card {
    color: var(--color-primary) !important;
    opacity: 0.7 !important;
}
.empty-state p,
.closed-card h2,
.closed-card p {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
}
.closed-card h2 {
    font-family: 'DM Serif Display', serif !important;
    font-weight: 400 !important;
    font-size: 24px !important;
}
.msg-card p {
    font-family: 'Karla', sans-serif !important;
    color: var(--color-primary) !important;
}
.progress-bar { background: var(--color-primary) !important; }
.progress-bar-wrap { background: color-mix(in srgb, var(--color-primary) 12%, transparent) !important; }
.album-footer {
    color: var(--color-primary) !important;
    opacity: 0.7 !important;
    font-family: 'Karla', sans-serif !important;
    letter-spacing: 0.02em;
}
.album-footer a { color: var(--color-primary) !important; }

/* ---------- FOOTER ---------- */
footer {
    margin-top: 0 !important;
    padding: 28px 24px;
    border-top: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    text-align: center;
    background: var(--color-background);
}
footer p {
    font-family: 'Karla', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    margin: 0;
    opacity: 0.85;
}

/* Volledige foto tonen (niet bijsnijden) - opt-in per image-card (full_image) */
.image-card .grote-foto img.full-image {
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    min-height: 0 !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Volledige foto ook voor foto-tekst en collage (full_image) */
.image-card .foto-tekst .image-side img.full-image {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
}
.collage-grid .tile img.full-image {
    object-fit: contain !important;
}