/* ═══════════════════════════════════════════════════════
   Studio TM – main.css
   Bootstrap 5.3 felülírások + alap stílusok
   ═══════════════════════════════════════════════════════ */

/* ── CSS VÁLTOZÓK ────────────────────────────────────── */
:root {
  --stm-gold:       #FFFF00;
  --stm-gold-l:     #FFFF66;
  --stm-dark:       #000000;
  --stm-dark-2:     #0A0A0A;
  --stm-dark-3:     #111111;
  --stm-gradient-accent: radial-gradient(circle at 50% 100%, rgba(255,255,0,0.23) 0%, rgba(255,255,0,0) 70%), #0a0a0a;
  --stm-text:       #f0ece4;   /* 17.8:1 – főszöveg          ✅ AAA */
  --stm-text-muted: #b5afa4;   /*  9.5:1 – másodlagos szöveg ✅ AAA (volt: #9a948a = 7.0:1) */
  --stm-text-dim:   #9a948a;   /*  7.0:1 – LEGHALVÁNYABB szöveg ✅ AA (placeholder, dekoratív, másodlagos linkek) */
  --stm-border:     rgba(255,255,255,0.05);

  /* Szemantikus jelző-színek – hiba/siker. Korábban 4 különböző
     piros és 2 különböző zöld árnyalat volt szétszórva (form-mező
     hiba, toast, hírlevél-visszajelzés stb.) – most egy-egy közös,
     a legjobb kontrasztú változat mindenhol. */
  --stm-error:      #f87171;   /* 6.8–7.6:1 mindhárom sötét háttéren (dark/dark-2/dark-3) ✅ AA/AAA – Tailwind red-400 */
  --stm-error-rgb:  248, 113, 113; /* ugyanaz mint --stm-error, RGB-hármasként az átlátszó háttér-színezéshez */
  --stm-success:    #22c55e;   /* 8.3–9.2:1 mindhárom sötét háttéren (dark/dark-2/dark-3) ✅ AAA (volt: #4ade80 – mentásabb) */
  --stm-success-rgb: 34, 197, 94; /* ugyanaz mint --stm-success, RGB-hármasként az átlátszó háttér-színezéshez */

  /* Márka-szín – a WhatsApp hivatalos zöldje. Ez SZÁNDÉKOSAN nem
     illeszkedik a saját színrendszerünkhöz (nem szabad módosítani,
     ha a téma változna), de változóba tettük, hogy egy helyen
     látszódjon és könnyen megtalálható legyen. */
  --stm-whatsapp:   #25D366;
  --stm-font-title: 'Bebas Neue', sans-serif;
  --stm-font-body:  'DM Sans', sans-serif;
  --stm-radius:     2px;
}

/* ── ALAP ────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  background: var(--stm-dark);
  color: var(--stm-text);
  font-family: var(--stm-font-body);
  font-size: 1rem;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* biztonsági háló – semmilyen elem ne okozhasson vízszintes görgetést */
}

h1, h2, h3, h4, h5, h6,
.stm-hero-h1 {
  font-family: var(--stm-font-title);
  letter-spacing: 0.04em;
}

img { max-width: 100%; height: auto; }
a { text-decoration: none; }

/* ── NAVBAR ──────────────────────────────────────────── */
.stm-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030;
  background: rgba(0,0,0,0.93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,0,0.1);
  padding: 0;
  min-height: 64px;
  transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease;
}

/* Lap tetején: magasabb navbar */
.stm-nav--top {
  min-height: 90px;
}

