*{box-sizing:border-box;margin:0;padding:0}
:root{
  --gold:#c8a97a;
  --cream:#f8f4ef;
  --dark:#01352F;
  --charcoal:#01352F;
  --text:#3a3732;
  --border:#e5ddd3;
}

/* ── Reset & base ── */
html{
  height:100%;
  height:-webkit-fill-available; /* iOS Safari 100vh fix */
}
body{
  width:100%;
  height:100%;
  height:-webkit-fill-available;
  overflow:hidden;
  background:#d4cfc9;
  font-family:'Montserrat',sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  -webkit-tap-highlight-color:transparent; /* remove tap flash on iOS */
  -webkit-touch-callout:none;
}

/* ── Layout ── */
#layout{
  display:-webkit-flex;
  display:flex;
  -webkit-flex-direction:column;
  flex-direction:column;
  width:100vw;
  height:100vh;
  height:-webkit-fill-available;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:flex-start;
  justify-content:flex-start;
  padding-bottom:calc(58px + env(safe-area-inset-bottom, 0px));
  box-sizing:border-box;
}

/* ── Book wrapper ── */
#book-wrap{
  -webkit-flex:1;
  flex:1;
  min-height:0;
  position:relative;
  width:100%;
  overflow:hidden;
  -webkit-user-select:none;
  -moz-user-select:none;
  user-select:none;
  touch-action:none; /* handled in JS */
}

/* ── Nav bar ── */
#nav{
  position:fixed;
  bottom:0;
  left:0;
  right:0;
  height:58px;
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  -webkit-justify-content:center;
  justify-content:center;
  gap:18px;
  background:rgba(1,53,47,.93);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
  width:100%;
  padding:0 20px;
  padding-bottom:env(safe-area-inset-bottom, 0px); /* iPhone notch */
  z-index:100;
  box-sizing:content-box;
}

/* ── Book ── */
#book{
  position:absolute;
  width:1632px;
  height:816px;
  -webkit-transform-origin:0 50%;
  transform-origin:0 50%;
  overflow:visible;
  opacity:0;
  will-change:transform; /* GPU layer for smooth animation */
}

/* ── Pages ── */
.page{
  position:absolute;
  top:0;
  left:0;
  width:816px;
  height:816px;
  opacity:0;
  background:var(--cream);
  overflow:hidden;
  -webkit-backface-visibility:hidden;
  backface-visibility:hidden;
}
.page.active{opacity:1;z-index:2}
.page.flip-active{opacity:1}

/* ── Top bar ── */
.topbar{
  position:absolute;
  top:0;left:0;right:0;
  height:52px;
  background:var(--charcoal);
  display:-webkit-flex;
  display:flex;
  -webkit-align-items:center;
  align-items:center;
  padding:0 28px;
  gap:14px;
  z-index:20;
}
.topbar img{height:27px;width:auto;object-fit:contain;-webkit-flex-shrink:0;flex-shrink:0}
.topbar-div{width:1px;height:18px;background:rgba(200,169,122,.4);-webkit-flex-shrink:0;flex-shrink:0}
.topbar-title{
  -webkit-flex:1;flex:1;
  min-width:0;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  font-size:10px;font-weight:500;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:rgba(255,255,255,.72);
}

/* ── Page numbers ── */
.pn{position:absolute;bottom:0;font-weight:500;font-size:9px;color:#fff;background:var(--gold);padding:5px 14px;z-index:30;letter-spacing:1px;font-family:'Montserrat',sans-serif}
.pn-r{right:0}
.pn-l{left:0}

/* ── Content wrapper ── */
.pg{position:absolute;inset:52px 0 0;padding:18px 40px 0;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;overflow:hidden}
.pg-body{-webkit-flex:1;flex:1;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;overflow:hidden;padding-top:4px}

/* ── Typography ── */
.cat{display:block;font-size:10px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.gold-line{width:36px;height:2px;background:var(--gold);margin-bottom:16px;-webkit-flex-shrink:0;flex-shrink:0}
.h1{font-family:'Playfair Display',serif;font-size:32px;font-weight:700;color:var(--dark);line-height:1.25;margin-bottom:16px}
.h2{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--dark);line-height:1.25;margin-bottom:14px}
.h3{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--dark);line-height:1.3;margin-bottom:8px}
.txt{font-size:11px;font-weight:300;color:var(--text);line-height:1.75;margin-bottom:14px}
.txt strong{font-weight:500;color:var(--dark)}
.divider{width:100%;height:1px;background:var(--border);margin:14px 0;-webkit-flex-shrink:0;flex-shrink:0}

/* ── Feature list ── */
.feat{list-style:none}
.feat li{display:-webkit-flex;display:flex;-webkit-align-items:flex-start;align-items:flex-start;gap:12px;padding:7px 0;font-size:11px;font-weight:300;color:var(--text);line-height:1.55}
.feat li::before{content:"›";color:var(--gold);font-size:16px;font-weight:700;-webkit-flex-shrink:0;flex-shrink:0;line-height:1;margin-top:1px}

