/**
 * Zsengezöld – front-page.php oldalstílusok
 *
 * Korábban a sablon <style> blokkjában volt, ami minden
 * oldalletöltéssel újra letöltődött. Külön fájlként a böngésző
 * egyszer tölti le és utána gyorsítótárazza.
 */

/* ===================== DESIGN TOKENEK ===================== */
.zs-home {
  --gold:      #7A5C33;
  --gold-soft: #B89362;
  /*
   * Arany a SÖTÉT ZÖLD sávhoz (Kinek szól). A --gold-soft ott csak 2,34
   * kontrasztot adna, a félkövér 20 px-es szövegre előírt 3,0 alatt; ez a
   * változat 3,14-et. Ránézésre ugyanaz a meleg arany, csak egy hajszállal
   * világosabb. A felvezető szöveg ÉS a felsorolásjelek is ezt használják,
   * hogy pontosan egyforma színűek legyenek.
   */
  --gold-on-dark: #D2AC77;
  --light: #E6DDD1;
  --green:      #556049;
  --green-soft: #78836A;
  --brown: #5A473B;
  --cream: #F9F7F2;
  --placeholder: #D5CCC0;
}

/* ===================== ALAPOK ===================== */

/*
 * Szekció-térköz.
 *
 * 1440 px-en 64 px, 1024-en ~45 px, mobilon 40 px. Két szomszédos
 * szekció között tehát 128 px levegő van desktopon.
 *
 * Miért pont ennyi: a szekciókon BELÜLI legnagyobb térköz 48 px
 * (képsáv alja -> cím). A szekcióhatárnak ennél érezhetően – legalább
 * 2,5x – nagyobbnak kell lennie, különben a szem nem látja, hol ér
 * véget egy blokk. 128 / 48 = 2,7x. A korábbi 115 px-es (230 px-es
 * határ) viszont már üres mezőnek látszott.
 */
.zs-home .zs-section { padding: clamp(40px, 4.4vw, 64px) 90px; }

/*
 * Ahol két szomszédos szekció HÁTTERE AZONOS, ott nincs színváltás, ami
 * elválasztaná őket – a teljes térköz ilyenkor nem levegőnek, hanem
 * lyuknak látszik. Ezeken a találkozásoknál szűkebb a margó (40 px),
 * így a két szakasz egy összetartozó egységként olvasódik.
 *
 * Két ilyen hely van a főoldalon:
 *   hero → „Mi a Zsengezöld"      (mindkettő krém)
 *   képgaléria → visszajelzések   (mindkettő krém)
 *
 * A hero FELSŐ margója is 40 px: ott a ragadós fejléc van fölötte,
 * nem egy másik szekció, ezért nem kell a teljes térköz.
 */
.zs-home .zs-hero { padding-top: 40px; padding-bottom: 40px; }
.zs-home .zs-about { padding-top: 40px; }
.zs-home .zs-gallery { padding-bottom: 40px; }
.zs-home .zs-reviews { padding-top: 40px; }

/* horgonyra ugráskor a ragadós fejléc ne takarja el a szakasz tetejét */
.zs-home .zs-section[id] { scroll-margin-top: 96px; }
/*
 * A főoldalon pontosan KÉT tartalomszélesség van:
 *   széles ... 1245 px (a konténer a 90 px-es szekciómargón belül)
 *   szűk   ...  980 px
 *
 * A szűk korábban 860 px volt, a galéria és a vélemények viszont 980-at
 * kapott – így három, egymáshoz túl közeli bal él keletkezett, ami
 * felbontotta a görgetés ritmusát. Egyetlen szűk érték van helyette.
 */
.zs-home .zs-container { max-width: 1440px; margin: 0 auto; }
.zs-home .zs-container--narrow { max-width: 980px; }

.zs-home h1, .zs-home h2, .zs-home h3 {
  font-family: 'Fraunces', Georgia, serif;
  color: var(--green);
  margin: 0;
}
.zs-home h2 { font-size: 40px; font-weight: 600; line-height: 1.25; margin-bottom: 24px; }
.zs-home h3 { font-size: 22px; font-weight: 600; line-height: 1.3; }

