/*
 * Diófa-ház egyedi kinézet
 * A diofahazkozpont.hu (WordPress) oldal design tokenjei átültetve
 * a Layla (j51_layla) Joomla sablonba.
 *
 * Ez a fájl a sablon saját "Custom CSS" override mechanizmusán keresztül
 * töltődik be (Template Manager → Styles → Layla → Custom CSS: On,
 * Custom CSS Source: Template) — a sablon core fájljait nem módosítja,
 * frissítésbiztos.
 */

@font-face {
  font-family: "Biko";
  src: url("../fonts/biko/Biko_Light-Restricted.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biko";
  src: url("../fonts/biko/Biko_Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biko";
  src: url("../fonts/biko/Biko_Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Biko";
  src: url("../fonts/biko/Biko_Black.woff") format("woff");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root,
body {
  --primary: #d79b7d;
  --primary-color: #d79b7d;
  --secondary: #c2876a;
  --secondary-color: #c2876a;
  --button-color: #d79b7d;
  --button-hover-color: #c2876a;
  --content-link-color: #d79b7d;
  --hornav_font_color: #303030;
  --header_bg: #ffffff;
  --text-main: #303030;
  --base-color: #303030;
  --h1-color: #303030;
  --h2-color: #303030;
  --h3-color: #303030;
  --h4-color: #303030;
}

body {
  background-color: #ffffff;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  color: #303030;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
body .logo-text {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 400;
}

/* Top bar (cím, elérhetőség) */
body .header_top {
  background-color: #ffffff;
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #303030;
}

body #container_header {
  background-color: #ffffff;
}

/* Fő navigáció — a sablon saját nexus.css-e alapértelmezetten
   text-transform: uppercase-ot ír a menüpontokra; az eredeti
   diofahazkozpont.hu navigációja viszont normál írásmódú (nem csupa
   nagybetűs), ezt itt, az override rétegben visszaállítjuk. */
body .hornav ul.menu > li > a,
body .hornav ul.menu > li > span {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #303030;
  text-transform: none;
}

body .hornav ul.menu > li.active > a,
body .hornav ul.menu > li > a:hover {
  color: #d79b7d;
}

/* Linkek */
body a {
  color: #d79b7d;
}

body a:hover {
  color: #c2876a;
}

/* Gombok – a .diofa-button a saját Custom HTML moduljaidban használható
   általános gomb-class, ugyanazt a kinézetet kapja, mint a sablon
   beépített gombjai. */
body .btn,
body .btn.btn,
body .button,
body button,
body input[type="submit"],
body .diofa-button {
  display: inline-block;
  background-color: #d79b7d;
  color: #ffffff;
  border-radius: 3px;
  padding: 15px 30px;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 15px;
  text-transform: none;
  text-decoration: none;
  border: none;
}

body .btn:hover,
body .btn.btn:hover,
body .button:hover,
body button:hover,
body input[type="submit"]:hover,
body .diofa-button:hover {
  background-color: #c2876a;
  color: #ffffff;
}

/* Lábléc */
body .container_footer {
  background-color: #ffffff;
  border-top: 1px solid #ececec;
}

body .copyright {
  color: #777777;
}

/* ===== Fejléc ===== */

/* Felső sáv (cím/elérhetőség) – középre igazítva, mint a WP oldalon */
body .header_top .wrapper960 {
  justify-content: center;
}

body .header-1 {
  margin: 0;
  text-align: center;
}

/* Logó – kicsit nagyobb levegő körülötte */
body .logo {
  padding: 28px 20px;
}

/* A sablon nem korlátozza a logókép méretét – a feltöltött fájl natív
   méretben (pl. 1024x1024) jelenne meg logó helyett, ezért itt kapja
   meg a fejlécbe illő magasságot. */
body .logo-image {
  max-height: 64px;
  width: auto;
}

/* Fő navigáció középre igazítva a logó melletti sávban */
body .hornav {
  justify-content: center;
}

body .hornav ul.menu {
  padding-left: 0;
}

/* A két fejléc-sor közti elválasztó elhagyása, hogy egybefüggőnek hasson */
body .header_bottom {
  border-top-color: transparent;
}

/* Logó és főmenü egy sorban – mint az eredeti diofahazkozpont.hu oldalon.
   A sablon saját header_main/header_bottom struktúrája alapértelmezetten
   két, egymás ALATTI sorban jeleníti meg a logót (header_main) és a
   navigációt (header_bottom) – mindkettő saját .wrapper960 konténerrel.
   Ez a blokk, kizárólag CSS-szel, a meglévő DOM-elemeket egy közös sorba
   rendezi, a sablon index.php-ját (vendor fájl) nem módosítva.
   Csak 960px-től aktív, mert a sablon saját logikája is csak onnantól
   mutatja a teljes, vízszintes .hornav menüt (959px alatt a natív
   hamburger-menü fut, azt ez a blokk nem érinti – lásd a
   ".hornav:not(.header-3){display:none}" / ".menu-toggle{display:flex}"
   szabálypárt a sablon saját nexus.css-ében, max-width:959px alatt). */
@media only screen and (min-width: 960px) {
  body #container_header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
  }

  body #header_main.wrapper960,
  body .header_bottom.wrapper960 {
    width: auto;
    max-width: none;
    margin: 0;
  }

  body #header_main.wrapper960 {
    flex: 0 0 auto;
  }

  body .header_bottom.wrapper960 {
    flex: 1 1 auto;
  }
}

/* Közösségimédia-ikonok – tömör, lekerekített négyzet, mint a WP oldalon.
   A fejlécben #socialmedia (id+class), a láblécben (pl. Custom HTML modul a
   "footermenu" pozícióban) csak a .socialmedia class-t kell rátenni a
   ugyanerre a kinézetre, ezért mindkét szelektort felvesszük. */
body #socialmedia ul li a,
body .socialmedia ul li a {
  display: block;
  overflow: hidden;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 18px;
  border-radius: 10%;
  background-color: #d79b7d;
  margin-left: 6px;
  transition: filter 0.2s ease;
}

/* Finomabb hover – korábban túl erős (kontrasztos) színváltás volt */
body #socialmedia ul li a:hover,
body .socialmedia ul li a:hover {
  background-color: #d79b7d;
  filter: brightness(0.93);
}

body #socialmedia ul li a [class^="fa-"]::before,
body #socialmedia ul li a [class*=" fa-"]::before,
body .socialmedia ul li a [class^="fa-"]::before,
body .socialmedia ul li a [class*=" fa-"]::before {
  color: #ffffff;
}

/* ===== Lábléc (Base-2 sor: logó / jogi linkek / email / cím / social) ===== */

/* Világos háttér + felső szegély a WP oldal stílusa szerint.
   A háttérszínt a jarallax szkript futásidőben, inline style-lal írja felül
   sötétre (#1a1a1a), ezért itt kivételesen !important kell, hogy nyerjen. */
body #container_base2_modules {
  background-color: #ffffff !important;
  padding: 30px 0;
}

body #container_base2_modules .base-2 {
  text-align: center;
}

