/* ============================================================
   POPPY RED - Template stylesheet
   ============================================================ */

/* ---------- Fonts ---------- */
@font-face {
    font-family: 'Caveat';
    src: url('../poppy_red/Caveat/Caveat-VariableFont_wght.ttf') format('truetype-variations');
    font-weight: 400 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../poppy_red/Instrument_Serif/InstrumentSerif-Regular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Instrument Serif';
    src: url('../poppy_red/Instrument_Serif/InstrumentSerif-Italic.ttf') format('truetype');
    font-weight: 400;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../poppy_red/Roboto/Roboto-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Roboto';
    src: url('../poppy_red/Roboto/Roboto-Italic-VariableFont_wdth,wght.ttf') format('truetype-variations');
    font-weight: 100 900;
    font-style: italic;
    font-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: 'Roboto', sans-serif;
    color: var(--color-text);
    scroll-behavior: smooth;
}

main {
    padding-bottom: 60px;
}

/* Section spacing: meer ademruimte tussen blocks dan Tailwind's default py-6 */
[data-card-id] {
    padding: 36px 0 !important;
}
[data-card-id]:first-child {
    padding-top: 0 !important;
}
[data-card-id]:last-child {
    padding-bottom: 0 !important;
}
/* Banner mag NIET extra padding hebben - hij moet flush onder de header */
[data-card-id]:has(.hero-card) {
    padding-top: 0 !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: 18px;
    text-align: center;
}
.password-card .couple-names {
    font-family: 'Caveat', cursive;
    color: var(--color-primary);
    font-weight: 500;
    font-size: clamp(48px, 8vw, 72px);
    line-height: 1.05;
    margin: 0 0 16px;
    letter-spacing: 0;
}
.password-card .subtitle {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    font-size: 14px;
    letter-spacing: 0.22em;
    margin: 0 0 18px;
}
.password-card .info-text {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0 0 24px;
    opacity: 0.85;
}
.password-card .error-text {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 12px;
    text-align: center;
    margin: 12px 0 0;
    padding: 8px 12px;
    background: rgba(218, 47, 42, 0.08);
    border-radius: 6px;
}
.password-card form { margin-top: 8px; }
.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: 10px;
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 14px;
    padding: 12px 16px;
    margin-bottom: 12px;
    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 rgba(218, 47, 42, 0.08);
}
.password-card button[type="submit"],
.password-card #inviteBtn {
    width: 100%;
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 32px;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.password-card button[type="submit"]:hover,
.password-card #inviteBtn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(218, 47, 42, 0.45);
}

/* Fade-in animation als die wordt gebruikt */
@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;
}

/* ---------- FOOTER ---------- */
footer {
    margin-top: 0 !important;
    padding: 22px 24px;
    border-top: 1px solid var(--color-primary);
    text-align: center;
    background: var(--color-background);
}
footer p {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
}

/* ============================================================
   PHOTO ALBUM (public.blade.php)
   Overrules de inline styles van het album zodat het matcht
   met de Poppy Red look. Gebruikt !important omdat inline
   styles in album page later in head loaden.
   ============================================================ */
