/* Účtoria verejný web – zdieľané responzívne pravidlá pre dotykové zariadenia.
   Marketingové stránky sú inline-štýlované (bez tried), preto tu cielime cez
   atribútové selektory na inline `style` a prebíjame ich cez !important.
   Formát inline gridov je konzistentný: `grid-template-columns:...` (bez medzery).
   Hamburger menu a PWA modál vkladá /static/web/mobile.js. */

/* ===== Hamburger + mobilné menu ===== */
.d-hamburger{display:none;background:none;border:1px solid #E2E6E8;border-radius:10px;cursor:pointer;padding:9px;color:#0F1115;align-items:center;justify-content:center}
.d-mobmenu{display:none;position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid #ECEEF0;box-shadow:0 20px 40px -24px rgba(15,17,21,.24);padding:8px 20px 16px;z-index:49}
.d-mobmenu.open{display:block;animation:dDrop .22s cubic-bezier(.22,.61,.36,1)}
.d-mobmenu a{display:block;text-decoration:none;font-size:16px;font-weight:600;color:#404A53;padding:13px 6px;border-bottom:1px solid #F1F3F4}
.d-mobmenu a:last-child{border-bottom:none}
@keyframes dDrop{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}

/* ===== Rozloženie: tablet / telefón ===== */
@media (max-width:900px){
  /* Layoutové viacstĺpcové gridy (repeat 3/4) → 2 stĺpce.
     Cielime len na 3 a 4 stĺpce — NIE na dekoratívne mikro-gridy (napr.
     repeat(7) bod-matrix ikony s pevnou px šírkou). */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:repeat(2,1fr) !important}
  /* 2-stĺpcové hero/obsahové gridy → 1 stĺpec */
  [style*="grid-template-columns:0.82fr"],
  [style*="grid-template-columns:0.85fr"],
  [style*="grid-template-columns:1.05fr"],
  [style*="grid-template-columns:1.1fr"],
  [style*="grid-template-columns:1fr 1fr"],
  [style*="grid-template-columns:1fr 1.25fr"],
  [style*="grid-template-columns:300px"]{grid-template-columns:1fr !important}
  /* Footer 4-stĺpce → 2 stĺpce */
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{grid-template-columns:repeat(2,1fr) !important}
  /* Bočné odsadenie sekcií */
  section{padding-left:20px !important;padding-right:20px !important}
  /* Header: skryť desktop navigáciu + Kontakt tlačidlo, ukázať hamburger */
  header nav{display:none !important}
  .d-hide-mob{display:none !important}
  .d-hamburger{display:inline-flex !important}
}
@media (max-width:560px){
  /* Na telefóne layoutové gridy na 1 stĺpec */
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(4"]{grid-template-columns:1fr !important}
  [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{grid-template-columns:1fr !important}
  /* Zmenšenie veľkých nadpisov aby nepretekali */
  [style*="font-size:62px"],[style*="font-size:60px"]{font-size:36px !important}
  [style*="font-size:56px"],[style*="font-size:52px"]{font-size:33px !important}
  [style*="font-size:48px"],[style*="font-size:46px"]{font-size:31px !important}
  [style*="font-size:44px"],[style*="font-size:42px"]{font-size:29px !important}
}

/* ===== PWA modál „prejsť na mobilnú appku" ===== */
.pwa-back{position:fixed;inset:0;background:rgba(15,17,21,.55);backdrop-filter:blur(4px);z-index:100;display:none;align-items:center;justify-content:center;padding:20px}
.pwa-back.open{display:flex;animation:pwaFade .2s ease}
.pwa-card{background:#fff;border-radius:22px;width:100%;max-width:400px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(15,17,21,.5);animation:pwaUp .28s cubic-bezier(.22,.61,.36,1)}
@keyframes pwaFade{from{opacity:0}to{opacity:1}}
@keyframes pwaUp{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.pwa-back.open,.pwa-card,.d-mobmenu.open{animation:none}}