/* ============================================================
   Svadobný web — Nikola & Tomáš · 19. 09. 2026
   ------------------------------------------------------------
   OBSAH
   01 · Design tokeny (farby, typografia)
   02 · Reset a základ
   03 · Breakpoint prepínače (.m-only / .d-only)
   04 · Layout stránky (.page)
   05 · Intro (hero) + sticky topbar s jazykom
   06 · Dôležité informácie (navy pill/medailón)
   07 · Svadobný víkend (dni)
   08 · Program (časová os)
   09 · Foto pás (mobil)
   10 · Záverečné oblúky (Ubytovanie/Dary/Doprava/Dress Code)
   11 · Footer
   12 · Responzív: tablet 561–1099 / malé telefóny / veľké LCD
   13 · prefers-reduced-motion
   ------------------------------------------------------------
   Breakpointy:  <561 mobil (Figma 390) · 561–1099 tablet ·
                 ≥1100 desktop (Figma 1920)
   Jednotky: text v rem (WCAG 1.4.4), štruktúra v px (Figma rozmery)
   ============================================================ */

:root{
  --navy:#001f3f;
  --paper:#f2f6fa;
  --body:#313131;
  --slate:#5A7482; /* pôvodne #607d8b — stmavené pre WCAG AA kontrast 4,54:1 na papieri */
  --grey:#d1d1d1;
  --steel:#527797;
  --mist:#91afbc;
  --ice:#c2dee9;
  /* ============ TYPOGRAFIA — jednotná škála ============
     Zjednotené nezrovnalosti z Figmy:
     · Baskerville (systémový) → Baskervville (Google) všade
     · DM Sans vo footri → Open Sans Light
     · štítky raz SemiBold / raz Regular → vždy SemiBold
     Baskervville nemá bold rez — weight 700 je syntetický (zámer dizajnu). */
  --serif:'Baskervville',Baskerville,'Times New Roman',serif;
  --sans:'Open Sans',sans-serif;

  /* Veľkosti písma v rem (1rem = 16px pri predvolenom nastavení) —
     text tak rešpektuje používateľskú voľbu veľkosti písma (WCAG 1.4.4).
     Štrukturálne rozmery (paddingy, presahy, ilustrácie) zostávajú v px,
     aby sedeli s pevnými rozmermi grafiky z Figmy. */
  --fs-display:2.5rem;     /* 40px · mená v intre · serif 400 */
  --fs-h2:2rem;            /* 32px · nadpisy sekcií, & · serif 400 */
  --fs-h3:1.5rem;          /* 24px · nadpisy dní · serif 700 (synt.) */
  --fs-serif-md:1.5rem;    /* 24px · časy a názvy v programe · serif 400 */
  --fs-date:1.375rem;      /* 22px · dátum v intre · sans 300 */
  --fs-venue:1.375rem;     /* 22px · Obrad/Hostina · sans 700 */
  --fs-body-lg:1.125rem;   /* 18px · hlavný text · sans 400/600 */
  --fs-body:1rem;          /* 16px · Príchod/Odchod, jazyk, popisy programu */
  --fs-foot:0.875rem;      /* 14px · footer · sans 300 */
  --fs-addr:0.75rem;       /* 12px · adresy · sans 400, spacing 2px */
  --fs-label:0.6875rem;    /* 11px · štítky · sans 600, spacing 2px */
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{background:var(--paper)}
body{
  font-family:var(--sans);
  color:var(--body);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%}
p{font-variation-settings:"wdth" 100}

/* breakpoint prepínače */
.d-only{display:none!important}
@media (min-width:1100px){
  .d-only{display:block!important}
  .m-only{display:none!important}
}

.page{
  width:100%;
  max-width:560px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  background:var(--paper);
  position:relative;
}
@media (min-width:1100px){
  .page{max-width:1920px}
}

/* =============== 1 · INTRO =============== */
#intro{
  position:relative;
  height:720px;
  display:flex;
  overflow:hidden;
  background:var(--navy);
}
#intro .photo{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;will-change:transform;
}
#intro .photo-fallback{
  position:absolute;inset:0;
  background:
    radial-gradient(80% 60% at 65% 20%, rgba(145,175,188,.8), transparent 60%),
    linear-gradient(170deg,#3a4f6b 0%,#16243c 80%);
}
#intro .veil{
  position:relative;flex:1 0 0;min-height:720px;
  display:flex;flex-direction:column;align-items:center;gap:24px;
  padding-bottom:64px;
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
  background:rgba(0,0,0,0.24);
}
/* sticky hlavička s prepínačom jazyka */
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:100;
  display:flex;justify-content:flex-end;
  padding:16px 24px;
  pointer-events:none; /* klikateľný je len prepínač */
}
.topbar .lang{
  pointer-events:auto;
  transition:box-shadow .4s, transform .3s;
}
.topbar.scrolled .lang{
  box-shadow:0 6px 24px -8px rgba(0,31,63,.35), 0 0 0 1px rgba(0,31,63,.08);
}
.topbar .lang:hover{transform:scale(1.04)}
.lang{
  display:flex;align-items:center;border-radius:16px;overflow:hidden;
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  background:rgba(255,255,255,0.5);
}
.lang button{
  display:flex;align-items:center;justify-content:center;
  padding:4px 16px;border-radius:16px;font-size:var(--fs-body);line-height:normal;
  border:0;background:transparent;cursor:pointer;
  font-family:var(--sans);font-weight:400;color:var(--navy);
}
.lang button.active{font-weight:600;color:#fff;background:var(--navy)}
.lang button:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
#intro .center{
  flex:1 0 0;min-height:1px;width:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
#intro .names{width:100%;display:flex;flex-direction:column;align-items:center;padding:0 24px;margin:0;font-weight:400}
#intro .name{
  display:block;
  font-family:var(--serif);font-weight:400;font-size:var(--fs-display);line-height:normal;color:#fff;text-align:center;width:100%;
}
/* garancia čitateľnosti bieleho textu na svetlých častiach fotky */
#intro .name, #intro .amp, #intro .datebox p, #intro .kicker .cap{
  text-shadow:0 1px 2px rgba(0,0,0,.35), 0 2px 18px rgba(0,0,0,.3);
}
#intro .amprow{width:100%;display:flex;gap:8px;align-items:center}
#intro .amprow .hline{flex:1 0 0;height:0;min-width:1px;position:relative}
#intro .amprow .hline::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;background:rgba(255,255,255,.85);
}
#intro .amprow .hline img{
  position:absolute;left:0;right:0;top:-1px;width:100%;height:2px;object-fit:cover;z-index:1;
}
#intro .amp{font-family:var(--serif);font-weight:400;font-size:var(--fs-h2);color:#fff;line-height:normal}
#intro .datebox{
  width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start;padding:40px 0;
}
#intro .datebox .row{width:100%;display:flex;align-items:center;justify-content:center}
#intro .datebox p{font-weight:300;font-size:var(--fs-date);line-height:normal;color:#fff;white-space:nowrap}
@media (min-width:1100px){
  #intro{height:1051px}
  #intro .veil{min-height:100%}
  #intro .center{height:896px;flex:none}
  #intro .names{max-width:790px}
}

