/* ============================================================
   SVATEBNÍ WEB — KOMPLETNÍ STYLY (vše v jednom globálním souboru)
   Teplá bílá + jemná zlatá, elegantní minimalismus
   Pozn.: vše je zde GLOBÁLNĚ, takže není potřeba scoped CSS balíček.
   ============================================================ */

:root{
    --bg:#faf8f3;
    --bg-deep:#f3ede1;
    --surface:#ffffff;
    --ink:#2b2722;
    --muted:#7b7264;
    --line:#e6ddcc;
    --gold:#b8943f;
    --gold-deep:#9a7a2f;
    --gold-soft:#efe6d0;
    --gold-hair:rgba(184,148,63,.45);
    --maxw:1080px;
    --serif:"Cormorant Garamond", Georgia, serif;
    --sans:"Mulish", system-ui, -apple-system, sans-serif;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}

body{
    margin:0;padding:0;
    font-family:var(--sans);
    background:var(--bg);
    color:var(--ink);
    font-weight:400;line-height:1.7;
    -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility;
}

img{display:block;max-width:100%;}
a,.btn-link{color:var(--gold-deep);text-decoration:none;}

/* ---------- typografie ---------- */
h1,h2,h3{font-family:var(--serif);font-weight:500;margin:0;color:var(--ink);}
p{margin:0 0 1rem;}
.m0{margin-bottom:0;}

.eyebrow{
    font-family:var(--sans);font-size:.72rem;letter-spacing:.32em;
    text-transform:uppercase;color:var(--gold-deep);font-weight:600;margin:0;
}
h2.display{
    font-size:clamp(2.2rem,5vw,3.4rem);font-style:italic;font-weight:500;
    line-height:1.05;letter-spacing:.01em;
}

/* ---------- ornamentální zlatá linka ---------- */
.rule{display:flex;align-items:center;justify-content:center;gap:14px;margin:1.6rem 0;}
.rule::before,.rule::after{content:"";height:1px;width:min(120px,22vw);
    background:linear-gradient(90deg,transparent,var(--gold-hair));}
.rule::after{background:linear-gradient(90deg,var(--gold-hair),transparent);}
.rule .dot{width:6px;height:6px;background:var(--gold);transform:rotate(45deg);flex:none;}

/* ---------- layout ---------- */
section{padding:clamp(70px,11vw,130px) clamp(20px,5vw,48px);}
section[id],header[id]{scroll-margin-top:72px;}
.wrap{max-width:var(--maxw);margin:0 auto;}
.narrow{max-width:720px;margin:0 auto;}
.sec-head{text-align:center;margin-bottom:56px;}
.sec-head .eyebrow{margin-bottom:14px;}
.alt{background:var(--bg-deep);}

/* ---------- reveal animace ---------- */
.reveal{opacity:0;transform:translateY(26px);
    transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);}
.reveal.in{opacity:1;transform:none;}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;}}

/* ============================================================
   NAVIGACE
   ============================================================ */
.navbar{
    position:fixed;top:0;left:0;width:100%;z-index:100;height:auto;
    display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;
    padding:16px clamp(20px,5vw,56px);
    background:transparent;
    transition:background .4s ease, box-shadow .4s ease, padding .4s ease;
}
body.nav-scrolled .navbar{
    background:rgba(250,248,243,.86);
    backdrop-filter:blur(12px);
    box-shadow:0 1px 0 var(--line);
}
.brand{font-family:var(--serif);font-style:italic;font-size:1.35rem;letter-spacing:.04em;color:var(--ink);}
.brand b{font-weight:600;}
.brand .amp{color:var(--gold);font-weight:500;margin:0 .14em;}

.nav-menu{display:flex;gap:30px;align-items:center;}
.nav-link{
    font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;
    color:var(--ink);position:relative;padding:4px 0;opacity:.78;transition:opacity .25s;
}
.nav-link::after{content:"";position:absolute;left:0;bottom:-2px;height:1px;width:0;
    background:var(--gold);transition:width .3s ease;}
