/*
   Az Elementor illesztése a témához.

   Az Elementor saját tárolószélessége és nulla szekció-térköze nem
   egyezik a téma elrendezésével, ezért itt hangoljuk össze őket:
   a szekciók ugyanolyan szélesek és ugyanúgy levegősek lesznek,
   mint a sablonból épített oldalak .wrap tárolói.
*/

/* ---------- Tároló szélessége ---------- */
.elementor-page-content .elementor-section.elementor-section-boxed > .elementor-container{
  max-width:var(--max);
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* Teljes szélességű szekcióban is legyen oldalt levegő */
.elementor-page-content .elementor-section-full_width > .elementor-container{
  padding-left:var(--gutter);
  padding-right:var(--gutter);
}

/* ---------- Függőleges térközök ---------- */
/*
   Csak alapértelmezés: a :where() nulla fajsúlyú, ezért az Elementorban
   szakaszonként beállított térköz mindig felülírja. Enélkül a témabeli
   érték nyerne, és a designban megadott ritmus elveszne.
*/
.elementor-page-content :where(.elementor-section){
  padding-top:clamp(48px,6vw,88px);
  padding-bottom:clamp(48px,6vw,88px);
}

/* Az első szekció szorosabban követi a morzsamenüt */
.elementor-page-content > .elementor > :where(.elementor-section:first-child){
  padding-top:clamp(32px,4vw,60px);
}

/* Egymás után következő widgetek között is legyen levegő */
.elementor-page-content :where(.elementor-widget:not(:last-child)){
  margin-bottom:clamp(28px,3.5vw,48px);
}

/*
   A nyíl elválasztó saját szekcióban ül, de nem szakasz: a két termékcsoport
   közé húzott vonal. Szekciónyi térköz fölötte-alatta szétesetté tenné.
*/
.elementor-page-content .elementor-section.szakasz-elvalaszto{
  padding-top:0;
  padding-bottom:0;
}

/* A saját widgeteink maguk hozzák a belső ritmusukat, ott nem kell dupla */
.elementor-page-content .elementor-widget-atlanti-quote-cta:not(:last-child),
.elementor-page-content .elementor-widget-atlanti-feature-strip:not(:last-child){
  margin-bottom:0;
}

/* ---------- Sávos blokkok teljes szélességben ---------- */
/*
   A sötét jellemzősáv és az ajánlatkérő blokk háttere fusson ki a
   képernyő széléig, a tartalom viszont maradjon a rácson belül.
*/
.elementor-page-content .atlanti-strip.feature-strip,
.elementor-page-content .atlanti-quote{
  padding:clamp(44px,5.5vw,76px) clamp(24px,4vw,56px);
  border-radius:var(--radius-lg);
}

/* ---------- Szerkesztői nézet ---------- */
.elementor-editor-active .atlanti-empty{display:block}

@media (max-width:768px){
  .elementor-page-content :where(.elementor-section){
    padding-top:clamp(36px,8vw,56px);
    padding-bottom:clamp(36px,8vw,56px);
  }
}

/* ---------- Sávok: a hátteret a szekció adja, nem a widget ---------- */
/*
   Egy szakasz több widgetből áll (szakaszcím, szöveg, kép, lista) — a
   közös hátteret és a felső/alsó vonalat a szekcióra tett osztály hozza.
*/
.elementor-page-content .elementor-section.sav-halvany{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.elementor-page-content .elementor-section.sav-kek{background:var(--blue)}
.elementor-page-content .elementor-section.sav-barna{background:var(--tan-dark)}
.elementor-page-content .elementor-section.sav-sotet{background:var(--cnt)}

.elementor-page-content .elementor-section.sav-kek,
.elementor-page-content .elementor-section.sav-sotet{color:#fff}

/*
   Egy szakasz több szekcióból is állhat (bemutatás, előnyök, jellemzők,
   táblázat, galéria) — ezek együtt egyetlen halvány sávot alkotnak, tehát
   csak a sáv legelejére és legvégére kerüljön vonal. A közéjük eső
   határokat mindkét oldalról el kell tüntetni: a következő szekció felső
   és az előző alsó vonalát is.
*/
.elementor-page-content .elementor-section.sav-halvany + .elementor-section.sav-halvany{border-top:0}
.elementor-page-content .elementor-section.sav-halvany:has(+ .elementor-section.sav-halvany){border-bottom:0}

/* Szűk szakasz: a szöveg ne fusson ki a teljes szélességre */
.elementor-page-content .elementor-section.szakasz-szuk > .elementor-container{max-width:900px}

/* ---------- Kiemelt doboz a szakaszon belül ---------- */
/*
   A kék kézikönyv-csík: a sáv nem fut ki a képernyő széléig, hanem
   lekerekített dobozként ül a tartalmi rácson belül. A hátteret ezért a
   szekció tartalmi kerete kapja, nem maga a szekció.
*/
.elementor-page-content .elementor-section.doboz-kek > .elementor-container{
  background:var(--blue);
  border-radius:var(--radius-lg);
  padding:clamp(26px,3.5vw,42px);
  box-shadow:var(--shadow);
  color:#fff;
}
.elementor-page-content .elementor-section.doboz-kek .a-head .a-title,
.elementor-page-content .elementor-section.doboz-kek .a-head .eyebrow{color:#fff}
.elementor-page-content .elementor-section.doboz-kek .a-head .eyebrow{color:#bcd3ec}
.elementor-page-content .elementor-section.doboz-kek .a-head .eyebrow::before{background:#fff}
.elementor-page-content .elementor-section.doboz-kek .a-head .lead{color:#dbe6f3}

/* Az oszlopok függőlegesen középre, hogy a gomb a szöveg mellé kerüljön */
.elementor-page-content .elementor-section.doboz-kek .elementor-column{align-self:center}

/* Kézikönyv-csík — visszafogott, halvány meleg változat (nem tömör barna sáv). */
.elementor-page-content .elementor-section.doboz-barna > .elementor-container{
  background:#f4efe7;
  border:1px solid #e7dece;
  border-radius:var(--radius-lg);
  padding:clamp(22px,3vw,34px);
  box-shadow:none;
  color:var(--cnt);
}
.elementor-page-content .elementor-section.doboz-barna .a-head .a-title{color:var(--cnt)}
.elementor-page-content .elementor-section.doboz-barna .a-head .eyebrow{color:var(--tan-dark)}
.elementor-page-content .elementor-section.doboz-barna .a-head .eyebrow::before{background:var(--tan-dark)}
.elementor-page-content .elementor-section.doboz-barna .a-head .lead{color:var(--cnt-soft)}
.elementor-page-content .elementor-section.doboz-barna .elementor-column{align-self:center}
/* Az ikondoboz és a gomb világos háttérre hangolva (a sötét változat helyett). */
.elementor-page-content .elementor-section.doboz-barna .a-iconbox.is-ghost{
  background:#fff;border:1px solid #e7dece;color:var(--tan-dark);
}
.elementor-page-content .elementor-section.doboz-barna .btn-ghost{
  color:var(--tan-dark);border-color:var(--tan);
}
.elementor-page-content .elementor-section.doboz-barna .btn-ghost:hover{
  background:var(--tan-dark);color:#fff;border-color:var(--tan-dark);
}

/*
   Fehér, keretes panel a rácson belül — a designok „kártyába foglalt"
   szakaszai (pl. a 3M hordozóanyagok négy panelje: balra a megnevezés és
   a jellemzők, jobbra a hozzá tartozó korongok).
*/
.elementor-page-content .elementor-section.doboz-feher > .elementor-container{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:clamp(20px,2.4vw,28px);
}

/*
   Kék kiemelt kártya egy hasábban — a designok kiemelt technológia- vagy
   termékkártyája. A hátteret a hasáb viseli, a szövegszíneket ez az
   osztály állítja, hogy minden widget egyformán világos maradjon rajta.
*/
.elementor-page-content .elementor-column.kartya-kek{
  background:var(--blue);
  border-radius:var(--radius-lg);
}
.kartya-kek .a-head .a-title,
.kartya-kek .a-head .subtitle{color:#fff}
.kartya-kek .a-head .eyebrow{color:#bcd3ec}
.kartya-kek .a-head .eyebrow::before{background:#fff}
.kartya-kek .a-prose{color:#dbe8f5}
.kartya-kek .a-prose strong{color:#fff}
.kartya-kek .a-checklist li{color:#fff;border-bottom-color:rgba(255,255,255,.18)}
.kartya-kek .a-checklist .icon{color:#fff}

/* Ugyanez sötét alapon — pl. a katalógusokra átvezető doboz. */
.elementor-page-content .elementor-section.doboz-sotet > .elementor-container{
  background:var(--cnt);
  border-radius:var(--radius-lg);
  padding:clamp(28px,3.4vw,44px);
  color:#fff;
}
.elementor-page-content .elementor-section.doboz-sotet .a-head .a-title{color:#fff}
.elementor-page-content .elementor-section.doboz-sotet .a-head .lead,
.elementor-page-content .elementor-section.doboz-sotet .a-prose{color:#dbe3ec}
.elementor-page-content .elementor-section.doboz-sotet .elementor-column{align-self:center}

/* ---------- Fejléc szakasz: fehérből halvány szürkébe ---------- */
.elementor-page-content .elementor-section.sav-fejlec{
  background:linear-gradient(180deg,#fff 0%,var(--bg-soft) 100%);
}

/* Záró halvány sáv — csak fölötte vonal, ez az oldal utolsó szakasza */
.elementor-page-content .elementor-section.sav-zaro{
  background:var(--bg-soft);
  border-top:1px solid var(--line);
}

/* ---------- A fejléc szakasz belső ritmusa ---------- */
/*
   A designban a fejléc szorosabb-lazább lépcsőben halad: felcím 18,
   cím 18, bevezető 26, adatkiemelők 30, gombok 26 — az egyenletes
   térköz helyett. Csak a fejlécre érvényes, a többi szakasz marad.

   Teljes fajsúllyal kell írni: az Elementor saját
   .elementor-widget:not(:last-child){margin-bottom:20px} szabálya
   erősebb a :where()-rel írt témabeli alapértelmezésnél.
*/
.elementor-page-content .sav-fejlec .elementor-widget:not(:last-child){margin-bottom:26px}
.elementor-page-content .sav-fejlec .a-head .eyebrow{margin-bottom:18px}
.elementor-page-content .sav-fejlec .a-head .lead{margin-top:18px}
.elementor-page-content .sav-fejlec .elementor-widget-atlanti-stat-chips:not(:last-child){margin-bottom:30px}

/*
   A kép a mellette álló szövegoszlop teljes magasságáig nyúlik — a
   designban a hasábok nyújtottak (align-items:stretch). Az Elementor
   widget-sora alapból tartalommagasságú, ezért kell a stretch, és a
   widgetnek a képig végig flexnek kell lennie, hogy a keret magassága
   a hasábtól, ne a kép saját arányától függjön. Ld. a `.a-figure`
   flex-szabályait a blocks.css-ben.
*/
.elementor-page-content .elementor-widget-wrap:has(> .elementor-widget-atlanti-figure){
  align-content:stretch;
}
.elementor-page-content .elementor-widget-atlanti-figure{display:flex}
.elementor-page-content .elementor-widget-atlanti-figure > .elementor-widget-container{
  display:flex;width:100%;
}
.elementor-page-content .elementor-widget-atlanti-figure .a-figure{width:100%}


/* ---------- Képes sötét fejléc ---------- */
/*
   A designban a fejléckép fölött háromlépcsős fátyol ül
   (sötét → sötét → kék), hogy a szöveg olvasható maradjon. Az Elementor
   saját rátétje csak egy színt és 50%-os alapopacitást tud, ezért a
   fátylat itt festjük — a szekció csak a háttérképet hozza.
*/
.elementor-page-content .elementor-section.sav-hero-kep{position:relative;isolation:isolate}
/* A háttérvideó (Elementor) a fátyol ALÁ kerüljön; a fátyol a videó fölé,
   a tartalom a fátyol fölé. Képes hero-nál a kép CSS-háttér (leghátul),
   ezért ez a rétegzés ott is helyes marad. */
.elementor-page-content .elementor-section.sav-hero-kep .elementor-background-video-container{z-index:0}
.elementor-page-content .elementor-section.sav-hero-kep::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(100deg,
    rgba(20,26,33,.94) 0%,
    rgba(20,26,33,.78) 46%,
    rgba(0,79,156,.42) 100%);
}
.elementor-page-content .elementor-section.sav-hero-kep > .elementor-container{position:relative;z-index:2}

/* A designban a fejléc tartalma 820 px-es hasábban áll — nem fut ki a
   teljes rácsra, így a cím tördelése és az adatsor szélessége is stimmel. */
.elementor-page-content .elementor-section.sav-hero-kep > .elementor-container > .elementor-column > .elementor-widget-wrap{
  max-width:820px;
}

/* Képes sötét sáv teljes szélességű tartalommal (nem 820px-es hasáb, mint a
   hero). Egy folytonos kép a cím és a kétoszlopos szöveg mögött — a fátyol
   végig elég erős, hogy a világos szöveg mindkét hasábban olvasható legyen,
   de a kép (szikrák) átüssön. Ld. Gyártási problémák szakasz. */
.elementor-page-content .elementor-section.sav-kep-fedes{position:relative;isolation:isolate}
.elementor-page-content .elementor-section.sav-kep-fedes::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(180deg,
    rgba(20,26,33,.90) 0%,
    rgba(20,26,33,.74) 50%,
    rgba(20,26,33,.88) 100%);
}
.elementor-page-content .elementor-section.sav-kep-fedes > .elementor-container{position:relative;z-index:1}

/* ---------- PushCorp kategória-bannerek ---------- */
/* Site-width sötét banner: a fotó a képbe égetve jobbra (a 60%-tól, átmenettel
   összemosva), balra sötét tónus + fehér szöveg (termékkategória cím + leírás).
   A ::before egy bal→jobb színátmenet a szöveg biztos olvashatóságáért. A
   `sav-sotet` adja a fehér betűket; a háttérkép a szekció background-image-e. */
.elementor-page-content .elementor-section.pc-kat-banner{position:relative;isolation:isolate;min-height:300px}
.elementor-page-content .elementor-section.pc-kat-banner::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:linear-gradient(90deg,
    rgba(11,17,25,.92) 0%,
    rgba(11,17,25,.78) 34%,
    rgba(11,17,25,.30) 60%,
    rgba(11,17,25,0) 82%);
}
.elementor-page-content .elementor-section.pc-kat-banner > .elementor-container{position:relative;z-index:1}
@media(max-width:781px){
  .elementor-page-content .elementor-section.pc-kat-banner{min-height:210px}
  .elementor-page-content .elementor-section.pc-kat-banner::before{
    background:linear-gradient(180deg,rgba(11,17,25,.86),rgba(11,17,25,.82));
  }
}

/* ---------- PushCorp Technológia — világos szakasz, jobbra fade-elő fotó ---------- */
/* A megrendelő mintája: világos (bg-soft) szakasz, a jobb oldalon színátmenetesen
   bejön egy fotó (anyagleválasztás). A ::before egy jobbra halványuló világos
   fedés, ami a bal ~60%-ot tisztán világosan tartja (kártyák), a fotó a jobb
   ~30%-on üt át. A háttérkép a szekció background-image-e (jobbra igazítva). */
/* Világos szakasz, a jobb oldalon (~70%-tól) színátmenetesen bejövő fotó.
   A fotó egy jobbra rögzített ::after (magasságra illesztve → ÉLES, nem
   kockás, mert nem nyújtjuk a teljes szélességre), a bal élét CSS-maszk
   olvasztja a világos háttérbe. Így minden viewporton a jobb ~30% a fotó. */
.elementor-page-content .elementor-section.pc-tech-banner{
  position:relative;isolation:isolate;
  background-color:var(--bg-soft);
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
}
.elementor-page-content .elementor-section.pc-tech-banner::after{
  content:"";position:absolute;top:0;bottom:0;right:0;width:40%;z-index:0;pointer-events:none;
  background-image:url(../img/pc-tech.jpg);
  background-size:cover;background-position:center center;background-repeat:no-repeat;
  /* Az átmenet a szekció ~65%-tól ~85%-ig (a kép pozíciója változatlan, csak a
     maszk tolódott +5%-kal jobbra). A kártyák (opak) a fotón ülnek. */
  -webkit-mask-image:linear-gradient(90deg,transparent 12.5%,#000 62.5%);
          mask-image:linear-gradient(90deg,transparent 12.5%,#000 62.5%);
}
.elementor-page-content .elementor-section.pc-tech-banner > .elementor-container{position:relative;z-index:1}
.elementor-page-content .elementor-section.pc-tech-banner .a-iconcard{background:#fff}
@media(max-width:1024px){
  .elementor-page-content .elementor-section.pc-tech-banner::after{width:34%}
}
/* Mobilon a fotó ki, tiszta világos háttér a jó olvashatóságért. */
@media(max-width:767px){
  .elementor-page-content .elementor-section.pc-tech-banner::after{display:none}
}

/* ---------- PushCorp — Kollaboratív robotos csiszolás (alkalmazás-párok) ---------- */
/*
   Minden alkalmazás egy szürke keretes blokk (3 oszlop): balra a cím + a
   megoldás rendere, mellette a két hozzá tartozó termék fehér kártyán.
   A keretet a szekció tartalmi tárolóján (.elementor-container) adjuk, hogy a
   szekció saját függőleges térköze a blokkok KÖZÖTTI levegő maradjon.
*/
.elementor-page-content .elementor-section.pc-kollab-blokk > .elementor-container{
  background:var(--bg-soft);
  border:1px solid var(--line);
  border-radius:16px;
  padding:clamp(20px,2.4vw,34px);
  align-items:center;
  box-shadow:0 10px 30px rgba(20,30,45,.05);
}
/* A megoldás-render (átlátszó PNG) a szürke háttéren áll, keret nélkül. */
.elementor-page-content .pc-kollab-blokk .pc-kollab-megoldas .a-figure{background:none}
/* Vékony szürke elválasztó csík a „Mi történik…" folyamat-sáv fölött. */
.elementor-page-content .elementor-section.pc-elvalaszto{border-top:1px solid var(--line)}

/* ---------- Doboz-hasáb ---------- */
/*
   Halvány, keretes doboz az egyik hasábban (pl. a gyártó termékportfóliója).
   A designban a doboz csak addig tart, ameddig a tartalma — ezért nem
   nyúlhat a másik oszlop aljáig, mint az Elementor alapból tenné.
*/
.elementor-page-content .elementor-column.hasab-doboz{align-self:flex-start}
/*
   A hasáb-doboz a fölötte lévő hero-kép szélességéhez igazítva: 42%-os oszlop,
   és a látható dobozon (.elementor-element-populated) a hero-kép
   oszlop_margo(32,0)-jával egyező bal margó — így a doboz bal éle a kép bal
   éléhez, jobb éle a rács széléhez illeszkedik. (Az Elementor column-margin
   vezérlő programozottan nem érvényesül megbízhatóan, ezért CSS-osztály.)
*/
.elementor-page-content .elementor-column.doboz-hero-szeles > .elementor-element-populated{margin-left:32px}
@media(max-width:1024px){.elementor-page-content .elementor-column.doboz-hero-szeles > .elementor-element-populated{margin-left:16px}}
@media(max-width:767px){.elementor-page-content .elementor-column.doboz-hero-szeles > .elementor-element-populated{margin-left:0}}
.elementor-page-content .elementor-column.hasab-doboz .a-checklist li{
  padding:10px 0;
  border-bottom-color:var(--line);
}
.elementor-page-content .elementor-column.hasab-doboz .elementor-widget:not(:last-child){margin-bottom:18px}

/* ---------- Márkafejléc sáv szakasza ---------- */
/*
   A kék felső vonal és az alsó elválasztó a képernyő széléig fut, a
   tartalom viszont a rácson belül marad — ezért a szekció viseli őket.
*/
.elementor-page-content .elementor-section.sav-markafejlec{
  background:#fff;
  border-bottom:1px solid var(--line);
}
/*
   A felső 4 px-es vonal színe géptípusonként más — ezért nem itt
   rögzítjük, hanem a szekció saját szegélybeállításában, hogy a
   szerkesztőben is látszódjon és állítható legyen.
*/

/*
   A ragadós szakasznavigáció.

   A position:sticky-t a SZEKCIÓRA kell tenni, nem a benne lévő sávra: a
   widget tárolója csak akkora, mint maga a sáv, azon belül nincs hova
   tapadnia, ezért egyszerűen kigördül a képből.
*/
.elementor-page-content .elementor-section.sav-navigacio{
  padding:0;
  position:sticky;
  top:var(--header-height,92px);
  z-index:40;
  /* A háttér a szekcióé, hogy a képernyő széléig fusson és ne lássunk át
     rajta — a widget csak a tartalmi rácson belül tudna festeni. */
  background:#fff;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 2px rgba(20,30,45,.04);
}

/* Szekcióban a sáv maga már nem fest, csak elrendez. */
.elementor-page-content .sav-navigacio .a-secnav{
  background:none;border-bottom:0;box-shadow:none;position:static;
}

/* A leíró jellemzők dobozsora: az oszlopok egymás mellett, azonos térközzel */
.elementor-page-content .elementor-section.dobozsor > .elementor-container{gap:20px}
.elementor-page-content .elementor-section.dobozsor .elementor-column{align-self:stretch}

/* ---------- MEMOLI szériapanelek ---------- */
/*
   Az ETM / ETM-H / ACH géptípusok külön kártyapanelen állnak, hogy ne
   olvadjanak egybe. Hajszálvékony keret, lekerekítés, lágy árnyék és egy
   4 px-es márkakék felső sáv. A kártya a rácson belül (boxed) áll, ezért a
   szekció tartalmi tárolóját (.elementor-container) stílusozzuk — így a
   szekció saját függőleges térköze a panelek KÖZÖTTI levegő marad.
*/
.elementor-page-content .elementor-section.szeria-panel > .elementor-container{
  flex-wrap:wrap;
  align-items:flex-start;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--blue);
  border-radius:14px;
  box-shadow:0 12px 34px rgba(20,30,45,.07);
  padding:clamp(24px,3vw,38px);
}
/* A „Széria 0X ·" felcím kék bélyegként — így a számozás jól elkülönül. */
.elementor-page-content .szeria-panel .a-head .eyebrow{
  background:var(--blue);color:#fff;border-radius:999px;
  padding:6px 14px;letter-spacing:.14em;font-size:11px;
}
.elementor-page-content .szeria-panel .a-head .eyebrow::before{display:none}
/* A részletfotók a fő gépfotó ALATT, egy sorban, kicsiben (kattintásra nagyít). */
.elementor-page-content .szeria-panel .szeria-galeria{margin-top:14px}
.elementor-page-content .elementor-section.dobozsor .elementor-column > .elementor-widget-wrap{height:100%}

/*
   Horgonyugrás: a célszakasz tartson távolságot a ragadós fejléctől és a
   szakasznavigációtól. Az eltolást az app.js számolja a tényleges
   magasságokból (--horgony-eltolas); JS nélkül a designbeli 170 px lép be.
*/
.elementor-page-content .elementor-section[id]{
  scroll-margin-top:var(--horgony-eltolas,170px);
}