.album-header,
.album-header + .container body,
.upload-card,
.gallery-section,
.album-footer {
    font-family: 'Roboto', sans-serif !important;
}
.album-header .couple-names {
    font-family: 'Caveat', cursive !important;
    color: var(--color-primary) !important;
    font-size: 28px !important;
    font-weight: 500 !important;
    line-height: 1 !important;
}
.album-header .album-title {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 10px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    opacity: 0.85 !important;
    margin-top: 4px !important;
}
.album-header {
    border-bottom: 1px solid var(--color-primary) !important;
    background: var(--color-background) !important;
}
.photo-count {
    background: var(--color-primary) !important;
    color: #fff !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    padding: 4px 12px !important;
}
.upload-card {
    background: var(--color-background) !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 16px !important;
    box-shadow: none !important;
}
.upload-heading {
    font-family: 'Instrument Serif', serif !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 32px !important;
    letter-spacing: 0.03em !important;
}
.upload-subtitle {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    opacity: 0.85 !important;
    font-size: 13px !important;
}
.name-input {
    background: transparent !important;
    border: 1px solid var(--color-primary) !important;
    border-radius: 10px !important;
    color: var(--color-primary) !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 14px !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 rgba(218, 47, 42, 0.08) !important;
}
.dropzone {
    background: transparent !important;
    border: 2px dashed var(--color-primary) !important;
    border-radius: 12px !important;
    color: var(--color-primary) !important;
}
.dropzone:hover,
.dropzone.drag-over {
    background: rgba(218, 47, 42, 0.04) !important;
    border-color: var(--color-primary) !important;
}
.dropzone-text {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}
.dropzone-hint {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    opacity: 0.6 !important;
    font-size: 12px !important;
}
.btn-primary {
    background: var(--color-primary) !important;
    color: #fff !important;
    border-radius: 999px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !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: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 14px 32px !important;
}
.btn-secondary:hover { background: rgba(218, 47, 42, 0.06) !important; }
.gallery-heading {
    font-family: 'Instrument Serif', serif !important;
    color: var(--color-primary) !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    letter-spacing: 0.04em !important;
}
.masonry-item { border-radius: 10px !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: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
}
.closed-card h2 {
    font-family: 'Instrument Serif', serif !important;
    text-transform: uppercase !important;
    font-weight: 400 !important;
    font-size: 24px !important;
    letter-spacing: 0.03em !important;
}
.msg-card p {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
}
.progress-bar { background: var(--color-primary) !important; }
.progress-bar-wrap { background: rgba(218, 47, 42, 0.12) !important; }
.album-footer {
    color: var(--color-primary) !important;
    opacity: 0.65 !important;
    font-family: 'Roboto', sans-serif !important;
    letter-spacing: 0.02em;
}
.album-footer a { color: var(--color-primary) !important; }

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

#publicNav {
    position: relative;
    padding: 18px 24px;
}

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

/* Logo "A & D" */
.header-namen {
    font-family: 'Caveat', cursive;
    font-weight: 500;
    color: var(--color-primary);
    font-size: 44px;
    line-height: 1;
    letter-spacing: 0.5px;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.header-namen .en-teken {
    font-family: 'Caveat', cursive;
    font-weight: 500;
}

/* Hamburger (2 red horizontal lines, animates to X) */
.nav-toggle {
    --size: 40px;
    --line-w: 32px;
    --line-h: 2px;
    --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: 999px;
    transform-origin: center;
    transform: translateX(-50%);
    transition: transform 220ms ease, top 220ms ease, background-color 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: 16px 28px 28px;
    display: none;
    flex-direction: column;
    gap: 0;
    z-index: 100;
    box-shadow: 0 10px 24px -16px rgba(218, 47, 42, 0.2);
}
.nav-menu.active {
    display: flex;
}
.nav-menu li {
    list-style: none;
}
.nav-menu .nav-link {
    font-family: 'Roboto', sans-serif;
    font-size: 15px;
    font-weight: 400;
    color: var(--color-primary);
    text-decoration: none;
    padding: 14px 0;
    display: block;
    letter-spacing: 0.04em;
}
.nav-menu .nav-link.is-active {
    text-decoration: underline;
    text-underline-offset: 4px;
    text-decoration-thickness: 1px;
}

/* Mobile nav drawer - top border + item scheidingen */
@media (max-width: 899px) {
    .nav-menu {
        border-top: 1px solid var(--color-primary);
    }
    .nav-menu li {
        border-bottom: 1px solid rgba(218, 47, 42, 0.15);
    }
    .nav-menu li:last-child {
        border-bottom: 0;
    }
}

/* Desktop: logo gecentreerd bovenaan, nav-items gecentreerd eronder */
@media (min-width: 900px) {
    #publicNav {
        padding: 28px 40px 20px;
    }

    /* Logo gecentreerd */
    .header-container {
        justify-content: center;
    }
    .header-namen {
        font-size: 56px;
    }
    .nav-toggle {
        display: none;
    }

    /* Nav-menu als gecentreerde rij onder het logo */
    .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: 14px;
        padding: 4px 0;
    }
    .nav-menu .nav-link:hover {
        text-decoration: underline;
        text-underline-offset: 4px;
        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: 'Roboto', sans-serif !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    letter-spacing: 0.2em !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: rgba(218, 47, 42, 0.08) !important; }
