/* ===================================================================
   styles-hp-mockup.css — mockup-hű felülírás a régi styles-homepage.css
   ütköző szabályaira. LEGUTOLJÁRA tölt (függőség: uk-homepage), így nyer.
   Forrás: utazaskereso fooldal mockup (styles.css hero/organizer/newsletter).
   =================================================================== */

/* ---------- HERO ---------- */
.hero-content {
  text-align: left; max-width: none; margin: 0;
  padding: 80px 64px 40px; color: #fff;
  display: flex; flex-direction: column; height: 100%; min-height: 620px;
}
/* a styles-homepage `.hero-content h1` magasabb specificitását verjük */
.hero-content h1.hero-title {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(48px, 7vw, 92px); line-height: 0.98; letter-spacing: -0.02em;
  margin: 18px 0 12px; max-width: 14ch; color: #fff;
}
.hero-content h1.hero-title em { font-style: italic; color: #F4D5C4; }
.hero-subtitle { font-size: 18px; max-width: 48ch; color: rgba(255,255,255,0.88); margin-bottom: auto; }
.hero-search {
  max-width: none; margin: 48px 0 0;
  background: #fff; border-radius: var(--r-lg); padding: 12px;
  box-shadow: var(--shadow-lg); display: flex; flex-direction: column; gap: 0; color: var(--ink);
}

/* ---------- SZERVEZŐ (krém + narancs, NEM zöld) ---------- */
.organizer {
  background: var(--bg-soft); color: var(--ink);
  grid-template-columns: 1.2fr 1fr; gap: 64px; padding: 64px;
}
.organizer .eyebrow { color: var(--ink-soft); }
.organizer h2 { color: var(--ink); font-family: var(--font-display); font-size: clamp(36px,4vw,52px); margin: 16px 0; }
.organizer h2 em { color: var(--accent); font-style: italic; }
.organizer p { color: var(--ink-soft); font-size: 17px; max-width: 42ch; margin: 0 0 28px; }
.organizer-stats { grid-template-columns: repeat(3, 1fr); gap: 14px; }
.organizer-stat { background: #fff; border: 1px solid var(--border-soft); border-radius: var(--r-md); padding: 22px; text-align: left; }
.organizer-stat-val { color: var(--primary); font-family: var(--font-display); font-size: 40px; line-height: 1; margin-bottom: 6px; letter-spacing: -0.02em; }
.organizer-stat-label { color: var(--ink-soft); font-size: 13px; }

/* ---------- HÍRLEVÉL (sötét + pill-form) ---------- */
.newsletter { background: var(--ink); color: #fff; grid-template-columns: 1fr 1fr; gap: 48px; padding: 64px; }
.newsletter h2 { color: #fff; font-family: var(--font-display); font-size: clamp(32px,3.6vw,48px); margin: 0 0 12px; }
.newsletter p { color: rgba(255,255,255,0.7); max-width: 38ch; margin: 0; }
.newsletter-form { display: flex; gap: 8px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--r-pill); padding: 6px; }
.newsletter-form input { flex: 1; background: transparent; border: none; outline: none; padding: 14px 20px; color: #fff; font-size: 14px; }
.newsletter-form input::placeholder { color: rgba(255,255,255,0.4); }
.newsletter-note { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 14px; }

/* ---------- prototype.css (priority 9999) !important felülírása ---------- */
/* a stat-kártyák a krém organizeren: tömör fehér + zöld szám (nem áttetsző/fehér) */
.organizer-stat { background: #fff !important; backdrop-filter: none !important; border: 1px solid var(--border-soft) !important; padding: 22px !important; }
.organizer-stat-val { color: var(--primary) !important; font-size: 40px !important; }
.organizer-stat-label { color: var(--ink-soft) !important; }
/* hírlevél „Feliratkozom" gomb: narancs (accent), nem zöld */
.newsletter .btn-accent, .newsletter-form button { background: #E25A3C !important; color: #fff !important; border: 0 !important; }
.newsletter .btn-accent:hover, .newsletter-form button:hover { background: #C9472C !important; }

/* ---------- gombok: PILL-forma a design szerint (.btn = var(--r-pill)) ---------- */
.organizer .btn, .organizer .btn-accent,
.newsletter .btn, .newsletter .btn-accent, .newsletter-form button { border-radius: 999px !important; }
.organizer .btn-lg { padding: 16px 28px !important; font-size: 15px !important; }
.newsletter .btn-accent, .newsletter-form button { padding: 12px 22px !important; font-size: 14px !important; }

/* ---------- teljes szélesség: full-viewport kitörés a boxed konténerből ----------
   CSAK a hero edge-to-edge. A szervező/hírlevél a tartalom-élhez igazodik (lásd lentebb),
   ezért NEM szerepelnek itt — különben full-bleedre ütnének át és kilógnának a többi sorból. */
.elementor-element-o3870q2 .hero {
  width: 100vw !important; max-width: 100vw !important;
  margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important;
}
/* a hero fotó valódi edge-to-edge (gutter nélkül); a kártyák tartják a guttert */
.elementor-element-o3870q2 .hero { padding-top: 0 !important; }
.elementor-element-o3870q2 .hero .container { max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; }

/* ===================================================================
   DESIGN SYSTEM kiegészítés (2026-06-23) — tipográfia + betűszín
   =================================================================== */

/* Footer oszlopfejlécek: Listeo Raleway → design eyebrow (mono, uppercase) */
footer h4, .footer h4, #footer h4, footer .widget-title, #footer .widget-title,
footer .footer-col-title, #footer .footer-col-title {
  font-family: var(--font-mono) !important;
  font-size: 12px; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase;
}

/* Főoldali fejlécek egységes betűszíne = --ink (#1B1814), a Listeo #222 maradványok ellen.
   A sötét hátterű (fehér betűs) szekciókat visszaállítjuk. */
body.home :is(h1,h2,h3,h4,h5,h6) { color: var(--ink); }
body.home .hero-content :is(h1,h2,h3,h4,h5,h6),
body.home .newsletter :is(h1,h2,h3,h4,h5,h6),
/* belépés-modal sötétzöld bal panele: a fejléc fehér marad a főoldalon is
   (különben a fenti body.home szabály --ink-re sötétítette → fekete a zöldön) */
body.home .auth-left-panel :is(h1,h2,h3,h4,h5,h6),
/* kategória-kártyák: a cím a FOTÓ fölött ül (fehér szöveg), a body.home
   szabály sötétre festette → olvashatatlan volt a képen. Vissza fehérre. */
body.home .cat-card :is(h1,h2,h3,h4,h5,h6) { color: #fff; }

/* Kártyacímek: a design szerint a serif display SÚLYA 400 (nem 700-as félkövér) */
.uk-disc-card__title { font-weight: 400 !important; font-size: 17px; line-height: 1.28; letter-spacing: -0.01em; }

/* Kategória-dobozok: design méret (Cat card h3 = 32px, súly 400) */
.cat-card h3 { font-size: 32px !important; font-weight: 400; line-height: 1.06; letter-spacing: -0.01em; }

/* Szervező + hírlevél kártya: a tartalom-sorokhoz (68/1372) PIXELPONTOS igazítás.
   A shortcode .section-tight full-bleed kitörését + a belső .container 92vw-jét kikapcsoljuk,
   így a kártya kitölti a tartalom-konténert (mint a blog/kategória sorok). */
.elementor-element-1z9xkn1 .section-tight,
.elementor-element-0dr4rtq .section-tight {
  width: 100% !important; max-width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
.elementor-element-1z9xkn1 .section-tight .container,
.elementor-element-0dr4rtq .section-tight .container {
  max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important;
  padding-left: 0 !important; padding-right: 0 !important;
}
/* ============================================================
   HERO KERESŐ javítások (2026-06-23)
   1) A HOVÁ <input> a Listeo input-magasságától 51px volt → az egész
      grid-sor megnyúlt (~106px) és a keresés gomb ronda magas blokk lett.
   2) A popover-ek (.ukh-pop) levágódtak, mert a .hero-card overflow:hidden.
   ============================================================ */
/* input ne nyúljon meg → kompakt sor + arányos gomb */
.hero-search-row input.hero-field-value{
  height:auto!important; min-height:0!important; line-height:1.4!important;
  padding:0!important; border:0!important; background:transparent!important; box-shadow:none!important;
}
.hero-search-row .hero-field{ padding:13px 18px!important; }
/* a HOVÁ <label> mező 8px-rel rövidebb volt → alul kilógott a sor krém háttere
   (a grid stretch egy <label>-en nem érvényesült). Megoldás: a sor háttere FEHÉR
   (sehol nincs krém keret), a mezők közti elválasztó vékony hajszálvonal. */
.hero-search-row{ background:#fff!important; gap:0!important; }
.hero-search-row > .hero-field + .hero-field,
.hero-search-row > .hero-field + .hero-search-btn{ box-shadow:inset 1px 0 0 var(--border-soft,#F0EAE0); }

/* popover ne vágódjon le: a kerekítést/levágást a .hero-bg viszi, a kártya látni engedi a lenyílót */
.hero-card{ overflow:visible!important; }
.hero-card .hero-bg{ border-radius:inherit; overflow:hidden; }
/* a hero a későbbi szekciók FÖLÉ kerüljön, hogy a lenyíló ne csússzon a következő sor alá */
.hero{ position:relative; z-index:30; }
.hero-search{ position:relative; z-index:40; }
.ukh-pop{ z-index:1000; }

/* ============================================================
   FŐOLDAL — KÖVETKEZETES FÜGGŐLEGES RITMUS (2026-06-23)
   Eddig vegyes forrásból jött a térköz: discover/listing/magazin az Elementor
   60px-éből, categories +belső .section, toolkit inline 24px, org/hírlevél .section-tight 64px.
   → Egyetlen forrás: minden top-szekció 60/60, a belső szekció-paddingek 0 → minden gap = 120px.
   ============================================================ */
body.home .elementor-top-section,
body.page-id-80 .elementor-top-section{ padding-top:40px!important; padding-bottom:40px!important; }
/* a hero a vezető blokk — felül nincs térköz */
body.home .elementor-top-section:first-child,
body.page-id-80 .elementor-top-section:first-child{ padding-top:0!important; }
/* belső szekció-wrapperek függőleges paddingja 0 (ne adódjon a 40-hez) */
body.home .section, body.home .section-tight,
body.page-id-80 .section, body.page-id-80 .section-tight{ padding-top:0!important; padding-bottom:0!important; }
/* → minden szekció-térköz = 80px (40+40) */

/* ---- HERO kép NE legyen lekerekítve (edge-to-edge, szögletes) ---- */
.hero-card{ border-radius:0!important; }

/* ---- Az egész oldal háttere TISZTA fehér (a meleg-fehér --bg #FAF7F2 helyett) ---- */
body.home, body.page-id-80{ background:#fff!important; }
body.home, body.page-id-80{ --bg:#FFFFFF; }

/* ---- Fejléc háttere FEHÉR (volt: meleg-krém rgba(250,247,242,...)) ---- */
.site-header, header.site-header{ background:rgba(255,255,255,0.92)!important; }

/* ---- NINCS hézag a fejléc és a hero kép között (volt 10px az Elementor oszlop/widget paddingból) ---- */
.elementor-element-o3870q2 > .elementor-container,
.elementor-element-o3870q2 .elementor-column-wrap,
.elementor-element-o3870q2 .elementor-widget-wrap,
.elementor-element-o3870q2 .elementor-widget,
.elementor-element-o3870q2 .elementor-widget-container{ padding-top:0!important; margin-top:0!important; }
.elementor-element-o3870q2 .hero{ margin-top:0!important; padding-top:0!important; }

/* ============================================================
   EGYSÉGES HERO-MAGASSÁG = 450px (= tripaneer), a FŐOLDAL kivételével (2026-06-23)
   Élmények (.uk-archive-hero--video) már 450. Itt a többi szekció-hero.
   ============================================================ */
body:not(.home) .people-hero,
body:not(.home) .sp-hero,
body:not(.home) .fob-hero{
  min-height:450px!important; box-sizing:border-box;
  display:flex!important; flex-direction:column; justify-content:center;
}
body:not(.home) .fob-hero{ height:450px!important; overflow:hidden; }  /* 551 → 450 */

/* ---- Találati kártyák: keskenyebb kép-oszlop + kompaktabb (kis csinos) ---- */
.results-list .result-card{ grid-template-columns:200px 1fr auto !important; gap:18px !important; }
.results-list .result-card-desc{ display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }

/* ---- MOBIL: hírlevél-szekció egy oszlopba (e fájl priority 10000, ezért kell ide a
        media query — különben a 2-oszlopos grid mobilon is megmarad, és az
        email-input ~40px-re szorul össze) ---- */
@media (max-width: 768px) {
  .newsletter { grid-template-columns: 1fr !important; gap: 28px !important; padding: 32px !important; }
  .newsletter-form { flex-wrap: wrap; }
  .newsletter-form input { flex: 1 1 100%; min-width: 0; }
  .newsletter-form .btn-accent, .newsletter-form button { flex: 1 1 100%; justify-content: center; }
}

/* ============================================================
   HERO HÁTTÉR FALLBACK (2026-06-28)
   A hero fehér szövegre van tervezve (fotó fölé). Ha a fotó
   404/hiányzik vagy lassan tölt, eddig a krém oldalháttér
   maradt → fehér+lazac szöveg olvashatatlan (WCAG bukás).
   Megoldás: a .hero (ős!) kap egy sötét márka-zöld gradiens alapot,
   amit a betöltött fotó (.hero-bg img, object-fit:cover) letakar.
   Az ős-elemre tesszük, hogy a kontraszt-ellenőrzők is a zöldet
   lássák a szöveg mögött (a .hero-bg külön réteg, nem ős).
   Sötét, alacsony telítettségű erdőzöld — NEM fekete, és nem a
   világos/cyan árnyalat, ami AI-tell-ként olvasódna. ============= */
.hero-card {
  /* A .hero-card volt eddig krém (--bg-soft) → a fehér hero-szöveg
     közvetlen ős-háttere a krém volt (innen a WCAG-bukás). Sötét
     erdőzöldre váltjuk: a betöltött fotó (.hero-bg img) ezt letakarja,
     hiánykor a zöld marad. A solid background-color-t mérik a
     kontraszt-ellenőrzők (a gradienst önmagában nem tudják színként). */
  background-color: #1B3E31 !important;
  background-image: linear-gradient(158deg,
              #234A3B 0%, #1B3E31 58%, #132B23 100%) !important;
}

/* ============================================================
   HERO TAB-ok — animate (2026-06-28)
   Az aktív-tab váltás eddig `transition: all .15s` (linear ease,
   minden tulajdonság) volt. Animate-fegyelem: CSAK a változó
   tulajdonságok (szín/háttér) + transform, exponenciális ease-out,
   lenyomás-feedback, reduced-motion fallback.
   ============================================================ */
.hero-tab {
  transition: background-color .2s cubic-bezier(.22,1,.36,1),
              color .2s cubic-bezier(.22,1,.36,1),
              transform .15s cubic-bezier(.22,1,.36,1);
}
.hero-tab:active { transform: scale(.96); }           /* tapintható lenyomás */
.hero-tab.active { transform: none; }                  /* aktív állapotban nincs eltolás */
@media (prefers-reduced-motion: reduce){
  .hero-tab { transition: none; }
  .hero-tab:active { transform: none; }
}

/* ============================================================
   HÍRLEVÉL sáv — karcsúbb (2026-06-28)
   Eddig 64px körbe-padding + magas pill → 311px magas volt.
   Full-width marad, de kompaktabb: kevesebb vertikális padding,
   a két oszlop függőlegesen középre, slimmebb pill + cím.
   ============================================================ */
.newsletter {
  padding: 36px 56px !important;
  gap: 44px !important;
  align-items: center !important;
}
.newsletter .eyebrow { margin-bottom: 6px !important; }
.newsletter h2 { font-size: clamp(26px, 2.6vw, 36px) !important; line-height: 1.1 !important; margin: 0 0 8px !important; }
.newsletter p { font-size: 15px !important; line-height: 1.45 !important; }
/* slimmebb pill-form */
.newsletter-form { padding: 5px !important; }
.newsletter-form input { padding: 11px 18px !important; font-size: 14px !important; }
.newsletter-form .btn-accent, .newsletter-form button { padding: 11px 22px !important; }
.newsletter-note { margin-top: 9px !important; font-size: 12px !important; }