/* =========================================================
   Vecsés Dental — általános aloldal-shell (Clean 1.x Final)
   A 25 korábbi legacy HU oldal saját, tiszta megjelenítő rétege.
   Kiegészítés a közös vd-redesign.css fölé. Prefix: pg-
   ========================================================= */

/* ---------------- oldalfej ---------------- */
.pg-hero{
  position:relative;
  padding-block:clamp(28px,3.4vw,50px) clamp(26px,3vw,42px);
  background:radial-gradient(120% 90% at 16% 0%,#eef7fc 0%,#fff 64%);
  overflow:hidden;
}
.pg-hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(closest-side,rgba(26,140,190,.10),transparent) 90% 14%/230px 230px no-repeat,
    radial-gradient(closest-side,rgba(26,140,190,.06),transparent) 98% 68%/160px 160px no-repeat;
}
.pg-hero__grid{
  position:relative;z-index:1;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  gap:clamp(26px,4vw,54px);align-items:center;
}
.pg-hero--noimg .pg-hero__grid{grid-template-columns:1fr;max-width:820px}

.pg-crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.82rem;color:var(--muted);margin-bottom:14px}
.pg-crumbs a{color:var(--brand);font-weight:600}
.pg-crumbs a:hover{text-decoration:underline}
.pg-crumbs span[aria-hidden]{color:#c3d4e0}

.pg-hero h1{font-size:clamp(1.95rem,3.8vw,3rem);font-weight:800;line-height:1.1;margin:10px 0 14px}
.pg-hero__lead{font-size:clamp(.98rem,1.1vw,1.06rem);line-height:1.62;color:var(--body);max-width:52ch}
.pg-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(20px,2.4vw,28px)}

.pg-hero__media{border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-lg);background:var(--tint)}
.pg-hero__media img{display:block;width:100%;height:clamp(240px,28vw,380px);object-fit:cover;object-position:center}

/* ---------------- szekciófej ---------------- */
.pg-head{margin-bottom:clamp(18px,2.2vw,28px);max-width:70ch}
.pg-head h2{
  font-family:var(--f-head);
  font-size:clamp(1.4rem,2.2vw,1.95rem);font-weight:800;color:var(--ink);
  line-height:1.22;margin-top:8px;
}

/* ---------------- szövegtörzs ---------------- */
.pg-sec--prose{padding-block:clamp(28px,3.4vw,50px)}
.pg-prose{max-width:74ch}
.pg-prose > *:first-child{margin-top:0}
.pg-prose p{font-size:1rem;line-height:1.75;color:var(--body);margin:0 0 16px}
.pg-prose h2{
  font-family:var(--f-head);font-size:clamp(1.3rem,2vw,1.7rem);font-weight:800;
  color:var(--ink);line-height:1.25;margin:32px 0 12px;
}
.pg-prose h3{
  font-family:var(--f-head);font-size:clamp(1.1rem,1.6vw,1.32rem);font-weight:700;
  color:var(--ink);line-height:1.3;margin:28px 0 10px;
}
.pg-prose h4{
  font-family:var(--f-head);font-size:1.05rem;font-weight:700;
  color:var(--ink);line-height:1.35;margin:24px 0 10px;
}
.pg-prose ul,.pg-prose ol{margin:0 0 18px;padding-left:22px}
.pg-prose li{font-size:1rem;line-height:1.7;color:var(--body);margin-bottom:8px}
.pg-prose li::marker{color:var(--brand)}
.pg-prose strong{color:var(--ink);font-weight:700}
.pg-prose a{color:var(--brand);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.pg-prose a:hover{color:var(--navy)}
.pg-prose blockquote{
  margin:0 0 18px;padding:16px 20px;
  background:var(--tint);border-left:3px solid var(--brand);border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.98rem;line-height:1.7;color:var(--body);
}
.pg-prose table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:.94rem}
.pg-prose th,.pg-prose td{padding:10px 12px;border-bottom:1px solid var(--line);text-align:left}
.pg-prose th{font-weight:700;color:var(--ink);background:var(--tint)}
.pg-prose__wrap{overflow-x:auto}