/* Lábléc logó (base-2a) – a sablon itt sem korlátozza a feltöltött kép
   méretét, úgyhogy itt is be kell állítani, mint a fejléc logójánál */
body #container_base2_modules .base-2a img {
  max-height: 64px;
  width: auto;
}

/* Jogi linkek (base-2b) – egymás alatt, félkövér Biko, mint a WP oldalon */
body #container_base2_modules .base-2 ul.menu {
  display: block;
  padding: 0;
}

body #container_base2_modules .base-2 ul.menu li {
  display: block;
  margin: 0 0 6px;
}

body #container_base2_modules .base-2 ul.menu a {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: #303030;
}

/* Email / cím ikonos blokkok (base-2c, base-2d) */
body #container_base2_modules .j51_icon_title {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 14px;
  color: #303030;
}

/* A fejlécben #socialmedia ul a sablon saját (id-hez kötött) szabályától
   kap display:flex-et – a láblécbeli, csak class-os változatnak ugyanezt
   explicit módon meg kell adni, különben a <li>-k egymás alá kerülnek. */
body .socialmedia ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

/* Social ikonok sora (base-2e) középre igazítva, mint a fejlécben */
body #container_base2_modules .socialmedia ul {
  justify-content: center;
}

/* ===== Szekciócímek alatti hullámos elválasztó ("Örömmel jársz...",
   "Téged is vár...", stb.) – a WP oldalon Elementor dekor-vonal volt,
   itt egy saját SVG mintával pótoljuk, külön elem nélkül ===== */
body .diofa-section-title {
  position: relative;
  text-align: center;
  padding-bottom: 26px;
  margin-bottom: 30px;
}

body .diofa-section-title::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10' viewBox='0 0 90 10'%3E%3Cpath d='M0 5 Q 7.5 0 15 5 T 30 5 T 45 5 T 60 5 T 75 5 T 90 5' fill='none' stroke='%23303030' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* ===== "Örömmel jársz majd hozzánk" szekció ===== */
body .diofa-welcome-section {
  padding: 60px 20px;
  text-align: center;
}

body .diofa-welcome-inner {
  max-width: 760px;
  margin: 0 auto;
}

body .diofa-welcome-inner p {
  color: #555555;
  font-size: 16px;
  line-height: 1.75em;
}

/* ===== "Téged is vár a Diófa-ház..." szekció =====
   Az eredeti oldalról mért pontos értékek: háttér #f8f9fb, a fehér kártya
   20px lekerekítéssel és egy szűk, finom árnyékkal (nem nagy/diffúz).
   Az eredetin a kártya ALUL paddingmentes (0px) – a fehér kártya alja
   közvetlenül a szekció aljával ér véget, utána rögtön jön a térkép sáv
   (nálunk a base-1). A felső paddingot megtartjuk a kártya "lebegő" hatása
   miatt (nálunk mind a 4 sarok lekerekített, árnyékos, nem csak a felső
   kettő, mint az eredetin), de az alsót drasztikusan csökkentjük, mert ott
   korábban indokolatlanul sok (60px+50px=110px) üres tér halmozódott fel. */
body .diofa-contact-section {
  background-color: #f8f9fb;
  padding: 60px 20px 20px;
}

/* A sablon natív modul-wrappere (.module_surround) a bottom-3a pozíción
   saját, vendor-alapértelmezett 50px felső paddinget ad, AMI a
   .diofa-contact-section fölött/körül helyezkedik el, nem belül – emiatt
   ott a konténer SAJÁT háttérszíne (#f5f5f5, a Template Style bottom3
   beállításából) látszott ki egy vékony csíkban, a #f8f9fb mellett, két
   egymáshoz közeli, de eltérő szürke sávot adva. Null-ázzuk a wrappert
   erre a pozícióra, hogy a .diofa-contact-section egyedül, hézagmentesen
   töltse ki a konténert, és a konténer saját hátterét is ugyanarra az
   egy színre állítjuk biztonsági hálóként. */
body #container_bottom3_modules {
  background-color: #f8f9fb;
}

body #container_bottom3_modules .module_surround {
  padding-top: 0;
  padding-bottom: 0;
}

body .diofa-contact-inner {
  max-width: 1100px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.07);
  padding: 50px 40px 20px;
  text-align: center;
}

body .diofa-contact-items {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 10px;
}

body .diofa-contact-item {
  flex: 1 1 0;
  min-width: 220px;
  padding: 10px 30px;
  border-left: 1px solid #e5e2dd;
}

body .diofa-contact-item:first-child {
  border-left: none;
}

body .diofa-contact-item::before {
  display: block;
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  font-size: 26px;
  color: #d79b7d;
  margin-bottom: 14px;
}

body .diofa-contact-address::before {
  content: "\f3c5";
}

body .diofa-contact-phone::before {
  content: "\f095";
}

body .diofa-contact-email::before {
  content: "\f0e0";
}

body .diofa-contact-item h3 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #303030;
  margin: 0 0 4px;
}