.stm-nav .container-xl {
  min-height: 64px;
  display: flex;
  align-items: center;
  transition: min-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.stm-nav--top .container-xl {
  min-height: 90px;
}

.stm-logo {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  line-height: 1;
}

/* SVG/PNG logó kép – CSS transition az animációhoz */
.stm-logo-img {
  display: block;
  height: 40px;        /* görgetés utáni (kis) méret */
  width: auto;
  object-fit: contain;
  transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Lap tetején: nagy logó – JS adja hozzá/veszi el a .stm-nav--top class-t */
.stm-nav--top .stm-logo-img {
  height: 72px;
}

/* Footer logó – nagyobb, nincs animáció */
.stm-logo-img--footer {
  height: 72px;
  transition: none;
}

.stm-nav .nav-link {
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--stm-text-muted) !important;   /* nav linkek – lásd --stm-text-muted a :root-ban */
  transition: color 0.2s;
  padding: 0.4rem 0.6rem;
}
.stm-nav .nav-link:hover,
.stm-nav .nav-link.active {
  color: var(--stm-gold) !important;
}

/* Lang gombok */
.stm-lang-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 5px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  background: none;
  transition: border-color 0.2s;
  line-height: 1;
}
.stm-lang-btn:hover { border-color: rgba(255,255,0,0.4); }
.stm-lang-btn.active {
  border-color: var(--stm-gold);
  background: rgba(255,255,0,0.07);
}
.stm-lang-text {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--stm-text-muted);
}
.stm-lang-btn.active .stm-lang-text { color: var(--stm-gold); }

/* ── GOMBOK ──────────────────────────────────────────── */
.stm-btn-primary {
  background: var(--stm-gold);
  color: var(--stm-dark);
  font-family: var(--stm-font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--stm-radius);
  border: none;
  padding: 0.75rem 1.75rem;
  transition: background 0.2s;
}
.stm-btn-primary:hover, .stm-btn-primary:focus {
  background: var(--stm-gold-l);
  color: var(--stm-dark);
}

.stm-btn-outline {
  background: transparent;
  color: var(--stm-gold);
  font-family: var(--stm-font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid rgba(255,255,0,0.4);
  border-radius: var(--stm-radius);
  padding: 0.75rem 1.75rem;
  transition: all 0.2s;
}
.stm-btn-outline:hover, .stm-btn-outline:focus {
  background: rgba(255,255,0,0.06);
  border-color: var(--stm-gold);
  color: var(--stm-gold);
}

/* ── SZEKCIÓ KÖZÖS ───────────────────────────────────── */
.stm-section {
  padding: 5rem 0;
  /* Horgony-ugráskor (menüpont, hero gomb) a böngésző natívan a
     szekció TETEJÉHEZ ugrik, amit a fix fejléc (64px) eltakarna.
     A scroll-margin-top ugyanazt a natív horgony-mechanizmust
     használja (a scroll-behavior:smooth-t is figyelembe veszi),
     nincs szükség JS-re.
     Pontosan a fejléc magassága (64px) – a levegőt a szekció SAJÁT
     felső belső margója adja (desktopon 80px, mobilon 40–56px). A
     korábbi +20px ezt duplán számolta, ezért volt túl nagy a hézag. */
  scroll-margin-top: 64px;
}

.stm-section-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--stm-gold);
  margin-bottom: 0.65rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.stm-section-label::after {
  content: '';
  flex: 1;
  max-width: 36px;
  height: 1px;
  background: var(--stm-gold);
  opacity: 0.6;
}

.stm-section-title {
  font-family: var(--stm-font-body);
  font-weight: 300;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  line-height: 1.3;
  letter-spacing: 0.04em;
  color: var(--stm-text);
  /* Kicsivel több hely a cím ALATT (volt: 0.9rem) – a szekció fejléce
     így jobban elválik a tartalomtól. */
  margin-bottom: 1.5rem;
}

.stm-section-sub {
  font-size: 0.95rem;
  color: var(--stm-text-dim);
  /* Teljes szélesség (volt: max-width 54ch) – a rövid, kétsoros
     bevezetőnél a keskeny oszlop furcsán üresen hagyta a jobb oldalt. */
  line-height: 1.7;
  /* Az alcím alatt ugyanannyi hely mint alcím nélkül a cím alatt */
  margin-bottom: 1.5rem;
}
/* Ha a címet alcím követi, a KETTŐ közti hely maradjon a régi, szoros
   0.9rem – összetartoznak. A nagyobb hely csak a fejléc-blokk ALÁ kerül. */