/* ---------------- árak ---------------- */
.pg-sec--prices{padding-block:clamp(26px,3vw,44px)}
.pg-prices{max-width:820px}
.pg-price{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:clamp(16px,2.4vw,32px);
  padding:13px 4px;border-bottom:1px solid var(--line);
}
.pg-price:last-child{border-bottom:0}
.pg-price:hover{background:linear-gradient(90deg,var(--tint) 0%,transparent 70%)}
.pg-price__n{font-size:.96rem;font-weight:600;line-height:1.45;color:var(--ink);overflow-wrap:break-word}
.pg-price__v{
  flex:0 0 auto;font-family:var(--f-head);
  font-size:.96rem;font-weight:700;line-height:1.45;color:var(--brand);
  text-align:right;font-variant-numeric:tabular-nums;
}
.pg-price__more{margin-top:18px;display:inline-flex}

/* ---------------- GYIK ---------------- */
.pg-sec--faq{padding-block:clamp(26px,3vw,44px)}
.pg-faq{max-width:860px;display:grid;gap:12px}
.pg-faq details{
  background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;transition:box-shadow .25s var(--ease),border-color .25s var(--ease);
}
.pg-faq details[open]{box-shadow:var(--sh);border-color:#cfe2ee}
.pg-faq summary{
  list-style:none;cursor:pointer;position:relative;
  padding:17px 52px 17px 20px;
  font-size:.98rem;font-weight:600;line-height:1.5;color:var(--ink);
  min-height:44px;display:flex;align-items:center;
}
.pg-faq summary::-webkit-details-marker{display:none}
.pg-faq summary::after{
  content:"";position:absolute;right:22px;top:50%;
  width:9px;height:9px;margin-top:-6px;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);
  transition:transform .25s var(--ease);
}
.pg-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.pg-faq summary:focus-visible{outline:3px solid var(--brand-2);outline-offset:-3px}
.pg-faq__b{padding:0 20px 18px}
.pg-faq__b p{font-size:.93rem;line-height:1.68;color:var(--body);margin:0 0 10px}
.pg-faq__b p:last-child{margin-bottom:0}
.pg-faq__b ul{margin:0 0 10px;padding-left:20px}
.pg-faq__b li{font-size:.93rem;line-height:1.6;color:var(--body);margin-bottom:6px}

/* ---------------- kapcsolódó szolgáltatások ---------------- */
.pg-sec--rel{padding-block:clamp(26px,3vw,44px) clamp(30px,3.6vw,50px)}
.pg-rel{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.5vw,20px)}
.pg-rel__card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;box-shadow:var(--sh-sm);
  transition:transform .28s var(--ease),box-shadow .28s var(--ease),border-color .28s var(--ease);
}
.pg-rel__card:hover{transform:translateY(-3px);border-color:#cfe2ee;box-shadow:var(--sh)}
.pg-rel__media{display:block;aspect-ratio:16/10;background:var(--tint);overflow:hidden}
.pg-rel__media img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.pg-rel__card:hover .pg-rel__media img{transform:scale(1.035)}
.pg-rel__b{display:flex;flex-direction:column;flex:1 1 auto;padding:15px 16px 16px}
.pg-rel__t{font-family:var(--f-head);font-size:.97rem;font-weight:700;line-height:1.3;color:var(--ink);margin-bottom:10px;overflow-wrap:break-word}
.pg-rel__card:hover .pg-rel__t{color:var(--brand)}
.pg-rel__more{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:.85rem;font-weight:600;color:var(--brand)}
.pg-rel__more svg{width:16px;height:16px;transition:transform .28s var(--ease)}
.pg-rel__card:hover .pg-rel__more svg{transform:translateX(4px)}

/* ---------------- linklisták (oldaltérkép, 404) ---------------- */
.pg-sec--links{padding-block:clamp(26px,3vw,44px) clamp(34px,4vw,56px)}
.pg-links{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,2.6vw,34px)}
.pg-links h2{
  font-family:var(--f-head);font-size:1.05rem;font-weight:700;color:var(--ink);
  padding-bottom:10px;margin-bottom:12px;border-bottom:2px solid var(--tint-2);
}
.pg-links ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pg-links li a{
  display:block;padding:9px 4px;min-height:44px;
  display:flex;align-items:center;
  font-size:.93rem;line-height:1.5;color:var(--body);
  border-radius:var(--r-sm);
  transition:color .2s var(--ease),background-color .2s var(--ease);
}
.pg-links li a:hover{color:var(--brand);background:var(--tint)}