.lang-toggle svg { width: 11px; height: 11px; 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: 8px !important;
    box-shadow: 0 8px 24px -12px rgba(218, 47, 42, 0.25) !important;
    min-width: 180px !important;
    z-index: 100;
    overflow: hidden;
}
.lang-option {
    display: block !important;
    padding: 10px 14px !important;
    font-family: 'Roboto', sans-serif !important;
    font-size: 12px !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    letter-spacing: 0.04em;
    transition: background 150ms ease;
}
.lang-option:hover { background: rgba(218, 47, 42, 0.08) !important; }

/* Op mobile (in de mobile menu drawer) - language switcher gewoon centered */
@media (max-width: 899px) {
    .nav-menu .language-switcher { justify-content: flex-start; padding: 8px 0; }
    /* In de mobiele menu-drawer staat de taalknop onderaan; het dropdown-paneel
       moet daarom OMHOOG openen, anders valt het onder de drawer en wordt het
       afgesneden door de hero eronder. */
    .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: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 0.01em;
    margin: 32px 0;
}
.title-blok-h1 {
    font-size: clamp(34px, 5.5vw, 56px);
    line-height: 1.1;
}
.title-blok-h2 {
    font-size: clamp(26px, 4vw, 40px);
    line-height: 1.15;
}
.title-blok-h3 {
    font-size: clamp(20px, 2.6vw, 26px);
    line-height: 1.25;
}

/* ---------- TEXT ---------- */
.text-card {
    display: flex;
    justify-content: center;
    padding: 0 24px;
}
.text-card .text-content {
    max-width: 680px;
    width: 100%;
    font-family: 'Roboto', sans-serif;
    color: var(--color-text);
    font-size: 16px;
    line-height: 1.75;
    font-weight: 400;
    text-align: left;
}
.text-card .text-content p { margin: 0 0 1em; }
.text-card .text-content p:last-child { margin-bottom: 0; }
.text-card .text-content a {
    color: var(--color-primary);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.text-card .text-content strong { font-weight: 600; }
.text-card .text-content em { font-style: italic; }
.text-card .text-content ul,
.text-card .text-content ol { margin: 0 0 1em; padding-left: 1.4em; }
.text-card .text-content li { margin: 0.3em 0; }
.text-card .text-content h1,
.text-card .text-content h2,
.text-card .text-content h3 {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    margin: 1.2em 0 0.4em;
}

/* ---------- DIVIDER ---------- */
/* Blade gebruikt Tailwind classes — we overrulen via attribute selectors */
hr.border-t-2.border-gray-300 {
    border: 0;
    border-top: 1px solid var(--color-primary);
    opacity: 0.6;
}
hr.border-t-2.border-dashed {
    border: 0;
    border-top: 1px dashed var(--color-primary);
    opacity: 0.6;
}
/* Fancy divider: vervang het 💍 emoji-blok visueel */
.text-gray-500 span.border-t {
    border-color: var(--color-primary);
    opacity: 0.5;
}
.text-gray-500 { color: var(--color-primary) !important; opacity: 0.7; }

/* ---------- WHITESPACE ---------- */
/* Tailwind h-4/h-10/h-20 doen het werk — geen extra CSS nodig */

/* ---------- BANNER ---------- */
.hero-card {
    position: relative;
    margin: 0 20px;
    overflow: hidden;
    border-radius: 12px;
}
@media (min-width: 768px) {
    .hero-card { margin: 0 32px; }
}
.hero-card img {
    display: block;
    width: 100%;
    height: 80vh;
    min-height: 480px;
    object-fit: cover;
    border-radius: 12px;
}
.hero-card .hero-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    text-align: center;
    padding: 0 24px 7vh;
    background: none;
}
.hero-card .couple-names {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-size: clamp(56px, 9vw, 120px);
    font-weight: 400;
    line-height: 1;
    margin: 0;
    letter-spacing: 0;
}
.hero-card .hero-title {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-size: clamp(14px, 1.4vw, 20px);
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-top: 18px;
    font-style: normal;
}