.zs-home .zs-label {
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 700; letter-spacing: .04em;
  color: var(--gold); margin: 0 0 12px;
}
.zs-home .zs-lead {
  font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.35;
  color: var(--gold); margin: 0 0 20px;
}
.zs-home .zs-lead--sm { font-size: 16px; }
.zs-home .zs-body {
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.7; color: var(--brown);
}
.zs-home .zs-body p { margin: 0 0 16px; }
.zs-home .zs-body p:last-child { margin-bottom: 0; }
.zs-home .zs-body--after { margin-top: 32px; }
.zs-home .zs-center { text-align: center; }

/* ===================== GOMBOK ===================== */
.zs-home .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 15px 30px;
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 700; line-height: 1.3;
  text-transform: uppercase; text-decoration: none;
  border-radius: 6px; border: 2px solid transparent;
  cursor: pointer; transition: all .25s ease;
}
.zs-home .btn-arrow::after { content: '\203A'; font-size: 20px; line-height: 1; }
.zs-home .btn-primary { background: var(--gold); color: var(--cream); }
.zs-home .btn-primary:hover { background: var(--green); color: var(--cream); }
.zs-home .btn-secondary { background: transparent; color: var(--gold); border-color: var(--gold); }
/* Hover: sötétzöld kitöltés, hogy elváljon az arany elsődleges gombtól */
.zs-home .btn-secondary:hover { background: var(--green); border-color: var(--green); color: var(--cream); }
.zs-home .btn-outline-dark { background: transparent; color: var(--green); border-color: var(--green); }
.zs-home .btn-outline-dark:hover { background: var(--green); color: var(--cream); }

/* ===================== LAPOZÓPONTOK ===================== */
.zs-home .pagination-dots { display: none; justify-content: center; gap: 10px; margin-top: 20px; }
.zs-home .pagination-dots .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--placeholder); cursor: pointer; transition: background .25s;
}
.zs-home .pagination-dots .dot.is-active { background: var(--gold); }

/* ===================== HERO ===================== */
.zs-home .zs-hero {
  background: var(--cream);
  /* A függőleges margót az egységes 40 px adja (lásd ALAPOK). */
}
.zs-home .hero-grid { display: flex; align-items: center; gap: 60px; }
/*
 * A két oszlop középre igazítva ül egymás mellett. Ha a képoszlop
 * jóval magasabb a szövegnél, a szöveg mélyre csúszik a képek közepéhez –
 * ezért a képoszlop 54% helyett 46%, így a két magasság közelebb kerül
 * egymáshoz, és a cím feljebb marad.
 */
.zs-home .hero-text { display: block; flex: 1 1 58%; min-width: 0; }
.zs-home .hero-images { flex: 1 1 42%; min-width: 0; padding-bottom: 70px; }

.zs-home .hero-text h1 { font-size: 56px; font-weight: 600; line-height: 1.18; margin-bottom: 24px; }
.zs-home .hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 700; line-height: 1.3;
  color: var(--gold); margin: 0 0 20px;
}
.zs-home .hero-description {
  font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.6; color: var(--brown); margin: 0 0 32px;
}
.zs-home .hero-buttons { display: flex; flex-wrap: wrap; gap: 16px; }

.zs-home .image-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
/* a jobb oszlop eltolva – transform, hogy a layout ne csússzon el */
.zs-home .image-grid > *:nth-child(2),
.zs-home .image-grid > *:nth-child(4) { transform: translateY(70px); }
.zs-home .image-box {
  display: block; width: 100%; height: auto;
  aspect-ratio: 1 / 1; object-fit: cover;
  background: var(--placeholder); border-radius: 16px;
}

/*
 * A hero férjen ki egy képernyőre. Szélesebb ablakban a képek is
 * nagyobbak, ezért 1080px magas kijelzőn is szükség van a tömörítésre –
 * innen az 1150px-es küszöb. Efölött (nagy monitor) marad a terv
 * szerinti arány. A képek mérete nem változik, csak a körülöttük
 * lévő hely: padding, képköz és az eltolás mértéke.
 */
@media (min-width: 1200px) and (max-height: 1150px) {
  .zs-home .image-grid { gap: 16px; }
  .zs-home .image-grid > *:nth-child(2),
  .zs-home .image-grid > *:nth-child(4) { transform: translateY(40px); }
  .zs-home .hero-images { padding-bottom: 40px; }
}

/* ===================== MI A ZSENGEZÖLD ===================== */
.zs-home .zs-about { background: var(--cream); }
.zs-home .feature-list {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 60px; row-gap: 8px;
  list-style: none; margin: 28px 0 0; padding: 0;
}
.zs-home .feature-row {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.6; color: var(--brown);
}
.zs-home .feature-icon {
  flex: 0 0 auto; color: var(--gold); font-size: 18px; font-weight: 700; line-height: 1.5;
}

