/* =========================================================
   pohladovybeton.sk — statický web (M3 - bau s.r.o.)
   Jeden súbor so štýlmi. Žiadny JavaScript, žiadne externé volania,
   žiadne stiahnuté písmo — používa sa písmo zariadenia.
   ========================================================= */

:root{
  --bg:#1c1c1c;
  --bg-2:#242424;
  --bg-3:#2c2c2c;
  --text:#e8e8e8;
  --mild:#a5a5a5;
  --linka:#3a3a3a;
  --akcent:#d8d8d8;
  --sirka:1160px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip}
body{
  margin:0;color:var(--text);
  min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  background:var(--bg);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:17px;line-height:1.65;
}
img{max-width:100%;height:auto}

/* Pôvodné pozadie webu — betónový priestor. Drží pevne, obsah sa posúva nad ním.
   Je to samostatná vrstva, nie background-attachment:fixed — ten sa na iPhone
   správa nespoľahlivo (pozadie sa zväčší alebo poskakuje pri posúvaní). */
body::before{
  content:"";position:fixed;inset:0;z-index:-1;
  background:url(/img/pozadie.webp) center center / cover no-repeat;
}
a{color:#fff}
a:hover{color:var(--mild)}
h1,h2,h3{line-height:1.25;font-weight:400}
h1{font-size:30px;margin:0 0 20px;letter-spacing:.01em}
h2{font-size:21px;margin:30px 0 10px;color:#fff}
h3{font-size:18px;margin:22px 0 6px;color:#fff}
p{margin:0 0 14px;color:var(--text)}
.obal{max-width:var(--sirka);margin:0 auto;padding:0 20px}
.pozn{color:var(--mild);font-size:15px}

/* --- hlavička ----------------------------------------------------------- */
.hlavicka{background:rgba(36,36,36,.72);border-bottom:1px solid var(--linka)}
.hlavicka .obal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:14px;padding-top:16px;padding-bottom:16px}
.znacka{font-size:25px;letter-spacing:.06em;color:#fff;text-decoration:none;white-space:nowrap}
.znacka strong{font-weight:700}
.menu ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px}
.menu a{
  display:block;padding:8px 13px;color:var(--text);text-decoration:none;
  font-size:14px;letter-spacing:.04em;border-bottom:2px solid transparent;
}
.menu a:hover{color:#fff;border-bottom-color:var(--linka)}
.menu a[aria-current="page"]{color:#fff;border-bottom-color:#fff}

/* --- rozloženie --------------------------------------------------------- */
main{padding:34px 0 20px;flex:1 0 auto}
.hlavicka,.pata{flex:none}
.stlpce{display:grid;grid-template-columns:215px minmax(0,1fr);gap:40px;align-items:start}
.text{
  min-width:0;
  /* Pôvodný web mal pod obsahom tmavý panel s krytím 80 % a tenkým rámikom. */
  background:rgba(38,36,38,.8);border:1px solid #5f5f5f;padding:26px 30px;
}
/* Na úvodnej je pod fotkou len úzky lem, ako na pôvodnom webe — nie široký rám. */
.text.uvod{padding:7px}
.text.uvod .prelinacka{margin:0;border:none}

/* --- bočné menu produktov ----------------------------------------------- */
/* Nadpis má rovnaký tmavý podklad ako odkazy pod ním — bez neho by sa dostal
   nad svetlú časť betónu a biely text by na nej nebol čitateľný. */
.bocne h2{
  margin:0 0 4px;font-size:15px;letter-spacing:.1em;color:#fff;font-weight:600;
  background:rgba(36,36,36,.82);padding:9px 12px;border-left:2px solid transparent;
}
.bocne ul{list-style:none;margin:0;padding:0}
.bocne li{margin-bottom:2px}
.bocne a{
  display:block;padding:7px 12px;color:var(--text);text-decoration:none;font-size:15px;
  border-left:2px solid transparent;background:rgba(36,36,36,.82);
}
.bocne a:hover{background:var(--bg-3);color:#fff}
.bocne a[aria-current="page"]{border-left-color:#fff;color:#fff;background:var(--bg-3)}

/* --- dlaždice produktov ------------------------------------------------- */
.dlazdice{list-style:none;margin:22px 0 10px;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.dlazdice a{
  display:block;background:rgba(36,36,36,.85);color:#fff;
  text-decoration:none;border:1px solid var(--linka);
}
.dlazdice img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover}
.dlazdice span{display:block;padding:11px 14px;font-size:15px}
.dlazdice a:hover{background:var(--bg-3)}
.dlazdice a:hover img{opacity:.85}
.dlazdice a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* --- kontakt ------------------------------------------------------------ */
.udaje{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:34px}
.udaje h2:first-child{margin-top:0}
.cislo{font-weight:600;white-space:nowrap}
.iban{white-space:nowrap;font-variant-numeric:tabular-nums}

/* --- tlačidlá ----------------------------------------------------------- */
.tlacidla{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
/* keď za tlačidlami nasleduje text, nech sa naň nelepí */
.tlacidla + *{margin-top:22px}
.tlacidlo{
  display:inline-block;padding:11px 20px;background:#fff;color:#1c1c1c;
  text-decoration:none;font-weight:600;font-size:15px;border:2px solid #fff;
}
.tlacidlo:hover{background:transparent;color:#fff}
.tlacidlo.obrys{background:transparent;color:#fff}
.tlacidlo.obrys:hover{background:#fff;color:#1c1c1c}

.uvodny{font-size:19px;color:#fff;max-width:640px;margin-top:22px}

/* Nadpis stránky je na fotke napísaný priamo v obrázku, preto ho tu necháme
   len pre vyhľadávače a čítačky obrazovky — vidieť ho netreba dvakrát. */
.skryte{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Striedanie fotiek na úvodnej — ako na pôvodnom webe, ale len cez CSS.
   Šesť fotiek, každá je na rade 6 sekúnd, prelínanie pol sekundy. */
.prelinacka{position:relative;aspect-ratio:755/475;overflow:hidden;margin:24px 0 0;border:1px solid #5f5f5f;background:var(--bg-2)}
.prelinacka img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;animation:striedanie 36s infinite;
}
.prelinacka img:nth-child(1){animation-delay:0s}
.prelinacka img:nth-child(2){animation-delay:6s}
.prelinacka img:nth-child(3){animation-delay:12s}
.prelinacka img:nth-child(4){animation-delay:18s}
.prelinacka img:nth-child(5){animation-delay:24s}
.prelinacka img:nth-child(6){animation-delay:30s}
@keyframes striedanie{
  0%{opacity:0}
  1.4%{opacity:1}
  15.3%{opacity:1}
  16.7%{opacity:0}
  100%{opacity:0}
}
/* Kto má v systéme vypnuté animácie, uvidí prvú fotku bez pohybu. */
@media (prefers-reduced-motion:reduce){
  .prelinacka img{animation:none;opacity:0}
  .prelinacka img:nth-child(1){opacity:1}
}

/* --- galéria ------------------------------------------------------------ */
.galeria{
  list-style:none;margin:26px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:10px;
}
.galeria a{display:block;overflow:hidden;line-height:0;background:var(--bg-2)}
.galeria img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.galeria a:hover img{opacity:.85}
.galeria a:focus-visible{outline:3px solid #fff;outline-offset:2px}

/* zväčšenie fotky — bez JavaScriptu, cez :target */
.lupa{
  position:fixed;inset:0;z-index:90;display:none;
  background:rgba(10,10,10,.96);padding:54px 18px;
  align-items:center;justify-content:center;
}
.lupa:target{display:flex}
.lupa img{
  max-width:100%;max-height:calc(100vh - 120px);max-height:calc(100dvh - 120px);
  object-fit:contain;display:block;min-width:0;flex:0 1 auto;
}
.lupa .zavriet{position:absolute;inset:0;z-index:1;display:block}
.lupa .ovladanie{position:relative;z-index:2;display:flex;align-items:center;gap:18px;max-width:100%;min-width:0}
.lupa .krok{
  flex:none;width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.14);
  color:#fff;font-size:26px;line-height:52px;text-align:center;text-decoration:none;
}
.lupa .krok:hover{background:rgba(255,255,255,.28);color:#fff}
.lupa .x{
  position:absolute;top:14px;right:18px;z-index:3;color:#fff;font-size:30px;
  width:46px;height:46px;line-height:46px;text-align:center;border-radius:50%;
  background:rgba(255,255,255,.14);text-decoration:none;
}
.lupa .x:hover{background:rgba(255,255,255,.28);color:#fff}
.lupa .cislo{
  position:absolute;bottom:16px;left:0;right:0;z-index:3;
  text-align:center;color:rgba(255,255,255,.7);font-size:15px;margin:0;padding:0 18px;
}

/* --- päta --------------------------------------------------------------- */
.pata{margin-top:46px;background:rgba(36,36,36,.82);border-top:1px solid var(--linka);padding:24px 0}
.pata ul{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 20px;justify-content:center}
.pata a{color:var(--mild);text-decoration:none;font-size:14px;letter-spacing:.03em}
.pata a:hover{color:#fff}
.drobne{text-align:center;color:var(--mild);font-size:14px;margin:0}

/* --- užšie obrazovky ---------------------------------------------------- */
@media (max-width:900px){
  .stlpce{grid-template-columns:1fr;gap:26px}
  .bocne{order:2}
  .bocne ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:4px}
}
@media (max-width:640px){
  body{font-size:16px}
  h1{font-size:24px}
  h2{font-size:19px}
  .obal{padding:0 16px}
  .hlavicka .obal{justify-content:center;gap:10px}
  .znacka{font-size:21px}
  .menu ul{justify-content:center}
  .menu a{padding:7px 10px;font-size:13px}
  .uvodny{font-size:17px}
  .galeria{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px}
  .lupa{padding:48px 8px}
  .lupa .ovladanie{gap:0}
  .lupa .krok{
    width:42px;height:42px;line-height:42px;font-size:22px;
    position:absolute;top:50%;margin-top:-21px;z-index:3;background:rgba(20,20,20,.6);
  }
  .lupa .ovladanie .krok:first-child{left:8px}
  .lupa .ovladanie .krok:last-child{right:8px}
}