/* ===================================================================
   karta.css — Tatra City Residence
   Shared design system for "Karta vybavenia" deck variants
   =================================================================== */

:root{
  /* Brand tokens */
  --smotanova: #e7ded2;
  --pantone-7527: #d1cac1;
  --sivohneda-1: #a49d95;
  --sivohneda-2: #958f88;
  --kavova-1: #524d4a;
  --kavova-2: #605b58;
  --paper: #efe9e0;
  --line: rgba(82,77,74,.18);

  /* Themed surface tokens */
  --bg: var(--paper);
  --bg-alt: var(--smotanova);
  --bg-section: var(--kavova-1);
  --bg-cover: var(--kavova-1);
  --ink: var(--kavova-1);
  --ink-soft: var(--kavova-2);
  --ink-mute: var(--sivohneda-2);
  --on-dark: var(--smotanova);
  --on-dark-mute: var(--sivohneda-1);
  --rule: var(--line);
  --accent: var(--sivohneda-1);
}
[data-theme="kavova"]{
  --bg: var(--kavova-1);
  --bg-alt: var(--kavova-2);
  --bg-section: var(--smotanova);
  --bg-cover: var(--kavova-1);
  --ink: var(--smotanova);
  --ink-soft: var(--pantone-7527);
  --ink-mute: var(--sivohneda-1);
  --rule: rgba(231,222,210,.18);
  --accent: var(--sivohneda-1);
}
[data-theme="kontrast"]{
  --bg: var(--smotanova);
  --bg-alt: #ddd4c7;
  --bg-section: var(--kavova-1);
  --bg-cover: var(--kavova-1);
  --ink: var(--kavova-1);
  --ink-soft: var(--kavova-2);
  --ink-mute: var(--sivohneda-2);
  --rule: rgba(82,77,74,.22);
  --accent: var(--kavova-1);
}