/* scroll hint — chevron dolu */
@keyframes scroll-bounce{
  0%,100%{transform:translate(-50%,0);opacity:.55}
  50%{transform:translate(-50%,8px);opacity:1}
}
.scroll-hint{
  position:fixed;bottom:40px;left:50%;transform:translate(-50%,0);
  z-index:50;
  display:flex;align-items:center;justify-content:center;
  animation:scroll-bounce 2.2s ease-in-out infinite;
  transition:opacity .5s ease;
  cursor:pointer;
}
.scroll-hint.hidden{opacity:0;pointer-events:none;animation:none}

/* =============== 2 · DÔLEŽITÉ INFORMÁCIE =============== */
#dolezite{
  position:relative;z-index:2;
  background:var(--navy);
  height:auto;min-height:787px;
  margin-top:-190px;
  border-radius:10000px;
  padding:80px 40px; /* väčší bočný odstup, aby ikony nesadali na zaoblený okraj */
  display:flex;flex-direction:column;gap:64px;align-items:center;justify-content:center;
}
#dolezite h2{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h2);line-height:normal;color:#fff;text-align:center;
}
#dolezite h2 .nl{display:block}
#dolezite .blocks{
  width:100%;
  display:flex;flex-direction:column;gap:40px;align-items:flex-start;
}
.venue{width:100%;display:flex;gap:16px;align-items:center;justify-content:center}
/* na mobile je ikona Hostiny vpravo (striedanie strán ako vo Figme) */
.venue.hostina{flex-direction:row-reverse}
.venue .illu{flex:none;overflow:hidden;display:flex;align-items:center;justify-content:center}
.venue .illu img{width:100%;height:100%;object-fit:contain}
.venue.obrad .illu{width:98.938px;height:143.5px}
.venue.hostina .illu.m-illu{width:96.228px;height:125px}
.venue.hostina .illu.d-illu{width:96px;height:165px;display:none}
.venue .tx{flex:1 0 0;min-width:1px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.venue h3{font-family:var(--sans);font-weight:700;font-size:var(--fs-venue);line-height:normal;color:#fff;width:100%}
.venue .g8{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.venue .when{font-weight:600;font-size:var(--fs-body-lg);line-height:normal;color:#fff;width:100%}
.venue .place{font-weight:400;font-size:var(--fs-body-lg);line-height:normal;color:#fff;width:100%}
.venue .addr-row{width:100%;display:flex;align-items:center}
.venue .addr{
  flex:1 0 0;min-width:1px;
  font-weight:400;font-size:var(--fs-addr);letter-spacing:0.167em;line-height:normal;color:var(--grey); /* 2px pri 12px */
}
.venue .addr a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(209,209,209,.45)}
#dolezite h2 .nl{display:block}
#dolezite .arrive{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center;margin-top:24px}
#dolezite .arrive p{width:100%;font-weight:400;font-size:var(--fs-body);line-height:normal;color:#fff;text-align:center}
#dolezite .arrive p b{font-weight:600}
@media (min-width:1100px){
  #dolezite{
    width:min(1442px, 92vw);
    margin:-218px auto 0;
    height:auto;
    min-height:0; /* mobilná min. výška 787px sem nepatrí */
    border-radius:100000px;
    flex-direction:column;
    padding:80px 24px; /* presne podľa Figmy (py-80) */
  }
  #dolezite .blocks{
    flex-direction:row;
    gap:40px;align-items:center;
    padding:0 80px;
  }
  .venue{flex:1 0 0;min-width:1px}
  .venue.hostina{flex-direction:row} /* na desktope ikona vľavo */
  .venue.hostina .illu.m-illu{display:none}
  .venue.hostina .illu.d-illu{display:flex}
  #dolezite h2 .nl{display:inline}
  #dolezite .arrive{width:auto;flex:none;align-self:stretch;justify-content:center;margin-top:0;gap:8px}
  #dolezite .arrive p{white-space:pre-wrap;font-size:var(--fs-body);text-align:left}
}

/* =============== 3 · SVADOBNÝ VÍKEND =============== */
#vikend{
  background:var(--paper);
  padding:32px 24px;
  display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;
}
#vikend .inner{
  width:100%;max-width:800px;
  display:flex;flex-direction:column;gap:56px;align-items:center;
}
#vikend h2{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h2);line-height:normal;color:var(--navy);white-space:nowrap;
}
.dayblock{width:100%;display:flex;flex-direction:column;gap:16px;align-items:center}
.dayblock .illu{overflow:hidden;flex:none}
.dayblock .illu img{width:100%;height:100%;object-fit:contain}
.dayblock.piatok .illu.m-illu{width:122.238px;height:190.08px}
.dayblock.piatok .illu.d-illu{width:168px;height:191px;display:none}
.dayblock.sobota .illu{width:166.59px;height:110px}
.dayblock.nedela .illu{width:187.976px;height:147.074px}
.dayblock .tx{width:100%;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.dayhead{width:100%;display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.dayhead h3{
  font-family:var(--serif);font-weight:700;
  min-height:28px;display:flex;flex-direction:column;justify-content:center;
  font-size:var(--fs-h3);line-height:normal;color:var(--navy);width:100%;
}
.rule{width:100%;display:flex;gap:8px;align-items:center}
.rule .tick{flex:none;width:8px;height:1px;background:var(--slate)}
/* štítky — zjednotené na SemiBold (vo Figme boli nekonzistentne aj Regular) */
.rule .lbl{font-weight:600;font-size:var(--fs-label);letter-spacing:0.182em;line-height:normal;color:var(--slate);white-space:nowrap} /* 2px pri 11px */
.rule.multi{align-items:stretch}
.rule.multi .tickwrap{display:flex;flex-direction:column;height:auto;padding:8px 0;width:8px;flex:none}
.rule.multi .tickwrap .tick{width:100%}
.rule.multi .lbl{flex:1 0 0;min-width:1px;white-space:normal}
.daybody{width:100%;display:flex;flex-direction:column;align-items:center}
.daybody p{font-weight:400;font-size:var(--fs-body-lg);line-height:normal;color:var(--body);width:100%;white-space:pre-wrap}
.daybody p b{font-weight:600}
@media (min-width:1100px){
  /* Figma: pt-260 s absolútnym pillom (top −218, výška ≈432) → medzera pod pillom 260−214 = 46 */
  #vikend{padding-top:46px}
  .dayblock{flex-direction:row;gap:24px;align-items:center}
  .dayblock .tx{flex:1 0 0;min-width:1px}
  .dayblock.piatok .illu.m-illu{display:none}
  .dayblock.piatok .illu.d-illu{display:block}
  .dayblock.sobota .illu{width:168px;height:110.931px}
  .dayblock.nedela .illu{width:168px;height:131.444px}
}

/* program */
.program{
  width:100%;
  display:flex;flex-direction:column;gap:16px;align-items:flex-start;
  padding:24px 0;
}
@media (min-width:1100px){
  /* zarovnané s textovým stĺpcom dní (ilustrácia 168px + medzera 24px) */
  .program{width:418px;align-self:flex-start;margin-left:192px}
}
.ptable{
  width:100%;position:relative;
  display:flex;flex-direction:column;align-items:flex-start;
}
.prow{width:100%;display:flex;flex-direction:column;align-items:flex-start;padding:8px}
.prow .in{width:100%;display:flex;gap:12px;align-items:center}
.ptime{flex:none;width:27px;height:54px;display:flex;align-items:center;justify-content:center}
.ptime span{
  transform:rotate(-90deg);
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-serif-md);line-height:normal;color:var(--slate);white-space:nowrap;
}
.pline{
  flex:none;width:0;height:63.869px;
  display:flex;align-items:center;justify-content:center;position:relative;
}
.pline img{
  position:absolute;top:50%;left:50%;
  width:63.869px;height:2px;
  transform:translate(-50%,-50%) rotate(90deg);
  object-fit:cover;
}
.pline::before{
  content:'';position:absolute;top:0;bottom:0;left:-0.5px;width:1px;background:var(--slate);opacity:.7;
}
.pline.haspic::before{display:none}
.ptx{
  flex:1 0 0;min-width:1px;
  display:flex;flex-direction:column;gap:4px;align-items:flex-start;
  color:var(--slate);line-height:normal;
}
.ptx h4{font-family:var(--serif);font-weight:400;font-size:var(--fs-serif-md);width:100%}
.ptx p{font-weight:300;font-size:var(--fs-body);width:100%}
/* plávajúce ilustrácie — vždy napravo od textu, nikdy cez text */
.prow{position:relative}
.prow.pad-r .in{padding-right:122px}
.pfloat{position:absolute;right:0;overflow:hidden;pointer-events:none}
.pfloat img{width:100%;height:100%;object-fit:contain}
.pfloat.f1{width:109.678px;height:145.023px;top:0}
.pfloat.f2{width:84.362px;height:135.913px;top:-6px}
.pfloat.f3{width:95.161px;height:134.666px;top:0}

/* =============== 4 · FOTO PÁS (len mobil) =============== */
#fotopas{
  position:relative;
  height:451.128px;
  margin-bottom:-220px;
  overflow:hidden;
}
#fotopas img{
  position:absolute;top:0;left:-50.16%;width:174.1%;height:99.38%;max-width:none;object-fit:cover;
}
#fotopas .fallback{
  position:absolute;inset:0;
  background:linear-gradient(160deg,#8aa6b8 0%,#42597a 60%,#1d3050 100%);
}
/* gradient overlay z Figmy */
#fotopas .grad{
  position:absolute;inset:0;
  background:linear-gradient(181.71deg, rgb(242,246,250) 1.25%, rgba(242,246,250,0) 33.59%);
}

