@charset "UTF-8";
/* ==========================================================================
   UPTLAC.SK — responsive.css
   Mobile-first korekcie. Základ v main.css/components.css je desktopový
   layout; tu sa postupne zjednodušuje smerom nadol.
   ========================================================================== */

/* ------------------------------------------------------- ≤ 1280 px */
@media (max-width:1280px){
  .mega__inner{grid-template-columns:1fr 1fr 280px}
  .mega__col:nth-child(3){display:none}
  .g-6{grid-template-columns:repeat(3,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(3,1fr);gap:var(--sp-5) var(--sp-4)}
  .steps::before{display:none}
}

/* ------------------------------------------------------- ≤ 1100 px */
@media (max-width:1100px){
  .conf{grid-template-columns:minmax(0,1fr)}
  .recap{position:static;box-shadow:none}
  .recap__body{max-height:none}
  .catlayout{grid-template-columns:minmax(0,1fr)}
  .filters{display:none}
  .filter-open{display:inline-flex}
  .g-4{grid-template-columns:repeat(3,minmax(0,1fr))}
  .intent{grid-template-columns:repeat(3,minmax(0,1fr))}
  .footer__top{grid-template-columns:1fr 1fr 1fr}
  .footer__brand{grid-column:1/-1}
  .masonry{columns:2}
}

/* --------------------------------------------------------- ≤ 980 px */
@media (max-width:980px){
  .hero__inner{grid-template-columns:minmax(0,1fr);gap:var(--sp-6)}
  .hero__visual{order:-1}
  .sheet{aspect-ratio:1/.72;padding:20px}
  .sheet__tag{right:-8px;top:20px}
  .ccard--wide{grid-template-columns:1fr}
  .ccard--wide .ccard__media{aspect-ratio:16/9;border-right:0;border-bottom:1px solid var(--line)}
  .gallery{grid-template-columns:minmax(0,1fr)}
  .gallery__thumbs{flex-direction:row;order:2;overflow-x:auto;padding-bottom:.25rem}
  .gallery__thumb{width:64px;flex:none}
  .plist .pcard{flex-direction:column}
  .plist .pcard__media{width:100%;border-right:0;border-bottom:1px solid var(--line)}
}

/* --------------------------------------------------------- ≤ 900 px */
@media (max-width:900px){
  /* Desktopová navigácia a mega menu sa nahradia off-canvas menu */
  .nav,.mega,.header__cta{display:none}
  .header__burger{display:grid}
  .header__bar{gap:var(--sp-3)}
  .search{order:3;flex-basis:100%;max-width:none;margin-bottom:.6rem}
  .header__bar{height:auto;padding-block:.7rem;flex-wrap:wrap}
  .header.is-stuck .header__bar{height:auto}
  :root{--header-h:118px}
  .topbar__list li:nth-child(n+3){display:none}
  .g-3,.g-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .intent{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stickybuy{display:flex}
  body.has-stickybuy{padding-bottom:78px}
  .fab{bottom:calc(var(--sp-4) + 68px)}
  body:not(.has-stickybuy) .fab{bottom:var(--sp-4)}
}

/* --------------------------------------------------------- ≤ 720 px */
@media (max-width:720px){
  :root{--sp-9:3.5rem;--sp-8:2.75rem}
  .footer__top{grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2;column-gap:var(--sp-3)}
  .masonry > *{margin-bottom:var(--sp-3)}
  .sec-head{flex-direction:column;align-items:flex-start;gap:var(--sp-3)}
  .modal__head,.modal__body,.modal__foot{padding-inline:var(--sp-4)}
  .modal__box{border-radius:var(--r-lg)}
  .toolbar{gap:var(--sp-3)}
  .toolbar__right{width:100%;margin-left:0}
  .opts{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
  .conf__steps{overflow-x:auto;flex-wrap:nowrap;padding-bottom:.35rem;scrollbar-width:none}
  .conf__steps::-webkit-scrollbar{display:none}
  .conf__stepbtn{flex:none}
  .catlayout > *,.conf > *{min-width:0}
}

/* --------------------------------------------------------- ≤ 560 px */
@media (max-width:560px){
  .g-2,.g-3,.g-4{grid-template-columns:minmax(0,1fr)}
  .intent{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--sp-2)}
  .intent__card{padding:var(--sp-4) var(--sp-3)}
  .intent__ico{width:38px;height:38px}
  .intent__card h3{font-size:var(--t-base)}
  .steps{grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
  .step{display:grid;grid-template-columns:52px minmax(0,1fr);gap:var(--sp-3);text-align:left;align-items:start}
  .step__n{margin:0}
  .footer__top{grid-template-columns:minmax(0,1fr)}
  .masonry{columns:1}
  .toasts{left:var(--sp-3);right:var(--sp-3);max-width:none;bottom:var(--sp-3)}
  .lightbox__nav{width:38px;height:38px}
  .hero__cta .btn{flex:1 1 100%}
  .topbar__list li:nth-child(n+2){display:none}
  .quote{padding:var(--sp-4)}
  .table--responsive thead{display:none}
  .table--responsive tr{display:block;border-bottom:1px solid var(--line);padding:.5rem 0}
  .table--responsive td{display:flex;justify-content:space-between;gap:var(--sp-4);border:0;padding:.35rem .25rem}
  .table--responsive td::before{content:attr(data-th);color:var(--muted);font-size:var(--t-xs);font-family:var(--f-mono)}
}

/* ------------------------------------------------ Veľké obrazovky */
@media (min-width:1600px){
  :root{--wrap:1440px}
  .g-6{grid-template-columns:repeat(6,minmax(0,1fr))}
}

/* --------------------------------------------------------- PRINT */
@media print{
  .topbar,.header,.footer,.fab,.stickybuy,.toasts,.offcanvas,.overlay,.scrollbar{display:none !important}
  body{background:#fff;color:#000}
  .section{padding-block:1rem}
  a[href^="http"]::after{content:' (' attr(href) ')';font-size:.75em;color:#555}
}

/* --------------------------------- Mobilné zobrazenie burger tlačidla */
.header__burger{display:none}
@media (max-width:900px){
  .header__burger{display:grid}
}