html,body{margin:0; background:#1a1817;}
deck-stage:not(:defined){visibility:hidden;}
deck-stage{font-family:'Onest', system-ui, sans-serif;}

section{
  background: var(--bg); color: var(--ink);
  font-family:'Onest', system-ui, sans-serif; font-weight: 300;
  letter-spacing: -0.005em; overflow: hidden; position: relative;
}
.mono{font-family:'JetBrains Mono', ui-monospace, monospace; letter-spacing:0;}
.upper{text-transform:uppercase; letter-spacing:.14em;}

/* ===== Header / footer chrome ===== */
.chrome-top, .chrome-bot{
  position:absolute; left:80px; right:80px; height:40px;
  display:flex; align-items:center; justify-content:space-between;
  font-size:14px; color: var(--ink-mute); letter-spacing:.14em; text-transform:uppercase; font-weight:400;
}
.chrome-top{top:40px; border-bottom:1px solid var(--rule); padding-bottom:20px; background: var(--bg); z-index:5;}
.chrome-bot{bottom:40px; border-top:1px solid var(--rule); padding-top:20px; background: var(--bg); z-index:5;}
.chrome-top .mk{display:flex; gap:18px; align-items:center;}
.chrome-top .mk .t{
  width:22px; height:22px; border-radius:50%; background: var(--ink); position:relative;
}
.chrome-top .mk .t::after{content:""; position:absolute; left:50%; top:24%; width:2px; height:55%; background:var(--bg); transform:translateX(-50%);}
.chrome-top .mk .t::before{content:""; position:absolute; left:30%; top:32%; width:40%; height:2px; background:var(--bg);}
.pgnum{font-feature-settings:"tnum"; letter-spacing:.1em;}

/* ===== COVER ===== */
.cover{
  background: var(--bg-cover); color: var(--on-dark);
  display:flex; flex-direction:column; justify-content:space-between;
  padding: 80px;
}
.cover .top{
  display:flex; justify-content:space-between; align-items:flex-start;
  font-size:14px; letter-spacing:.18em; text-transform:uppercase; color: var(--on-dark-mute); font-weight:400;
}
.cover .supersign{
  position:absolute; right:-180px; top:-120px; width:1320px; height:1320px;
  color: var(--smotanova); opacity:.16; pointer-events:none; z-index:1;
}
.cover .supersign svg{width:100%; height:100%; display:block;}
.cover .core{position:relative; z-index:3; margin-top:auto; padding-bottom:40px;}
.cover .eyebrow{
  font-size:14px; letter-spacing:.32em; text-transform:uppercase;
  color: var(--on-dark-mute); margin-bottom:36px; font-weight:500;
}
.cover h1{margin:0; font-size:172px; line-height:1.02; letter-spacing:-.035em; font-weight:300; color: var(--on-dark); text-wrap:balance;}
.cover h1 em{font-style: italic; font-weight:300;}
.cover .meta{
  display:grid; grid-template-columns: repeat(4, 1fr); gap:48px;
  margin-top:96px; padding-top:36px; border-top:1px solid rgba(231,222,210,.25);
}
.cover .meta .k{font-size:12px; letter-spacing:.22em; text-transform:uppercase; color: var(--on-dark-mute); margin-bottom:10px;}
.cover .meta .v{font-size:22px; font-weight:300; color: var(--on-dark);}
.cover .bottom{
  display:flex; justify-content:space-between; align-items:flex-end;
  font-size:14px; letter-spacing:.18em; text-transform:uppercase; color: var(--on-dark-mute); font-weight:400;
}

/* ===== INDEX ===== */
.index{padding: 120px 96px 96px;}
.index .lede{
  display:grid; grid-template-columns: 1fr 1fr; gap:120px; margin-bottom:80px;
}
.index h2{font-size:96px; line-height:1.04; letter-spacing:-.03em; font-weight:300; margin:0; color: var(--ink);}
.index .desc{font-size:20px; line-height:1.55; color: var(--ink-soft); font-weight:300; max-width:560px;}
.index ol{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns: 1fr 1fr; gap:0 96px;
  border-top:1px solid var(--rule);
}
.index ol li{
  display:grid; grid-template-columns: 80px 1fr auto; align-items:center;
  padding: 22px 0; border-bottom:1px solid var(--rule);
  font-size:24px; font-weight:400; color: var(--ink);
}
.index ol li .n{font-family:'JetBrains Mono', monospace; font-size:14px; color: var(--ink-mute); letter-spacing:.05em;}
.index ol li .c{font-size:13px; color: var(--ink-mute); text-transform:uppercase; letter-spacing:.18em; font-weight:400;}

/* ===== SECTION DIVIDER ===== */
.section{
  background: var(--bg-section); color: var(--on-dark);
  padding:96px; display:flex; flex-direction:column; justify-content:space-between;
}
[data-theme="kavova"] .section{ color: var(--ink); background: var(--bg-section); }
.section .ssign{
  position:absolute; left:-120px; bottom:-200px; width:880px; height:880px;
  color: rgba(231,222,210,.14);
}
[data-theme="kavova"] .section .ssign{ color: rgba(82,77,74,.16); }
.section .ssign svg{width:100%; height:100%; display:block;}
.section .tag{font-size:14px; letter-spacing:.32em; text-transform:uppercase; color: var(--on-dark-mute); font-weight:500;}
[data-theme="kavova"] .section .tag{color: var(--ink-mute);}
.section .num{font-family:'JetBrains Mono', monospace; font-size:24px; color: var(--on-dark-mute); letter-spacing:.04em; font-weight:400;}
[data-theme="kavova"] .section .num{color: var(--ink-mute);}
.section h2{margin:0; font-size:220px; line-height:1.0; font-weight:300; letter-spacing:-.035em; position:relative; z-index:2;}
.section h2 em{font-style:italic; font-weight:300;}
.section .summary{
  display:grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap:48px; max-width:1200px;
  border-top:1px solid rgba(231,222,210,.25); padding-top:28px; position:relative; z-index:2;
}
[data-theme="kavova"] .section .summary{border-top-color: rgba(82,77,74,.22);}
.section .summary .k{font-size:13px; letter-spacing:.18em; text-transform:uppercase; color: var(--on-dark-mute); margin-bottom:8px; font-weight:500;}
[data-theme="kavova"] .section .summary .k{color: var(--ink-mute);}
.section .summary .v{font-size:20px; font-weight:400;}
.section .head{display:flex; justify-content:space-between; align-items:flex-start;}

/* ===== PRODUCT SLIDES ===== */
.product{padding: 124px 96px 124px; display:grid; grid-template-rows: auto 1fr; gap:32px; min-height:0;}
.product .ptop{display:flex; justify-content:space-between; align-items:baseline;}
.product .ptop h2{margin:0; font-size:60px; font-weight:300; letter-spacing:-.025em; line-height:1.12;}
.product .ptop .cat{font-size:14px; letter-spacing:.22em; text-transform:uppercase; color: var(--ink-mute); font-weight:500;}
.pgrid{display:grid; gap:32px; min-height:0;}
.pgrid.cols-2{grid-template-columns: 1fr 1fr;}
.pgrid.cols-3{grid-template-columns: 1fr 1fr 1fr;}

.pcard{
  display:grid; grid-template-columns: 1.05fr 1fr; gap:28px;
  border:1px solid var(--rule); background: var(--bg-alt);
  padding: 22px; border-radius:2px; min-height:0;
}
.pcard.col1{grid-template-columns:1fr;}
.pcard .pimg{
  background: var(--bg);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; min-height:0;
}
.pcard .pimg img{
  max-width:88%; max-height:88%; width:auto; height:auto; object-fit:contain;
  mix-blend-mode: multiply;
}
[data-theme="kavova"] .pcard .pimg img{mix-blend-mode: normal;}
.pcard .pinfo{display:flex; flex-direction:column; gap:10px; padding: 6px 4px; min-width:0;}
.pcard .pinfo .pcat{font-size:11px; letter-spacing:.22em; text-transform:uppercase; color: var(--ink-mute); font-weight:600;}
.pcard .pinfo .pname{font-size:26px; font-weight:400; line-height:1.2; letter-spacing:-.01em; color: var(--ink);}
.pcard .pinfo .pdesc{font-size:13.5px; color: var(--ink-soft); line-height:1.5; font-weight:300;}
.pcard .pinfo .pspec{
  display:grid; grid-template-columns: 92px 1fr; gap:5px 18px; margin-top:auto;
  font-size:12.5px; border-top:1px solid var(--rule); padding-top:12px;
}
.pcard .pinfo .pspec dt{color: var(--ink-mute); text-transform:uppercase; letter-spacing:.14em; font-size:10.5px; font-weight:600; align-self:center;}
.pcard .pinfo .pspec dd{margin:0; color: var(--ink); font-weight:400;}
.pcard .pinfo .pspec dd.code{font-family:'JetBrains Mono', monospace; font-size:12px; letter-spacing:.02em;}

.badge{
  display:inline-flex; align-items:center; gap:8px;
  padding:5px 10px 6px; border:1px solid var(--ink); color: var(--ink);
  font-size:10px; letter-spacing:.22em; text-transform:uppercase; font-weight:600;
  align-self:flex-start;
}
.badge.solid{background: var(--ink); color: var(--bg);}
.badge .dot{width:6px; height:6px; border-radius:50%; background: currentColor;}

.pcard.big{grid-template-columns: 1.2fr 1fr; padding:28px;}
.pcard.big .pimg{min-height:380px;}
.pcard.big .pinfo .pname{font-size:36px;}
.pcard.big .pinfo .pdesc{font-size:15px;}

/* ===== SWATCHES (parkety, dlažba, obklad) ===== */
.swatchgrid{display:grid; grid-template-columns: repeat(3, 1fr); gap:20px;}
.swatch{
  border:1px solid var(--rule); padding:0; background:var(--bg-alt); border-radius:2px; overflow:hidden;
  display:flex; flex-direction:column;
}
.swatch .chip{aspect-ratio: 16/8; width:100%;}
.swatch .lbl{padding:10px 14px 12px; display:flex; flex-direction:column; gap:2px; border-top:1px solid var(--rule);}
.swatch .lbl .n{font-family:'JetBrains Mono', monospace; font-size:10.5px; color: var(--ink-mute); letter-spacing:.05em;}
.swatch .lbl .name{font-size:14px; color: var(--ink); font-weight:400;}

/* Wood swatches — Parador / Quick Step / Bjelin gradients */
.w-dub-skyline-biely{background: linear-gradient(120deg, #d8c8af 0%, #ead9bf 50%, #c2b094 100%);}
.w-dub-skyline-perlovo{background: linear-gradient(120deg, #a8a299 0%, #c2bcb1 50%, #918a80 100%);}
.w-dub-montblanc-brus{background: linear-gradient(120deg, #c5b393 0%, #d8c8a8 50%, #ab9776 100%);}
.w-dub-montblanc-pri{background: linear-gradient(120deg, #b9a181 0%, #cdb898 50%, #a08866 100%);}
.w-dub-loft-dymovy{background: linear-gradient(120deg, #b8b1a4 0%, #cfc8b9 50%, #968e80 100%);}
.w-dub-studioline-med{background: linear-gradient(120deg, #c5a072 0%, #d8b886 50%, #ab8956 100%);}

.w-dub-hnedy{background: linear-gradient(120deg, #6b4a32 0%, #856246 40%, #5e3f29 100%);}
.w-orech{background: linear-gradient(120deg, #5a3c2a 0%, #7a5739 50%, #4c3220 100%);}
.w-dub-prirodny-k{background: linear-gradient(120deg, #b08e63 0%, #c5a37a 50%, #9a7853 100%);}
.w-dub-tepy{background: linear-gradient(120deg, #b58b5e 0%, #d0a87f 50%, #a07a52 100%);}
.w-dub-bezovy{background: linear-gradient(120deg, #cbb594 0%, #ddc8a8 50%, #b89e7b 100%);}
.w-dub-lakovany{background: linear-gradient(120deg, #c6a779 0%, #dcc197 50%, #ad8e62 100%);}

/* BJELIN swatches */
.w-bjelin-terra{background: linear-gradient(120deg, #87553a 0%, #a07458 50%, #6b4530 100%);}
.w-bjelin-earth{background: linear-gradient(120deg, #8a847a 0%, #a39d92 50%, #6b6660 100%);}
.w-bjelin-natural{background: linear-gradient(120deg, #c2a382 0%, #d4b89b 50%, #aa8b69 100%);}
.w-bjelin-misty{background: linear-gradient(120deg, #d6cabb 0%, #e5dbcc 50%, #bcaf9d 100%);}
.w-bjelin-powder{background: linear-gradient(120deg, #e0d4c4 0%, #ece2d2 50%, #c5b9a6 100%);}

/* Tile swatches */
.t-grey{background: linear-gradient(135deg, #8c8b87 0%, #b2b0a9 50%, #7f7e7a 100%);}
.t-terracotta{background: linear-gradient(135deg, #b46a4a 0%, #c58668 50%, #a25a3e 100%);}
.t-toffe{background: linear-gradient(135deg, #8a6443 0%, #a3825f 50%, #745335 100%);}
.t-lagoon{background: linear-gradient(135deg, #5d7b78 0%, #7e9c97 50%, #4d6967 100%);}
.t-marron{background: linear-gradient(135deg, #6e4f3a 0%, #886a51 50%, #5a3f2a 100%);}
.t-perla{background: linear-gradient(135deg, #c8c2b9 0%, #dad4ca 50%, #b3ada3 100%);}
.t-alga{background: linear-gradient(135deg, #7e8a6b 0%, #9aa685 50%, #69755a 100%);}
.t-cemento{background: linear-gradient(135deg, #9a958d 0%, #b3aea4 50%, #847f76 100%);}
.t-beige{background: linear-gradient(135deg, #c8b89c 0%, #dac9ae 50%, #b09e83 100%);}
.t-blanco{background: linear-gradient(135deg, #f4f1ea 0%, #fbf8f1 50%, #e5dfd2 100%); box-shadow: inset 0 0 0 1px rgba(82,77,74,.08);}
.t-cityzen-1{background: linear-gradient(135deg, #c9c4ba 0%, #d8d2c5 50%, #b1ac9f 100%);}
.t-cityzen-2{background: linear-gradient(135deg, #a09a8c 0%, #b3ad9e 50%, #847e72 100%);}
.t-cityzen-3{background: linear-gradient(135deg, #74716a 0%, #86847d 50%, #5d5b56 100%);}
.t-cityzen-4{background: linear-gradient(135deg, #4a4946 0%, #585754 50%, #38373a 100%);}
.t-cityzen-5{background: linear-gradient(135deg, #e0d8c8 0%, #ede5d3 50%, #c2b9a4 100%);}
.t-ergon-classic{background: linear-gradient(135deg, #c4b69e 0%, #d4c8b1 50%, #a99a82 100%);}
.t-ergon-cool{background: linear-gradient(135deg, #b1aea4 0%, #c5c2b7 50%, #898679 100%);}
.t-ergon-warm{background: linear-gradient(135deg, #cdb89a 0%, #ddc9ad 50%, #a89379 100%);}

.ral-9003{background:#f4f4f0;}
.ral-9016{background:#f9f7f0;}
.col-volcanic{background: linear-gradient(135deg, #3c3a37 0%, #56524d 50%, #2a2926 100%);}
.col-telegrey{background: linear-gradient(135deg, #6c6d6f 0%, #8a8b8d 50%, #515355 100%);}
.niko-antracit{background: linear-gradient(135deg, #3a3a3c 0%, #4a4a4c 50%, #2e2e30 100%);}
.niko-black{background: linear-gradient(135deg, #1a1818 0%, #2a2826 50%, #100e0c 100%);}
.niko-white{background: linear-gradient(135deg, #f7f6f1 0%, #fbfaf6 50%, #e8e6df 100%); box-shadow: inset 0 0 0 1px rgba(82,77,74,.08);}

/* ===== Closing ===== */
.closing{padding: 120px 96px 96px;}
.closing h2{font-size:96px; font-weight:300; letter-spacing:-.03em; line-height:1.04; margin:0 0 36px; max-width:1200px;}
.closing .sig{
  display:grid; grid-template-columns: 1fr 1fr 1fr; gap:64px; margin-top:120px;
  border-top:1px solid var(--rule); padding-top:36px;
}
.closing .sig .row .k{font-size:12px; text-transform:uppercase; letter-spacing:.22em; color: var(--ink-mute); margin-bottom:18px; font-weight:500;}
.closing .sig .row .line{height:48px; border-bottom:1px solid var(--ink-mute);}
.closing .disc{font-size:14px; line-height:1.6; color: var(--ink-soft); max-width:1100px; font-weight:300;}

/* ===== Placeholder image fallback (no photo from xlsx) ===== */
.ph-stub{
  width:100%; height:100%; min-height:280px;
  display:flex; align-items:center; justify-content:center;
  background: var(--bg);
  background-image:
    linear-gradient(45deg, rgba(82,77,74,.04) 25%, transparent 25%),
    linear-gradient(-45deg, rgba(82,77,74,.04) 25%, transparent 25%);
  background-size: 20px 20px;
  color: var(--ink-mute);
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.22em; text-transform:uppercase;
}
.ph-stub::before{content:"PRODUKT · FOTO";}