/* ── Location cards ── */
.loc-card{background:#fff;padding:14px 12px;border-left:2px solid var(--gold)}
.dist{font-family:'Playfair Display',serif;font-size:22px;font-weight:700;color:var(--dark);line-height:1}
.dest{font-size:10px;font-weight:500;color:var(--text);text-transform:uppercase;letter-spacing:1.5px;margin:3px 0 5px}
.desc{font-size:11px;font-weight:300;color:#999;line-height:1.55}

/* ── Standards grid ── */
.std{padding:12px 10px;background:var(--cream);border-top:2px solid var(--gold)}
.std h4{font-family:'Playfair Display',serif;font-size:14px;font-weight:700;color:var(--dark);margin-bottom:6px}
.std p{font-size:11px;font-weight:300;color:var(--text);line-height:1.55}

/* ── Room rows ── */
.room-row{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:baseline;align-items:baseline;font-size:11px;font-weight:300;color:var(--text);border-bottom:1px solid var(--border);padding-bottom:5px}
.room-row strong{font-weight:500;color:var(--dark);font-size:11px}
.room-row span{color:var(--gold);font-size:11px;font-weight:500}

/* ── Nav buttons ── */
.nav-btn{
  background:none;
  border:1px solid rgba(200,169,122,.5);
  color:#c8a97a;
  width:34px;height:34px;
  border-radius:50%;
  cursor:pointer;
  font-size:15px;
  display:-webkit-flex;display:flex;
  -webkit-align-items:center;align-items:center;
  -webkit-justify-content:center;justify-content:center;
  -webkit-transition:all .2s;transition:all .2s;
  font-family:sans-serif;
  -webkit-flex-shrink:0;flex-shrink:0;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
}
.nav-btn:hover{background:#c8a97a;color:#fff;border-color:#c8a97a}
.nav-btn svg{pointer-events:none}

#counter{font-size:10px;font-weight:400;color:rgba(255,255,255,.65);letter-spacing:1px;min-width:52px;text-align:center}
#dots{display:-webkit-flex;display:flex;gap:4px;-webkit-align-items:center;align-items:center}
.dot{width:5px;height:5px;border-radius:50%;background:rgba(200,169,122,.3);cursor:pointer;-webkit-transition:all .25s;transition:all .25s;-webkit-flex-shrink:0;flex-shrink:0}
.dot.active{background:#c8a97a;-webkit-transform:scale(1.4);transform:scale(1.4)}

/* ── Print button ── */
.print-btn{background:none;border:1px solid rgba(200,169,122,.5);color:#c8a97a;height:34px;padding:0 14px;border-radius:17px;cursor:pointer;font-size:9px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:6px;-webkit-transition:all .2s;transition:all .2s;font-family:'Montserrat',sans-serif;-webkit-flex-shrink:0;flex-shrink:0;touch-action:manipulation}
.print-btn:hover{background:#c8a97a;color:#fff;border-color:#c8a97a}
.print-btn svg{width:13px;height:13px;fill:currentColor}

/* ══════════════════════════════════════════
   RESPONSIVE — Tablet (max 900px)
══════════════════════════════════════════ */
@media (max-width:900px){
  #dots{display:none} /* príliš veľa bodiek na malom ekrane */
  #nav{gap:12px;padding:0 14px;padding-bottom:env(safe-area-inset-bottom,0px)}
}

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile (max 600px)
══════════════════════════════════════════ */
@media (max-width:600px){
  #nav{gap:8px;padding:0 10px;padding-bottom:env(safe-area-inset-bottom,0px)}
  .nav-btn{width:30px;height:30px}
  .print-btn{padding:0 10px;letter-spacing:0.5px;font-size:8px}
  #counter{font-size:9px;min-width:40px}
}

/* ══════════════════════════════════════════
   RESPONSIVE — Very small (max 380px)
══════════════════════════════════════════ */
@media (max-width:380px){
  #nav{gap:5px}
  .nav-btn{width:28px;height:28px}
  .print-btn span{display:none} /* skry text, nechaj len ikonu */
}

/* ══════════════════════════════════════════
   PRINT — Domáca tlačiareň (RGB, bez spadaviek)
══════════════════════════════════════════ */


/* ══════════════════════════════════════════
   CROSS-BROWSER RESPONSIVE FIXES
══════════════════════════════════════════ */

/* Safari macOS / iOS - lepsie zaobchodi s viewport heightom */
html {
  height: 100vh;
  height: 100dvh;  /* dynamic viewport (lepsie sa zaobchadza s URL bar v Safari iOS) */
}
body {
  min-height: 100vh;
  min-height: 100dvh;
}
#layout {
  height: 100vh;
  height: 100dvh;
  min-height: 100vh;
  min-height: 100dvh;
}

/* Firefox - touch action lepsie defaulty */
@supports (-moz-appearance: none) {
  #book-wrap { touch-action: pan-y pinch-zoom; }
}

/* iOS Safari - safe-area pre notch a home indicator */
@supports (padding: max(0px)) {
  #nav {
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}

/* Velmi sirokе obrazovky (4K, ultrawide) - obmedz max velkost */
@media (min-width: 2200px) {
  #book {
    /* Max scale je uz v JS = limit nepotrebny */
  }
}

/* Vyssia hustota pixelov (retina) - zachovaj kvalitu obrazkov */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  img { image-rendering: -webkit-optimize-contrast; }
}

/* Tlac z mobilu - safe area */
@media print and (max-width: 600px) {
  @page { margin: 0 !important; }
}


@media print{
  *{-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;color-adjust:exact!important}
  @page{size:215.9mm 215.9mm;margin:0}
  html,body{width:215.9mm;height:auto;overflow:visible!important;background:#fff}
  #layout{display:block!important;width:215.9mm!important}
  #nav{display:none!important}
  #book-wrap{display:block!important;width:816px!important;height:auto!important;overflow:visible!important;zoom:1;margin:0;-webkit-transform:none!important;transform:none!important}
  #book{position:static!important;width:816px!important;height:auto!important;opacity:1!important;-webkit-transform:none!important;transform:none!important;overflow:visible!important;-webkit-transition:none!important;transition:none!important}
  .page{position:relative!important;display:block!important;width:816px!important;height:816px!important;opacity:1!important;z-index:1!important;left:0!important;top:0!important;page-break-after:always;break-after:page;overflow:hidden!important;-webkit-transition:none!important;transition:none!important}
  .page:last-child{page-break-after:auto!important;break-after:auto!important}
  #book-shadow{display:none!important}
  .print-btn{display:none!important}
  .pn{display:block!important}
}

#zoom-container{width:100%;height:100%;-webkit-transition:transform 0.3s ease;transition:transform 0.3s ease;-webkit-transform-origin:left top;transform-origin:left top}


/* ── Page 15 — Holodom / Štandard cards lists ── */
.hd-list li{position:relative;padding-left:14px;padding-top:3px;padding-bottom:3px;font-size:11px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.95)}
.hd-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;border:1px solid var(--gold);background:transparent}
.hd-list li b{color:#fff;font-weight:600}

.st-list li{position:relative;padding-left:14px;padding-top:3px;padding-bottom:3px;font-size:11px;font-weight:300;line-height:1.5;color:rgba(255,255,255,.95)}
.st-list li::before{content:"";position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;border:1px solid #fff;background:transparent}
.st-list li b{color:#fff;font-weight:600}


/* ══════════════════════════════════════════
   RESPONSIVE — Mobile portrait (single-page mode)
   Aktivuje sa keď je obrazovka užšia ako 768px A vyššia ako širšia
══════════════════════════════════════════ */
@media (max-width: 767px) and (orientation: portrait) {
  /* Body nech sa môže scrollovať pre lepšiu manipuláciu */
  html, body {
    overflow: hidden;
    overscroll-behavior: none;
  }
  
  /* Layout zaberá celý viewport */
  #layout {
    padding-bottom: calc(52px + env(safe-area-inset-bottom, 0px));
  }
  
  /* Nav je trochu nižší */
  #nav {
    height: 52px;
  }
  
  /* Touch hint - dotykové pole pre swipe gestá */
  #book-wrap {
    touch-action: pan-y;
  }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Mobile landscape
   Optimalizácia pre na šírku otočený mobil
══════════════════════════════════════════ */
@media (max-height: 500px) and (orientation: landscape) {
  /* Nižší nav aby ostalo viac priestoru pre obsah */
  #nav {
    height: 44px;
    gap: 10px;
  }
  .nav-btn {
    width: 28px;
    height: 28px;
  }
  .print-btn {
    height: 28px;
    padding: 0 10px;
    font-size: 8px;
    letter-spacing: 0.5px;
  }
  #counter {
    font-size: 9px;
    min-width: 36px;
  }
  
  /* Layout s menším paddingom dole */
  #layout {
    padding-bottom: calc(44px + env(safe-area-inset-bottom, 0px));
  }
  
  /* Touch action umožní swipe */
  #book-wrap {
    touch-action: pan-y;
  }
}

/* ══════════════════════════════════════════
   RESPONSIVE — Veľmi malé landscape (telefón na šírku)
══════════════════════════════════════════ */
@media (max-width: 750px) and (orientation: landscape) {
  #nav {
    padding: 0 8px;
    gap: 6px;
  }
  .nav-btn {
    width: 26px;
    height: 26px;
    font-size: 13px;
  }
  .print-btn {
    padding: 0 8px;
    font-size: 7px;
  }
  .print-btn svg {
    width: 11px;
    height: 11px;
  }
}