/* ---------- IMAGE - foto_tekst ---------- */
.image-card {
    margin: 48px 0;
}
.image-card .foto-tekst {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
    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-top-left-radius: 50% 35%;
    border-top-right-radius: 50% 35%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
}
.image-card .foto-tekst .text-side {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 18px;
}
.image-card .foto-tekst .text-side h2 {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(26px, 3vw, 40px);
    line-height: 1.15;
    margin: 0;
    letter-spacing: 0.01em;
    max-width: 14ch;
}
.image-card .foto-tekst .text-side .description {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    max-width: 380px;
}
.image-card .foto-tekst .text-side .description p { margin: 0 0 0.75em; }
.image-card .foto-tekst .text-side .description p:last-child { margin-bottom: 0; }

@media (min-width: 900px) {
    .image-card .foto-tekst {
        flex-direction: row;
        gap: 96px;
        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 420px;
    }
}

/* ---------- IMAGE - grote_foto ---------- */
.image-card .grote-foto {
    position: relative;
    padding: 0 20px;
    max-width: none;
}
@media (min-width: 768px) {
    .image-card .grote-foto { padding: 0 32px; }
}
.image-card .grote-foto img {
    width: 100%;
    height: 55vh;
    min-height: 360px;
    max-height: 640px;
    object-fit: cover;
    display: block;
    border-radius: 12px;
}
.image-card .grote-foto h2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Caveat', cursive;
    color: var(--color-primary);
    font-weight: 500;
    font-size: clamp(64px, 10vw, 130px);
    line-height: 1;
    margin: 0;
    text-align: center;
    z-index: 2;
    width: max-content;
    max-width: 90%;
    pointer-events: 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: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(26px, 3.4vw, 40px);
    margin: 0 0 24px;
    letter-spacing: 0.01em;
}

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

.collage-grid .tile {
    overflow: hidden;
    border-radius: 12px;
}
.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 {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 1000px;
    margin: 48px auto;
    padding: 40px 32px;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    text-align: center;
}
@media (min-width: 768px) {
    .quote-card {
        width: calc(100% - 64px);
        padding: 48px 40px;
    }
}
.quote-card .quote-img { display: none; }

.quote-card .quote-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
}

.quote-card blockquote {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.5;
    margin: 0;
    font-weight: 400;
    max-width: 760px;
}

.quote-card h2 {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin: 0;
    text-align: center;
}

/* ---------- COUNTDOWN ---------- */
.card-countdown {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 1000px;
    margin: 48px auto;
    padding: 44px 32px;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    text-align: center;
}
@media (min-width: 768px) {
    .card-countdown {
        width: calc(100% - 64px);
        padding: 56px 40px;
    }
}

.countdown-title {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(22px, 3vw, 32px);
    line-height: 1.2;
    margin: 0 0 36px;
    letter-spacing: 0.04em;
}

.countdown-timers {
    display: flex;
    justify-content: center;
    align-items: stretch;
    gap: 0;
}
.countdown-unit {
    flex: 1;
    min-width: 0;
    text-align: center;
    padding: 8px 16px;
    position: relative;
}
.countdown-unit:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 12px;
    bottom: 12px;
    width: 1px;
    background: var(--color-primary);
    opacity: 0.45;
}

.countdown-value {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-size: clamp(48px, 7vw, 84px);
    font-weight: 400;
    line-height: 1;
}
.countdown-label {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-top: 16px;
}

@media (max-width: 640px) {
    .countdown-unit { padding: 4px 8px; }
    .countdown-value { font-size: clamp(36px, 11vw, 48px); }
    .countdown-label { font-size: 9px; letter-spacing: 0.18em; margin-top: 10px; }
}