/* ===================== KINEK SZÓL ===================== */
.zs-home .zs-forwhom { background: var(--green); }

/*
 * A képsáv a zöld szekció LEGTETEJÉN ül: a szekció felső belső margóját
 * kinullázzuk, így a fotó felső éle egybeesik a zöld sáv felső élével,
 * és a kép "nyitja" a szekciót. Oldalt és alul marad a szokásos térköz.
 * Ha nincs feltöltve képsáv, marad a normál felső térköz.
 */
.zs-home .zs-forwhom:has(.forwhom-img) { padding-top: 0; }

/*
 * A képsáv a konténer szélességében. A felső két sarok éles, mert a kép
 * felső éle a szekció élére fut ki – ott nincs mit lekerekíteni. Alul
 * viszont a zöld háttérben "úszik" a kép, ezért ott marad a lekerekítés.
 */
.zs-home .forwhom-img {
  display: block; width: 100%; height: 380px;
  object-fit: cover;
  border-radius: 0 0 16px 16px;
  background: var(--placeholder);
  margin-bottom: 48px;
}
.zs-home .zs-forwhom h2 { color: var(--cream); text-align: center; }
/* Ugyanaz az arany, mint a felsorolásjeleké – lásd --gold-on-dark. */
.zs-home .zs-forwhom .zs-lead { color: var(--gold-on-dark); margin-bottom: 40px; }
.zs-home .forwhom-list {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 60px; row-gap: 20px;
  list-style: none; margin: 0; padding: 0;
}
.zs-home .forwhom-list li {
  display: flex; align-items: flex-start; gap: 16px;
  font-family: 'Inter', sans-serif; font-size: 16px; line-height: 1.5; color: var(--light);
}
/* Pontosan ugyanaz az arany, mint a fölötte lévő felvezető szövegé. */
.zs-home .forwhom-dot {
  flex: 0 0 auto; width: 16px; height: 16px; margin-top: 4px;
  border-radius: 50%; border: 2px solid var(--gold-on-dark); position: relative;
}
.zs-home .forwhom-dot::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--gold-on-dark);
}

/* ===================== FOGLALKOZÁSOK ===================== */
.zs-home .zs-services { background: var(--light); }
.zs-home .services-layout {
  display: grid; grid-template-columns: 1fr 1.9fr; gap: 40px; align-items: start;
}
.zs-home .services-intro .btn { margin-top: 24px; }
.zs-home .services-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.zs-home .services-cards > .service-card:first-child { grid-column: 1 / -1; }

.zs-home .service-card {
  position: relative;
  display: flex; flex-direction: column; gap: 16px;
  background: var(--cream); border-radius: 24px; padding: 40px 30px 30px;
}
.zs-home .service-badge {
  position: absolute; top: 0; left: 30px;
  background: var(--green); color: var(--cream);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .06em;
  padding: 6px 20px; border-radius: 0 0 6px 6px;
}
.zs-home .service-meta { display: flex; flex-wrap: wrap; gap: 8px; }
.zs-home .meta-pill {
  background: var(--light); color: var(--brown);
  font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600;
  padding: 5px 12px; border-radius: 20px;
}
.zs-home .service-desc {
  margin: 0; font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.6; color: var(--brown); flex: 1;
}
.zs-home .service-price {
  margin: 0; font-family: 'Inter', sans-serif;
  font-size: 20px; font-weight: 700; color: var(--brown);
}
.zs-home .service-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.zs-home .service-buttons .btn { padding: 12px 22px; font-size: 14px; }

/* ===================== IDÉZET ===================== */
.zs-home .zs-quote { background: var(--brown); }
.zs-home .zs-quote blockquote {
  margin: 0; text-align: center;
  font-family: 'Fraunces', Georgia, serif;
  font-size: 34px; font-weight: 600; line-height: 1.4; color: var(--cream);
}

/* ===================== RENI ===================== */
.zs-home .zs-reni { background: var(--light); }
.zs-home .reni-grid { display: grid; grid-template-columns: 340px 1fr; gap: 60px; align-items: center; }
.zs-home .reni-photo {
  display: block; width: 340px; height: 340px;
  border-radius: 50%; object-fit: cover; background: var(--placeholder);
}
.zs-home .reni-text .btn { margin-top: 24px; }