/* ---------------- vélemények ---------------- */
.pg-sec--rev{padding-block:clamp(26px,3vw,44px) clamp(34px,4vw,56px)}
.pg-revs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.pg-rev{
  display:flex;flex-direction:column;height:100%;margin:0;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(20px,2vw,26px);box-shadow:var(--sh-sm);
}
.pg-rev__q{flex:1 1 auto;font-size:.93rem;line-height:1.7;color:var(--body);margin:0 0 16px}
.pg-rev__n{font-family:var(--f-head);font-size:.95rem;font-weight:700;color:var(--brand)}

/* ---------------- záró CTA ---------------- */
.pg-sec--cta{padding-block:0 clamp(52px,6vw,84px)}
.pg-cta{
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(20px,3vw,44px);
  padding:clamp(24px,2.6vw,36px) clamp(24px,3vw,44px);
  background:linear-gradient(150deg,var(--tint-2) 0%,#f4fafd 100%);
  border:1px solid #dbeaf4;border-radius:var(--r-xl);box-shadow:var(--sh-sm);
}
.pg-cta__t{min-width:0}
.pg-cta h2{font-family:var(--f-head);font-size:clamp(1.15rem,1.8vw,1.55rem);font-weight:800;color:var(--ink);line-height:1.25;margin-bottom:8px}
.pg-cta p{font-size:.94rem;line-height:1.6;color:var(--body);max-width:62ch;margin:0}
.pg-cta__a{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}

/* ---------------- reszponzív ---------------- */
@media (max-width:1099px){
  .pg-rel{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pg-revs{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-links{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .pg-hero__grid{grid-template-columns:1fr}
  .pg-hero__media{order:-1}
  .pg-hero__media img{height:clamp(200px,38vw,280px)}
  .pg-hero__lead{max-width:none}
}
@media (max-width:760px){
  .pg-rel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pg-revs{grid-template-columns:1fr}
  .pg-cta{flex-direction:column;align-items:flex-start}
  .pg-cta__a{width:100%}
  .pg-cta__a .btn{flex:1 1 auto}
}
@media (max-width:600px){
  .pg-links{grid-template-columns:1fr}
  .pg-hero__cta .btn{width:100%}
  .pg-price{flex-direction:column;align-items:flex-start;gap:5px;padding:14px 4px}
  .pg-price__v{text-align:left;padding:3px 12px;background:var(--tint-2);border-radius:99rem}
}
@media (max-width:520px){
  .pg-rel{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){
  .pg-rel__card,.pg-rel__media img,.pg-rel__more svg,.pg-faq details{transition:none}
  .pg-rel__card:hover{transform:none}
  .pg-rel__card:hover .pg-rel__media img{transform:none}
}

/* GYIK csoportcím (gyakori-kerdesek) */
.pg-faq__g{
  font-family:var(--f-head);
  font-size:clamp(1.05rem,1.5vw,1.22rem);font-weight:700;color:var(--brand);
  margin:clamp(26px,3vw,38px) 0 12px;
}
.pg-faq__g:first-of-type{margin-top:0}
/* kártyaleírás (blog) */
.pg-rel__d{display:block;font-size:.875rem;line-height:1.6;color:var(--body);margin-bottom:12px}
/* galériás aloldal (röntgen) */
.pg-sec--gal{padding-block:clamp(26px,3vw,44px)}

/* ---------------- kapcsolat (EN) ---------------- */
.pg-sec--contact{padding-block:clamp(28px,3.4vw,50px)}
.pg-contact{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,3.4vw,48px);align-items:start}
.pg-cinfo{display:grid;gap:10px}
.pg-cinfo__row{
  display:grid;gap:3px;padding:14px 18px;
  background:var(--tint);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s var(--ease),background-color .2s var(--ease);
}
a.pg-cinfo__row:hover{border-color:#cfe2ee;background:var(--tint-2)}
.pg-cinfo__l{font-size:.74rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--brand)}
.pg-cinfo__v{font-size:.95rem;line-height:1.6;color:var(--ink);font-weight:600}
.pg-people{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:6px}
.pg-person{margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)}
.pg-person img{display:block;width:100%;aspect-ratio:1/1;object-fit:cover}
.pg-person figcaption{display:grid;gap:2px;padding:12px 14px 14px;text-align:center}
.pg-person strong{font-family:var(--f-head);font-size:.92rem;color:var(--ink)}
.pg-person span{font-size:.8rem;color:var(--brand);font-weight:600}
/* Széchenyi 2020 embléma */
.pg-grant{position:fixed;right:0;left:auto;bottom:0;z-index:40;display:block;width:clamp(200px,18vw,290px);line-height:0}
.pg-grant img{display:block;width:100%;height:auto}
@media (max-width:900px){
  .pg-contact{grid-template-columns:1fr}
  .pg-grant{position:static;width:160px;margin:0 auto 20px}
}
.pg-price__note{display:block;font-size:.8rem;font-weight:400;color:var(--muted);margin-top:2px}
/* szöveges (kép nélküli) kártyarács — EN főoldal szolgáltatásai */
.pg-rel--text .pg-rel__card{padding:0}
.pg-rel--text .pg-rel__b{padding:18px 18px 20px}
/* 4 jellemző (EN főoldal) */
.pg-sec--feat{padding-block:clamp(26px,3vw,44px)}
.pg-feat{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,1.8vw,24px)}
.pg-feat__i{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(20px,1.9vw,26px);box-shadow:var(--sh-sm)}
.pg-feat__i h3{font-family:var(--f-head);font-size:1.02rem;font-weight:700;color:var(--ink);margin-bottom:9px;line-height:1.3}
.pg-feat__i p{font-size:.875rem;line-height:1.62;color:var(--body)}
@media (max-width:1099px){.pg-feat{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.pg-feat{grid-template-columns:1fr}}
/* =========================================================
   Vecsés Dental — BELSŐ OLDALAK közös layout-korrekciója (Design 2.0)
   Saját clean réteg a meglévő vd-page.css fölé. Prefix marad: pg-

   MIÉRT: a Clean 1.x-ben a tartalmi blokkok szűk, BALRA ZÁRT sávban ültek
   a középre zárt 1280px-es konténeren belül:
       .pg-prose  max-width:74ch  (~784px)  -> 545px üres jobbra
       .pg-prices max-width:820px           -> 460px üres jobbra
       .pg-faq    max-width:860px           -> 420px üres jobbra
   A régi Vecsés Dental oldalon ezek a blokkok a KÖZÖS központi konténerben
   futottak (.wrapper, max-width:1300px), ezért érződött szélesebbnek és
   kiegyensúlyozottabbnak. Itt ugyanezt az arányt állítjuk vissza — de
   olvasható sorhosszal, nem full widthre nyújtva.

   A régi hero arányai: a szövegoszlop a konténer 50%-a, a kép viszont annak
   80%-a volt (jobbra kifutva) — vagyis a KÉP volt a nagyobb vizuális súly.
   A jelenlegi .92fr ennek a fordítottja, ezért hatott kicsinek és kártyásnak.
   ========================================================= */

:root{
  --pg-measure:1000px;   /* olvasható fő tartalmi szélesség (törzs, árlista, GYIK) */
}

/* ---------- HERO: a kép kapja vissza a vizuális súlyát ---------- */
.pg-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.28fr)}
.pg-hero__lead{max-width:46ch}

/* Nem lebegő kártya: visszafogott radius, nincs floating shadow. */
.pg-hero__media{border-radius:var(--r);box-shadow:none;background:var(--tint)}
.pg-hero__media img{height:clamp(260px,30vw,460px);object-position:center 42%}

/* ---------- TÖRZS / ÁRLISTA / GYIK: szélesebb ÉS középre zárt ---------- */
/* Közös tengely: a szekciófej és a tartalom bal/jobb éle egybeesik. */
.pg-sec--prose .pg-head,
.pg-sec--prices .pg-head,
.pg-sec--faq .pg-head,
.pg-prose,
.pg-prices,
.pg-faq__g,
.pg-faq{max-width:var(--pg-measure);margin-inline:auto}

/* ---------- TABLET ---------- */
@media (max-width:1100px){
  :root{--pg-measure:100%}
  .pg-hero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
}
@media (max-width:860px){
  .pg-hero__grid{grid-template-columns:1fr}
  .pg-hero__media img{height:clamp(240px,44vw,360px)}
}

/* ---------- MOBIL: 1 oszlop, a wrap saját 24px paddingjével ---------- */
@media (max-width:768px){
  :root{--pg-measure:100%}
  .pg-hero__lead{max-width:none}
}