/* ---------- SCHEDULE ---------- */
.schedule-wrapper {
    max-width: 1000px;
    margin: 48px auto;
    padding: 0 20px;
}
@media (min-width: 768px) {
    .schedule-wrapper { padding: 0 32px; }
}
.schedule-container {
    border: 1px solid var(--color-primary);
    border-radius: 16px;
    padding: 56px 40px !important;
}
.schedule-heading {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(28px, 3.8vw, 38px);
    margin: 0 0 48px;
    letter-spacing: 0.02em;
}

.timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    position: relative;
    max-width: 720px;
}

/* Hide native blade dot */
.timeline-dot { display: none; }

/* Items zigzag, lijn per item dat de gap overbrugt (zoals Dusty Pink) */
.timeline-item {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin: 0 0 24px 0;
}
.timeline-item:first-child { margin-top: 0; }
.timeline-item:last-child { margin-bottom: 0; }

/* Vertical line per item - bridges into the gap onder */
.timeline-item::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: -24px;
    left: 50%;
    width: 1px;
    background: var(--color-primary);
    transform: translateX(-50%);
    display: block !important;
}
.timeline-item:last-child::before {
    bottom: 0;
}

/* Odd items: content op RECHTS van center */
.timeline-item:nth-child(odd) {
    justify-content: flex-end;
}

.timeline-content {
    width: 50%;
    padding: 0 24px;
    box-sizing: border-box;
    text-align: left;
    position: relative;
}
.timeline-item:nth-child(even) .timeline-content {
    text-align: right;
}

.timeline-title {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.15;
    margin: 0;
    text-transform: none;
    letter-spacing: 0.01em;
}

.timeline-time {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    font-weight: 500;
    margin: 8px 0 8px -24px;   /* -24px = padding-left van content, dash begint op center line */
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.timeline-time::before {
    content: '';
    width: 22px;
    height: 1px;
    background: var(--color-primary);
    flex-shrink: 0;
}
/* Even items: dash op rechterkant, time element extends naar center line via negative right margin */
.timeline-item:nth-child(even) .timeline-time {
    margin-left: 0;
    margin-right: -24px;
    flex-direction: row-reverse;
}

.timeline-description {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.55;
    margin: 0;
    opacity: 0.95;
}

/* Hide per-item images (Figma heeft iconen die we negeren) */
.timeline-content img { display: none; }

/* Mobile: stack alles links, lijn naar links */
@media (max-width: 640px) {
    .schedule-container { padding: 32px 20px !important; }
    .timeline-item,
    .timeline-item:nth-child(odd) {
        justify-content: flex-start;
    }
    .timeline-item::before {
        left: 0;
        transform: none;
    }
    .timeline-content,
    .timeline-item:nth-child(even) .timeline-content {
        width: 100%;
        text-align: left;
        padding: 0 0 0 20px;
    }
    .timeline-time,
    .timeline-item:nth-child(even) .timeline-time {
        margin-left: -20px;
        margin-right: 0;
        flex-direction: row;
    }
}

/* ---------- COLUMNS TITLE+TEXT ---------- */
.title-text-section {
    padding: 40px 24px;
}
.title-text-grid {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    max-width: 900px !important;
}
.title-text-grid > h2 {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    font-weight: 400;
    font-size: clamp(30px, 4.2vw, 48px);
    line-height: 1.1;
    margin: 0;
    text-align: center;
    letter-spacing: 0.02em;
    max-width: 18ch;
}
.title-text-grid .text-content {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 14px;
    line-height: 1.65;
    text-align: center;
    max-width: 520px;
}
.title-text-grid .text-content p { margin: 0 0 0.8em; }
.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: 3px;
}