/* =============== 5–8 · ZÁVEREČNÉ OBLÚKY =============== */
#zaver{position:relative;display:flex;flex-direction:column}
#zaver .zbg{display:none}
.arch{
  position:relative;
  border-top-left-radius:10000px;
  border-top-right-radius:10000px;
  padding:80px 24px 240px;
  display:flex;flex-direction:column;gap:24px;align-items:center;justify-content:center;
}
.arch .illu{overflow:hidden}
.arch .illu img{width:100%;height:100%;object-fit:contain}
.arch h2{
  font-family:var(--serif);font-weight:400;
  font-size:var(--fs-h2);line-height:normal;text-align:center;white-space:nowrap;
}
.arch .bodytx{width:100%;display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.arch .bodytx .col{width:100%;display:flex;flex-direction:column;align-items:center}
.arch .bodytx p{font-weight:400;font-size:var(--fs-body-lg);line-height:normal;width:100%;white-space:pre-wrap}
.arch .bodytx p b{font-weight:600}

#ubytovanie{background:var(--ice);margin-bottom:-220px;backdrop-filter:blur(2px)}
#ubytovanie .illu{width:77.23px;height:117.3px}
#ubytovanie h2,#ubytovanie .bodytx p{color:var(--navy)}

#dary{background:var(--mist);margin-bottom:-220px}
#dary .illu{width:58.13px;height:62.78px}
#dary h2,#dary .bodytx p{color:var(--navy)}

#doprava{background:var(--steel);margin-bottom:-220px}
#doprava .illu{width:85.241px;height:62px}
#doprava h2,#doprava .bodytx p{color:#fff}

#dresscode{padding-bottom:260px}
#dresscode .bgwrap{
  position:absolute;inset:0;pointer-events:none;
  border-top-left-radius:10000px;border-top-right-radius:10000px;
  overflow:hidden;
}
#dresscode .bgwrap img{
  position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;
}
#dresscode .bgwrap .fallback{
  position:absolute;inset:0;
  background:linear-gradient(165deg,#56708e 0%,#243a5c 70%,#101f38 100%);
}
#dresscode .bgwrap .tint{position:absolute;inset:0;background:rgba(0,31,63,0.7)}
#dresscode>*{position:relative}
#dresscode .illu.dresscode-illu{width:174px;height:131px}
#dresscode h2,#dresscode .bodytx p{color:#fff}
#dresscode .palette{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:8px 24px;
}
#dresscode .palette .sw{
  width:38px;height:38px;border-radius:50%;flex:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.18);
  border:0;cursor:pointer;position:relative;padding:0;
  transition:transform .25s;
}
#dresscode .palette .sw:hover{transform:scale(1.12)}
#dresscode .palette .sw:focus-visible{outline:2px solid #fff;outline-offset:3px}
/* po kliknutí sa nad bodkou ukáže hex kód */
#dresscode .palette .sw::after{
  content:attr(data-hex);
  position:absolute;left:50%;bottom:calc(100% + 10px);transform:translateX(-50%) translateY(4px);
  font-family:var(--sans);font-size:0.6875rem;letter-spacing:0.09em;color:#fff;
  background:rgba(0,31,63,.92);border-radius:999px;padding:4px 10px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity .3s, transform .3s;
}
#dresscode .palette .sw.show::after{opacity:1;transform:translateX(-50%) translateY(0)}