body .diofa-contact-item p {
  font-size: 14px;
  color: #555555;
  margin: 0 0 4px;
}

body .diofa-contact-item a {
  color: #303030;
}

body .diofa-contact-item a:hover {
  color: #d79b7d;
}

@media only screen and (max-width: 767px) {
  body .diofa-contact-item {
    border-left: none;
    border-top: 1px solid #e5e2dd;
    padding: 24px 10px;
  }
  body .diofa-contact-item:first-child {
    border-top: none;
  }
}

/* ===== Általános "diofa-" szekció-rendszer =====
   Minden új, saját Custom HTML modul, aminek a wrapperje "diofa-"-val
   kezdődő class-t kap, automatikusan megkapja az egységes címsor- és
   szövegstílust – nem kell soronként külön megcsinálni. */

[class*="diofa-"] h2,
[class*="diofa-"] h3 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 400;
  text-align: center;
  color: #303030;
}

/* Minden "diofa-" szekció FŐCÍME (h2) automatikusan megkapja a hullámos
   elválasztót is – nem kell külön .diofa-section-title class vagy
   .diofa-wave-line div hozzá, csak legyen diofa- wrapperben. (h3-ra nem
   tesszük rá, azok a kártyák/alcímek, azoknak nem kell díszítővonal.) */
[class*="diofa-"] h2 {
  position: relative;
  padding-bottom: 26px;
  margin-bottom: 30px;
}

[class*="diofa-"] h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 90px;
  height: 10px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10' viewBox='0 0 90 10'%3E%3Cpath d='M0 5 Q 7.5 0 15 5 T 30 5 T 45 5 T 60 5 T 75 5 T 90 5' fill='none' stroke='%23303030' stroke-width='1.3'/%3E%3C/svg%3E");
}

[class*="diofa-"] > p,
[class*="diofa-"] p.diofa-intro {
  max-width: 760px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  color: #555555;
  font-size: 16px;
  line-height: 1.75em;
}

/* Hullámos elválasztó, ha külön <div class="diofa-wave-line">-ba van téve
   (nem a címsor ::after-jével) – a benne lévő "~~~~~~~" szöveget elrejti,
   és a helyére rajzolja a hullámvonalat. */
.diofa-wave-line {
  position: relative;
  width: 90px;
  height: 10px;
  margin: 0 auto 24px;
  font-size: 0;
  color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='10' viewBox='0 0 90 10'%3E%3Cpath d='M0 5 Q 7.5 0 15 5 T 30 5 T 45 5 T 60 5 T 75 5 T 90 5' fill='none' stroke='%23303030' stroke-width='1.3'/%3E%3C/svg%3E");
}

/* Ha egy diofa- cím UTÁN ott maradt egy kézzel betett .diofa-wave-line
   div is (a régebbi, "kézi" megoldásból), akkor a cím automatikus
   hullámvonalát elrejtjük, hogy ne legyen kettő egymás alatt. A
   .diofa-wave-line divet nyugodtan törölheted a modulból, ha már nem
   kell – mostantól a cím saját maga rajzolja a vonalat. */
[class*="diofa-"] h2:has(+ .diofa-wave-line)::after {
  content: none;
}

/* ===== Térkép (base-1) teljes szélességben =====
   Az iframe alapból inline elem, ami pár px-es rés hagy maga alatt –
   emiatt látszott ki egy vékony csík a base-1a háttérszínéből. Most hogy
   ez a rés megszűnt, a csíkot szándékosan, kontrollált vastagsággal
   visszatesszük a konténer paddingjával (a #container_base1_modules
   háttérszíne #d79b7d, ez abba a résbe fog látszani). */
body .diofa-map,
body .diofa-map iframe {
  display: block;
  width: 100%;
  border: 0;
}

body #container_base1_modules {
  padding-bottom: 6px;
}

/* ===== Base-2 (cookie/adatkezelési linkek sáv) túl nagy térköze =====
   A vendor nexus.css egyik szabálya (.module_surround{padding-top:50px}) a
   base-1/base-2 pozíciók háttérszín-sávjának szánt "levegőt" ad, de ez egy
   puszta egysoros link-sorra (Cookie tájékoztató / Adatkezelési tájékoztató /
   ÁSZF) irreálisan sok – 50px fent + 50px lent. Az eredeti oldalon ez a sáv
   mindössze ~10px felső/alsó paddinggel fut (mért érték). Csak a base-2
   pozícióra szűkítve csökkentjük, a base-1 térkép-sávot nem érinti. Ez a
   pozíció minden oldalon megjelenik (menuid=0), így a hatás sitewide. */
body #container_base2_modules .module_surround {
  padding-top: 15px;
  padding-bottom: 15px;
}

/* ===== Videós hero (főoldal teteje) =====
   .diofa-hero-video > .diofa-hero-video-background (iframe) +
   .diofa-hero-video-overlay > .diofa-hero-content (h1 + p) */
body .diofa-hero-video {
  position: relative;
  overflow: hidden;
  height: 70vh;
  min-height: 600px;
  width: 100%;
}

/* A háttér és az overlay EGYMÁSRA, ugyanarra a dobozra (inset:0) kerül,
   mindkettő a .diofa-hero-video magasságát (600px) örökli – így a kettő
   magassága garantáltan egyezik, nem a videó saját arányától függ. */
body .diofa-hero-video-background,
body .diofa-hero-video-overlay {
  position: absolute;
  inset: 0;
}

body .diofa-hero-video-background {
  overflow: hidden;
  z-index: 0;
}

/* A videó (pl. YouTube-beágyazás) magától megtartja a 16:9 arányát és
   szürke sávokat tesz maga köré, ha egyszerűen 100%-ra nyújtanánk egy
   ettől eltérő arányú (itt: nagyon széles, alacsony) dobozban. Ezért a
   szokásos, bevált "YouTube háttérvideó" CSS-trükköt használjuk: a
   videót felnagyítjuk úgy, hogy MINDIG legalább akkora legyen, mint a
   doboz (szélesség vagy – ha a doboz arányaihoz képest "túl alacsony" –
   magasság alapján túlméretezve), a kilógó részt pedig középről vágva.
   A width/height és a min-width/min-height egy-egy összetartozó,
   16:9-et megtartó párt alkot – emiatt NEM torzul/nem nyit szét a kettő
   vegyítésekor, és ez garantálja, hogy a videó és az overlay magassága
   (ami most már mindkettő a szülő dobozét örökli) ne térjen el. */