.stm-section-title + .stm-section-sub {
  margin-top: -0.6rem;
}

/* ── HERO ────────────────────────────────────────────── */
.stm-hero {
  min-height: 100svh;
  padding-top: 64px;
  position: relative;
  overflow: hidden;
}
/* Ha nincs slider (üres heroImages), kisebb magasság */
.stm-hero--no-slider {
  min-height: auto;
  padding-bottom: 3rem;
}

.stm-hero-bg {
  position: absolute;
  inset: 0;
  background: var(--stm-gradient-accent);
}

.stm-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,0,0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,0,0.04) 1px, transparent 1px);
  background-size: 60px 60px;
}

.stm-hero-accent {
  position: absolute;
  right: -10%;
  top: 10%;
  width: 55%;
  height: 80%;
  background: linear-gradient(135deg, rgba(255,255,0,0.05) 0%, transparent 60%);
  border-left: 1px solid rgba(255,255,0,0.1);
  transform: skewX(-8deg);
}

.stm-hero-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--stm-gold);
  margin-bottom: 1.25rem;
}
.stm-hero-tag::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--stm-gold);
}

.stm-hero-h1 {
  font-size: clamp(3rem, 7vw, 5.5rem);
  line-height: 0.95;
  color: var(--stm-text);
  margin-bottom: 1.25rem;
}
.stm-hero-h1 em {
  color: var(--stm-gold);
  font-style: normal;
}

.stm-hero-desc {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--stm-text-muted);
  max-width: 40ch;
  margin-bottom: 2rem;
}

.stm-hero-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,0.06);
}

/* A statisztika-blokkok egymás után TŰNNEK FEL (nem látszik mind a
   három "0+" már az elejétől). A rejtett állapotot (--prep) a JS adja
   hozzá, NEM alapértelmezés – így ha a JS bármiért nem fut le, a
   blokkok egyszerűen statikusan látszanak, nem ragadnak láthatatlanul. */