@media (min-width:1100px){
  #fotopas{display:none}
  #zaver{
    flex-direction:row;
    height:696px;
    align-items:center;
    justify-content:flex-end;
  }
  #zaver .zbg{
    display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden;
  }
  #zaver .zbg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none}
  #zaver .zbg .fallback{
    position:absolute;inset:0;
    background:linear-gradient(120deg,#1c2c44 0%,#4a607d 55%,#90a6b8 100%);
  }
  /* gradient overlay z Figmy — papierová farba vybledne zhora do fotky */
  #zaver .zbg .grad{
    position:absolute;inset:0;
    background:linear-gradient(180.53deg, rgb(242,246,250) 1.25%, rgba(242,246,250,0) 33.59%);
  }
  .arch{
    width:clamp(290px, 22vw, 390px);
    height:100%;
    margin:0 -30px 0 0;
    padding:96px 24px 80px;
    /* grid: fixed 140px illustration slot, then heading, then body */
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:140px auto 1fr;
    align-items:start;
    justify-items:center;
  }
  /* susedný oblúk prekrýva pravých 30px — text musí ostať mimo prekrytia */
  #ubytovanie,#dary,#doprava{margin-bottom:0;margin-right:-30px;padding-left:28px;padding-right:62px}
  #dresscode{padding-bottom:80px;margin-right:0}
  /* ilustrácia sa zarovná k spodku 140px slotu — nadpisy sa zarovnajú horizontálne */
  .arch .illu{align-self:end;margin-top:0}
  #dresscode .illu{align-self:end;margin-top:0}
}