body .diofa-hero-video-background iframe,
body .diofa-hero-video-embed {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100vw;
  height: 56.25vw;
  min-height: 100%;
  min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
}

body .diofa-hero-video-overlay {
  z-index: 1;
  background-color: rgba(26, 26, 26, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}

body .diofa-hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 20px;
  max-width: 800px;
}

body .diofa-hero-content h1 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 54px;
  color: #ffffff;
  margin: 0 0 16px;
}

body .diofa-hero-content p {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-size: 20px;
  color: #ffffff;
  margin: 0;
}

/* Hosszabb alcím (pl. "Gyógyító, egészségmegőrző és -fejlesztő
   foglalkozások Veresegyházon.") — az eredetin ez egy külön, kisebb
   betűméretű bekezdés a cím alatt, itt is külön class-szal, hogy a rövid
   tagline ("A feltöltődés otthona") stílusától függetlenül állítható
   legyen. */
body .diofa-hero-content p.diofa-hero-subtitle {
  font-size: 18px;
  margin-top: 10px;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* CTA gomb a hero-ban — az eredeti "Érdekel!" gomb mért stílusa
   (háttérszín, méret, betűtípus) alapján. */
body .diofa-hero-cta {
  display: inline-block;
  margin-top: 28px;
  background-color: #d79b7d;
  color: #ffffff;
  border-radius: 3px;
  padding: 15px 30px;
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.1px;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.2s ease;
}

body .diofa-hero-cta:hover,
body .diofa-hero-cta:focus-visible {
  background-color: #c2876a;
  color: #ffffff;
}

@media only screen and (max-width: 767px) {
  body .diofa-hero-video {
    height: 70vh;
    min-height: 420px;
  }
  body .diofa-hero-content h1 {
    font-size: 36px;
  }
  body .diofa-hero-content p.diofa-hero-subtitle {
    font-size: 16px;
  }
  body .diofa-hero-cta {
    margin-top: 20px;
    padding: 13px 26px;
    font-size: 15px;
  }
}

/* ===== "Segítség egy életen át" – kép + szöveg két oszlopban =====
   (diofa-lifetime-help-content a szöveges/gombos oldal; ha van mellette
   egy kép wrapper is, az flex-be kerül vele) */
body .diofa-lifetime-help-inner {
  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

body .diofa-lifetime-help-content {
  text-align: left;
  flex: 1 1 380px;
}

body .diofa-lifetime-help-image {
  flex: 1 1 380px;
  order: 2;
}

body .diofa-lifetime-help-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

body .diofa-lifetime-help-content h2 {
  text-align: left;
  padding-bottom: 0;
}

/* balra igazított cím alá nem kell a középre pozícionált hullámvonal */
body .diofa-lifetime-help-content h2::after {
  content: none;
}

body .diofa-lifetime-help-content .diofa-button {
  margin-top: 10px;
}

/* A contentbottom-a pozíció (ahol a legtöbb főoldali diofa- szekció van)
   mindig fehér alapot kapjon, hogy az egyes szekciók közötti résekben ne
   üssön át semmilyen véletlen háttérszín. */
body .contentbottom {
  background-color: #ffffff;
}

/* ==========================================================================
   KOLLÉGA PROFILOLDAL (.diofa-colleague / .diofa-services / .diofa-service)
   A sablon meglévő design tokenjeit használja: accent #d79b7d / sötétebb
   #c2876a, szöveg #303030, Biko a címsorokhoz, Roboto a törzsszöveghez.
   Namespace: diofa-colleague-*, diofa-service-*, diofa-contact-card,
   diofa-price-list, diofa-gallery, diofa-tags — sosem önmagában .card/.title.
   ========================================================================== */

/* Közös max-width "konténer" minden fő blokkhoz ezen az oldalon. */
body .diofa-colleague,
body .diofa-colleague-highlight,
body .diofa-colleague-biography,
body .diofa-gallery,
body .diofa-services {
  max-width: 1220px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

body .diofa-colleague {
  padding-top: 60px;
  padding-bottom: 10px;
}

/* ---- Hero: eredeti Diófa elrendezés — szöveg (név/titulus) balra, nagy
   portré jobbra, KÖZEL 50/50 oszloparányban — pontosan ahogy a régi
   diofahazkozpont.hu/terapeutak/hunyady-emese/ oldalon mérve van (két
   elementor-col-50 oszlop, kép 448px, szöveg 540px egy ~1120px konténerben).
   A forrás-DOM-sorrend is ezt követi (kollega.php: .diofa-colleague-main jön
   ELŐBB, a fotó UTÁNA) — a vizuális balra/jobbra elrendezést a sima forrás-
   sorrend adja, NINCS szükség CSS "order"-re sem desktopon, sem mobilon. ---- */
body .diofa-colleague-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 48px;
}

body .diofa-colleague-photo {
  flex: 1 1 400px;
  max-width: 480px;
}

body .diofa-colleague-photo-img {
  display: block;
  width: 100%;
  max-height: 640px;
  object-fit: cover;
  border-radius: 22px;
}

body .diofa-colleague-main {
  flex: 1 1 420px;
  min-width: 0;
}

/* Nincs Intro Image: a .diofa-colleague-photo elem ki sem renderelődik,
   a tartalom egyedüli flex-elemként töltse ki a teljes szélességet. */
body .diofa-colleague-hero:not(.has-photo) .diofa-colleague-main {
  flex-basis: 100%;
  max-width: 100%;
}

/* Név: az eredeti terapeuta-oldalon mért érték (getComputedStyle,
   diofahazkozpont.hu/terapeutak/hunyady-emese/, "Hunyady Emese" cím) —
   32px/Biko/700/fekete, NEM a korábbi becsült 50px/400. Szemantikailag
   marad H1, csak a vizuális stílus követi az eredeti (H2-ként épített)
   címet. Nincs külön mobil felülbírálás, mert az eredetin sincs. */
body .diofa-colleague-name {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1;
  color: #000000;
  margin: 0 0 16px;
}

/* Titulus: eredetin Montserrat (a site saját betűtípusa a Biko mellett;
   itt a Diófa oldal megfelelője, Roboto, ugyanazt a szerepet tölti be),
   16px/400/24px sorköz/#303030 — mért érték. */
body .diofa-colleague-title {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #303030;
  margin: 0 0 20px;
}

body .diofa-colleague-intro {
  max-width: 560px;
  font-size: 16px;
  line-height: 1.5;
  color: #303030;
}

body .diofa-colleague-intro p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #303030;
  font-size: 16px;
  line-height: 1.5;
}

body .diofa-colleague-intro p:last-child {
  margin-bottom: 0;
}

/* ---- Elérhetőségek — kiemelt, látványos doboz (explicit kérésre, felülírva
   a korábbi "nincs háttér/keret, mint a régi oldalon" döntést). Ugyanaz a
   vizuális család, mint a lejjebb lévő "X foglalkozásai" kártyák
   (.diofa-colleague-service-card): meleg #fbf4f1 háttér, 24px radius,
   nagyon finom shadow — így nem egy új, idegen elem a profiloldalon,
   hanem ugyanannak a kártya-nyelvnek a folytatása. ---- */
body .diofa-colleague-contact {
  margin: 70px auto 0;
  max-width: 700px;
  background-color: #fbf4f1;
  border-radius: 24px;
  box-shadow: 0 8px 28px rgba(48, 48, 48, 0.14);
  padding: 36px 40px;
  box-sizing: border-box;
}

/* Eredeti mérés (Elérhetőségek cím, diofahazkozpont.hu): 24px/Biko/700/fekete
   — ez egy tudatosan KISEBB kiemelés, mint a név/szolgáltatáscímek 32px-es
   szintje. */
body .diofa-colleague-contact h2 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 24px;
  text-align: left;
  color: #000000;
  margin: 0 0 20px;
  padding-bottom: 0;
}

