/*
 * Súbor: css/general/layout.css
 * Obsah: Zjednotenie šírky kontajnerov a zarovnania obsahu; veľkosť a viditeľnosť loga divízie v hero na tablete a mobile.
 * Použitie: sluzby.html, index.html, sluzba-betonove_a_oporne_mury.html, sluzba-havarie.html, sluzba-pripojky.html, sluzba-stavba-domu-a-holodomu.html.
 * Zapojenie: <link rel="stylesheet" href="css/general/layout.css">; zachovaj pozíciu v hlavičke podľa css/README.md.
 * Závislosti: HTML triedy a selektory uvedené v pravidlách nižšie, css/general/base.css a farebné premenné témy stránky.
 */
/* Keep desktop content and hero overlays aligned across pages. */
@media (min-width: 1024px) {
  html:root {
    --container: 85vw;
  }

  html .container,
  html .work-process__inner {
    width: 85%;
    max-width: none;
    margin-inline: auto;
  }

  /* The original Tailwind draft uses this wrapper instead of .container. */
  html .max-w-7xl.mx-auto {
    width: 85%;
    max-width: none;
    margin-inline: auto;
    padding-inline: 0;
  }
}

/* Scale hero branding and keep it clear of the copy on smaller screens. */
@media (max-width: 1023px) {
  html .hero-intro .hero-division-brand {
    width: clamp(120px, 22vw, 200px);
    padding: 12px;
    right: 20px;
  }

  html .hero-intro .hero-division-brand img {
    width: 100%;
    max-height: 140px;
    object-fit: contain;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  html .hero-intro .hero-grid {
    padding-top: 140px;
  }
}

@media (max-width: 767px) {
  html .hero-intro .hero-division-brand {
    display: none;
  }
}