/* =========================================================================
   METRO CSEMPES ELRENDEZES - Programok lista (.programok-lista)
   A blog "metro-blog.css" ASCII klonja, a gyoker .view-list-news -> .programok-lista.
   Minden tobbi szelektor (.view-content, .views-row, .views-field-*) valtozatlan,
   igy a megjelenes pontosan a blog metro nezeteve.
   ASCII-only fajl.

   Viselkedes:
   - Alapbol csak a cim latszik a csempen.
   - Hoverre a kep nem mozdul; a cim egy sorral feljebb ugrik, es alatta
     megjelenik a datum, majd a (linkelt) szerzo neve.
   ========================================================================= */

/* ---- 1) A RACS KONTENER ------------------------------------------------- */
.programok-lista .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;
}
.programok-lista .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) ------------------------- */
.programok-lista .views-row:nth-child(7n + 1) {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 588px;
}
.programok-lista .views-row:nth-child(7n + 2) { grid-column: span 2; }
.programok-lista .views-row:nth-child(7n + 3) { grid-column: span 2; }

/* ---- 3) A CSEMPE BELSEJE ----------------------------------------------- */
.programok-lista .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. */
.programok-lista .views-field-field-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.programok-lista .views-field-field-image,
.programok-lista .views-field-field-image .field-content,
.programok-lista .views-field-field-image a {
  display: block;
  height: 100%;
}
.programok-lista .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 */
.programok-lista .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 ---------------------- */
.programok-lista .views-field-title,
.programok-lista .views-field-created,
.programok-lista .views-field-name {
  position: relative;
  z-index: 2;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.programok-lista .views-field-title  { order: 0; }
.programok-lista .views-field-created { order: 1; }
.programok-lista .views-field-name    { order: 2; }

/* --- CIM: mindig latszik --- */
.programok-lista .views-field-title {
  padding-top: .35rem;
  padding-bottom: 1.1rem;
  transition: padding-bottom .28s ease;
}
.programok-lista .views-row-inner:hover .views-field-title {
  padding-bottom: .12rem;
}
.programok-lista .views-row .views-field-title a,
.programok-lista .views-row .views-field-title a:hover,
.programok-lista .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);
}
.programok-lista .views-row .views-field-title a {
  font-size: 1.9rem;
  font-weight: 800;
}

/* --- DATUM + SZERZO: alapbol rejtve, hoverre lecsuszva megjelenik --- */
.programok-lista .views-field-created,
.programok-lista .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;
}
.programok-lista .views-row-inner:hover .views-field-created {
  max-height: 2em;
  opacity: 1;
  transform: none;
  padding-top: .12rem;
}
.programok-lista .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 */
.programok-lista .views-field-name a,
.programok-lista .views-field-name a:hover,
.programok-lista .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) {
  .programok-lista .view-content { grid-template-columns: repeat(2, 1fr); }
  .programok-lista .views-row:nth-child(7n + 2),
  .programok-lista .views-row:nth-child(7n + 3) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 767px) {
  .programok-lista .view-content {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .programok-lista .views-row,
  .programok-lista .views-row:nth-child(7n + 1),
  .programok-lista .views-row:nth-child(7n + 2),
  .programok-lista .views-row:nth-child(7n + 3) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;
    aspect-ratio: 668 / 588;
  }
  .programok-lista .views-field-created,
  .programok-lista .views-field-name {
    max-height: 2em;
    opacity: 1;
    transform: none;
    padding-top: .12rem;
  }
  .programok-lista .views-field-name { padding-bottom: 1.1rem; }
  .programok-lista .views-field-title { padding-bottom: .12rem; }
}

/* Ures allapot */
.programok-lista__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). */
.programok-lista .views-row-inner:hover .views-field-name {
  max-height: 72px;
}

.programok-lista .programok-lista__author {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
}

.programok-lista .programok-lista__author-photo {
  flex: 0 0 auto;
  line-height: 0;
}

.programok-lista .programok-lista__author-photo .field,
.programok-lista .programok-lista__author-photo .field__item {
  margin: 0;
  padding: 0;
}

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

.programok-lista .programok-lista__author-name {
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}

.programok-lista .programok-lista__author:hover .programok-lista__author-name,
.programok-lista .programok-lista__author:focus .programok-lista__author-name {
  text-decoration: underline;
}

/* =========================================================================
   MOBIL OLVASHATOSAG - a program-csempe nagyobb szovegtornya miatt
   (append, 2026-08)
   -------------------------------------------------------------------------
   A blog csempeje es a program csempe CSS-e azonos, DE a program-csempen 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 program-csempen 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) */