body .diofa-colleague-contact h2::after {
  content: none;
}

/* A per-szolgáltatás "Jelentkezés" kártya (lásd .diofa-service alatt) ennek
   marad kártya-szerű, hiszen ott valódi, elkülönített cselekvési pont —
   de visszafogottan, kis radiusszal, árnyék nélkül. */
body .diofa-contact-card {
  background-color: #fbf4f1;
  border-radius: 8px;
  padding: 24px 26px;
  max-width: none;
}

body .diofa-contact-card h2,
body .diofa-contact-card h3 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-align: left;
  color: #303030;
  margin: 0 0 16px;
  padding-bottom: 0;
}

body .diofa-contact-card h2::after,
body .diofa-contact-card h3::after {
  content: none;
}

body .diofa-contactcard-items {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

body .diofa-contactcard-item {
  border-left: none;
  padding: 0;
}

/* Eredeti mérés (telefon/e-mail link, diofahazkozpont.hu): 16px/400/
   line-height 24px/#d79b7d — a betűméret és súly most pontosan ezt követi. */
body .diofa-contact-link {
  font-family: "Roboto", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: #d79b7d;
  text-decoration: none;
}

body a.diofa-contact-link:hover {
  color: #c2876a;
}

body .diofa-contact-note {
  font-size: 14px;
  color: #777777;
  margin-top: 2px;
}

/* "Online időpontfoglalás" típus CTA-ja — a régi oldal "Érdekel" gombjának
   mért értékeivel (bg #d79b7d, fehér szöveg, radius ~4px, nincs shadow). */
body .diofa-contactcard-item--cta .diofa-contact-link {
  display: inline-block;
  background-color: #d79b7d;
  color: #ffffff;
  border-radius: 4px;
  padding: 13px 28px;
  font-size: 17px;
  font-weight: 400;
}

body .diofa-contactcard-item--cta .diofa-contact-link:hover {
  background-color: #c2876a;
  color: #ffffff;
}

body .diofa-contact-login-info {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(215, 155, 125, 0.3);
  font-size: 14px;
  color: #666666;
}

body .diofa-contact-login-info p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #666666;
  font-size: 14px;
  line-height: 1.6;
}

/* ---- Kiemelt blokk (mottó / idézet jelleg) ---- */
body .diofa-colleague-highlight {
  background-color: #fbf4f1;
  border-radius: 8px;
  padding: 40px 50px;
  margin-top: 70px;
  text-align: center;
}

body .diofa-colleague-highlight h2 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 28px;
  color: #303030;
  margin: 0 0 16px;
  padding-bottom: 0;
}

body .diofa-colleague-highlight h2::after {
  content: none;
}

body .diofa-colleague-highlight p {
  font-size: 18px;
  line-height: 1.7;
  color: #4a4a4a;
  max-width: 760px;
  margin: 0 auto;
}

/* ---- Bővebb bemutatkozás (Article Content) — egyszerű, balra igazított
   prose, nincs kártya/panel köré, pontosan mint a régi oldalon. ---- */
body .diofa-colleague-biography {
  margin-top: 70px;
}

/* Eredeti mérés (bio bekezdés, diofahazkozpont.hu): 16px/400/line-height
   24px (1.5)/#303030, bekezdésköz ~14-15px — ez most pontosan ezt követi
   (a 850px max-width marad, mert az eredetin a bio-szélesség egy 50/50
   kétoszlopos elrendezés mellékterméke, nem egy tudatos "prose width"). */
body .diofa-colleague-biography-content {
  max-width: 850px;
  margin: 0;
  text-align: left;
  font-size: 16px;
  line-height: 1.5;
  color: #303030;
}

