/* =========================================================================================
   QA-javítások (2026.10.04.), QA-JAVITASOK.md.

   Az eszközönkénti átnézés hibái a köztes és a szélső kijelzőméreteken. Minden más
   stíluslap után töltődik (functions.php), szakaszonként a QA-pont számával. A szabályok
   lehetőleg csak a hibás szélességsávra szólnak: a 390 és 1440 px-es kép, amihez a mockup
   mér, nem változik. Új színt, betűt vagy méretet nem vezet be: ami méret itt áll, az a
   DESIGN.md skálájából vagy a meglévő stíluslapokból való.
   ========================================================================================= */


/* ---------- 1.1 A ragadós menü a tartalom fölött -------------------------------------------
   A .zone izolált rétegkontextus, ezért a benne álló menü z-indexe csak a zónán belül
   számított, a későbbi zónák rárajzolódtak. A menüt tartalmazó zóna kerül a többi fölé;
   a hívássáv (40) és a foglaló ablak (felső réteg) továbbra is fölötte van. */
.zone:has(> .nav-pill){z-index:30}

/* Görgetés közben a mobil menü panelje a ragadós menü alatt nyíljon, ne a lap tetején. */
.nav-pill.is-stuck + .drbado-mobil-menu{position:fixed; z-index:31; top:calc(var(--gut) + 76px); left:var(--gut); right:var(--gut);
  margin:0; max-height:calc(100dvh - var(--gut) - 96px); overflow-y:auto}
body.admin-bar .nav-pill.is-stuck + .drbado-mobil-menu{top:calc(var(--gut) + 108px)}

/* A mobil menüben is látszódjon az aktuális oldal (4. pont). */
.drbado-mobil-menu a.on{color:var(--acc); background:rgba(35,115,126,.08)}


/* ---------- 2.2 Főoldali térközök ------------------------------------------------------------
   A főoldal záró szekciója WordPress-csoportblokk (is-layout-flow), aminek a blokkrés-
   szabálya (margin-block-start: 24px) felülírta a fooldal.css térközeit. Itt a fooldal.css
   értékei állnak, erősebb kiválasztóval. */
.drbado-page .zone.is-layout-flow > .b6-loc,
.drbado-page .zone.is-layout-flow > .b6-cta{margin-block-start:clamp(88px,9vw,136px)}
.drbado-page .zone.is-layout-flow > .b6-faq{margin-block-start:clamp(88px,9vw,136px)}
.drbado-page .zone.is-layout-flow > .b6-book,
.drbado-page .zone.is-layout-flow > .b6-foot,
.drbado-page .zone.is-layout-flow > .foglalo-modal{margin-block-start:0}


/* ---------- 2.1 Keskeny telefonok (320–389 px) -----------------------------------------------
   Közös ok: egy nem törő elem (fül, gomb, chip, hosszú szó) szélesebb a helynél, a rács- és
   flex-elemek nem zsugorodnak alá, és a szülő overflow-ja levágja. 390 px-től minden ép,
   ezért a szabályok 389 px-ig szólnak. */