/* =============== 9 · FOOTER =============== */
footer{
  background:var(--navy);
  padding:8px 24px 16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}
/* footer — zjednotený z DM Sans na Open Sans Light;
   farba zosvetlená z #527797 na #7397B8 pre WCAG AA kontrast 5,4:1 na navy */
footer p{
  font-family:var(--sans);font-weight:300;
  font-size:var(--fs-foot);line-height:1.57;color:#7397B8;width:100%;
}
@media (min-width:1100px){
  footer p{text-align:center}
}

/* ===== malé telefóny (320–374px) ===== */
@media (max-width:374px){
  /* menšia rezerva pre plávajúce ikony v programe, aby textu zostalo dosť miesta */
  .prow.pad-r .in{padding-right:96px}
  .pfloat{transform-origin:top right;transform:scale(.85)}
  /* dlhé nadpisy dní sa nezalomia cez okraj */
  .dayhead h3{font-size:1.375rem}
  /* ilustrácia nedele sa zmestí aj na 320px */
  .dayblock.nedela .illu{max-width:100%}
}

/* ===== tablety na výšku a menšie obrazovky (561–1099px) =====
   plnoširoká kompozícia: fotky a oblúky idú od kraja po kraj,
   texty a navy medailón sa držia v elegantnom stĺpci uprostred */