body .diofa-colleague-biography-content p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #303030;
  font-size: 16px;
  line-height: 1.5;
  margin-bottom: 15px;
}

body .diofa-colleague-biography-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   PROGRESSZÍV FELTÁRÁS ("Rita bővebb bemutatkozása" / "Bővebben a
   foglalkozásról") — diofa-expand.js kapcsolja be. JS nélkül a
   .diofa-expand-content semmilyen collapse-osztályt nem kap, tehát a teljes
   tartalom simán, korlátozás nélkül olvasható (lásd a szkript saját
   megjegyzését). Csak a ".is-collapsed" + mód-osztály együtt korlátozza a
   magasságot — ezeket kizárólag a JS adja hozzá.
   ========================================================================== */
body .diofa-expand-content {
  overflow: hidden;
}

body .diofa-expand-content.is-expanded {
  max-height: none;
}

/* "manual" mód (kolléga hosszú bemutatkozása): összecsukva 0 magasság —
   a rövid intro a hero-ban már adja az "mindig látható" részt. */
body .diofa-expand-content--manual.is-collapsed {
  max-height: 0;
  margin: 0;
}

/* "auto" mód (Foglalkozás hosszabb leírása): összecsukva egy kb. egy
   bekezdésnyi "kukucskáló" marad látható, lágy elhalványulással alul —
   ez a section 19 "max-height / mask / overflow" megoldása. */
body .diofa-expand-content--auto.is-collapsed {
  max-height: var(--diofa-expand-preview-height, 220px);
  position: relative;
  -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 70%, transparent 100%);
}

/* A toggle gomb a régi oldal "▶ Rita bővebb bemutatkozása" mintáját követi:
   visszafogott, accent-színű szöveges gomb kis nyíllal, nem nagy CTA. */
body .diofa-expand-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-size: 16px;
  font-weight: 700;
  color: #d79b7d;
  cursor: pointer;
}

body .diofa-expand-toggle::before {
  content: "\25B6";
  font-size: 10px;
  transition: transform 0.2s ease;
}

body .diofa-expand-toggle[aria-expanded="true"]::before {
  transform: rotate(90deg);
}

body .diofa-expand-toggle:hover,
body .diofa-expand-toggle:focus-visible {
  color: #c2876a;
}

body .diofa-expand-toggle:focus-visible {
  outline: 2px solid #d79b7d;
  outline-offset: 2px;
}

/* ---- Galéria (kolléga és foglalkozás is ugyanezt használja) ---- */
body .diofa-gallery {
  margin-top: 70px;
}

body .diofa-gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

body .diofa-gallery-item {
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
}

body .diofa-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

body .diofa-gallery-item:hover img {
  transform: scale(1.04);
  opacity: 0.92;
}

/* ---- Foglalkozások szekció — tartalmi folytatás, nem widget-lista. ---- */
body .diofa-services {
  margin-top: 90px;
  margin-bottom: 20px;
}

/* Eredeti mérés ("Emese foglalkozásai", diofahazkozpont.hu): 32px/Biko/700/
   fekete — ugyanaz a szint, mint a terapeuta-név és a szolgáltatáscímek. */
body .diofa-services-title {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: left;
  color: #000000;
  margin: 0 0 50px;
  padding-bottom: 0;
}

body .diofa-services-title::after {
  content: none;
}

/* Minden Foglalkozás önálló, jól elkülönülő vizuális KÁRTYA — az eredeti
   oldalon mért szolgáltatás-blokk mintájára (halvány, meleg háttér, lágy
   radius, nagyon finom shadow — nem fehér lap border-rel). A kártyák közti
   tér adja az egységet, nem egy vékony elválasztó vonal. */
body .diofa-colleague-service-card {
  background-color: #fbf4f1;
  border-radius: 24px;
  box-shadow: 0 0 14px rgba(48, 48, 48, 0.06);
  padding: 36px 40px;
  margin-bottom: 48px;
}

body .diofa-colleague-service-card:last-of-type {
  margin-bottom: 0;
}

/* 2/1-ről 4/3-ra váltva: 53 foglalkozás-cikk intro image-ét megnézve a
   leggyakoribb tényleges arány pont 4:3 (21/51 kép szó szerint ez), a 2/1
   pedig ennél jóval szélesebb doboz — ez okozta, hogy a portré- vagy
   négyzetes-arányú fotóknál (pl. "Gyermek- és Ifjúsági szellemi-lelki
   coach és Preventor", 1043×1280) az object-fit:cover minimális
   vízszintes sávra zoomolt be a kép közepéből, óriásira felnagyítva egy
   arcrészletet. A 4/3 a leggyakoribb forrás-arányt torzítás nélkül mutatja,
   és a megmaradt portré-kivételeknél is jóval enyhébb a vágás. Az
   object-position felülre tolva, mert a portré-fotóknál (jellemzően
   arcképek) a lényeg felül van, nem középen. */
body .diofa-colleague-service-card-photo {
  margin: -36px -40px 28px;
  border-radius: 24px 24px 0 0;
  overflow: hidden;
  aspect-ratio: 4 / 3;
}

body .diofa-colleague-service-card-photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

/* Eredeti mérés ("HRG Terápia" cím, diofahazkozpont.hu): 32px/Biko/700/
   fekete. */
body .diofa-service-header h2 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 32px;
  text-align: left;
  color: #000000;
  margin: 0 0 18px;
  padding-bottom: 0;
}

body .diofa-service-header h2::after {
  content: none;
}

body .diofa-highlight-message {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  border-left: 3px solid #d79b7d;
  padding: 2px 0 2px 18px;
  margin-bottom: 22px;
  font-size: 16px;
  line-height: 1.6;
  color: #303030;
}

body .diofa-service-content {
  max-width: 850px;
  font-size: 17px;
  line-height: 1.7;
  color: #303030;
  margin-bottom: 24px;
}

body .diofa-service-content p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #303030;
  font-size: 17px;
  line-height: 1.7;
  margin-bottom: 20px;
}

body .diofa-service-content p:last-child {
  margin-bottom: 0;
}

