/*
 * Súbor: css/components/shared-responsive.css
 * Obsah: Pôvodné spoločné responzívne úpravy sekcií, gridov, hero a kontaktu; mobilné menu, jeho otvorený stav a obmedzenie pohybu.
 * Použitie: sluzba-betonove_a_oporne_mury.html, sluzba-havarie.html, sluzba-pripojky.html.
 * Zapojenie: <link rel="stylesheet" href="css/components/shared-responsive.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.
 */
/*
     * RESPONSIVE
     */

    .mobile-menu {
      display: none;
    }

    @media (max-width: 1023px) {

      .desktop-nav,
      .header-contact,
      .header-cta {
        display: none;
      }

      .menu-toggle {
        display: inline-flex;
      }

      /* MOBILE MENU */


      .mobile-menu {
        display: none;

        position: fixed;
        top: 82px;
        left: 0;
        right: 0;
        bottom: auto;
        max-height: calc(100dvh - 82px);

        z-index: 90;

        padding: 16px 20px 20px;

        background: rgb(var(--palette-light-rgb) / 88%);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        border-bottom: 1px solid var(--palette-sand);

        overflow-y: auto;
      }



      /* MENU OPEN */

      .mobile-menu.is-open {
        display: block;
      }


      /* MOBILE NAV */

      .mobile-menu nav {
        display: grid;
        gap: 0;
      }


      .mobile-menu nav>a:not(.btn) {
        min-height: 56px;

        display: flex;
        align-items: center;

        padding: 12px 4px;

        color: var(--palette-dark);

        border-bottom: 1px solid var(--palette-sand);

        font-size: 17px;
        font-weight: 600;

        text-decoration: none;
      }


      .mobile-menu nav>a:not(.btn):hover {
        color: var(--palette-taupe);
      }


      /* MOBILE CTA */

      .mobile-menu .btn {
        width: 100%;

        margin-top: 24px;
      }


      /* LOCK PAGE SCROLL WHILE MENU IS OPEN */

      body.menu-open {
        overflow: hidden;
      }

      .hero-grid,
      .pricing-grid,
      .media-split,
      .responsibility-grid,
      .contact-grid {
        grid-template-columns: 1fr;
      }

      .hero-copy {
        max-width: none;
      }

      .hero-image {
        min-height: 420px;
      }

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

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

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

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

    @media (max-width: 767px) {
      body {
        font-size: 16px;
      }

      .site-header {
        height: 64px;
      }

      .mobile-menu {
        top: 64px;
        max-height: calc(100dvh - 64px);
      }




      .section-head {
        margin-bottom: 32px;
      }

      .lead {
        font-size: 18px;
      }

      .hero-actions {
        display: grid;
      }

      .hero-actions .btn {
        width: 100%;
      }

      .hero-image {
        min-height: 300px;
      }

      .trust-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 8px;
      }

      .trust-counter {
        padding: 16px 6px;
        text-align: center;
      }

      .trust-counter-number {
        margin-bottom: 10px;
        font-size: clamp(32px, 9vw, 52px);
        white-space: nowrap;
      }

      .trust-counter strong {
        margin-bottom: 0;
        font-size: clamp(12px, 3vw, 16px);
        overflow-wrap: anywhere;
      }

      .grid--2,
      .grid--3,
      .grid--4,
      .process-grid,
      .form-grid,
      .footer-grid {
        grid-template-columns: 1fr;
      }




      .pricing-promise {
        padding: 24px;
      }

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

      .contact-form {
        padding: 24px;
      }

      .btn {
        min-height: 50px;
        padding-inline: 20px;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      html {
        scroll-behavior: auto;
      }

      *,
      *::before,
      *::after {
        transition: none !important;
      }
    }