@media (min-width:561px) and (max-width:1099px){
  .page{max-width:none}

  /* hero fotka full-bleed, mená zostávajú centrované */
  #intro{height:min(820px, 92svh)}
  #intro .veil{min-height:100%}

  /* navy ovál ako centrovaný medailón nad fotkou — drží mobilné proporcie;
     väčší bočný padding, aby text nesadal na zaoblené okraje oválu */
  #dolezite{
    width:min(600px, calc(100% - 48px));
    margin-left:auto;margin-right:auto;
    padding-left:56px;padding-right:56px;
    height:auto;min-height:787px;
  }
  /* texty bližšie k ikonám */
  #dolezite .venue{gap:20px;justify-content:flex-start}
  #dolezite .venue .tx{flex:0 1 auto;min-width:0}
  #dolezite .venue.hostina{justify-content:space-between}

  /* texty víkendu v čitateľnom stĺpci */
  #vikend .inner{max-width:640px}

  /* ===== záverečné oblúky ako mriežka 2×2 =====
     plnoširoké stohovanie tu vytváralo obrie elipsy s medzerami —
     dvojice oblúkov vedľa seba pôsobia architektonicky ako na desktope */
  #zaver{
    display:grid;
    grid-template-columns:1fr 1fr;
  }
  .arch{
    width:100%;
    margin:0;
    padding:64px 32px 72px;
    /* grid: fixed 140px illustration slot, then heading, then body */
    display:grid;
    grid-template-columns:1fr;
    grid-template-rows:140px auto 1fr;
    align-items:start;
    justify-items:center;
  }
  /* horný rad sa predĺží a podsunie pod spodný rad —
     oblúky Dopravy a Dress Code sa vynárajú z farby, nie z bielej */
  #ubytovanie,#dary{padding-bottom:260px;margin-bottom:-220px;margin-right:0}
  #doprava{margin-bottom:0;margin-right:0}
  #dresscode{padding-bottom:72px}
  /* ilustrácia sa zarovná k spodku 140px slotu — nadpisy sa zarovnajú horizontálne */
  .arch .illu{align-self:end;margin-top:0}
  #dresscode .illu{align-self:end;margin-top:0}
  /* text v oblúkoch v čitateľnom stĺpci */
  .arch .bodytx{max-width:480px;margin:0 auto}
  #dresscode .palette{max-width:480px;margin:0 auto}
}

/* ===== menšie desktopy (1100–1280px) ===== */
@media (min-width:1100px) and (max-width:1280px){
  /* užšie oblúky, nech sa štvorica zmestí aj so zaoblením */
  .arch{width:clamp(265px, 24vw, 320px)}
  #dolezite .blocks{padding:0 40px}
}

/* ===== veľmi široké obrazovky (>1920px) ===== */
@media (min-width:1921px){
  .page{box-shadow:0 0 80px -40px rgba(0,31,63,.25)}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}