/* ---- Meta (Létszám / Időtartam / Helyszín ...) — vissza a kártyás érzéshez:
   3 egyszerű Diófa infókártya, az eredeti icon-box cím tipográfiájának
   (22px/Biko/700) megfelelő súllyal az ÉRTÉKEN, ikon hozzáadása nélkül
   (nincs azonosítható, saját Diófa asset-ikon ehhez). ---- */
body .diofa-service-meta-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

body .diofa-service-meta-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 16px 18px;
}

body .diofa-service-meta-card-label {
  font-size: 13px;
  font-weight: 400;
  color: #8a8a8a;
  margin: 0 0 4px;
}

body .diofa-service-meta-card-value {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  color: #000000;
  margin: 0;
}

/* ---- Célcsoport / forma — halvány, másodlagos szövegsor, nem pill-ek ---- */
body p.diofa-tags {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  font-size: 14px;
  letter-spacing: 0.01em;
  color: #a98a79;
  margin-bottom: 24px;
}

/* ---- Fontos tudnivalók ---- */
body .diofa-practical {
  max-width: 850px;
  margin-bottom: 28px;
}

body .diofa-practical h3 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  color: #303030;
  margin: 0 0 10px;
  padding-bottom: 0;
}

body .diofa-practical h3::after {
  content: none;
}

body .diofa-practical p {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
  color: #303030;
  font-size: 16px;
  line-height: 1.6;
}

body .diofa-practical p:last-child {
  margin-bottom: 0;
}

/* ---- Heti órarend ---- */
body .diofa-schedule {
  margin-bottom: 24px;
}

body .diofa-schedule h3,
body .diofa-dates h3,
body .diofa-price-list h3 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 700;
  font-size: 16px;
  text-align: left;
  color: #303030;
  margin: 0 0 12px;
  padding-bottom: 0;
}

body .diofa-schedule h3::after,
body .diofa-dates h3::after,
body .diofa-price-list h3::after {
  content: none;
}

body .diofa-schedule-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid #ececec;
}

body .diofa-schedule-row:last-child {
  border-bottom: none;
}

body .diofa-schedule-day {
  font-weight: 700;
  color: #303030;
  min-width: 100px;
}

body .diofa-schedule-time {
  color: #4a4a4a;
}

body .diofa-schedule-note {
  color: #888888;
  font-size: 14px;
}

/* ---- Konkrét időpontok ---- */
body .diofa-dates-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

body .diofa-dates-item {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px solid #ececec;
}

body .diofa-dates-item:last-child {
  border-bottom: none;
}

body .diofa-dates-date {
  font-weight: 700;
  color: #303030;
}

body .diofa-dates-time {
  color: #4a4a4a;
}

body .diofa-dates-note {
  color: #888888;
  font-size: 14px;
}

/* ---- Árlista — minden ársor külön kis kártya, nem egy hosszú folyó blokk.
   A .diofa-price-list maga már a meleg (#fbf4f1) service-kártyán belül él,
   ezért csak elrendezés — a kontraszthoz az egyes árkártyák fehér hátteret
   kapnak, az eredeti árlista-doboz mintájára. ---- */
body .diofa-price-list {
  margin-bottom: 0;
}

body .diofa-price-list > h3 {
  margin-bottom: 14px;
}

body .diofa-price-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
  margin-bottom: 8px;
}

body .diofa-price-card {
  background-color: #ffffff;
  border-radius: 14px;
  padding: 18px 20px;
}

body .diofa-price-row {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 16px;
  align-items: baseline;
}

/* Eredeti mérés (ár-sorok, diofahazkozpont.hu): a név és az összeg
   AZONOS súlyú/méretű sima szöveg (16px/400/#333) — nincs külön
   kiemelve/felnagyítva az Ft-összeg, ezért itt sem az. */
body .diofa-price-name {
  font-size: 16px;
  font-weight: 400;
  color: #303030;
}

body .diofa-price-value {
  font-size: 16px;
  font-weight: 400;
  color: #303030;
  text-align: right;
  white-space: nowrap;
}

body .diofa-price-note {
  margin-top: 6px;
  font-size: 13px;
  color: #888888;
}

body .diofa-price-overall-note {
  margin-top: 10px;
  font-size: 13px;
  color: #777777;
}

/* A foglalkozás "jelentkezés" kártyája ugyanazt a .diofa-contact-card
   komponenst használja, csak a kártyán belül, nem a hero-ban — kicsit
   szűkebb belső térköz és nincs max-width korlát, hogy a kártya szélességét
   kövesse. */
body .diofa-service .diofa-contact-card {
  max-width: none;
  margin-top: 4px;
  background-color: #ffffff;
}

body .diofa-more-info {
  margin: 20px 0 0;
}

body .diofa-more-info-link {
  display: inline-block;
  font-weight: 600;
  color: #c2876a;
  text-decoration: underline;
}

body .diofa-more-info-link:hover {
  color: #303030;
}

body .diofa-service .diofa-gallery {
  margin-top: 28px;
  padding-left: 0;
  padding-right: 0;
  max-width: none;
}

/* ---- Fókusz-állapot (akadálymentesség) ---- */
body .diofa-colleague a:focus-visible,
body .diofa-services a:focus-visible {
  outline: 2px solid #d79b7d;
  outline-offset: 2px;
}

