/* ==========================================================================
   Lada a Petr — svatební oznámení
   Statický převod návrhu LadaPetr.dc.html (Claude Design).
   ========================================================================== */

/* --- Písmo ---------------------------------------------------------------- */
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:block;src:url("assets/fonts/cormorant-garamond-normal-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:normal;font-weight:300 700;font-display:block;src:url("assets/fonts/cormorant-garamond-normal-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:block;src:url("assets/fonts/cormorant-garamond-italic-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:"Cormorant Garamond";font-style:italic;font-weight:300 700;font-display:block;src:url("assets/fonts/cormorant-garamond-italic-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

/* --- Základ --------------------------------------------------------------- */
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;}
body{margin:0;background-color:#FDFCFA;background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.3 0 0 0 .35 .3 0 0 0 .35 .3 0 0 0 .35 0 0 0 0 .45'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");background-blend-mode:overlay;color:#5A5350;font-family:"Cormorant Garamond",Georgia,"Times New Roman",serif;font-size:18px;line-height:1.4;-webkit-font-smoothing:antialiased;}
::selection{background:#E6D9C5;color:#3D5573;}
a{color:#3D5573;}
a:hover{color:#6B5D57;}
[hidden]{display:none!important;}

.page{overflow-x:clip;}

/* Výchozí stav úvodní animace patří do CSS, ne do JS: jinak se hero stihne
   vykreslit dřív, než ho odložený script.js schová. Uplatní se jen když je
   JS k dispozici (třídu přidává inline skript v hlavičce) a když uživatel
   nemá omezený pohyb — v obou opačných případech je obsah vidět rovnou. */
@media (prefers-reduced-motion:no-preference){
  .js-intro .hero-text,
  .js-intro .hero-wreath{opacity:0;}
}

/* --- Hero: věnec s oznámením ---------------------------------------------- */
/* Věnec a pobídka tvoří jednu skupinu vystředěnou v okně: pobídka patří
   k oznámení, ne ke spodní hraně. Strop výšky karty počítá s místem pro
   pobídku, takže se skupina vejde i na nízké viewporty (otočený telefon). */
.hero{
  --hero-pad-top:clamp(16px,3vh,40px);
  --hero-pad-bottom:max(12px,env(safe-area-inset-bottom));
  --hero-cue-gap:clamp(6px,2.2vh,28px);
  --hero-cue-block:80px; /* naměřená výška pobídky (75px) + rezerva */
  --hero-card-max-h:calc(100svh - var(--hero-pad-top) - var(--hero-pad-bottom) - var(--hero-cue-gap) - var(--hero-cue-block));
  box-sizing:border-box;position:relative;min-height:100svh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--hero-cue-gap);overflow:hidden;
  padding:var(--hero-pad-top) 0 var(--hero-pad-bottom);
}
.hero-card{position:relative;width:min(98vw,880px,calc(var(--hero-card-max-h) * 1.333));aspect-ratio:1448/1086;container-type:inline-size;}
.hero-wreath{position:absolute;inset:0;width:100%;height:100%;display:block;mix-blend-mode:multiply;pointer-events:none;}
/* Typografie hero: max(min(podlaha, strop), původní cqw).
   - původní cqw drží kompozici na velké kartě → nad kartou ~745px vychází
     úplně stejné hodnoty jako v návrhu, desktop se nemění ani o setinu px;
   - podlaha zaručí čitelnost na telefonu, kde cqw padalo k 5 px;
   - strop v cqw brání tomu, aby podlaha vytekla z prstence na kartách,
     které srazil výškový strop (nízké okno, otočený telefon).
   Je to jedna spojitá křivka, takže nikde není skok mezi breakpointy. */
.hero-inner{position:absolute;left:50.6%;top:44%;width:53%;height:82%;transform:translate(-50%,-50%);z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:max(min(8px,2.4cqw),1.94cqw);padding:8% 6%;}
.hero-eyebrow{margin:0;font-style:italic;font-size:max(min(13px,4.5cqw),2.72cqw);line-height:1.2;color:#72625A;pointer-events:auto;}
.hero-names{margin:0;font-style:italic;font-weight:500;font-size:max(min(38px,11cqw),8.09cqw);line-height:1.05;letter-spacing:-.01em;color:#3D5573;white-space:nowrap;pointer-events:auto;}
.hero-meta{display:flex;flex-direction:column;align-items:center;gap:max(min(5px,1.5cqw),1.16cqw);pointer-events:auto;}
.hero-date{margin:0;font-size:max(min(26px,9cqw),4.53cqw);font-weight:500;font-style:italic;color:#3D5573;font-variant-numeric:lining-nums;}
.hero-divider{display:flex;align-items:center;gap:max(min(10px,3cqw),1.94cqw);margin:max(min(2px,0.8cqw),0.65cqw) 0;}
.hero-rule{display:block;width:10.35cqw;height:1px;background:#CBA96F;}
.hero-heart{display:block;font-style:normal;font-size:max(min(9px,2.6cqw),1.68cqw);line-height:1;color:#CBA96F;}
/* Prostrkání je v cqw, ne v em: 0.564cqw = .3em z 1.88cqw a 0.403cqw =
   .24em z 1.68cqw, takže na desktopu vychází původní hodnota, ale při
   zapnuté podlaze se text nenafoukne o prostrkání navrch. */
.hero-venue{margin:0;font-size:max(min(14px,3.6cqw),1.88cqw);letter-spacing:0.564cqw;padding-left:0.564cqw;text-transform:uppercase;color:#3D5573;white-space:nowrap;}
.hero-place{margin:0;font-size:max(min(13px,3.22cqw),1.68cqw);letter-spacing:0.403cqw;padding-left:0.403cqw;text-transform:uppercase;color:#3D5573;white-space:nowrap;}

/* .hero-text nemá styly — je to jen úchyt pro úvodní animaci ve script.js. */

/* Pobídka ke scrollování */
.hero-cue{position:relative;z-index:3;margin:0;display:flex;flex-direction:column;align-items:center;gap:8px;min-width:120px;padding:12px 16px 4px calc(16px + .32em);font-size:12px;letter-spacing:.32em;text-transform:uppercase;color:#7E6E62;text-decoration:none;transition:opacity .6s ease,color .3s ease;}
.hero-cue-line{display:block;width:1px;height:34px;background:linear-gradient(#CBA96F,rgba(203,169,111,.1));transition:height .4s ease;animation:cue-bob 3s ease-in-out infinite;}
.hero-cue:hover{color:#3D5573;}
.hero-cue:hover .hero-cue-line{height:44px;}
@keyframes cue-bob{0%,100%{transform:translateY(0);opacity:.7}50%{transform:translateY(4px);opacity:1}}

/* Na úzkém okně dostane věnec víc místa, než mu dává 98vw — přesah ořízne
   .hero. Prstenec tím dostane širší vnitřní okno a podlaha typografie se do
   něj vejde. Práh 571px je bod, kde se min(124vw,560px) a 98vw potkávají,
   takže šířka karty přechází spojitě a kompozice věnce nad ním je přesně ta
   původní. */
@media (max-width:571px){
  .hero-card{width:min(124vw,560px,calc(var(--hero-card-max-h) * 1.333));}
}

/* --- Monogram + kalendář --------------------------------------------------- */
.save-date{display:flex;flex-direction:column;align-items:center;gap:0;padding:clamp(24px,4vh,40px) 20px 0;text-align:center;}
.monogram{display:block;width:clamp(260px,34vw,400px);height:auto;margin:clamp(-36px,-4vw,-24px) 0 clamp(-30px,-3vw,-16px);mix-blend-mode:multiply;pointer-events:none;-webkit-mask-image:radial-gradient(ellipse at center,#000 58%,transparent 82%);mask-image:radial-gradient(ellipse at center,#000 58%,transparent 82%);}
.cal{width:100%;display:flex;flex-direction:column;align-items:center;}
/* Hlavní akce stránky dostává geometrii tlačítka, ne popisku: dřív byla
   .cal-btn vysázená stejně jako .countdown-title a .footer-meta, tedy jako
   dekorativní text, a jediným signálem interaktivity byla zlatá linka
   s kontrastem 2,17:1. */
.cal-btn{appearance:none;display:inline-flex;align-items:center;justify-content:center;min-height:48px;margin:0;padding:12px 28px;border:1px solid #3D5573;border-radius:999px;background:#FFFEFD;font:inherit;font-size:17px;line-height:1.2;color:#3D5573;cursor:pointer;transition:background .2s ease,color .2s ease;-webkit-tap-highlight-color:transparent;}
.cal-btn:hover{background:#3D5573;color:#FDFCFA;}
.cal-btn-label{display:inline-block;}

.cal-panel{width:min(280px,100%);display:grid;grid-template-rows:0fr;opacity:0;visibility:hidden;transition:grid-template-rows .62s cubic-bezier(.4,0,.2,1),opacity .45s ease .05s,visibility 0s linear .62s;}
.cal-panel[data-open="true"]{grid-template-rows:1fr;opacity:1;visibility:visible;transition:grid-template-rows .62s cubic-bezier(.4,0,.2,1),opacity .4s ease,visibility 0s;}
.cal-panel-clip{overflow:hidden;min-height:0;}
.cal-list{margin:14px 0 4px;padding:6px 0;border:1px solid #E2CEAE;border-radius:12px;background:#FFFEFD;}

.cal-link{display:block;padding:11px 20px;color:#5A5350;text-decoration:none;font-size:18px;line-height:1.3;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .4s cubic-bezier(.22,1,.36,1),color .2s,background .2s;}
.cal-link + .cal-link{border-top:1px solid #EFE7DD;}
/* Všechny tři volby jsou si rovny. Dřív byla čtvrtá vysázená menším
   prostrkaným stupněm, což naznačovalo kategorii, která neexistovala —
   mířila na stejný soubor jako "Apple Kalendář". */
.cal-link:hover{color:#3D5573;background:rgba(211,230,243,.38);}
.cal-panel[data-open="true"] .cal-link{opacity:1;transform:none;}
.cal-panel[data-open="true"] .cal-link:nth-child(2){transition-delay:.06s;}
.cal-panel[data-open="true"] .cal-link:nth-child(3){transition-delay:.12s;}

/* Potvrzení po uložení: jediný okamžik, kdy host potřebuje vědět, že se něco
   stalo. Čas obřadu tu záměrně není — zatím není potvrzený. */
.cal-done{width:min(320px,100%);margin:14px 0 4px;padding:18px 20px 16px;border:1px solid #E2CEAE;border-radius:12px;background:#FFFEFD;text-align:center;}
.cal-done:focus{outline:none;}
.cal-done-title{margin:0;font-size:13px;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#72625A;}
.cal-done-event{margin:8px 0 0;font-style:italic;font-size:20px;line-height:1.25;color:#3D5573;}
.cal-done-again{appearance:none;margin:14px 0 0;min-height:44px;padding:10px 18px 10px calc(18px + .2em);border:0;background:none;font:inherit;font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:#7E6E62;cursor:pointer;text-decoration:underline;text-decoration-color:#CBA96F;text-underline-offset:5px;}
.cal-done-again:hover{color:#3D5573;}

/* Focus ring: #3D5573 na krémovém podkladu dává 7,46:1, tedy nad hranicí
   3:1 pro netextové prvky (WCAG 1.4.11). Dřív měl obrys jen .cal-btn,
   a to zlatě při 2,17:1. */
.cal-btn:focus-visible,
.cal-done-again:focus-visible,
.cal-done:focus-visible{outline:2px solid #3D5573;outline-offset:3px;}
.cal-link:focus-visible{outline:2px solid #3D5573;outline-offset:-3px;}
.hero-cue:focus-visible{outline:2px solid #3D5573;outline-offset:4px;border-radius:4px;}

/* --- Odpočet --------------------------------------------------------------- */
.countdown{display:flex;justify-content:center;padding:clamp(40px,6vh,64px) 20px clamp(48px,7vw,90px);}
.countdown-inner{position:relative;width:100%;max-width:660px;}
.countdown-card{display:flex;flex-direction:column;align-items:center;gap:clamp(18px,3.4vw,28px);padding:clamp(32px,6vw,56px) clamp(18px,4vw,48px);border:1px solid #D9C9B8;border-radius:24px;background:#FFFEFD;box-shadow:0 0 0 6px #FDFCFA,0 0 0 7px #EADFCF;text-align:center;}
.countdown-title{margin:0;font-weight:400;font-size:13px;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#72625A;}
.countdown-timer{display:flex;align-items:flex-start;gap:clamp(12px,4vw,40px);}
.countdown-unit{display:flex;flex-direction:column;align-items:center;gap:4px;}
.countdown-value{min-width:2ch;font-size:clamp(34px,8vw,58px);font-weight:500;line-height:1.1;color:#6B5D57;font-variant-numeric:tabular-nums lining-nums;}
.countdown-value--seconds{color:#3D5573;}
.countdown-label{font-size:12px;letter-spacing:.26em;padding-left:.26em;text-transform:uppercase;color:#72625A;}
.countdown-dot{display:block;width:5px;height:5px;margin-top:calc(clamp(34px,8vw,58px) * .55);border-radius:50%;background:#E0CDB4;}
.countdown-done{margin:0;font-style:italic;font-size:clamp(22px,5vw,32px);color:#3D5573;}

/* --- Patička --------------------------------------------------------------- */
.site-footer{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:14px;padding:clamp(48px,7vw,80px) 20px max(clamp(40px,6vw,64px),calc(env(safe-area-inset-bottom) + 24px));border-top:1px solid #DDE7EE;text-align:center;}
.footer-stripes{position:absolute;inset:0;z-index:0;width:100%;height:100%;}
.footer-names{position:relative;z-index:1;margin:0;font-style:italic;font-size:clamp(22px,5vw,32px);color:#3D5573;}
.footer-meta{position:relative;z-index:1;margin:0;font-size:13px;letter-spacing:.3em;padding-left:.3em;text-transform:uppercase;color:#72625A;}
.footer-note{position:relative;z-index:1;margin:0;font-style:italic;font-weight:600;font-size:clamp(22px,5vw,32px);color:#3D5573;}

/* --- Omezený pohyb --------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .hero-cue-line{animation:none;}
  .cal-panel,.cal-link{transition-duration:.15s;transition-delay:0s;}
}