.nav-link:hover{opacity:1;}
.nav-link:hover::after,.nav-link.active::after{width:100%;}

.burger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:6px;}
.burger span{width:24px;height:2px;background:var(--ink);transition:.3s;border-radius:2px;}

@media(max-width:820px){
    .nav-menu{
        position:fixed;top:0;right:0;height:100vh;width:min(74vw,320px);
        flex-direction:column;justify-content:center;gap:26px;
        background:var(--bg);box-shadow:-20px 0 60px -30px rgba(0,0,0,.4);
        transform:translateX(100%);transition:transform .4s ease;
    }
    .nav-menu.open{transform:none;}
    .nav-link{font-size:.9rem;}
    .burger{display:flex;z-index:110;}
    .burger.x span:nth-child(1){transform:translateY(7px) rotate(45deg);}
    .burger.x span:nth-child(2){opacity:0;}
    .burger.x span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
    min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;
    text-align:center;padding:120px 24px 60px;position:relative;
    background:radial-gradient(120% 80% at 50% 0%, #fffdf8 0%, var(--bg-deep) 70%);
}
.hero .eyebrow{margin-bottom:26px;}
.hero-names{
    font-family:var(--serif);font-style:italic;font-weight:500;
    font-size:clamp(3.2rem,11vw,7rem);line-height:.98;letter-spacing:.01em;color:var(--ink);
}
.hero-names .amp{display:block;font-size:.42em;color:var(--gold);font-style:italic;margin:.18em 0;}
.hero-meta{display:flex;align-items:center;gap:18px;justify-content:center;margin-top:8px;color:var(--muted);
    font-size:.8rem;letter-spacing:.28em;text-transform:uppercase;font-weight:600;}
.hero-meta .sep{width:5px;height:5px;background:var(--gold);transform:rotate(45deg);}
.scroll-cue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
    font-size:.66rem;letter-spacing:.3em;text-transform:uppercase;color:var(--muted);
    display:flex;flex-direction:column;align-items:center;gap:8px;}
.scroll-cue .line{width:1px;height:38px;background:linear-gradient(var(--gold-hair),transparent);animation:cue 2.4s infinite;}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}}

/* ============================================================
   ODPOČET (CountdownTimer)
   ============================================================ */
.countdown-container{max-width:none;margin:42px auto 0;text-align:center;}
.countdown-timer{display:flex;justify-content:center;gap:clamp(18px,5vw,52px);margin:0;flex-wrap:nowrap;}
.time-unit{background:none;color:inherit;border-radius:0;padding:0;min-width:54px;box-shadow:none;
    display:flex;flex-direction:column;align-items:center;position:relative;}
.time-unit:hover{transform:none;box-shadow:none;}
.time-unit:not(:last-child)::after{content:"";position:absolute;right:calc(-1 * clamp(9px,2.5vw,26px));
    top:6px;width:1px;height:46px;background:var(--gold-hair);}
.time-value{font-family:var(--serif);font-size:clamp(2.4rem,7vw,3.6rem);font-weight:500;line-height:1;
    margin-bottom:10px;font-variant-numeric:tabular-nums;color:var(--ink);}
.time-label{font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted);font-weight:600;opacity:1;}
.expired-message{margin-top:1.4rem;animation:pulse 2.4s infinite;}
.expired-message h2{font-family:var(--serif);font-style:italic;color:var(--gold-deep);}
@keyframes pulse{0%{transform:scale(1);}50%{transform:scale(1.04);}100%{transform:scale(1);}}
@media (max-width:560px){
    .time-unit{min-width:46px;}
    .time-value{font-size:2rem;}
    .time-label{font-size:.58rem;letter-spacing:.16em;}
}

/* ============================================================
   KARTY (Důležité / Praktické)
   ============================================================ */