/* ---------- COLUMNS COUNTDOWN+MAP ---------- */
.countdown-map {
    box-sizing: border-box;
    max-width: 1100px;
    margin: 56px auto;
    padding: 0 20px;
    display: flex !important;
    flex-direction: column-reverse;
    gap: 32px;
    align-items: center;
    justify-content: center;
}
@media (min-width: 768px) {
    .countdown-map { padding: 0 32px; }
}
@media (min-width: 900px) {
    .countdown-map {
        flex-direction: row-reverse;
        gap: 64px;
        align-items: center;
    }
}

/* MAP zijde (visueel links op desktop) - arch-vormig zoals foto_tekst */
.countdown-map .map {
    width: 100%;
    max-width: 360px;
    flex: 0 1 360px;
    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-top-left-radius: 50% 35%;
    border-top-right-radius: 50% 35%;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    border: 0 !important;
    box-shadow: none !important;
    overflow: hidden;
}

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

/* Reorder: title -> subtitle (location) -> 2x2 grid */
.countdown-map .countdown h2 { order: 1; margin: 0 0 8px; }
.countdown-map .map-link-wrapper { order: 2; margin: 0 0 24px; }
.countdown-map .live-countdown { order: 3; }
.countdown-map .countdown-days { display: none; }

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

/* Subtitle (location text) */
.countdown-map .map-link-wrapper {
    text-align: center;
}
.countdown-map .map-link {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 12px;
    text-decoration: none;
    opacity: 0.9;
    letter-spacing: 0.02em;
}
.countdown-map .map-link:hover { text-decoration: underline; }

/* 2x2 grid van countdown-items met kruislijnen */
.countdown-map .countdown-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.countdown-map .countdown-item {
    padding: 22px 14px;
    text-align: center;
    background: transparent;
    border: 0;
    border-radius: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    min-width: 0;
}
/* Kruis-borders: cell 1 = rechts+onder, cell 2 = onder, cell 3 = rechts, cell 4 = niets */
.countdown-map .countdown-item:nth-child(1) {
    border-right: 1px solid var(--color-primary);
    border-bottom: 1px solid var(--color-primary);
}
.countdown-map .countdown-item:nth-child(2) {
    border-bottom: 1px solid var(--color-primary);
}
.countdown-map .countdown-item:nth-child(3) {
    border-right: 1px solid var(--color-primary);
}

.countdown-map .countdown-number {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    font-size: clamp(38px, 4.5vw, 56px);
    font-weight: 400;
    line-height: 1;
}
.countdown-map .countdown-text {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.22em;
    font-weight: 500;
    margin-top: 10px;
}

/* ---------- GOOGLEMAPS ---------- */
.googlemaps-card {
    width: 100%;
    max-width: none;
    margin: 56px 0;
    padding: 0;
}
.googlemaps-card .map-click-area,
.googlemaps-card .forever-map {
    display: block;
    width: 100% !important;
    height: clamp(360px, 48vw, 460px) !important;
    border-radius: 18px !important;
    border: 1px solid var(--color-primary);
    overflow: hidden;
    box-shadow: none !important;
}
.googlemaps-card .map-link-wrapper {
    display: block;
    text-align: center;
    margin-top: 20px;
    padding: 0 20px;
}
.googlemaps-card .map-link {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: var(--color-primary);
    font-size: clamp(20px, 2vw, 26px);
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 0.01em;
    position: relative;
    padding-bottom: 4px;
}
.googlemaps-card .map-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 32px;
    height: 1px;
    background: var(--color-primary);
    transform: translateX(-50%);
    transition: width 220ms ease;
}
.googlemaps-card .map-link:hover::after {
    width: 100%;
}

/* ---------- PERSON ---------- */
.people-grid,
.my-8.max-w-\[1280px\] {
    max-width: 1100px !important;
    margin: 48px auto !important;
    padding: 0 20px;
    gap: 0 !important;
}
@media (min-width: 768px) {
    .people-grid,
    .my-8.max-w-\[1280px\] { padding: 0 32px; }
}
/* Nested grid voor count < 4 */
.my-8.max-w-\[1280px\] > .grid { gap: 0 !important; }

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

.person-card {
    padding: 20px 28px;
    text-align: center;
    position: relative;
    align-items: center;
}