@media (max-width:389px){
  /* Rács- és flexoszlopok zsugorodhatnak a tartalmuk alá. */
  .g2b-ter > *, .g3a-band > *, .g4a-box, .b6-book > *, .nway > div, .a-locs > *{min-width:0}

  /* a) Vizelettartás, konzervatív terápiák: a fülek tördelhetők. */
  .g2b-ter .tabs button{white-space:normal; text-align:left}

  /* b) Chipek: a hosszú címke tördelhető. */
  .chipx{white-space:normal}

  /* c) „Ár és időpont” doboz: a lábléc általános .foot szabálya (nagy belső margó,
     overflow:hidden) ne vágja le a gombot. */
  .pricebox .foot{padding:20px 0 0; border-radius:0; overflow:visible; isolation:auto}
  .pricebox .foot .btn{width:100%}

  /* d) Záró fotósáv: kisebb cím és belső margó, a doboz nem szélesebb a fotónál. */
  .g4a-cta{padding:10px}
  .g4a-box{padding:16px 16px 18px}
  .g4a-box h2{font-size:clamp(20px,6.2vw,24px)}
  .g4a-box .acts .btn{width:100%}

  /* e) A szekciócímek a keskeny képernyőn kisebbek, hogy a leghosszabb szó is kiférjen. */
  .h2x{font-size:clamp(1.75rem,8.6vw,2.2rem)}

  /* f) Főoldal, szolgáltatáskártyák: keskenyebb ikonoszlop. */
  .s2-card{grid-template-columns:64px minmax(0,1fr); gap:12px; padding:16px}
  .s2-card h3{font-size:clamp(17px,5.3vw,19px)}

  /* g) Főoldal, záró doboz. */
  .b6-cta{padding:28px 20px}
  .b6-cta h2{font-size:clamp(20px,6.2vw,26px); max-width:none}

  /* h) Főoldal: hero cím, foglalás gombja és linkje. */
  .display{font-size:clamp(2rem,10.8vw,44px)}
  .nway .acts .btn{width:100%}
  .nway .acts .link{white-space:normal}

  /* Teljes szélességű gombok a szűk kártyákban és fejlécekben. */
  .t3 .i1-cta .btn, .bl-cta .acts .btn{width:100%}
  .bl-cta .acts .btn{padding:0 18px}
  .t3 li{padding:22px}
  .t3 .i1-cta .link{white-space:normal}

  /* Főoldal, rendelési helyek kártyái. */
  .loc{padding:22px}

  /* Kapcsolat: a nagy telefonszám kiférjen. */
  .k-bigtel{font-size:clamp(32px,11.5vw,44px)}

  /* Hívássáv: a két gomb kiférjen. */
  .callbar{gap:8px}
  .callbar .btn{padding:0 10px; gap:8px}
}

/* ---------- 4. A fejléc alcíme 380 px alatt -------------------------------------------------
   Görgetés előtt a „szülész-nőgyógyász szakorvos” levágódott: a Menü gomb és a menüsáv
   margója kisebb, így kifér. */
@media (max-width:379px){
  .nav-pill{padding-left:14px; gap:8px}
  .menu-btn{padding:0 12px; gap:6px}
  .brand small{letter-spacing:0}
}
/* 375 px alatt a név és az alcím csak úgy fér ki, ha a Menü gomb ikonra szűkül. A „Menü”
   szöveg a jelölésben marad (a felolvasó és a gomb neve ebből jön), csak nem látszik. */
@media (max-width:374px){
  .menu-btn{width:44px; padding:0; gap:0; justify-content:center; font-size:0}
  .menu-btn .ico{font-size:15px}
}
/* A főoldalon a menü a hero kártyájában ül: 340 px alatt kisebb kártyamargóval fér ki az alcím. */
@media (max-width:339px){
  .a-hero{padding:12px}
}


/* ---------- 1.2 1341–1439 px: a menü épp csak elfér -----------------------------------------
   A hamburgermenü 1340 px-ig marad (fooldal.css; 2026.10.26-ig 1240 px volt, a Bloggal hét
   menüpont az aloldalak keskenyebb menüsávjában 1340 px alatt nem fér ki). Fölötte, 1440 px-ig
   (2026.10.26-ig 1400) a menüpontok és a gomb közti térköz kisebb, hogy az Időpontfoglalás gomb ne szoruljon. */
@media (min-width:1341px) and (max-width:1439px){
  .links{gap:14px}
  .nav-pill{gap:14px}
  .nav-r .btn{flex:none}
}


/* ---------- 2.3 Záró fotósáv tableten (641–1239 px) -----------------------------------------
   Az üvegdoboz keskenyebb, a fotó témája (arc, alak, csésze, kéz) mellette látszik. */
@media (min-width:641px) and (max-width:1239px){
  .g4a-box{max-width:56%}
  .g4a-box .acts{gap:10px 12px}
}


/* ---------- 2.4 Kapcsolat: helyszínválasztó 901–1279 px között ------------------------------
   A kétoszlopos foglalás-sávban a három hely nem fér el egymás mellett: ebben a sávban a
   telefonos, egymás alatti elrendezés jön (a rendelési idő a sor jobb végén). */