.cards{display:grid;grid-template-columns:1fr 1fr;gap:26px;}
.card{
    display:block;background:var(--surface);border:1px solid var(--line);border-radius:2px;
    padding:38px 36px;position:relative;transition:transform .4s ease, box-shadow .4s ease;
}
.card::before{content:"";position:absolute;left:0;top:0;width:100%;height:2px;
    background:linear-gradient(90deg,var(--gold),transparent);
    transform:scaleX(0);transform-origin:left;transition:transform .5s ease;}
.card:hover{transform:translateY(-4px);box-shadow:0 24px 50px -30px rgba(43,39,34,.35);}
.card:hover::before{transform:scaleX(1);}
.card.span2{grid-column:1 / -1;}
.card h3{font-size:1.5rem;font-style:italic;margin-bottom:10px;}
.card .ic{font-family:var(--sans);font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;
    color:var(--gold-deep);font-weight:600;display:block;margin-bottom:14px;}
.card p{color:var(--muted);}
.card p strong{color:var(--ink);font-weight:600;}

.map{margin-top:20px;border-radius:2px;overflow:hidden;border:1px solid var(--line);}
.map iframe{display:block;width:100%;height:230px;border:0;filter:saturate(.85) contrast(.98);}
.map-link{display:inline-flex;align-items:center;gap:8px;margin-top:14px;color:var(--gold-deep);
    font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;}
.map-link::after{content:"→";transition:transform .25s;}
.map-link:hover::after{transform:translateX(4px);}

/* ============================================================
   PROGRAM (timeline)
   ============================================================ */
.timeline{max-width:680px;margin:0 auto;position:relative;padding-left:34px;}
.timeline::before{content:"";position:absolute;left:5px;top:8px;bottom:8px;width:1px;background:var(--gold-hair);}
.tl-item{position:relative;padding:0 0 38px;}
.tl-item:last-child{padding-bottom:0;}
.tl-item::before{content:"";position:absolute;left:-34px;top:6px;width:11px;height:11px;background:var(--bg);
    border:1.5px solid var(--gold);transform:rotate(45deg);transition:background .3s;}
.tl-item:hover::before{background:var(--gold);}
.tl-time{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--gold-deep);line-height:1;}
.tl-desc{margin-top:6px;color:var(--muted);}
.tl-desc strong{color:var(--ink);font-weight:600;}

/* ============================================================
   O NÁS + GALERIE
   ============================================================ */
.about-text{text-align:center;color:var(--muted);font-size:1.08rem;}
.about-text strong{color:var(--ink);font-weight:600;}
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:54px;}
.gallery .g{overflow:hidden;border-radius:2px;cursor:pointer;aspect-ratio:1;position:relative;background:var(--bg-deep);}
.gallery .g img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.gallery .g::after{content:"";position:absolute;inset:0;border:1px solid rgba(184,148,63,0);transition:border-color .35s;}
.gallery .g:hover img{transform:scale(1.06);}
.gallery .g:hover::after{border-color:var(--gold-hair);}

/* ============================================================
   QR
   ============================================================ */
.qr-box{display:flex;flex-direction:column;align-items:center;gap:24px;}
.qr-text{max-width:520px;}
.qr-box .frame{padding:18px;background:var(--surface);border:1px solid var(--line);}
.qr-box img{width:200px;height:200px;object-fit:contain;}

/* ============================================================
   PATIČKA
   ============================================================ */