/* Verticale scheidingslijn tussen kolommen (alleen desktop, 3-col) */
@media (min-width: 1024px) {
    .person-card::after {
        content: '';
        position: absolute;
        right: 0;
        top: 24px;
        bottom: 24px;
        width: 1px;
        background: var(--color-primary);
        opacity: 0.5;
    }
    .people-grid > .person-card:nth-child(3n)::after { display: none; }
}

.person-card img {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    border-radius: 16px;
    margin: 0 auto 18px !important;
    display: block;
    height: auto !important;
}

.person-card .avatar {
    width: 100%;
    max-width: 240px;
    aspect-ratio: 4 / 5;
    height: auto;
    border-radius: 16px;
    margin: 0 auto 18px;
}

.person-card h3 {
    font-family: 'Instrument Serif', serif;
    font-style: italic;
    color: var(--color-primary);
    font-weight: 400;
    font-size: clamp(20px, 2vw, 24px);
    line-height: 1.2;
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
}

.person-card p {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    margin: 8px 0 0;
    opacity: 0.85;
}

/* ---------- GUESTBOOK ---------- */
.card-guestbook {
    box-sizing: border-box;
    width: calc(100% - 40px);
    max-width: 720px;
    margin: 48px auto;
    padding: 44px 28px;
    border: 1px solid var(--color-primary);
    border-radius: 16px;
}
@media (min-width: 768px) {
    .card-guestbook {
        width: calc(100% - 64px);
        padding: 52px 40px;
    }
}

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

/* Subtitle */
.card-guestbook .text-content {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 13px !important;
    text-align: center !important;
    line-height: 1.5;
    margin: 8px 0 0 !important;
    opacity: 0.85 !important;
}

/* Inputs, textarea, select — override inline styles met !important */
.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: 12px !important;
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    padding: 12px 16px !important;
    box-shadow: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}
.card-guestbook input::placeholder,
.card-guestbook textarea::placeholder {
    color: var(--color-primary) !important;
    opacity: 0.45 !important;
}
.card-guestbook input:focus,
.card-guestbook textarea:focus,
.card-guestbook select:focus {
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(218, 47, 42, 0.08) !important;
}
.card-guestbook textarea {
    min-height: 130px !important;
    resize: vertical !important;
}

/* Select met rode 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% - 18px) 18px, calc(100% - 12px) 18px !important;
    background-size: 6px 6px, 6px 6px !important;
    background-repeat: no-repeat, no-repeat !important;
    padding-right: 32px !important;
    cursor: pointer;
}

/* Submit button: rode pill */
.card-guestbook button[type="submit"] {
    background: var(--color-primary) !important;
    color: #fff !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: 'Roboto', sans-serif !important;
    font-weight: 500 !important;
    font-size: 11px !important;
    letter-spacing: 0.22em !important;
    text-transform: uppercase !important;
    padding: 14px 48px !important;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.card-guestbook button[type="submit"]:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(218, 47, 42, 0.45);
}
.card-guestbook button[type="submit"]:active { transform: translateY(0); }

/* Custom prompt + success/error tekst — inline styles overrulen */
.card-guestbook p[style*="text-align: center"] {
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
}

/* ---------- FORM (RSVP) ---------- */
.form-container,
.card-form {
    max-width: 760px;
    margin: 48px auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.form-title {
    font-family: 'Instrument Serif', serif;
    color: var(--color-primary);
    text-transform: uppercase;
    text-align: center;
    font-weight: 400;
    font-size: clamp(28px, 3.6vw, 40px);
    margin: 0 0 10px;
    letter-spacing: 0.04em;
}

.form-intro {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 13px;
    line-height: 1.5;
    text-align: center;
    margin: 0 0 36px;
    letter-spacing: 0.02em;
}

.form-success {
    font-family: 'Caveat', cursive;
    color: var(--color-primary);
    font-size: 28px;
    text-align: center;
    padding: 28px 0;
}

/* RSVP code-entry error - inline styled #e53e3e overrulen */
.card-form .form-error,
.form-container .form-error {
    font-family: 'Roboto', 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: rgba(218, 47, 42, 0.08) !important;
    border-radius: 6px !important;
}

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

.form-label {
    font-family: 'Roboto', sans-serif;
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.02em;
    margin: 0;
}
.form-required {
    color: var(--color-primary);
    margin-left: 2px;
}

/* 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: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    padding: 6px 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;
}
/* Mini caret op de select */
.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) 16px, calc(100% - 8px) 16px !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: WEL volledige border met afgeronde hoeken */
.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: 16px !important;
    font-family: 'Roboto', sans-serif !important;
    color: var(--color-primary) !important;
    font-size: 14px !important;
    padding: 16px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
    resize: vertical;
    min-height: 150px;
    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 rgba(218, 47, 42, 0.08) !important;
}