.stm-stat.stm-stat--prep {
  opacity: 0;
  transform: translateY(12px);
}
.stm-stat {
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.stm-stat.stm-stat--in {
  opacity: 1;
  transform: translateY(0);
}

.stm-stat-num {
  font-family: var(--stm-font-title);
  font-size: 2.6rem;
  color: var(--stm-gold);
  line-height: 1;
}
.stm-stat-label {
  font-size: 0.95rem;
  color: var(--stm-text-dim);
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
}

/* Hero visual */
.stm-hero-visual { position: relative; padding-bottom: 1.5rem; padding-left: 1.5rem; }

.stm-photo-frame {
  aspect-ratio: 3/4;
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,0,0.15);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.stm-photo-frame::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.9) 100%);
  z-index: 1;
}
.stm-photo-badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: var(--stm-gold);
  color: var(--stm-dark);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.35rem 0.7rem;
  border-radius: 1px;
  z-index: 2;
}
.stm-photo-label {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
  z-index: 2;
}
.stm-photo-cat {
  font-size: 0.72rem;
  color: var(--stm-text-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 0.2rem;
}
.stm-photo-title {
  font-size: 1.2rem;
  color: var(--stm-text);
  margin: 0;
}
.stm-photo-mini {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40%;
  aspect-ratio: 1;
  background: var(--stm-dark-3);
  border: 1px solid rgba(255,255,0,0.2);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── FOOTER ──────────────────────────────────────────── */
.stm-footer {
  background: var(--stm-dark);
  border-top: 1px solid rgba(255,255,255,0.04);
}

.stm-footer-copy {
  font-size: 0.78rem;
  color: var(--stm-text-dim);
  margin-top: 0.25rem;
}
.stm-footer-copyright-note {
  font-size: 0.825rem;
  color: var(--stm-text-dim);
  opacity: 0.9;
  line-height: 1.6;
  max-width: 32ch;
}

/* ── WHATSAPP GOMB + VÁLASZTÓ KÁRTYA ─────────────────── */
/* ── BUBORÉK ÜZENET (TOAST) ──────────────────────────── */
.stm-toast {
  position: fixed;
  /* A fejléc alatt, néhány pixellel (nem ráragadva) – így a
     látogató korábban észreveszi, mint a lap alján, ahol könnyen
     lemarad róla ha épp feljebb néz. */
  top: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(-12px);
  /* Halvány zöld színezés a sima sötét háttér helyett – a
     linear-gradient réteg garantálja hogy MINDIG tömör legyen a
     háttér (nem "átlátszik" a mögötte lévő tartalom), csak a színe
     kap egy árnyalatnyi zöldet. A szöveg és a keret változatlanul
     teljesen élénk marad (lásd lejjebb, color/border). */
  background: linear-gradient(rgba(var(--stm-success-rgb), 0.16), rgba(var(--stm-success-rgb), 0.16)), var(--stm-dark-2);
  color: var(--stm-success);
  border: 2px solid var(--stm-success);
  /* Nagyobb belső margó és betű (volt: 0.75rem 1.4rem / 0.85rem) –
     egysoros üzenetnél túl kicsi volt a buborék, könnyen elsiklott
     felette a szem, főleg nagyobb képernyőn. */
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.5;
  padding: 1.1rem 2rem;
  text-align: center;
  max-width: calc(100vw - 2rem);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  opacity: 0;
  z-index: 1050;
  pointer-events: none;
  transition: opacity 0.3s, transform 0.3s;
}

/* Hiba-változat – ugyanaz a felépítés, csak piros színnel.
   Használat: window.STM_showToast(üzenet, true) */
.stm-toast--error {
  color: var(--stm-error);
  border-color: var(--stm-error);
  background: linear-gradient(rgba(var(--stm-error-rgb), 0.16), rgba(var(--stm-error-rgb), 0.16)), var(--stm-dark-2);
}
.stm-toast--show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 500px) {
  .stm-toast { left: 1rem; right: 1rem; transform: translateY(-12px); text-align: center; }
  .stm-toast--show { transform: translateY(0); }
}
/* Tableten és monitoron még nagyobb és szélesebb, hogy a nagy
   képernyőn se tűnjön el egy rövid, egysoros üzenet. */
@media (min-width: 768px) {
  .stm-toast {
    font-size: 1rem;
    padding: 1.35rem 2.75rem;
    min-width: 380px;
    max-width: 600px;
  }
}

.stm-wa-wrap {
  position: fixed;
  bottom: 1.75rem;
  right: 1.75rem;
  z-index: 300;
}
.stm-wa-btn {
  position: relative;
  width: 54px;
  height: 54px;
  background: var(--stm-whatsapp);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: 0 4px 20px rgba(37,211,102,0.35);
  transition: transform 0.2s, box-shadow 0.2s;
}
.stm-wa-btn:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 28px rgba(37,211,102,0.5);
}
.stm-wa-tooltip {
  position: absolute;
  right: 64px;
  background: var(--stm-dark-2);
  color: var(--stm-text);
  font-size: 0.78rem;
  font-weight: 500;
  white-space: nowrap;
  padding: 0.4rem 0.8rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
  top: 50%;
  transform: translateY(-50%);
}
.stm-wa-btn:hover .stm-wa-tooltip { opacity: 1; }

/* Választó kártya – a gomb fölött nyílik ki */
.stm-wa-chooser {
  position: absolute;
  bottom: calc(100% + 12px);
  right: 0;
  width: 230px;
  background: var(--stm-dark-2);
  border: 1px solid rgba(255,255,0,0.15);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.6);
  overflow: hidden;
}
.stm-wa-chooser-head {
  padding: 0.75rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  font-size: 0.85rem;
  color: var(--stm-text-muted);
}
.stm-wa-person {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0.65rem 0.9rem;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: background 0.15s;
}
.stm-wa-person:last-child { border-bottom: none; }
.stm-wa-person:hover { background: rgba(255,255,0,0.05); }
.stm-wa-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--stm-dark-3);
  border: 1.5px solid var(--stm-gold);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.stm-wa-avatar img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.stm-wa-avatar--placeholder img { opacity: 0.6; }
