/* ==========================================================================
   HANSA BRNO — responsive.css
   Jeden soubor pro veškerou responzivitu (tablet + mobil). Načítá se POSLEDNÍ
   na každé stránce, aby přebil výchozí (desktop) hodnoty.
   Kontejner zůstává max 1600px; pod 1600px se roztahuje na plnou šířku okna.
   Breakpointy:  1280 / 1024 (tablet + mobilní menu) / 768 (mobil) / 480 (malý mobil)
   ========================================================================== */

/* ---------- ≤ 1280px — menší desktop / velký tablet ---------- */
@media (max-width: 1280px) {
  .container { padding: 0 32px; }

  .sekce-hero h1 { font-size: 64px; }
  .sekce-nadpis { font-size: 52px; }
  .hero-stranky h1 { font-size: 60px; }

  .hero-mrizka { gap: 56px; }
  .produkt-mrizka { gap: 56px; }
  .o-firme-uvod-mrizka { gap: 56px; }
  .zalozka-obsah-mrizka { gap: 48px; }

  .souvisejici-mrizka { grid-template-columns: repeat(3, 1fr); }

  /* Vedlejší značky 4 → 2 dřív (už na ≤1280), aby v 4 sloupcích zbylo místo
     na produktový obrázek v kartě. Pod 1280 jsou 2 sloupce = dost místa. */
  .znacky-vedlejsi { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- ≤ 1024px — tablet + zapnutí mobilního menu ---------- */
@media (max-width: 1024px) {
  section { padding: 88px 0; }

  /* Mobilní navigace */
  .menu-prepinac { display: inline-flex; }
  .hlavicka-akce { display: none; }
  .logo { margin-right: auto; }
  nav.menu {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 4px; padding: 12px 16px 16px;
    background: var(--barva-bila); border-bottom: 1px solid var(--barva-borderu-jemny);
    box-shadow: 0 24px 48px rgba(15,23,42,.12);
  }
  nav.menu.je-otevreno { display: flex; }
  .menu-odkaz { padding: 14px 16px; font-size: 16px; }
  .menu-cta-mobil { display: block; margin-top: 8px; text-align: center; color: var(--barva-na-akcentu); background: var(--primarni-barva); font-weight: 700; }
  .menu-cta-mobil:hover { background: var(--primarni-barva-hover); color: var(--barva-na-akcentu); }

  /* Nadpisy */
  .sekce-hero h1 { font-size: 52px; }
  .sekce-nadpis { font-size: 44px; }
  .sekce-nadpis--kompaktni { font-size: 38px; }
  .hero-stranky { padding: 56px 0 48px; }
  .hero-stranky h1 { font-size: 48px; }
  .hero-stranky-perex { font-size: 18px; }

  /* Hlavičky sekcí — sloupcově */
  .sekce-hlavicka { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 48px; }

  /* Dvousloupcové layouty → pod sebe */
  .hero-mrizka,
  .produkt-mrizka,
  .o-firme-uvod-mrizka,
  .kontakt-formular-mrizka,
  .zalozka-obsah-mrizka { grid-template-columns: 1fr; gap: 48px; }

  .o-firme-vizual { aspect-ratio: 16 / 10; max-width: 560px; }
  .produkt-galerie { position: static; }

  /* Mřížky karet (.znacky-vedlejsi řešeno už v bloku ≤1280) */
  .znacky-mrizka { grid-template-columns: 1fr; }
  .kategorie-mrizka { grid-template-columns: repeat(2, 1fr); }
  .novinky-mrizka { grid-template-columns: repeat(2, 1fr); }
  .souvisejici-mrizka { grid-template-columns: repeat(2, 1fr); }
  .certifikaty-mrizka { grid-template-columns: repeat(2, 1fr); }
  .reference-mrizka { grid-template-columns: repeat(3, 1fr); }
  .tym-mrizka { grid-template-columns: repeat(2, 1fr); }

  /* Stat strip 4 → 2 sloupce. Svislá čára mezi sloupci + vodorovná mezi řádky.
     Pravý sloupec (sudé) bez pravého rámečku; poslední řádek bez spodního. */
  .staty-pruh { grid-template-columns: repeat(2, 1fr); }
  .stat { padding: 44px 24px; border-bottom: 1px solid var(--barva-borderu-jemny); }
  .stat:nth-child(2n) { border-right: none; }
  .stat:nth-last-child(-n+2) { border-bottom: none; }
  .stat-cislo { font-size: 52px; }

  /* Fakturační údaje 3 → 2 */
  .fakturace-mrizka { grid-template-columns: repeat(2, 1fr); }
  .fakturace-polozka:nth-child(3n) { border-right: 1px solid var(--barva-borderu-jemny); }
  .fakturace-polozka:nth-child(2n) { border-right: none; }

  /* Kontaktní blok */
  .kontakt-mrizka { grid-template-columns: 1fr; }
  .kontakt-info { border-right: none; border-bottom: 1px solid var(--barva-borderu-jemny); padding: 48px; }
  .mapa-obal { min-height: 360px; }

  /* Footer: tablet 2 sloupce, nové pořadí. Buňky nemají třídy → nth-child + order.
     Pořadí buněk v HTML: 1=Logo+popis, 2=Značky, 3=Informace, 4=Kontakt, 5=Ke stažení.
     Cíl: ř1 Logo|Kontakt, ř2 Informace|Značky, ř3 Ke stažení (přes celou šířku). */
  .paticka-mrizka { grid-template-columns: repeat(2, 1fr); gap: 40px; }
  .paticka-mrizka > :nth-child(1) { order: 1; }                      /* Logo+popis */
  .paticka-mrizka > :nth-child(4) { order: 2; }                      /* Kontakt */
  .paticka-mrizka > :nth-child(3) { order: 3; }                      /* Informace */
  .paticka-mrizka > :nth-child(2) { order: 4; }                      /* Značky */
  .paticka-mrizka > :nth-child(5) { order: 5; grid-column: 1 / -1; } /* Ke stažení */

  /* Detail produktu — sekundární prvky */
  .klic-parametry { grid-template-columns: repeat(3, 1fr); }
  .pouziti-mrizka { grid-template-columns: repeat(2, 1fr); }
  .zalozky-navigace { overflow-x: auto; }
}

/* ---------- ≤ 768px — mobil ---------- */
@media (max-width: 768px) {
  .container { padding: 0 20px; }
  section { padding: 64px 0; }

  /* Topbar — zjednodušit (skrýt e-mail a město, nechat telefon) */
  .horni-lista-vlevo { gap: 16px; }
  .horni-lista-polozka:nth-child(2),
  .horni-lista-polozka:nth-child(3) { display: none; }

  /* Nadpisy */
  .sekce-hero h1,
  .hero-stranky h1 { font-size: 38px; }
  .sekce-nadpis { font-size: 34px; }
  .sekce-nadpis--kompaktni { font-size: 30px; }
  .hero-stranky-perex,
  .hero-perex { font-size: 16px; }
  .sekce-vyzva h2 { font-size: 36px; }

  /* Hero — plovoucí štítky zmenšit na mobilu (jinak zakrývají produkt).
     Odsazení od kraje přes clamp(...vw...) → drží odstup, nepřilepí se k rohu, symetrické. */
  .tech-box { right: clamp(24px, 5vw, 40px); top: clamp(24px, 5vw, 40px); padding: 9px 12px; min-width: 0; }
  .tech-popisek { font-size: 9px; }
  .tech-hodnota { font-size: 13px; }
  .tech-popisek.je-odsazeno { margin-top: 4px; }
  .hero-popisek { left: clamp(24px, 5vw, 40px); bottom: clamp(24px, 5vw, 40px); padding: 8px 12px; gap: 8px; }
  .hero-popisek-cislo { font-size: 10.5px; }
  .hero-popisek-nazev { font-size: 12px; }

  /* Vše na jeden sloupec */
  .znacky-vedlejsi,
  .kategorie-mrizka,
  .novinky-mrizka,
  .souvisejici-mrizka,
  .certifikaty-mrizka,
  .tym-mrizka,
  .formular-radek,
  .sidla-mrizka,
  .kontakt-osoby { grid-template-columns: 1fr; }

  .reference-mrizka { grid-template-columns: repeat(2, 1fr); }

  /* Fakturace → 1 sloupec. Stat strip ZŮSTÁVÁ 2 sloupce i na mobilu (50/50);
     dělicí čáry (svislá + vodorovná) řeší blok ≤1024 výše. */
  .fakturace-mrizka { grid-template-columns: 1fr; }
  .fakturace-polozka,
  .fakturace-polozka:nth-child(3n),
  .fakturace-polozka:nth-child(2n) { border-right: none; }

  /* Karty / bloky — menší padding */
  .formular-box,
  .kontakt-info,
  .sidlo-box { padding: 28px; }
  .znacka-obsah { padding: 32px; }

  /* CTA řádek na detailu */
  .objednat-radek { grid-template-columns: 1fr; }
  .akce-vedlejsi { grid-template-columns: 1fr; }

  /* Footer: mobil — Logo 100 %, pak Informace|Značky (50/50), Kontakt 100 %, Ke stažení 100 %.
     Stejná specificita jako tablet, ale později v souboru → přebíjí ho. */
  .paticka-mrizka { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .paticka-mrizka > :nth-child(1) { order: 1; grid-column: 1 / -1; } /* Logo+popis */
  .paticka-mrizka > :nth-child(3) { order: 2; grid-column: auto; }   /* Informace */
  .paticka-mrizka > :nth-child(2) { order: 3; grid-column: auto; }   /* Značky */
  .paticka-mrizka > :nth-child(4) { order: 4; grid-column: 1 / -1; } /* Kontakt */
  .paticka-mrizka > :nth-child(5) { order: 5; grid-column: 1 / -1; } /* Ke stažení */
  .paticka-spodek { flex-direction: column; align-items: flex-start; }

  /* Široké tabulky — vodorovný posun */
  .tabulka-obal { overflow-x: auto; }
  .tabulka-parametry { min-width: 640px; }
}

/* ---------- ≤ 480px — malý mobil ---------- */
@media (max-width: 480px) {
  .sekce-hero h1,
  .hero-stranky h1 { font-size: 32px; }
  .sekce-nadpis { font-size: 28px; }
  .stat-cislo { font-size: 44px; }

  .reference-mrizka { grid-template-columns: 1fr; }

  /* Logo text necháme, ale doplňkový popisek menší */
  .logo-text { font-size: 16px; }

  /* Topbar jen telefon */
  .horni-lista-mono { font-size: 12px; }
}

/* ==========================================================================
   Stránkové mřížky (Reference, Výpis produktů, Prezentace značky, Článek)
   ========================================================================== */
@media (max-width: 1024px) {
  /* Reference */
  .pripady-mrizka { grid-template-columns: repeat(2, 1fr); }
  .obory-mrizka { grid-template-columns: repeat(2, 1fr); }
  /* Prezentace značky */
  .znacka-hero-mrizka { grid-template-columns: 1fr; gap: 48px; }
  .znacka-hero h1 { font-size: 56px; }
  .znacka-heslo h2 { font-size: 38px; }
  /* Výpis produktů — filtr nad mřížku */
  .vypis-rozlozeni { grid-template-columns: 1fr; gap: 28px; }
  .filtr-panel { position: static; }
  .produkty-mrizka { grid-template-columns: repeat(2, 1fr); }
  /* Detail článku */
  .clanek-nadpis { font-size: 40px; }
  .clanek-perex { font-size: 18px; }
}

@media (max-width: 768px) {
  .pripady-mrizka,
  .obory-mrizka,
  .znacka-body,
  .produkty-mrizka { grid-template-columns: 1fr; }
  .znacka-hero h1 { font-size: 44px; }
  .znacka-bod { padding: 24px; }
  /* Filtr — vodorovné rozložení skupin na mobilu */
  .clanek-nadpis { font-size: 32px; }
  .clanek-telo h2 { font-size: 26px; }
  .clanek-telo blockquote { font-size: 19px; }
}

@media (max-width: 480px) {
  .znacka-hero h1 { font-size: 36px; }
}

/* ==========================================================================
   Galerie posuvník — počet viditelných sloupců dle šířky (3 → 2 → 1+peek)
   ========================================================================== */
@media (max-width: 1024px) { .galerie-stopa { grid-auto-columns: calc((100% - 20px) / 2); } }
@media (max-width: 480px)  { .galerie-stopa { grid-auto-columns: 86%; } }