.site-footer{background:var(--bg-deep);text-align:center;padding:70px 24px;border-top:1px solid var(--line);}
.site-footer .mono{font-family:var(--serif);font-style:italic;font-size:2.4rem;color:var(--ink);}
.site-footer .mono .amp{color:var(--gold);}
.site-footer .date{margin-top:6px;color:var(--muted);letter-spacing:.28em;text-transform:uppercase;font-size:.76rem;font-weight:600;}
.site-footer .heart{color:var(--gold);margin-top:18px;font-size:.8rem;letter-spacing:.1em;}

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lb{position:fixed;inset:0;background:rgba(28,26,23,.95);z-index:200;display:flex;align-items:center;justify-content:center;}
.lb img{max-width:90vw;max-height:84vh;object-fit:contain;border-radius:2px;}
.lb-close{position:absolute;top:18px;right:24px;background:none;border:0;color:#fff;font-size:2.2rem;cursor:pointer;line-height:1;opacity:.85;}
.lb-close:hover{opacity:1;}
.lb-nav{position:absolute;top:50%;transform:translateY(-50%);background:rgba(255,255,255,.08);border:0;color:#fff;
    font-size:1.6rem;cursor:pointer;padding:12px 16px;border-radius:50%;opacity:.8;transition:background .2s;}
.lb-nav:hover{opacity:1;background:rgba(255,255,255,.2);}
.lb-prev{left:18px;} .lb-next{right:18px;}
.lb-count{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);color:#cfc6b6;font-size:.8rem;letter-spacing:.2em;}

/* ============================================================
   RSVP FORMULÁŘ
   ============================================================ */
.rsvp-card{max-width:600px;margin:0 auto;background:var(--surface);border:1px solid var(--line);
    border-radius:2px;overflow:visible;position:relative;padding:clamp(34px,5vw,56px);}
.rsvp-card::before,.rsvp-card::after{content:"";position:absolute;width:22px;height:22px;border:1px solid var(--gold-hair);}
.rsvp-card::before{top:14px;left:14px;border-right:0;border-bottom:0;}
.rsvp-card::after{bottom:14px;right:14px;border-left:0;border-top:0;}

.rsvp-header{background:transparent;text-align:center;padding:0 0 28px;border-bottom:0;}
.rsvp-ornament{font-size:1.4rem;margin-bottom:.5rem;color:var(--gold);}
.rsvp-header h3{font-family:var(--serif);font-style:italic;font-size:1.9rem;margin:0 0 .4rem;font-weight:500;color:var(--ink);}
.rsvp-header p{margin:0;font-size:.92rem;color:var(--muted);}
.rsvp-header p strong{color:var(--gold-deep);font-weight:700;}

.rsvp-form{padding:8px 0 0;}
.rsvp-field{margin-bottom:24px;}
.rsvp-field > label{display:block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;
    font-weight:700;color:var(--muted);margin-bottom:10px;}
.field-icon{margin-right:.35rem;color:var(--gold-deep);}
.field-optional{font-weight:600;color:#b6ab98;font-size:.7rem;}

.rsvp-field input[type="text"],
.rsvp-field input[type="number"],
.rsvp-field textarea{
    width:100%;background:var(--bg);border:1px solid var(--line);border-radius:2px;
    padding:13px 14px;font-family:var(--sans);font-size:1rem;color:var(--ink);box-sizing:border-box;
    -webkit-appearance:none;appearance:none;transition:border-color .25s, box-shadow .25s;
}
.rsvp-field input[type="text"]:focus,
.rsvp-field input[type="number"]:focus,
.rsvp-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-soft);}
.rsvp-field textarea{resize:vertical;min-height:90px;}
.rsvp-field input::placeholder,.rsvp-field textarea::placeholder{color:#b6ab98;}

.rsvp-toggle-group{display:flex;gap:12px;}
.rsvp-toggle{flex:1;display:flex;flex-direction:row;align-items:center;justify-content:center;gap:8px;
    padding:14px;border:1px solid var(--line);border-radius:2px;background:var(--bg);cursor:pointer;
    transition:.25s;text-align:center;}
.rsvp-toggle input[type="radio"]{position:absolute;opacity:0;width:0;height:0;}
.toggle-icon{font-size:1rem;line-height:1;color:var(--muted);transition:color .25s;}
.toggle-text{font-size:.92rem;font-weight:600;color:var(--ink);}
.rsvp-toggle:hover{border-color:var(--gold-hair);}
.rsvp-toggle.active-yes,.rsvp-toggle.active-no{border-color:var(--gold);background:var(--gold-soft);}
.rsvp-toggle.active-yes .toggle-icon,.rsvp-toggle.active-no .toggle-icon,
.rsvp-toggle.active-yes .toggle-text,.rsvp-toggle.active-no .toggle-text{color:var(--gold-deep);}

.guest-counter{display:flex;align-items:center;gap:0;width:max-content;border:1px solid var(--line);
    border-radius:2px;overflow:hidden;}
.guest-counter input[type="number"]{width:64px;text-align:center;padding:0;height:48px;border:0;
    border-left:1px solid var(--line);border-right:1px solid var(--line);border-radius:0;
    font-family:var(--serif);font-size:1.6rem;font-weight:500;background:var(--surface);color:var(--ink);
    -moz-appearance:textfield;-webkit-appearance:none;appearance:none;box-sizing:border-box;}
.guest-counter input[type="number"]::-webkit-inner-spin-button,
.guest-counter input[type="number"]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0;}
.guest-counter input[type="number"]:focus{outline:none;background:var(--surface);}
.counter-btn{width:48px;height:48px;border:0;background:var(--bg);font-size:1.3rem;font-weight:600;
    color:var(--ink);cursor:pointer;transition:background .2s, color .2s;display:flex;align-items:center;
    justify-content:center;padding:0;line-height:1;}