.programok-lista .views-field-comment-count,
.programok-lista .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. */
  .programok-lista .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 program-nev se logjon ki / ne nyomja
     tul a csempet. A blog cimmerete (1.9rem) nagy programnevnel tul dominans. */
  .programok-lista .views-row .views-field-title a {
    font-size: 1.5rem !important;
    line-height: 1.15 !important;
  }

  /* ---- A "UGRALO" SZOVEG JAVITASA ---------------------------------------
     A program-csempen 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. */
  .programok-lista .views-field-title,
  .programok-lista .views-field-created,
  .programok-lista .views-field-name,
  .programok-lista .views-row-inner:hover .views-field-title,
  .programok-lista .views-row-inner:hover .views-field-created,
  .programok-lista .views-row-inner:hover .views-field-name {
    transition: none !important;
  }

  .programok-lista .views-field-name,
  .programok-lista .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;
  }

  .programok-lista .views-field-created,
  .programok-lista .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. */
  .programok-lista .views-field-title,
  .programok-lista .views-row-inner:hover .views-field-title {
    padding-bottom: .12rem !important;
  }
}

/* =========================================================================
   RACS-TULCSORDULAS JAVITAS (append, 2026-09-19)
   -------------------------------------------------------------------------
   TUNET: a csempek jobbra kilogtak a tartalom-oszlopbol ("szetcsuszott"
   oldal), es az oszlopok nem voltak egyenlok. Merve (devtools): 1116 px
   szeles kontenerben a savok 401.375 / 415.016 / 410.859 / 410.859 px, a
   gapekkel egyutt 1662 px -> 546 px tullogas jobbra.

   OK: a "repeat(4, 1fr)" valojaban "repeat(4, minmax(auto, 1fr))". Az auto
   minimum a csempe tartalmanak MIN-CONTENT szelessege. A cim
   (display:-webkit-box + -webkit-line-clamp a metro_loadmore CSS-ebol) es a
   48px-es avataros szerzo-sor egyutt szelesebb min-content-et ad, mint a
   savra juto hely, ezert a grid savjai megnottek a konteneren tul. A kepek
   csak lathatova tettek a hibat: kep nelkul a csempek nem tuntek fel.
   A blognal ugyanez a minta van, csak ott a rovidebb tartalom eddig nem erte
   el ezt a hatart.

   JAVITAS: minmax(0, 1fr) + min-width: 0 a grid-elemeken -> a savok sosem
   lehetnek szelesebbek a helynel, es egyenlok lesznek. A cim hosszu szavai
   torhetnek, hogy ne feszitsenek.

   MELLEKESEN: a fenti tablet media query (768-991 px) 2 oszlopos szabalya
   !important NELKUL volt, az alapszabaly viszont !important-tal - ezert
   768-991 px kozott is 4 oszlop maradt. Itt !important-tal megismeteljuk.
   ASCII-only.
   ========================================================================= */
html body .programok-lista .view-content {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

html body .programok-lista .views-row {
  min-width: 0 !important;
}

html body .programok-lista .views-row-inner,
html body .programok-lista .views-field-title,
html body .programok-lista .views-field-created,
html body .programok-lista .views-field-name {
  min-width: 0;
}

html body .programok-lista .views-field-title a {
  overflow-wrap: anywhere;
}

@media (min-width: 768px) and (max-width: 991px) {
  html body .programok-lista .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 767px) {
  html body .programok-lista .view-content {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}


/* =========================================================================
   KEP NELKULI CSEMPE - GRADIENS FALLBACK (append, 2026-09-19)
   -------------------------------------------------------------------------
   A program-csempe a kepet abszolut hatterretegkent hasznalja
   (.views-field-field-image, inset:0), a cim ra van pozicionalva, a
   .views-row-inner::after gradiens adja az olvashatosagot. KEP NELKUL nincs
   hatterreteg -> a csempe sotet/ures marad, es a feher cim alig olvashato.

   A blognal ez a fallback mar megvan (custom.css), a Pszichologus valaszol
   csempein szinten - azokkal AZONOS szin kerul ide, hogy az egesz oldalon
   egyseges legyen: linear-gradient(160deg, #497e9e 0%, #2c3e50 70%).

   A :has() a kitoltott kepet nezi; ahol nincs kep, oda kerul a gradiens, es
   ott a sotetito ::after folosleges (a sajat gradiens mar ad kontrasztot).
   A KEPES csempeket egyik szabaly sem erinti. ASCII-only.
   ========================================================================= */
html body .programok-lista .views-row-inner:not(:has(.views-field-field-image img)) {
  background-image: linear-gradient(160deg, #497e9e 0%, #2c3e50 70%);
  border-radius: 10px;
  overflow: hidden;
}

html body .programok-lista .views-row-inner:not(:has(.views-field-field-image img))::after {
  display: none;
}

/* Kep nelkuli csempen a cim kapjon egy kis also teret, hogy ne tapadjon a
   csempe aljara (kepes csempenel a sotet gradiens miatt ez mar megvan). */
html body .programok-lista .views-row-inner:not(:has(.views-field-field-image img)) .views-field-title {
  padding-bottom: 1.1rem;
}