/* ===================== GALÉRIA ===================== */
.zs-home .zs-gallery { background: var(--cream); }

/*
 * Mozaik elrendezés: a bal oszlopban magas+alacsony, a jobb oldalon
 * alacsony+magas kép váltakozik, így a két oszlop összmagassága azonos.
 * A minta 4 képenként ismétlődik. A "dense" kitöltés gondoskodik róla,
 * hogy a 4. kép a bal oszlop aljára kerüljön.
 *
 * A sormagasság töréspontonként fix, mert a rácssorok magassága nem
 * származtatható az oszlopszélességből tiszta CSS-ben. A magas képek
 * így 2 sor + köz = kb. négyzet, az alacsonyak fele akkorák.
 */
/*
 * A mozaik a konténer TELJES szélességét kitölti, mint a főoldal többi
 * szakasza – nincs külön max-width.
 *
 * A sormagasság ehhez igazodik: a magas képek 2 sort + egy közt fognak át,
 * és akkor négyzetesek, ha 2*sor + gap = oszlopszélesség. 1440 px-en az
 * oszlop ~612 px, ebből (612 - 20) / 2 = 296 px a sormagasság.
 */
.zs-home .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 296px;
  grid-auto-flow: row dense;
  gap: 20px;
  margin-top: 40px;
}
.zs-home .gallery-item {
  display: block; width: 100%; height: 100%;
  border-radius: 16px; overflow: hidden;
  background: var(--placeholder);
}
.zs-home .gallery-item__img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .4s ease;
}
.zs-home a.gallery-item:hover .gallery-item__img { transform: scale(1.04); }
.zs-home .gallery-item:nth-child(4n+1),
.zs-home .gallery-item:nth-child(4n+3) { grid-row: span 2; }

/* ===================== VISSZAJELZÉSEK ===================== */
.zs-home .zs-reviews { background: var(--cream); }
/* Teljes konténerszélesség, mint a galériánál és a lap többi szakaszánál */
.zs-home .reviews-grid {
  display: grid; grid-template-columns: 1fr 1.4fr; gap: 60px; align-items: start;
}
/*
 * A vélemények címsorának NINCS saját mérete: a .zs-home h2 skáláját
 * követi minden töréspontnál (40 / 32 / 24 px), így pontosan akkora,
 * mint a fölötte lévő „Képgaléria" cím. Korábban itt egy fix 40 px állt,
 * ami nagyobb specificitása miatt tableten felülírta a 32 px-et.
 */
.zs-home .reviews-track {
  display: flex; gap: 24px; overflow-x: auto;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zs-home .reviews-track::-webkit-scrollbar { display: none; }
.zs-home .review-card {
  flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
  margin: 0; padding-left: 28px; border-left: 3px solid var(--gold);
  display: flex; flex-direction: column; gap: 24px;
}
.zs-home .review-card blockquote {
  margin: 0; font-family: 'Inter', sans-serif;
  font-size: 16px; line-height: 1.7; color: var(--brown);
}
.zs-home .review-card figcaption { display: flex; align-items: center; gap: 16px; }
.zs-home .review-author {
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--gold);
}
.zs-home .zs-reviews .pagination-dots { display: flex; }

/* ===================== GYIK ===================== */
.zs-home .zs-faq { background: var(--light); }
.zs-home .faq-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  column-gap: 60px; margin-top: 40px; align-items: start;
}
/* Az oszlopok külön blokkok: így az egyikben nyíló válasz nem
   befolyásolja a másik oszlop sorainak magasságát. */
.zs-home .faq-col { display: block; }
.zs-home .faq-item { border-bottom: 1px solid rgba(120,131,106,.35); }
.zs-home .faq-question {
  display: flex; align-items: flex-start; gap: 16px; width: 100%;
  padding: 20px 0; background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Inter', sans-serif; font-size: 16px; font-weight: 700; color: var(--green);
  text-transform: none; transition: color .2s;
}
.zs-home .faq-question:hover,
.zs-home .faq-question[aria-expanded="true"] { color: var(--gold); }
.zs-home .faq-icon {
  flex: 0 0 auto; color: var(--gold); font-size: 18px; line-height: 1.4;
  transition: transform .2s;
}
.zs-home .faq-question[aria-expanded="true"] .faq-icon { transform: rotate(45deg); }
.zs-home .faq-answer { padding: 0 0 20px 34px; }
.zs-home .faq-answer p {
  margin: 0 0 12px; font-family: 'Inter', sans-serif;
  font-size: 15px; line-height: 1.7; color: var(--brown);
}
.zs-home .faq-answer p:last-child { margin-bottom: 0; }