@media (min-width:901px) and (max-width:1279px){
  .k-seg3{grid-template-columns:1fr}
  .k-seg3 button{display:flex; justify-content:space-between; align-items:baseline; padding:10px 14px}
}


/* ---------- 3. Képkivágások a szélső méreteken ----------------------------------------------- */

/* Széles képernyőn a fotósáv magasabb, így a kivágás nem lesz lapos (1440 px-ig változatlan). */
@media (min-width:1441px){
  .b1-band{height:clamp(420px,28vw,560px)}
  .drbado-page .b1-band img[src*="kerekpar-sav"]{object-position:50% 10%}
  .drbado-page img.kep-inko-fejlec{object-position:50% 8%}
}
/* Kismedencei hero 1280–1439 px: a fej ne vágódjon a szemüvegnél. */
@media (min-width:641px) and (max-width:1439px){
  .drbado-page .b1-band img[src*="kerekpar-sav"]{object-position:50% 14%}
}
/* Tableten (641–900 px) a fotók teljes szélességű, lapos sávok: a téma kerüljön a sávba. */
@media (min-width:641px) and (max-width:900px){
  .g2a-ter .photo img{object-position:50% 8%}
  .d3-top .photo img{object-position:50% 32%}
}
/* Kiskunhalas, névtábla: a név és az alcím legyen a csempén (a 1440 px-es kép változatlan). */
@media (min-width:641px) and (max-width:900px){
  .drbado-page img.kep-hal-nevtabla{object-position:50% 34%}
}
@media (min-width:901px) and (max-width:1439px){
  .drbado-page img.kep-hal-nevtabla{object-position:50% 52%}
}
/* 1440 px fölött a galéria magasabb, hogy a névtábla csempéje ne legyen túl lapos. */
@media (min-width:1441px){
  .h3b-gal{height:clamp(600px,36vw,700px)}
  .drbado-page img.kep-hal-nevtabla{object-position:50% 60%}
}


/* ---------- 4. Apróságok ---------------------------------------------------------------------- */

/* Árva szavak: kiegyensúlyozott címek és rövid bekezdések ott, ahol az átnézés árva szót talált
   (keskeny telefon, tablet fekvő, laptop). A 390 és 1440 px-es kép változatlan. */
@media (max-width:389px), (min-width:901px) and (max-width:1439px){
  .h2x, .s2-card h3, .a3-card h3, .g4a-box h2{text-wrap:balance}
  .foot4 p, .foot4 .muted, .foot .fnote, .pricebox .foot p{text-wrap:pretty}
}
/* A főoldali záró cím mindenhol kiegyensúlyozott: a „Szegedre,” ne álljon egyedül. */
.b6-cta h2{text-wrap:balance}

/* Visszahívás: a három időpont egy sorban. */
@media (max-width:389px){
  .rchips{display:grid; grid-template-columns:repeat(3,minmax(0,1fr))}
  .rchips span{display:flex; justify-content:center; padding:9px 8px}
}