.stm-wa-info { flex: 1; min-width: 0; }
.stm-wa-name { display: block; font-size: 0.82rem; font-weight: 600; color: var(--stm-text); }
.stm-wa-role { display: block; font-size: 0.66rem; color: var(--stm-text-dim); margin-top: 2px; }
.stm-wa-arrow { color: var(--stm-gold); font-size: 0.85rem; flex-shrink: 0; }

/* ── SCROLL REVEAL ───────────────────────────────────── */
/* ══════════════════════════════════════════════════════
   GÖRGETÉS-VEZÉRELT MEGJELENÉS (nem időzített!)
   A JS (main.js) minden scroll eseménynél újraszámolja a
   --stm-reveal-progress értékét (0–1) minden elemre, az elem
   képernyőn belüli pozíciója alapján – NEM egy "trigger, majd
   lejátszódik" időzített átmenet. Ha megállsz görgetni, az
   animáció is megáll a jelenlegi állásán. Ha visszafelé
   görgetsz, ugyanúgy visszafelé is lejátszódik (eltűnik).
   ══════════════════════════════════════════════════════ */
.stm-reveal {
  opacity: var(--stm-reveal-progress, 0);
  transform: translateY(calc((1 - var(--stm-reveal-progress, 0)) * 24px));
}

/* Vonal-berajzolás – balról jobbra, a görgetési pozícióval arányosan */
.stm-reveal-line {
  transform: scaleX(var(--stm-reveal-progress, 0));
  transform-origin: left;
}

.stm-reveal-left {
  opacity: var(--stm-reveal-progress, 0);
  transform: translateX(calc((1 - var(--stm-reveal-progress, 0)) * -20px));
}

.stm-reveal-right {
  opacity: var(--stm-reveal-progress, 0);
  transform: translateX(calc((1 - var(--stm-reveal-progress, 0)) * 20px));
}

.stm-hero .stm-reveal,
.stm-hero .stm-reveal-left,
.stm-hero .stm-reveal-right { opacity: 1; transform: none; }

/* Lépcsőzetes megjelenés – mivel most nincs időzített átmenet (a teljes
   animáció a görgetési pozícióhoz van kötve), a "késleltetést" egy
   pozíció-eltolással érjük el: a JS ezt az egyedi --stm-reveal-offset
   értéket olvassa ki, és ennyivel TOVÁBB kell görgetni, mire az adott
   elem elkezd megjelenni – így a cím előbb, a tartalom utána jelenik meg. */
.stm-reveal-d1 { --stm-reveal-offset: 40px; }
.stm-reveal-d2 { --stm-reveal-offset: 90px; }

/* ── HERO IMAGE SLIDER ───────────────────────────────── */
.stm-hero-slider {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

/* Bootstrap carousel belső elemek teljes magasság */
.stm-hero-slides,
.stm-hero-slides .carousel-item,
.stm-hero-slides .carousel-item.active {
  height: 100% !important;
}

.stm-hero-slide-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
}

/* Sötét overlay a szöveg olvashatóságáért */
.stm-hero-slide-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0,0,0,0.82) 0%,
    rgba(0,0,0,0.55) 55%,
    rgba(0,0,0,0.25) 100%
  );
}

/* TABLETEN (768–991px) a szöveg a TELJES szélességet kitölti (desktopon
   csak a bal felét), ezért az átlós, jobbra kivilágosodó overlay alatt
   a jobb oldali szöveg nehezen lenne olvasható. Itt egyenletesebb és
   erősebb sötétítés kell. */
@media (max-width: 991px) {
  /* Álló tableten a FEKVŐ fotóból csak egy keskeny függőleges sáv fér
     be. A "center top" a kép TETEJÉT mutatta – sportfotóknál ott van a
     legtöbb üres rész (ég, háttér), a lényeg (arcok, akció) középen.
     Ezért itt a kép KÖZEPÉT mutatjuk. */
  .stm-hero-slide-img {
    object-position: center center;
  }

  .stm-hero-slide-overlay {
    background: linear-gradient(
      180deg,
      rgba(0,0,0,0.78) 0%,
      rgba(0,0,0,0.72) 60%,
      rgba(0,0,0,0.80) 100%
    );
  }
}

