/* >= 1000px: két hasáb a szolgáltatásokhoz */
@media (min-width: 1000px){
  .services-two-col{
    display: grid !important;
    grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: clamp(16px, 2.5vw, 24px);
    align-items: start;
    justify-content: center;
  }
  .services-two-col > *{ text-align: left; }
}

/* <= 900px: mobil/táblagép elrendezés + HERO mobil szabályok */
@media (max-width: 900px){
  .site-main{ padding-inline: clamp(12px, 4vw, 16px); }

  .grid-3,
  .service-grid,
  .price-grid{
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 16px);
  }
  .grid-2 { grid-template-columns: 1fr; }

  .main-nav { display: none; }
  .burger { display: flex; }
  .burger-label { display: inline-block; }

	.mobile-nav{
    position: fixed;
    left: 0;
    right: 0;
    top: 64px;                         /* igazítsd a header tényleges magasságához */
    background: #eaebef;
    border-bottom: 1px solid #e6e7eb;
    box-shadow: 0 12px 24px rgba(0,0,0,.08);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform 240ms ease, opacity 200ms ease;
    z-index: 100;                      /* a sticky header (z=50) és a hero fölé */
    display: block;                    /* fontos: ne maradjon display:none */
  }

  /* ha a HTML-ben [hidden] kerül rá, nyitáskor vedd le */
  .mobile-nav[hidden] { display: none; }

  /* kétféle nyitási minta támogatása: (1) eltávolítod a hidden-t, (2) osztályt kapcsolsz */
  .mobile-nav.is-open{
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  /* opcionális: body scroll tiltása nyitva */
  body.menu-open { overflow: hidden; }

  /* HERO – mobil */
  .hero-wrap{
    aspect-ratio: var(--hero-ar);
    min-height: auto;          /* ne írja felül az arányt */
    padding: 0;                /* a belső tér a .hero-content-en lesz */
  }

  /* Mobil háttérkép */
  .hero-wrap::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/banner-1280-720.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;               /* háttér */
    pointer-events: none;
  }

  /* Halványítás + blur az egész bannerre */
  .hero-wrap::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.10);   /* finom sötétítés */
    backdrop-filter: blur(2px);    /* enyhe üveg-hatás */
    -webkit-backdrop-filter: blur(2px);
    z-index: 0;                    /* a háttér fölött, a szöveg alatt */
    pointer-events: none;
  }

  /* Szöveg normál dokumentumfolyamban */
  .hero-content{
    position: static;
    display: block;
    padding: clamp(14px, 6vw, 22px) 0;
    z-index: 1; /* a háttér + overlay fölött marad */
  }

  .hero-inner{
    max-width: 100%;
    margin: 0 auto;
    padding-inline: clamp(14px, 6vw, 22px);
  }

  /* Szövegkártya háttér levéve (globálisan halványítunk) */
  .hero-copy{
    max-width: 520px;
    margin: 0 auto;
    align-items: flex-start;
    text-align: left;
    padding: clamp(10px, 4vw, 16px) clamp(12px, 5vw, 18px);
  }

  .hero-wrap h1{ font-size: clamp(22px, 6vw, 30px); }
  .hero-wrap p { font-size: 15px; margin-bottom: clamp(10px, 4vw, 16px); }

  /* Gomb */
  .hero-copy .btn{
    margin-top: 10px;
    margin-left: 0;
    width: auto;
    max-width: 100%;
  }

  /* Footer */
  .site-footer { padding: clamp(16px, 4vw, 24px) 0 clamp(10px, 3vw, 12px); }
  .footer-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 4vw, 20px);
  }
  .footer-grid > div{ text-align: left; }
  .footer-grid h4 { margin: 4px 0 8px; }
  .footer-grid ul{ padding-left: 0; list-style: none; margin: 0; }
  .footer-grid li{ margin: 6px 0; }
  .footer-grid a { display: inline-block; }

  .footer-bottom{ flex-direction: row; gap: 12px; justify-content: center; text-align: center; }
}

/* <= 768px: teljes, a 900-as blokk mintájára (biztos érvényesüléshez) */
@media (max-width: 768px){
  .site-main{ padding-inline: clamp(12px, 4vw, 16px); }

  .grid-3,
  .service-grid,
  .price-grid{
    grid-template-columns: 1fr;
    gap: clamp(12px, 3vw, 16px);
  }
  .grid-2 { grid-template-columns: 1fr; }

  .main-nav { display: none; }
  .burger { display: flex; }
  .burger-label { display: inline-block; }

  /* HERO – mobil */
  .hero-wrap{
    aspect-ratio: var(--hero-ar);
    min-height: auto;
    padding: 0;
  }

  .hero-wrap::before{
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/assets/img/banner-1280-720.webp');
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 0;
    pointer-events: none;
  }

  .hero-wrap::after{
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.10);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    z-index: 0;
    pointer-events: none;
  }

  .hero-content{
    position: static;
    display: block;
    padding: clamp(14px, 6vw, 22px) 0;
    z-index: 1;
  }

  .hero-inner{
    max-width: 100%;
    margin: 0 auto;
    padding-inline: clamp(14px, 6vw, 22px);
  }

  .hero-copy{
    max-width: 520px;
    margin: 0 auto;
    align-items: flex-start;
    text-align: left;
    padding: clamp(10px, 4vw, 16px) clamp(12px, 5vw, 18px);
  }

  .hero-wrap h1{ font-size: clamp(22px, 6vw, 30px); }
  .hero-wrap p { font-size: 15px; margin-bottom: clamp(10px, 4vw, 16px); }

  .hero-copy .btn{
    margin-top: 10px;
    margin-left: 0;
    width: auto;
    max-width: 100%;
  }

  .site-footer { padding: clamp(16px, 4vw, 24px) 0 clamp(10px, 3vw, 12px); }
  .footer-grid{
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 4vw, 20px);
  }
  .footer-grid > div{ text-align: left; }
  .footer-grid h4 { margin: 4px 0 8px; }
  .footer-grid ul{ padding-left: 0; list-style: none; margin: 0; }
  .footer-grid li{ margin: 6px 0; }
  .footer-grid a { display: inline-block; }

  .footer-bottom{ flex-direction: row; gap: 12px; justify-content: center; text-align: center; }
}

/* Extra keskeny */
@media (max-width: 320px){
  .footer-grid{ grid-template-columns: 1fr; }
}