/**
 * EMK Marketing sáv
 * Háttérkép: fix URL, background-size: cover + background-position: center
 * Montserrat betűtípus szükséges (Google Fonts vagy helyi)
 * Bootstrap grid-del kompatibilis, de önálló flexbox layoutot használ
 */

/* Google Fonts import – ha még nincs a témában */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&display=swap');

/* ───────────────────────────────────────────
   Sáv konténer
─────────────────────────────────────────── */
.emk-marketing-sav {
  --emk-stat-number-col: 96px;
  width: 100%;
  min-height: 300px;                        /* desktop alap magasság */
  background-image: url('/sites/default/files/emk_marketing_sav.jpg');
  background-size: cover;                   /* arányos nagyítás, kitölti a magasságot */
  background-position: center center;       /* kép közepe látszik */
  background-repeat: no-repeat;
  background-color: var(--kari-zold);               /* fallback, ha a kép nem tölt be */
  display: flex;
  align-items: center;
}

/* ───────────────────────────────────────────
   Belső wrapper – 3 oszlopos flex
─────────────────────────────────────────── */
.emk-marketing-sav__inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 20px 40px;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 32px;
  color: #ffffff;
  font-family: 'Montserrat', sans-serif;
}

/* ───────────────────────────────────────────
   Oszlopok
─────────────────────────────────────────── */
.emk-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bal oszlop kissé szélesebb, mert a rangsor szöveg hosszabb */
.emk-col--rangsor {
  flex: 1.2;
}

/* ───────────────────────────────────────────
   Rangsor szöveg (bal oldali blokk)
   "1. a magyarországi és 201-275. a felsőoktatási világranglistán"
─────────────────────────────────────────── */
.emk-rangsor-szoveg {
  font-size: 20px;
  font-weight: 400;           /* alapszöveg Light/Regular */
  line-height: 1.5;
}

/* A "1." és "201-275." számokat Bold-dal emeljük ki */
.emk-rangsor-szoveg strong,
.emk-rangsor-szoveg b {
  font-weight: 700;
}

/* A forrás (HVG, QS...) kisebb és Light */
.emk-rangsor-szoveg small,
.emk-rangsor-forras {
  font-size: 13px;
  font-weight: 300;
  display: block;
  margin-top: 2px;
  opacity: 0.85;
}

/* ───────────────────────────────────────────
   Stat elemek (szám + leírás)
─────────────────────────────────────────── */
.emk-stat {
  display: flex;
  /*align-items: center;*/
  gap: 8px;
}

/* Nagy szám – Semibold 26pt arányban */
.emk-stat__szam {
  flex: 0 0 var(--emk-stat-number-col);
  text-align: right;
  font-size: 26px;
  font-weight: 600;           /* Semibold */
  line-height: 1;
  white-space: nowrap;
}

/* Leírás szöveg – Italic 20pt */
.emk-stat__leiras {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  line-height: 1.3;
}

/* Kiemelt sor – ugyanolyan, de kicsit nagyobb vizuális súly */
.emk-stat--kiemelt {
  align-items: flex-end;
}

.emk-stat--kiemelt .emk-stat__szam {
  flex: 0 0 auto;
  text-align: left;
  font-size: 28px;
}

.emk-stat--kiemelt .emk-stat__leiras {
  flex: 0 1 auto;
}

/* ───────────────────────────────────────────
   Reszponzív – tablet (md breakpoint, ~768px)
─────────────────────────────────────────── */
@media (max-width: 991px) {
  .emk-marketing-sav__inner {
    flex-wrap: wrap;
    padding: 24px 24px;
    gap: 20px;
  }

  /* Bal oszlop teljes szélességre megy */
  .emk-col--rangsor {
    flex: 0 0 100%;
    align-items: center;
  }

  .emk-col--rangsor .emk-rangsor-szoveg {
    text-align: center;
  }

  .emk-col--rangsor .emk-stat--kiemelt {
    justify-content: center;
  }

  /* Két stat oszlop egymás mellé, fele-fele szélesség */
  .emk-col--stats {
    flex: 1 1 calc(50% - 16px);
    min-width: 160px;
  }
}

/* ───────────────────────────────────────────
   Reszponzív – mobil (sm breakpoint, ~576px)
─────────────────────────────────────────── */
@media (max-width: 575px) {
  .emk-marketing-sav {
    --emk-stat-number-col: 40px;
  }

  .emk-marketing-sav__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 16px;
    gap: 16px;
  }

  /* Minden oszlop teljes szélesség */
  .emk-col--rangsor,
  .emk-col--stats {
    flex: 0 0 100%;
    width: 100%;
  }

  .emk-col--rangsor {
    align-items: center;
  }

  .emk-col--rangsor .emk-rangsor-szoveg {
    text-align: center;
    font-size: 16px;
  }

  .emk-stat--kiemelt .emk-stat__szam {
    font-size: 16px;
  }

  .emk-col--rangsor .emk-stat--kiemelt {
    justify-content: center;
    font-size: 16px;
  }

  /* Stat elemek 2 oszlopos grid mobilon */
  .emk-col--stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
  }

  .emk-stat__szam {
    width: auto;
    font-size: 18px;
  }

  .emk-stat__leiras {
    font-size: 16px;
  }

}