/* ---- Tablet (kb. 768–1024px) ---- */
@media only screen and (max-width: 1024px) {
  body .diofa-gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ---- Mobil (kb. 767px és alatta) ---- */
@media only screen and (max-width: 767px) {
  body .diofa-colleague,
  body .diofa-colleague-highlight,
  body .diofa-colleague-biography,
  body .diofa-colleague-contact,
  body .diofa-gallery,
  body .diofa-services {
    padding-left: 20px;
    padding-right: 20px;
  }

  body .diofa-colleague {
    padding-top: 36px;
  }

  body .diofa-colleague-hero {
    flex-direction: column;
    gap: 22px;
  }

  /* Nincs külön mobil "order" — a forrás-sorrend (szöveg, majd kép) már
     eleve helyes, ugyanúgy, ahogy az eredeti oldalon sincs mobilra
     felülírt oszlop-sorrend. */

  body .diofa-colleague-photo {
    max-width: 100%;
  }

  body .diofa-colleague-photo-img {
    max-height: 440px;
  }

  body .diofa-colleague-main {
    text-align: left;
  }

  /* Nincs mobil felülbírálás a név/titulus/Elérhetőségek-cím méretére —
     az eredeti oldalon sincs ilyen media query (ellenőrizve
     getComputedStyle + stylesheet-kereséssel), ugyanaz a 32px/24px
     méret érvényes mobilon is. */

  body .diofa-colleague-contact {
    margin-top: 50px;
    padding: 24px 20px;
    border-radius: 18px;
  }

  body .diofa-contact-card {
    padding: 20px;
  }

  body .diofa-colleague-highlight {
    margin-top: 50px;
    padding: 28px 22px;
  }

  body .diofa-colleague-biography {
    margin-top: 50px;
  }

  body .diofa-gallery {
    margin-top: 50px;
  }

  body .diofa-services {
    margin-top: 60px;
  }

  body .diofa-colleague-service-card {
    padding: 24px 20px;
    margin-bottom: 32px;
    border-radius: 18px;
  }

  body .diofa-colleague-service-card-photo {
    margin: -24px -20px 20px;
    border-radius: 18px 18px 0 0;
  }

  body .diofa-service-meta-cards {
    grid-template-columns: 1fr 1fr;
  }

  body .diofa-price-cards {
    grid-template-columns: 1fr;
  }

  body .diofa-price-row {
    grid-template-columns: 1fr;
    row-gap: 4px;
  }

  body .diofa-price-value {
    text-align: left;
  }

  body .diofa-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Közös fotós fejléc: a modulban használt Rólunk-osztályok más oldalon is
   működjenek, a csak /rolunk alatt betöltött rolunk.css nélkül. */
body .diofa-about-intro {
  position: relative;
  max-width: none;
  min-height: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 80px 24px;
  box-sizing: border-box;
  overflow: hidden;
}

body .diofa-about-intro-media {
  position: absolute;
  inset: 0;
  margin: 0;
  z-index: 0;
}

body .diofa-about-intro-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

body .diofa-about-intro::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(48, 48, 48, 0.46);
  z-index: 1;
}

body .diofa-about-intro > h1,
body .diofa-about-intro > p {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  color: #fff;
  text-align: center;
}

body .diofa-about-intro > h1 {
  font-family: "Biko", Arial, Helvetica, sans-serif;
  font-weight: 400;
  font-size: 54px;
  line-height: 1.2;
  margin-top: 0;
  margin-bottom: 18px;
}

body .diofa-about-intro p.diofa-about-intro-lead {
  font-size: 22px;
  line-height: 1.5;
  margin-bottom: 28px;
}

body .diofa-about-intro p.diofa-about-intro-cta {
  margin-bottom: 0;
}

body .diofa-about-intro-cta a {
  display: inline-block;
  background: #d79b7d;
  color: #fff;
  border-radius: 4px;
  padding: 14px 30px;
  font: 400 17px "Roboto", Arial, Helvetica, sans-serif;
  text-decoration: none;
  box-shadow: none;
}

body .diofa-about-intro-cta a:hover {
  background: #c2876a;
}

body .diofa-about-intro-cta a:focus-visible {
  outline: 2px solid #d79b7d;
  outline-offset: 3px;
}

@media only screen and (max-width: 767px) {
  body .diofa-about-intro {
    min-height: 420px;
    padding: 56px 20px;
  }

  body .diofa-about-intro > h1 {
    font-size: 36px;
  }

  body .diofa-about-intro p.diofa-about-intro-lead {
    font-size: 18px;
  }
}

/* Original Montserrat: locally hosted Latin + Hungarian glyphs. */
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/montserrat/montserrat-jtuqjig1_i6t8kchkm459wxrxy7mw9c.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: italic;
  font-weight: 400;
  src: url(../fonts/montserrat/montserrat-jtuqjig1_i6t8kchkm459wxrys7m.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/montserrat/montserrat-jtusjig1_i6t8kchkm459wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 400;
  src: url(../fonts/montserrat/montserrat-jtusjig1_i6t8kchkm459wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/montserrat/montserrat-jtusjig1_i6t8kchkm459wdhyzbi.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Montserrat';
  font-display: swap;
  font-style: normal;
  font-weight: 700;
  src: url(../fonts/montserrat/montserrat-jtusjig1_i6t8kchkm459wlhyw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Rólunk module 141, independent of the article stylesheet load order. */
body.itemid-120 .diofa-about-intro { min-height:0; padding:10% 24px; }
body.itemid-120 .diofa-about-intro::before { background:linear-gradient(50deg,#7a95a6d4 3%,#0000005c 64%); }
body.itemid-120 .diofa-about-intro > h1 { font:400 54px/1.2 "Biko",sans-serif; max-width:1140px; margin:0 0 20px; }
body.itemid-120 .diofa-about-intro p.diofa-about-intro-lead { font:400 22px/1.5 "Montserrat",sans-serif; color:#fff; max-width:1140px; margin:0 auto 20px; text-align:center; }
body.itemid-120 .diofa-about-intro p.diofa-about-intro-cta { margin:0; }
body.itemid-120 .diofa-about-intro-cta a { font:500 17px/1 "Roboto",sans-serif; letter-spacing:.1px; color:#fff; background:#d79b7d; padding:15px 30px; border:0; border-radius:3px; transition:all .3s; }
body.itemid-120 .diofa-about-intro-cta a:hover { background:#d79b7d; color:#fff; }
@media (max-width:767px) {
 body.itemid-120 .diofa-about-intro { padding:56px 20px; }
 body.itemid-120 .diofa-about-intro > h1 { font-size:36px; }
 body.itemid-120 .diofa-about-intro p.diofa-about-intro-lead { font-size:18px; }
}