/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* KÁRTYA KERET */

.card-wrap {
  position: relative;
  padding: 0;
  align-self: flex-end !important; /* mindig a sor aljára */
}

/* Bal */
.card-wrap.card-left{
  min-height: 560px !important;
}

/* Közép */
.card-wrap.card-center{
  min-height: 480px !important;
}

/* Jobb */
.card-wrap.card-right{
  min-height: 400px !important;
}



/* A három kártyát tartó sor: mindig az aljára igazítja a gyerekeket */
.cards-row{
  display: flex;                 /* Elementor Flexboxnál amúgy is ez lesz, ráerősítünk */
  align-items: flex-end !important;
}

/* Biztos, ami biztos: minden kártya a sor alján üljön */
.cards-row > .card-wrap{
  align-self: flex-end !important;
}

/* TILTS le minden inline min-height-et, ha valahol bennmaradt */
.card-wrap[style*="min-height"],
.card-wrap[style*="height"]{
  min-height: auto !important;   /* nullázzuk az inline-t */
  height: auto !important;
}



/* --- TABLET LANDSCAPE ≤ 1200px --- */
@media (max-width: 1200px){
  .card-wrap{ align-self: flex-end !important; }   /* marad az alulra igazítás */
  .card-wrap.card-left   { min-height: 520px !important; }
  .card-wrap.card-center { min-height: 460px !important; }
  .card-wrap.card-right  { min-height: 380px !important; }

  .card-wrap .card-content{ padding: 24px !important; }
}

/* --- TABLET PORTRAIT ≤ 1024px --- */
@media (max-width: 1024px){
  .card-wrap{ align-self: flex-end !important; }   /* NEM változtatunk oszlopszámot */
  .card-wrap.card-left   { min-height: 460px !important; }
  .card-wrap.card-center { min-height: 420px !important; }
  .card-wrap.card-right  { min-height: 360px !important; }

  .card-wrap .card-content{ padding: 22px !important; }
}

/* --- MOBILE LANDSCAPE ≤ 880px --- */
@media (max-width: 880px){
  .card-wrap{ align-self: flex-end !important; }   /* továbbra is alulra ülnek */
  .card-wrap.card-left   { min-height: 360px !important; }
  .card-wrap.card-center { min-height: 340px !important; }
  .card-wrap.card-right  { min-height: 320px !important; }

  .card-wrap .card-content{ padding: 20px !important; }
}

/* --- MOBILE PORTRAIT ≤ 767px --- */
/* szándékosan üres – ide jön majd a 90°-os tartalom, ha kell */
@media (max-width: 767px){}

/* FONTOS: magát a HTML widgetet is abszolútra tesszük,
   hogy ne tolja le a szöveget */
.card-wrap .elementor-widget-html{
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}


/* maga az SVG (plusz biztonság) */
.card-wrap svg.card-bg{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;   /* ne fogja a klikket */
}

/* TARTALOM A KÁRTYÁN */
.card-wrap .card-content{
  position: relative;
  z-index: 1;             /* az SVG fölött */
  height: 100%;
  display: grid;
  align-items: end;       /* alulra */
  padding: 28px;
}

/* opcionális: a Heading kinézete */
.card-wrap .card-content .elementor-heading-title{
  color: #ff5252;
  font-weight: 600;
  letter-spacing: .06em;
  margin: 0;
}

@font-face {
  font-family: 'Azonix';
  src: url('/wp-content/uploads/fonts/Azonix.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Példa: body-ra beállítva */
body {
  font-family: 'Azonix', 'Poppins', sans-serif;
}


/* ===== Mobil PORTRÉ (≤ 767px) – wrapper NÉLKÜL ===== */
@media (max-width: 767px){

  /* 1) Alap változók + pozicionálás a kártya belsejében */
  .card-wrap .card-content{
    position: relative !important;          /* ehhez képest pozícionálunk mindent */
    --side: 22px;                            /* oldalsó puffer a képhez */
    --baseline: 35px;                        /* a KÉP TETEJÉTŐL mért vonal, ahol a feliratok “alja” ül */
    --gap: 0px;                              /* a piros–fehér közti távolság */
    
    /* A két felirat valós középre hozásához gridet használunk */
    display: grid !important;
    grid-template-columns: auto var(--gap) auto;  /* bal felirat | rés | jobb felirat */
    justify-content: center !important;           /* a 3 oszlop középre igazítva */
  }

  /* 2) Kép az alján fixen */
  .card-wrap .card-content .card-img{
    position: absolute !important;
    left: var(--side); 
    right: var(--side);
    bottom: 20px;                           /* alsó belső margó */
    z-index: 1;                             /* kép a feliratok alatt legyen */
  }
  .card-wrap .card-content .card-img img{
    width: 100% !important;
    height: auto !important;
    display: block !important;              /* torzulás ellen */
  }

  /* 3) Közös tipó és a baseline-ra ültetés */
  .card-wrap .card-content > .vleft,
  .card-wrap .card-content > .vright{
    align-self: end;                        /* közös “alapvonal” (baseline) */
    margin: 0 !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;
    white-space: nowrap !important;         /* ne tördelje a szöveget */
    z-index: 2;                             /* kép fölött */
    
    /* Függőleges írásirány iOS-biztosan */
    writing-mode: vertical-rl !important;
    transform: rotate(180deg) !important;   /* alulról felfelé olvasható, betűk teteje bal felé */
    
    /* Itt történik a tényleges baseline-pozicionálás */
    margin-bottom: calc(20px + var(--baseline)) !important;
    /* 20px = a kép alsó margója; --baseline = a kép tetejétől mért távolság */
  }

  /* 4) Oszlopok (piros balra, fehér jobbra) */
  .card-wrap .card-content > .vleft  { grid-column: 1; }  /* bal */
  .card-wrap .card-content > .vright { grid-column: 3; }  /* jobb */
}




/* 
  A Hello Elementor és annak child témája alapértelmezetten kb. 16px belső térközt (paddinget) ad 
  a <body> és a fő oldalcontainer elemekhez, ami miatt az oldal jobb szélén üres rész maradt.
  Ez a szabály kinullázza ezeket a paddingeket és letiltja a vízszintes görgetést.
  Frissítve: 2025-10-17
*/
body,
.page,
.site,
.elementor-section-wrap {
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin: 0 !important;
  overflow-x: hidden !important;
}