/* ============================================================
   Tudastar tema - gyujtoblokk (lexikon leiras oldal aljan)
   ============================================================ */
.tudastar-tema-blokk {
  margin: 2.5rem 0 1rem;
  padding: 1.5rem;
  background: #f7f9fc;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
}
.tudastar-tema-blokk h3 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2a2f45;
}
.tudastar-tema-linkek {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.tudastar-tema-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
  color: #fff;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tudastar-tema-link:hover,
.tudastar-tema-link:focus {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  color: #fff;
  text-decoration: none;
}
.tudastar-tema-blog {
  background: #5b9dc6;
}
.tudastar-tema-kerdes {
  background: #7cc576;
}
.tudastar-tema-link i {
  font-size: 1.4rem;
  line-height: 1;
}
.tudastar-tema-cimke {
  font-size: 1rem;
}

/* ============================================================
   Tudastar tema - metro csempek (blog / kerdesek oldalak)
   ============================================================ */
.tudastar-tema-metro {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin: 1.5rem 0 2.5rem;
}
.tudastar-tema-csempe {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tudastar-tema-csempe:hover,
.tudastar-tema-csempe:focus {
  transform: translateY(-3px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.1);
  text-decoration: none;
}
.tudastar-tema-csempe-kep {
  display: block;
  width: 100%;
  height: 160px;
  background-size: cover;
  background-position: center;
  background-color: #eef1f6;
}
.tudastar-tema-csempe-torzs {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 1.15rem 1.15rem;
  flex: 1 1 auto;
}
.tudastar-tema-csempe-cim {
  font-size: 1.05rem;
  font-weight: 700;
  color: #2a2f45;
  line-height: 1.3;
}
.tudastar-tema-csempe:hover .tudastar-tema-csempe-cim {
  color: #2f7d39;
}
.tudastar-tema-csempe-kivonat {
  font-size: 0.92rem;
  color: #55607a;
  line-height: 1.45;
}
.tudastar-tema-csempe-datum {
  margin-top: auto;
  padding-top: 0.35rem;
  font-size: 0.82rem;
  color: #97a0b5;
}
.tudastar-tema-ures {
  margin: 2rem 0;
  padding: 1.5rem;
  background: #f7f9fc;
  border: 1px solid #e3e8ef;
  border-radius: 12px;
  color: #55607a;
  text-align: center;
}

@media (max-width: 767px) {
  .tudastar-tema-linkek {
    grid-template-columns: 1fr;
  }
}


/* ==========================================================================
   TUDASTAR (LEXIKON) INDEXOLDAL - MOBIL OLVASHATOSAG (append, 2026-07)
   --------------------------------------------------------------------------
   Erintett nezet: business_categories (DOM: .view-categories,
   .view-id-business_categories), utvonal: /tudastar-lexikon

   A DOM alapjan megallapitott ok:
     1. A .view-categories kontener FLEX, ket oszloppal: bal oldalt az
        .attachment-before A-Z index, jobbra a .view-content.row tartalom.
        Keskeny kepernyon egyik oszlop sem kap eleg helyet -- a leirasok
        2-3 szavankent tordelnek egy kb. 150 px szeles savban.
     2. A .view-content.row Bootstrap-sor: negativ oldalmargoja van
        (--bs-gutter-x), ami tovabb szukiti/tullogatja a tartalmat.
     3. Az A-Z index linkjeinek nincs sajat font-size-a (theme.css:4506 csak
        display/padding/line-height-ot ad), ezert a torzsmeretet orokli --
        ez mobilon aranytalanul nagy.
     4. A cimsor h1 { font-size: 36px } (theme.css:108) fixen 36 px.

   Megoldas mobilon: a ket oszlop egymas ala kerul, az index kompakt,
   gorgetheto dobozza valik, a betumeretek pedig explicit ertekeket kapnak.

   !important azert kell, mert a smink theme.css-e a modul CSS-e UTAN tolt be.
   ========================================================================== */

@media (max-width: 767.98px) {

  /* --- 1. A ket oszlop egymas ala kerul --------------------------------- */

  .view-categories {
    display: block !important;
  }

  /* --- 2. A-Z index: teljes szelessegu, kompakt, gorgetheto doboz ------- */

  .view-categories .attachment-before {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 42vh !important;
    margin: 0 0 1.5rem !important;
    padding: 0.6rem 0.9rem !important;
    border: 1px solid #e3e8ef !important;
    border-radius: 10px !important;
    background: #f7f9fc !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  .view-categories .attachment-before .views-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Kisebb betu + tapintasra alkalmas magassag (kb. 34 px). */
  .view-categories .attachment-before .views-field-name a,
  .view-categories .attachment-before .views-row a {
    display: block !important;
    padding: 7px 0 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
  }

  .view-categories .attachment-before .views-row + .views-row {
    border-top: 1px solid #e8edf3 !important;
  }

  /* --- 3. Tartalmi oszlop teljes szelessegben --------------------------- */
  /* A .row negativ margoit is semlegesitjuk, kulonben vizszintesen tullog. */

  .view-categories .view-content {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .view-categories .view-content > .views-row {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    margin: 0 0 1.6rem !important;
    padding: 0 !important;
  }

  .view-categories .views-row-inner {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* --- 4. Betumeretek a tartalmi oszlopban ------------------------------ */

  .view-categories .view-content .views-field-name a {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    overflow-wrap: break-word !important;
  }

  .view-categories .views-field-description__value,
  .view-categories .views-field-description__value .field-content {
    display: block !important;
    max-width: 100% !important;
  }

  .view-categories .views-field-description__value p {
    margin: 0.35rem 0 0.8rem !important;
    font-size: 0.95rem !important;
    line-height: 1.6 !important;
    overflow-wrap: break-word !important;
  }

  .view-categories .views-field-description__value p:last-child {
    margin-bottom: 0 !important;
  }

  /* --- 5. Oldalcim: a fix 36 px mobilon tul nagy ------------------------ */
  /* Csak azon az oldalon, ahol ez a nezet szerepel. */

  body:has(.view-categories) #block-bizreview-page-title h1.title,
  body:has(.view-categories) .main-content-inner h1.title {
    font-size: 1.7rem !important;
    line-height: 1.25 !important;
    margin: 0 0 0.9rem !important;
  }
}

/* Q&A csempe: a valaszolo szakember kor-avatarja a borito helyett. */
.tudastar-tema-csempe-kep--avatar {
  width: 84px;
  height: 84px;
  margin: 1.15rem auto 0;
  border-radius: 50%;
  background-color: #eef1f6;
  border: 3px solid #eef3f7;
}
.tudastar-tema-csempe--avatar .tudastar-tema-csempe-torzs {
  text-align: center;
}

/* Q&A csempe: nincs sajat borito -> gradient teto (a bizreview markaszinekkel). */
.tudastar-tema-csempe-kep--gradient {
  background-image: linear-gradient(135deg, #5b9dc6 0%, #497e9e 100%);
}

/* Szerzo-sor a csempe aljan (a valaszolo szakember): avatar + nev. */
.tudastar-tema-csempe-szerzo {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-top: 0.35rem;
}
.tudastar-tema-csempe-szerzo-kep {
  flex: 0 0 auto;
  line-height: 0;
}
.tudastar-tema-csempe-szerzo-kep img {
  display: block;
  width: 34px;
  height: 34px;
  object-fit: cover;
  border-radius: 50%;
}
.tudastar-tema-csempe-szerzo-nev {
  font-size: 0.9rem;
  font-weight: 600;
  color: #33607f;
}

/* =========================================================================
   TEMA OLDAL - BLOG METRO CSEMPEK (.tudastar-blog-metro)  (append, 2026-08)
   -------------------------------------------------------------------------
   A /pk/blog "metro-blog" nezetenek 1:1 megjelenese, tudastar sajat
   gyoker-osztalyra atirva (onallo: nem fugg a programok modultol).
   Full-bleed borito + cimoverlay; a datum es a (pipas) szerzo hoverre
   csuszik be, mobilon mindig latszik. A blog eredeti hibaja (hosszu cimnel
   a szerzo levagodik) itt javitva: a cimet sorra korlatozzuk
   (-webkit-line-clamp), igy a szerzo-sor mindig kifer. ASCII-only, CRLF.
   ========================================================================= */

/* ---- 1) A RACS KONTENER ------------------------------------------------- */
.tudastar-blog-metro .view-content {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  grid-auto-rows: 290px !important;
  grid-auto-flow: dense !important;
  gap: 8px !important;
  margin: 0 !important;
}
.tudastar-blog-metro .views-row {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 290px;
}

/* ---- 2) A METRO MINTA (7 elemenkent ismetlodik) ------------------------- */
.tudastar-blog-metro .views-row:nth-child(7n + 1) {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 588px;
}
.tudastar-blog-metro .views-row:nth-child(7n + 2) { grid-column: span 2; }
.tudastar-blog-metro .views-row:nth-child(7n + 3) { grid-column: span 2; }

/* ---- 3) A CSEMPE BELSEJE ----------------------------------------------- */
.tudastar-blog-metro .views-row-inner {
  position: relative;
  height: 100% !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
  border-radius: 10px;
}

/* Kep = hatterreteg, kitolti a csempet. Nincs hover-mozgas. */
.tudastar-blog-metro .views-field-field-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.tudastar-blog-metro .views-field-field-image,
.tudastar-blog-metro .views-field-field-image .field-content,
.tudastar-blog-metro .views-field-field-image a {
  display: block;
  height: 100%;
}
.tudastar-blog-metro .views-field-field-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}

/* Sotet atmenet a szoveg olvashatosagahoz */
.tudastar-blog-metro .views-row-inner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, .82) 0%,
    rgba(0, 0, 0, .42) 40%,
    rgba(0, 0, 0, 0) 68%
  );
  pointer-events: none;
}

/* ---- 4) SZOVEGMEZOK - sorrend: cim, datum, szerzo ---------------------- */
.tudastar-blog-metro .views-field-title,
.tudastar-blog-metro .views-field-created,
.tudastar-blog-metro .views-field-name {
  position: relative;
  z-index: 2;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.tudastar-blog-metro .views-field-title  { order: 0; }
.tudastar-blog-metro .views-field-created { order: 1; }
.tudastar-blog-metro .views-field-name    { order: 2; }

/* --- CIM: mindig latszik --- */
.tudastar-blog-metro .views-field-title {
  padding-top: .35rem;
  padding-bottom: 1.1rem;
  transition: padding-bottom .28s ease;
}
.tudastar-blog-metro .views-row-inner:hover .views-field-title {
  padding-bottom: .12rem;
}
.tudastar-blog-metro .views-row .views-field-title a,
.tudastar-blog-metro .views-row .views-field-title a:hover,
.tudastar-blog-metro .views-row .views-field-title a:focus {
  color: #fff !important;
  font-weight: 700;
  line-height: 1.18;
  text-decoration: none !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}
.tudastar-blog-metro .views-row .views-field-title a {
  font-size: 1.9rem;
  font-weight: 800;
}

/* --- DATUM + SZERZO: alapbol rejtve, hoverre lecsuszva megjelenik --- */
.tudastar-blog-metro .views-field-created,
.tudastar-blog-metro .views-field-name {
  color: rgba(255, 255, 255, .92);
  font-size: .82rem;
  line-height: 1.35;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transform: translateY(6px);
  transition: max-height .28s ease, opacity .28s ease,
              transform .28s ease, padding .28s ease;
}
.tudastar-blog-metro .views-row-inner:hover .views-field-created {
  max-height: 2em;
  opacity: 1;
  transform: none;
  padding-top: .12rem;
}
.tudastar-blog-metro .views-row-inner:hover .views-field-name {
  max-height: 2em;
  opacity: 1;
  transform: none;
  padding-top: .12rem;
  padding-bottom: 1.1rem;
}

/* Szerzo neve linkkent, feheren */
.tudastar-blog-metro .views-field-name a,
.tudastar-blog-metro .views-field-name a:hover,
.tudastar-blog-metro .views-field-name a:focus {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline !important;
}

/* ---- 5) RESPONZIV TORESPONTOK ------------------------------------------ */
@media (min-width: 768px) and (max-width: 991px) {
  .tudastar-blog-metro .view-content { grid-template-columns: repeat(2, 1fr); }
  .tudastar-blog-metro .views-row:nth-child(7n + 2),
  .tudastar-blog-metro .views-row:nth-child(7n + 3) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 767px) {
  .tudastar-blog-metro .view-content {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .tudastar-blog-metro .views-row,
  .tudastar-blog-metro .views-row:nth-child(7n + 1),
  .tudastar-blog-metro .views-row:nth-child(7n + 2),
  .tudastar-blog-metro .views-row:nth-child(7n + 3) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: 668 / 588;
  }
  .tudastar-blog-metro .views-field-created,
  .tudastar-blog-metro .views-field-name {
    max-height: 2em;
    opacity: 1;
    transform: none;
    padding-top: .12rem;
  }
  .tudastar-blog-metro .views-field-name { padding-bottom: 1.1rem; }
  .tudastar-blog-metro .views-field-title { padding-bottom: .12rem; }
}

/* Ures allapot */
.tudastar-blog-metro__empty {
  margin: 1.5rem 0;
  color: #555;
}

/* =========================================================================
   Program csempe: szerzo-blokk (avatar + nev) a profilkeppel.
   Ugy viselkedik, mint a BLOG csempe: a szerzo CSAK HOVERRE latszik.
   A nagyobb avatar miatt a hover-reveal magassagat megnoveljuk, hogy ne
   vagja le. A zold pipat + hover feliratot az ellenorzott_szakember modul
   teszi a field_image_thumbnail SZABVANYOS mezo-markupjara.
   ========================================================================= */

/* A nagyobb avatarhoz nagyobb reveal-magassag kell (a base 2em levagna). */
.tudastar-blog-metro .views-row-inner:hover .views-field-name {
  max-height: 72px;
}

.tudastar-blog-metro .tudastar-blog-metro__author {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.tudastar-blog-metro .tudastar-blog-metro__author-photo {
  flex: 0 0 auto;
  line-height: 0;
}

.tudastar-blog-metro .tudastar-blog-metro__author-photo .field,
.tudastar-blog-metro .tudastar-blog-metro__author-photo .field__item {
  margin: 0;
  padding: 0;
}

/* Avatar meret - ha a blog csempehez kell igazitani, csak ezt a ket erteket
   allitsd (width/height). */
.tudastar-blog-metro .tudastar-blog-metro__author-photo img {
  display: block;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, .9);
}

.tudastar-blog-metro .tudastar-blog-metro__author-name {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.tudastar-blog-metro .tudastar-blog-metro__author:hover .tudastar-blog-metro__author-name,
.tudastar-blog-metro .tudastar-blog-metro__author:focus .tudastar-blog-metro__author-name {
  text-decoration: underline;
}

/* =========================================================================
   MOBIL OLVASHATOSAG - a blog-csempe (tema oldal) nagyobb szovegtornya miatt
   (append, 2026-08)
   -------------------------------------------------------------------------
   A blog csempeje es a blog csempe CSS-e azonos, DE a blog-csempe (tema oldal)n a
   cim alatt ott a 48px avataros szerzo-blokk is (a blogon nincs ekkora). Ez a
   magasabb szovegtorony feljebb nyulik, mint ameddig az alap gradiens .82-es
   sotet savja er (0%->40%->68%), ezert mobilon a cim teteje a vilagos kepre
   esett es olvashatatlan volt.

   Mobilon ezert a blog-csempe (tema oldal)n a gradienst magasabbra es sotetebbre
   hozzuk, hogy a teljes szovegtornyot (cim + datum + avataros szerzo) lefedje.
   A blogot ez nem erinti (kln szelektor), a desktop nezetet sem (media query).
   ASCII-only.
   ========================================================================= */

/* Komment-szamlalo elrejtese - blog-paritas (a blogban megvolt, itt hianyzott) */
.tudastar-blog-metro .views-field-comment-count,
.tudastar-blog-metro .views-field-comment-node-comment {
  display: none !important;
}

@media (max-width: 767px) {
  /* Erosebb, magasabb sotetites, hogy az avataros szerzo-blokk feletti cim is
     olvashato legyen. A .82 alfa marad alul, de a sotet sav magasabbra er. */
  .tudastar-blog-metro .views-row-inner::after {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, .88) 0%,
      rgba(0, 0, 0, .70) 30%,
      rgba(0, 0, 0, .35) 55%,
      rgba(0, 0, 0, 0) 82%
    ) !important;
  }

  /* A cim mobilon kisebb, hogy hosszabb cim se logjon ki / ne nyomja
     tul a csempet. A blog cimmerete (1.9rem) nagy hosszu cimnel tul dominans. */
  .tudastar-blog-metro .views-row .views-field-title a {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  /* ---- A "UGRALO" SZOVEG JAVITASA ---------------------------------------
     A blog-csempe (tema oldal)n a szerzo-mezo (.views-field-name) az avatar (48px) +
     nev, ezert a megosztott mobil szabaly max-height: 2em erteke levagja,
     es a :hover (tapintasra beragado hover) 72px-re ANIMALJA -> ettol
     ugrik a szoveg. Mobilon nincs hover, ezert:
       - a szerzo-mezot fix, az avatarhoz eleg magassra allitjuk,
       - MINDEN atmenetet kikapcsolunk (nincs mit animalni),
       - a :hover alapu magassag-valtozast semlegesitjuk.
     Igy a szoveg pozicioja fix, mint a blognal. */
  .tudastar-blog-metro .views-field-title,
  .tudastar-blog-metro .views-field-created,
  .tudastar-blog-metro .views-field-name,
  .tudastar-blog-metro .views-row-inner:hover .views-field-title,
  .tudastar-blog-metro .views-row-inner:hover .views-field-created,
  .tudastar-blog-metro .views-row-inner:hover .views-field-name {
    transition: none !important;
  }

  .tudastar-blog-metro .views-field-name,
  .tudastar-blog-metro .views-row-inner:hover .views-field-name {
    max-height: 72px !important;
    opacity: 1 !important;
    transform: none !important;
    padding-top: .12rem !important;
    padding-bottom: 1.1rem !important;
  }

  .tudastar-blog-metro .views-field-created,
  .tudastar-blog-metro .views-row-inner:hover .views-field-created {
    max-height: 2em !important;
    opacity: 1 !important;
    transform: none !important;
    padding-top: .12rem !important;
  }

  /* A cim nyugalmi es "hover" allapota is azonos -> nincs fuggoleges ugras. */
  .tudastar-blog-metro .views-field-title,
  .tudastar-blog-metro .views-row-inner:hover .views-field-title {
    padding-bottom: .12rem !important;
  }
}

/* Hosszu cim korlatozasa, hogy a szerzo-sor sose vagodjon le / ne loghasson
   ki a csempebol (a /pk/blog eredeti hibajanak javitasa). */
.tudastar-blog-metro .views-field-title a {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Kiemelt szakemberek a temaban (leiras-oldal, egy soros carousel). */
.tudastar-tema-kiemeltek {
  margin: 1.5rem 0 2rem;
}
.tudastar-tema-kiemeltek__cim {
  margin: 0 0 1rem;
  font-size: 1.35rem;
  color: #33607f;
}

/* Blogposzt (keskenyebb tartalom a jobb oldali blokkok miatt): fixen 3 kartya,
 * hogy a kartyak akkorak maradjanak, mint a szeles elrendezesben. Feluliria a
 * carousel media-query-alapu --bzc-per-view ertekeit. */
.bizreview-carousel--3 { --bzc-per-view: 3 !important; }

/* A blogposzton a Kiemelt blokk NE kapjon gradient hattert (a node-hatteret
 * nem nyujtja meg): sajat, hattermentes szekcio. */
.tudastar-tema-kiemeltek--keskeny {
  background: none;
}

/* ============================================================
   PK-VALASZOLDAL-HATTER — a valaszoldal hattere
   ------------------------------------------------------------
   A bizreview custom.css-ben ez all (a fooldali savokhoz irva):

     html body, html body #top-content, html body #preface,
     html body .block:has(.bizreview-carousel) {
       background-color: #eef4fa !important;
       background-image: ... linear-gradient(160deg, #e4edf6,
                             #eff4f2 52%, #e6f2df) !important;
       background-attachment: fixed !important;
     }

   A fooldalon a carousel kulon szekcio-blokkokban ul, ott ez a cel.
   A valaszoldalon viszont a carousel a FO TARTALMI blokkba kerult
   (#block-bizreview-content, .block-system-main-block), igy az is
   megkapta az eros kek->zold, fixen rogzitett gradienst - ettol lett
   zold a tartalmi oszlop.

   Itt csak EZT az egy esetet utjuk vissza: fo tartalmi blokk,
   amelyikben pszichologus-valasz van. Erosseg 0,3,2 + !important,
   tehat veri a fenti 0,2,2-es szabalyt. A fooldali blokkokra, a
   Tudastarra es a blogra NEM hat.

   A custom.css-hez szandekosan nem nyulunk: az a fooldalon is fut.
   ============================================================ */
html body .block.block-system-main-block:has(.pszv-answer) {
  background-color: transparent !important;
  background-image: none !important;
}

/* PK-KIEMELT-MOBIL-2 (2026-10-09): a "Kiemelt szakemberek a temaban"
 * blokk keskeny helyen rosszul nezett ki: a blogposzton 3 osszenyomott
 * kartya, a Tudastar-oldalon mobilon 1 tulmeretezett kartya. A BLOKK SAJAT
 * szelessegehez igazodunk (container query), nem az ablakehoz: 640px-nel
 * keskenyebb blokkban mindket helyen egyszerre 2 kartya latszik (300px alatt
 * 1); szelesebben marad a korabbi viselkedes (blogposzt: fix 3, Tudastar:
 * a carousel sajat toresponjai). */
.tudastar-tema-kiemeltek {
  container-type: inline-size;
}
@container (max-width: 639.98px) {
  .tudastar-tema-kiemeltek .bizreview-carousel { --bzc-per-view: 2 !important; --bzc-gap: .75rem; }
  /* Ugyanaz a kompakt kartya, mint a mobil karusszelekben (blog-carousel.css,
   * PK-SZAKEMBER-KARUSSZEL-MOBIL), hogy mindenhol egyforma legyen. */
  .tudastar-tema-kiemeltek .bizreview-carousel__slide .psy-card__photo-link {
    aspect-ratio: auto !important;
    padding: .9rem 0 !important;
  }
  .tudastar-tema-kiemeltek .bizreview-carousel__slide .psy-card__avatar {
    width: 84px !important;
    height: 84px !important;
  }
  .tudastar-tema-kiemeltek .bizreview-carousel__slide .psy-card__body {
    padding: .75rem .5rem 1rem !important;
  }
  .tudastar-tema-kiemeltek .bizreview-carousel__slide .psy-card__name {
    font-size: .95rem;
    overflow-wrap: anywhere;
  }
  .tudastar-tema-kiemeltek .bizreview-carousel__slide .psy-card__profession { font-size: .8rem; }
  .tudastar-tema-kiemeltek .bizreview-carousel__slide .psy-card__location { font-size: .78rem; }
}
@container (max-width: 299.98px) {
  .tudastar-tema-kiemeltek .bizreview-carousel { --bzc-per-view: 1 !important; }
}
/* Tartalek a container query-t nem ismero bongeszokre: mobilon 2 kartya. */
@supports not (container-type: inline-size) {
  @media (max-width: 767.98px) {
    .tudastar-tema-kiemeltek .bizreview-carousel { --bzc-per-view: 2 !important; }
  }
}