.counter-btn:hover:not(:disabled){background:var(--gold-soft);color:var(--gold-deep);}
.counter-btn:disabled{opacity:.35;cursor:not-allowed;}

.rsvp-btn{display:block;width:100%;margin-top:8px;padding:16px;background:var(--ink);color:var(--bg);
    border:0;border-radius:2px;font-family:var(--sans);font-size:.82rem;letter-spacing:.2em;
    text-transform:uppercase;font-weight:700;cursor:pointer;transition:background .3s;}
.rsvp-btn:hover{background:var(--gold-deep);}
.rsvp-btn-outline{background:transparent;border:1px solid var(--gold);color:var(--gold-deep);margin-top:1.4rem;}
.rsvp-btn-outline:hover{background:var(--gold-soft);color:var(--gold-deep);}

.rsvp-success{text-align:center;padding:1.5rem 0;}
.success-icon{width:60px;height:60px;border-radius:50%;background:transparent;border:1px solid var(--gold);
    color:var(--gold-deep);font-size:1.6rem;display:flex;align-items:center;justify-content:center;
    margin:0 auto 1.2rem;animation:popIn .4s cubic-bezier(.175,.885,.32,1.275);}
.rsvp-success h3{font-family:var(--serif);font-style:italic;color:var(--ink);font-size:1.8rem;margin:0 0 .4rem;}
.rsvp-success p{color:var(--muted);margin:0 0 .2rem;font-size:1.02rem;}
.success-subtitle{font-size:.95rem;color:#b6ab98;margin-bottom:0;}
@keyframes popIn{0%{transform:scale(0);opacity:0;}100%{transform:scale(1);opacity:1;}}

@media (max-width:820px){
    .cards{grid-template-columns:1fr;}
    .gallery{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
    .rsvp-toggle-group{flex-direction:column;gap:.6rem;}
}

/* ============================================================
   Funkční Blazor styly
   ============================================================ */
.btn:focus,.btn:active:focus,.btn-link.nav-link:focus,
.form-control:focus,.form-check-input:focus{box-shadow:0 0 0 .1rem #fff,0 0 0 .25rem var(--gold-soft);}
h1:focus{outline:none;}
.valid.modified:not([type=checkbox]){outline:1px solid var(--gold);}
.invalid{outline:1px solid #c0392b;}
.validation-message{color:#c0392b;font-size:.8rem;margin-top:.35rem;padding-left:.2rem;}
.blazor-error-boundary{background:#b32121;padding:1rem 1rem 1rem 3.7rem;color:white;}
.blazor-error-boundary::after{content:"Došlo k chybě."}