/* Submit button: rode pill, compact */
.form-actions {
    margin-top: 36px;
    text-align: center;
}
.form-submit {
    background: var(--color-primary);
    color: #fff;
    border: 0;
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    padding: 14px 48px;
    cursor: pointer;
    transition: transform 180ms ease, box-shadow 180ms ease;
}
.form-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(218, 47, 42, 0.45);
}
.form-submit:active { transform: translateY(0); }

/* 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;
}
/* "Toon de hele foto" in de collage: leg elke rij op dezelfde hoogte en laat
   de breedte de verhouding volgen (net als een fotogalerij). Zo staan liggende
   en staande foto's even groot in beeld, in plaats van dat liggende foto's
   klein wegvallen. Niets wordt bijgesneden; de hele foto blijft zichtbaar. */
.collage-grid.full-photos {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start !important;
    justify-content: center;
    gap: 12px;
    grid-template-columns: none !important;
    grid-template-rows: none !important;
    grid-template-areas: none !important;
}
.collage-grid.full-photos .tile {
    grid-area: auto !important;
    aspect-ratio: auto !important;
    height: clamp(200px, 24vw, 340px);
    max-height: none !important;
    max-width: 100%;
    overflow: hidden !important;
    border-radius: 10px;
}
.collage-grid.full-photos .tile img {
    position: static !important;
    height: 100% !important;
    width: auto !important;
    max-width: 100% !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    display: block !important;
}
@media (max-width: 640px) {
    .collage-grid.full-photos .tile { height: auto; width: 100%; }
    .collage-grid.full-photos .tile img { width: 100%; height: auto; }
}


/* ══════════════════════════════════════════════════════════════════════
   EIGEN NAVIGATIE (aug 2026) — bold editorial: drie dikke korte balken,
   vierkant afgesneden; mobiel menu gecentreerd.
   ══════════════════════════════════════════════════════════════════ */
.nav-toggle {
    width: 44px; height: 44px; border: 0; position: relative; cursor: pointer;
    background: linear-gradient(var(--color-primary), var(--color-primary)) 50% 50% / 24px 4px no-repeat;
}
.nav-toggle::before,
.nav-toggle::after {
    content: ''; position: absolute; left: 50%; transform: translateX(-50%);
    width: 24px; height: 4px; border-radius: 0; background: var(--color-primary);
    transition: top 0.18s ease, transform 0.18s ease;
}
.nav-toggle::before { top: calc(50% - 10px); }
.nav-toggle::after  { top: calc(50% + 6px); }
.nav-toggle:hover::before { top: calc(50% - 11px); }
.nav-toggle:hover::after  { top: calc(50% + 7px); }
.nav-toggle.is-open { background-image: none; }
.nav-toggle.is-open::before { top: calc(50% - 2px); transform: translateX(-50%) rotate(45deg); }
.nav-toggle.is-open::after  { top: calc(50% - 2px); transform: translateX(-50%) rotate(-45deg); }
@media (max-width: 899px) {
    .nav-menu { text-align: center; align-items: center; padding: 18px 16px 22px; border-top: 2px solid var(--color-primary); box-shadow: 0 24px 32px -26px rgba(0, 0, 0, 0.3); }
    .nav-menu li { margin: 4px 0; }
}