/* ===================== KAPCSOLAT ===================== */
.zs-home .zs-contact { background: var(--cream); }
.zs-home .zs-contact .zs-label { text-align: center; }
.zs-home .zs-form { margin-top: 40px; }

/* Contact Form 7 – aláhúzott mezők a terv szerint */
.zs-home .zs-form .wpcf7-form > p { margin: 0 0 24px; }
.zs-home .zs-form input[type="text"],
.zs-home .zs-form input[type="email"],
.zs-home .zs-form input[type="tel"],
.zs-home .zs-form textarea {
  width: 100%; box-sizing: border-box;
  background: transparent; border: none;
  border-bottom: 1px solid rgba(120,131,106,.6);
  border-radius: 0; padding: 10px 0;
  font-family: 'Inter', sans-serif; font-size: 16px; color: var(--brown);
  transition: border-color .2s ease;
}
.zs-home .zs-form input::placeholder,
.zs-home .zs-form textarea::placeholder { color: rgba(90,71,59,.6); }
.zs-home .zs-form input:focus,
.zs-home .zs-form textarea:focus { outline: none; border-bottom-color: var(--gold); }
/* A CF7 textarea alapból rows="10" – explicit magasság kell hozzá. */
.zs-home .zs-form textarea { height: 108px; min-height: 108px; resize: vertical; }

.zs-home .zs-form .wpcf7-list-item { margin: 0; }
.zs-home .zs-form .wpcf7-list-item-label,
.zs-home .zs-form .wpcf7-acceptance { font-family: 'Inter', sans-serif; font-size: 14px; color: var(--brown); }
.zs-home .zs-form input[type="checkbox"] { accent-color: var(--gold); width: 16px; height: 16px; margin-right: 8px; }