/* Kiskunhalas, „Árak Kiskunhalason”: tételenként egy sor, az árak egy vonalban. */
@media (max-width:389px){
  .h3b-pr > span{display:grid; width:100%; gap:6px}
  .h3b-pr i{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
}

/* 404: a gyorslinkek kiférnek egy sorba. */
@media (max-width:389px){
  .bl6b-grid a{grid-template-columns:40px minmax(0,1fr) 20px; gap:12px; padding:14px}
  .bl6b-grid .mini{width:40px; height:40px}
}
@media (min-width:901px) and (max-width:1279px){
  .bl6b{grid-template-columns:minmax(0,1fr)}
}

/* Tablet-elrendezések. */
@media (min-width:641px) and (max-width:900px){
  /* Vizelettartás: a Venn-ábra középen, a terápia-fülek kitöltik a sorokat. */
  .venn{margin-inline:auto}
  .g2b-ter .tabs button{flex:1 1 auto}
  /* Kapcsolat: a helyszínkártyák fekvő elrendezésben, a fotó a kártya bal oldalán. */
  .k2b-c{flex-direction:row}
  .k2b-ph{aspect-ratio:auto; width:38%; flex:none}
}
@media (min-width:901px) and (max-width:1100px){
  /* Méhnyak: a biopszia-folyamat vízszintesen, ahogy asztalon (a függőleges a telefoné). */
  .m3c-flow{grid-template-columns:minmax(0,1fr) auto minmax(0,1.15fr) auto minmax(0,1fr) auto minmax(0,1.2fr); justify-items:normal}
  .m3c-flow .ar{flex-direction:column}
  .m3c-flow .ar .ico{transform:none}
  /* Árak: a Fizetési lehetőségek kártya tartalma középen, nem marad üres alja. */
  .a3c .c-fiz{justify-content:center}
}

/* Főoldal 901–1439 px: a rendelési idő chipjei egy vonalban (az 1440 px-es kép változatlan).
   A szakterület-kártyák igazítása a H pont óta tárgytalan: egymás alatt állnak. */
@media (min-width:901px) and (max-width:1439px){
  .loc .addr{flex:1}
}

/* Főoldal 1281–1439 px: négy hasábban a „Hódmezővásárhely” a kártya széléig ért. */
@media (min-width:1281px) and (max-width:1439px){
  .loc .city{font-size:clamp(28px,2.3vw,34px)}
}

/* Főoldal, térkép-állókép tableten: a kép teteje (a Google levágott címdoboza) kimarad. */
@media (min-width:641px) and (max-width:900px){
  .b6-panel .gmap .gshot{object-position:50% 85%}
}


/* =========================================================================================
   2. kör (QA-JAVITASOK.md, „2. kör”)
   ========================================================================================= */

/* A1. Főoldal: a „Rendeléseim” sáv a hero alatt. A wp-alapertekek.css a .drbado-page
   közvetlen gyerekeinek felső margóját nullázza; az .a-locs saját margója (fooldal.css)
   itt áll vissza. */
.drbado-page > .a-locs{margin-block-start:clamp(40px,5vw,72px)}

/* C. Görgetés közben nyitott mobil menü: tömör háttér, hogy a mögötte lévő szöveg ne üssön át. */
.nav-pill.is-stuck + .drbado-mobil-menu{background:#fff}

/* E. Vizelettartás záró fotósáv széles képernyőn: a telefonáló hölgy feje a sávban. */
@media (min-width:1441px){
  .drbado-page img.kep-inko-zaro{object-position:50% 22%}
}

/* F. Méhnyak, „Miben más, mint a szűrés?”: keskeny telefonon az üvegdoboz a fotón belül,
   alsó margóval; a sáv a dobozhoz igazodik. */
@media (max-width:389px){
  .g2c-band{height:auto; min-height:260px; display:flex; align-items:flex-start}
  .g2c-band .lab{position:relative; inset:auto; margin:12px}
}

/* F. Árlista keskeny telefonon: a tétel neve kapja a teljes sort, az ár alatta áll, a
   pontozott vezetővonal elmarad (enélkül a nevek 4–6 sorba törtek). */
@media (max-width:389px){
  .menu4 li{flex-wrap:wrap; gap:4px 14px}
  .menu4 .nm{flex:1 1 100%}
  .menu4 .ld{display:none}
}

/* G. 1180 px körül: a főoldali záró cím szélesebb, a kapcsolat visszahívás-kártyájának
   tartalma középen. */
@media (min-width:901px) and (max-width:1279px){
  .b6-cta h2{max-width:24ch}
  .k3-cb{display:flex; flex-direction:column; justify-content:center}
}

/* G. A lábléc nem úszik be: a záró sáv és a lábléc között beúszás közben rés nyílt. */
.native-reveal footer.b6-foot[data-reveal]{animation:none}
.io footer.b6-foot[data-reveal]{opacity:1; transform:none; transition:none}


/* ---------- H. Főoldal, „Kiemelt szakterületeim” (QA-JAVITASOK.md, 2. kör, H) ---------------
   A „Jellemző tünetek” cím és bevezető lekerült (Badó, 09.18.); a három szakterület a fotó
   mellett, a cím alatt áll. 900 px-ig egyoszlopos: fotó, cím, alatta a kártyák. */
.d3-szak .a3-cards{margin-top:clamp(24px,2.6vw,36px); gap:16px}
@media (min-width:901px){
  .d3-top.d3-szak{align-items:stretch}
  .d3-szak > .photo{height:auto; min-height:100%; margin:0}
  .d3-szak > .photo img{width:100%; height:100%; object-fit:cover}
  .d3-szak > div{align-self:center}
  .d3-szak .a3-cards{grid-template-columns:minmax(0,1fr)}
  .d3-szak .a3-card{display:grid; grid-template-columns:60px minmax(0,1fr); column-gap:22px; row-gap:8px; padding:clamp(22px,2vw,30px); align-items:start}
  .d3-szak .a3-card .oic{grid-row:1 / span 3}
  .d3-szak .a3-card h3{font-size:clamp(21px,1.75vw,25px)}
  .d3-szak .a3-card p{margin:0}
}


/* ---------- 3. kör, I. Főoldal: Badó bevezetője a szakterületek előtt ------------------------ */
.d3-intro{position:relative; max-width:62ch; margin:0 auto clamp(48px,6vw,88px); text-align:center; display:grid; gap:18px}
.d3-intro .leadx{margin:0; max-width:none}
@media (max-width:640px){ .d3-intro{text-align:left} }


/* ---------- 3. kör, M. Süti-sáv (GDPR) ----------------------------------------------------------
   Első látogatáskor bal alul; 900 px alatt a hívássáv fölött, 640 px alatt teljes szélességben. */
.suti{position:fixed; z-index:60; left:clamp(12px,2vw,24px); bottom:clamp(12px,2vw,24px); width:min(440px, calc(100vw - 24px)); padding:22px 24px; border-radius:22px;
  background:rgba(255,255,255,.96); box-shadow:0 18px 48px -18px rgba(15,35,39,.35), inset 0 0 0 1px var(--line); color:var(--ink); font-size:15px; line-height:1.5; display:grid; gap:10px}
.suti[hidden]{display:none}
.suti-t{margin:0; font-family:var(--display); font-weight:600; font-size:18px}
.suti p{margin:0}
.suti .link{white-space:nowrap}
.suti-g{display:flex; flex-wrap:wrap; gap:10px; margin-top:4px}
@media (max-width:900px){ .suti{bottom:calc(12px + 64px + env(safe-area-inset-bottom, 0px))} }
@media (max-width:640px){ .suti{left:12px; right:12px; width:auto} .suti-g .btn{flex:1 1 auto; justify-content:center} }


/* ---------- Élesítés előtti kör (2026.10.26.), ELESITES-ELOTT.md ------------------------------
   Badó 10.14-i és 10.23-i válaszai. Új szín, betű vagy méret nincs: a térközök a DESIGN.md
   skálájából (8, 16), a betűméretek a meglévő stíluslapokból (15, 13.5 px). */

/* 2.1 Nyilvános e-mail a Kapcsolat oldalon, a telefonszám alatt. */
.k-telnote + .k-telnote{margin-top:8px}
.k-mail{color:var(--acc); text-decoration:none; overflow-wrap:anywhere}
.k-mail:hover{color:var(--acc-h); text-decoration:underline}

/* 2.2 A 404 csempéi a menüből: a Bloggal hét lett, a páratlan utolsó a teljes sort kapja. */
.bl6b-grid a:last-child:nth-child(odd){grid-column:1 / -1}

/* 2.3 Kiskunhalas: „Az árak megegyeznek a szegediekkel.” az árak sávjában, a tételek alatt. */
.h3b-pr .h3b-pr-note{flex:1 1 100%; margin:0; color:var(--mute); font-size:15px}

/* 2.5 Vizelettartás, lézerterápia: a lézercentrum címe a fül szövege alatt. */
.g2b-panel .lezer-link{margin-top:8px}
.g2b-panel .lezer-link a{color:var(--acc); font-weight:600}

/* 2.6 A visszahívás-űrlap alatt: ki hív vissza. */
.cb-note{margin:0; color:var(--mute); font-size:13.5px; line-height:1.45}