/* Carousel transition */
.stm-hero-slider .carousel-item {
  transition: transform 0.8s ease-in-out;
}

/* Tartalom a képek felett */
.stm-hero-content-wrap {
  position: relative;
  z-index: 2;
}

/* Indikátor pontok (hero) */
.stm-hero-indicators {
  bottom: 2rem;
  margin: 0;
  gap: 0.5rem;
  /* Bootstrap felülírás */
  --bs-carousel-indicator-width: 8px;
  --bs-carousel-indicator-height: 8px;
}
/* A LÁTHATÓ pötty marad 8px – csak a KATTINTHATÓ terület nő 24px-re
   (PageSpeed "Touch targets do not have sufficient size" – az érintési
   célnak kb. 24×24px-nek kell lennie). A gomb magát a nagyobb, átlátszó
   területet kapja, a pöttyöt egy ::before rajzolja a közepére. */
.stm-hero-indicators [data-bs-target],
.stm-hero-indicators button {
  width: 24px !important;
  height: 24px !important;
  border-radius: 50% !important;
  background-color: transparent !important;
  border-top: none !important;
  border-bottom: none !important;
  border: none !important;
  padding: 0 !important;
  margin: 0 !important;
  opacity: 1 !important;
  flex-shrink: 0;
  position: relative;
}
.stm-hero-indicators [data-bs-target]::before,
.stm-hero-indicators button::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background-color: rgba(255,255,255,0.35);
  transition: background-color 0.25s, transform 0.25s;
}
.stm-hero-indicators [data-bs-target].active::before,
.stm-hero-indicators button.active::before {
  background-color: var(--stm-gold);
  transform: translate(-50%, -50%) scale(1.3);
}

/* Ha van slider, a hero-bg átlátszó lesz (a slide adja a hátteret) */
.stm-hero:has(.stm-hero-slider) .stm-hero-bg,
.stm-hero:has(.stm-hero-slider) .stm-hero-accent {
  display: none;
}

/* Fallback ha :has() nem támogatott */
.stm-hero-bg-hidden { display: none; }

@media (max-width: 767px) {
  .stm-hero-indicators { bottom: 1rem; }
  .stm-hero-indicators button { width: 8px; height: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .stm-hero-slider .carousel-item { transition: none; }
}

/* ── FOOTER SOCIAL WRAPPER ───────────────────────────── */
.stm-footer-social {
  display: flex;
  align-items: flex-start;
}

/* ── FOOTER LAYOUT ───────────────────────────────────── */
.stm-footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 2rem;
  align-items: start;
}

.stm-footer-links {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.stm-footer-social-wrap {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  padding-top: 0.5rem;
}

.stm-social-btn {
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  flex-shrink: 0;
}
.stm-social-btn:hover {
  border-color: var(--stm-gold);
  background: rgba(255,255,0,0.06);
}

/* Tablet */
@media (max-width: 991px) {
  .stm-footer-top {
    grid-template-columns: 1fr 1fr;
  }
  .stm-footer-social-wrap {
    grid-column: span 2;
  }
}

/* Mobil */
@media (max-width: 575px) {
  .stm-footer-top {
    grid-template-columns: 1fr;
  }
  .stm-footer-social-wrap {
    grid-column: span 1;
  }
  .stm-social-btn {
    width: 52px !important;
    height: 52px !important;
  }
  .stm-social-btn svg {
    width: 32px !important;
    height: 32px !important;
  }
  /* Newsletter: teljes szélesség */
  .stm-nl-footer-widget { width: 100%; }
  .stm-nl-fw-row {
    flex-direction: column !important;
    max-width: 100% !important;
  }
  .stm-nl-fw-input,
  .stm-nl-fw-btn {
    width: 100% !important;
  }
}