.zs-home .zs-form input[type="submit"] {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--gold); color: var(--cream);
  border: 2px solid transparent; border-radius: 6px;
  padding: 15px 40px; cursor: pointer;
  font-family: 'Inter', sans-serif; font-size: 15px; font-weight: 700;
  text-transform: uppercase; transition: background .25s ease;
}
.zs-home .zs-form input[type="submit"]:hover { background: var(--green); }
.zs-home .zs-form .wpcf7-spinner { display: block; margin: 12px auto 0; }
.zs-home .zs-form .wpcf7-not-valid-tip { font-size: 13px; color: #b3261e; margin-top: 6px; }
.zs-home .zs-form .wpcf7-response-output {
  margin: 20px 0 0; padding: 12px 16px; border-radius: 6px;
  font-family: 'Inter', sans-serif; font-size: 14px;
}

/* A rácsot a .zs-form__grid adja (lásd pages.css) – itt nincs teendő. */

/* ===================== TABLET ===================== */
@media (max-width: 1199px) {
  /* Csak a vízszintes margó szűkül; a függőleges mindenütt 40 px */
  .zs-home .zs-section { padding-left: 60px; padding-right: 60px; }

  /* Keskenyebb oszlop -> arányosan alacsonyabb sor: (442 - 20) / 2 ≈ 210 */
  .zs-home .gallery-grid { grid-auto-rows: 210px; }
  .zs-home h2 { font-size: 32px; }

  .zs-home .hero-grid { flex-direction: column-reverse; align-items: stretch; gap: 30px; }
  .zs-home .hero-text h1 { font-size: 40px; }
  .zs-home .hero-images { padding-bottom: 0; }

  .zs-home .image-grid {
    display: flex; overflow-x: auto; gap: 16px;
    scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zs-home .image-grid::-webkit-scrollbar { display: none; }
  /*
   * 1:1, mert a hero képek négyzetesen (800×800) töltődnek fel, és a
   * Figma mobil terv is 335×335-öt ír 375px-es képernyőn. A korábbi
   * 16/11 a magasság 31%-át levágta, ezért tűntek eltérő méretűnek.
   * A max-height csak azért kell, hogy tableten ne nyúljon túl magasra.
   */
  .zs-home .image-grid > * {
    flex: 0 0 100%; scroll-snap-align: start; scroll-snap-stop: always;
    aspect-ratio: 1 / 1; max-height: 480px;
    border-radius: 20px;
  }

  /*
   * Az asztali eltolást ugyanazzal a :nth-child szelektorral kell
   * visszavonni: a médialekérdezés nem ad specificitást, ezért a
   * .zs-home .image-grid > * (0,2,0) nem üti a fenti 0,3,0 szabályt.
   */
  .zs-home .image-grid > *:nth-child(2),
  .zs-home .image-grid > *:nth-child(4) {
    transform: none;
  }
  .zs-home .zs-hero .pagination-dots { display: flex; }

  .zs-home .services-layout { grid-template-columns: 1fr; gap: 32px; }

  /*
   * A foglalkozás-kártyák mobilon és tableten CAROUSELBEN állnak, nem
   * egymás alatt: a kártyák hosszúak (leírás + ár + két gomb), egymás alá
   * tornyozva több képernyőnyi görgetés lenne. A 85%-os kártyaszélesség
   * miatt a következő kártya kilátszik a jobb szélen – ez jelzi, hogy
   * van tovább. A lapozópontokat a front-page.php carousel-szkriptje kezeli.
   */
  .zs-home .services-cards {
    display: flex;
    align-items: stretch;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zs-home .services-cards::-webkit-scrollbar { display: none; }
  .zs-home .services-cards > .service-card {
    flex: 0 0 85%;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .zs-home .zs-services .pagination-dots { display: flex; }

  .zs-home .reni-grid { grid-template-columns: 240px 1fr; gap: 32px; }
  .zs-home .reni-photo { width: 240px; height: 240px; }
  .zs-home .reviews-grid { grid-template-columns: 1fr; gap: 32px; }
  .zs-home .zs-quote blockquote { font-size: 26px; }
  .zs-home .forwhom-img { height: 280px; margin-bottom: 36px; }
}

/* ===================== MOBIL ===================== */
@media (max-width: 767px) {
  .zs-home .zs-section { padding: 40px 20px; }
  .zs-home .zs-section[id] { scroll-margin-top: 72px; }
  .zs-home h2 { font-size: 24px; }
  .zs-home .hero-text h1 { font-size: 30px; }
  .zs-home .hero-subtitle { font-size: 16px; }
  .zs-home .zs-lead { font-size: 16px; }

  .zs-home .hero-buttons { flex-direction: column; align-items: stretch; }
  .zs-home .hero-buttons .btn { width: 100%; }

  .zs-home .feature-list,
  .zs-home .forwhom-list,
  .zs-home .faq-grid {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  /*
   * Mobilon a mozaik CAROUSELLÉ alakul: vízszintesen húzható sáv, képenként
   * megálló snap-pontokkal – ugyanaz a minta, mint a hero képeinél és a
   * visszajelzéseknél. Egymás alá tornyozva 6-8 kép több képernyőnyi
   * görgetés lenne, carouselben viszont egyetlen szakasz marad.
   *
   * A display: flex felülírja a grid-et, ezért a mozaik span-jait (grid-row)
   * nem kell külön visszavonni – flex elrendezésben nincs hatásuk.
   * A lapozópontokat a front-page.php közös carousel-szkriptje kezeli.
   */
  .zs-home .gallery-grid {
    display: flex;
    align-items: flex-start;      /* ne nyúljanak közös magasságra */
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .zs-home .gallery-grid::-webkit-scrollbar { display: none; }
  .zs-home .gallery-item {
    flex: 0 0 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .zs-home .zs-gallery .pagination-dots { display: flex; }

  /* A kártyák itt is carouselben állnak (lásd a tablet blokkot); mobilon
     csak a kártya keskenyebb, hogy a következő szélesebben kilátsszon. */
  .zs-home .services-cards > .service-card { flex-basis: 88%; }
  .zs-home .service-buttons .btn { width: 100%; }

  .zs-home .reni-grid { grid-template-columns: 1fr; gap: 24px; justify-items: center; }
  .zs-home .reni-text { text-align: left; }
  .zs-home .reni-photo { width: 100%; max-width: 300px; height: auto; aspect-ratio: 1 / 1; }

  .zs-home .zs-quote blockquote { font-size: 22px; }
  .zs-home .forwhom-img { height: 200px; border-radius: 0 0 10px 10px; margin-bottom: 24px; }
}