/* =========================================================================
   METRO CSEMPÉS ELRENDEZÉS  –  Drupal "list-news" view (.view-list-news)
   Bizreview smink kiegészítő CSS.

   Viselkedés:
   - Alapból CSAK a cím látszik a csempén.
   - Hoverre a kép NEM mozdul; a cím egy sorral feljebb ugrik, és alatta
     megjelenik a dátum, majd a (linkelt) szerző neve.
   - Nincs Twig sablon felülírás. Frissítésbiztos.
   ========================================================================= */

/* ---- 1) A RÁCS KONTÉNER -------------------------------------------------
   FONTOS: a sormagasságot !important-tal kényszerítjük ki, mert a Barrio/
   Bizreview alapból összenyomná a sorokat a tartalom (cím) magasságára.
   A ~290px sormagasság az Untitled-1.jpg arányaihoz van hangolva:
   nagy csempe ≈ 668×588 (mint a minta 650×572), kis csempék ~négyzetesek. */
.view-list-news .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;
}
.view-list-news .views-row {
  width: auto !important;
  max-width: none !important;
  float: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 290px;            /* biztonsági háló, ha a grid-auto-rows nem fogna */
}

/* ---- 2) A METRO MINTA (7 elemenként ismétlődik) ------------------------- */
.view-list-news .views-row:nth-child(7n + 1) {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 588px;            /* 2 sor + rés, hogy nagyban se essen össze */
}
.view-list-news .views-row:nth-child(7n + 2) { grid-column: span 2; }
.view-list-news .views-row:nth-child(7n + 3) { grid-column: span 2; }

/* ---- 3) A CSEMPE BELSEJE ----------------------------------------------- */
.view-list-news .views-row-inner {
  position: relative;
  height: 100% !important;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;      /* tartalom a csempe aljára */
  overflow: hidden;
  border-radius: 10px;            /* lekerekített sarkok (mind a négy) */
}

/* Kép = háttérréteg, kitölti a csempét. NINCS hover-mozgás. */
.view-list-news .views-field-field-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  margin: 0;
}
.view-list-news .views-field-field-image,
.view-list-news .views-field-field-image .field-content,
.view-list-news .views-field-field-image a {
  display: block;
  height: 100%;
}
.view-list-news .views-field-field-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
}

/* Sötét átmenet a szöveg olvashatóságához */
.view-list-news .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) SZÖVEGMEZŐK – sorrend: cím, dátum, szerző ---------------------- */
.view-list-news .views-field-title,
.view-list-news .views-field-created,
.view-list-news .views-field-name {
  position: relative;
  z-index: 2;
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}
.view-list-news .views-field-title  { order: 0; }
.view-list-news .views-field-created { order: 1; }   /* dátum a cím alatt */
.view-list-news .views-field-name    { order: 2; }   /* szerző legalul */

/* --- CÍM: mindig látszik --- */
.view-list-news .views-field-title {
  padding-top: .35rem;
  padding-bottom: 1.1rem;                 /* nyugalmi: cím a csempe aljától */
  transition: padding-bottom .28s ease;
}
.view-list-news .views-row-inner:hover .views-field-title {
  padding-bottom: .12rem;                 /* hoverre feljebb ugrik */
}
.view-list-news .views-row .views-field-title a,
.view-list-news .views-row .views-field-title a:hover,
.view-list-news .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);
}
/* Minden csempén a nagy (első csempés) címméret */
.view-list-news .views-row .views-field-title a {
  font-size: 1.9rem;
  font-weight: 800;
}

/* --- DÁTUM + SZERZŐ: alapból rejtve, hoverre lecsúszva megjelenik --- */
.view-list-news .views-field-created,
.view-list-news .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;
}
.view-list-news .views-row-inner:hover .views-field-created {
  max-height: 2em;
  opacity: 1;
  transform: none;
  padding-top: .12rem;
}
.view-list-news .views-row-inner:hover .views-field-name {
  max-height: 2em;
  opacity: 1;
  transform: none;
  padding-top: .12rem;
  padding-bottom: 1.1rem;                 /* legalsó elem a csempe aljától */
}

/* Szerző neve linkként, fehéren */
.view-list-news .views-field-name a,
.view-list-news .views-field-name a:hover,
.view-list-news .views-field-name a:focus {
  color: #fff !important;
  font-weight: 600;
  text-decoration: underline !important;
}

/* Komment-számláló elrejtve a metro nézetben */
.view-list-news .views-field-comment-count,
.view-list-news .views-field-comment-node-comment {
  display: none !important;
}

/* ---- 5) RESPONZÍV TÖRÉSPONTOK ------------------------------------------ */
@media (min-width: 768px) and (max-width: 991px) {
  .view-list-news .view-content { grid-template-columns: repeat(2, 1fr); }
  .view-list-news .views-row:nth-child(7n + 2),
  .view-list-news .views-row:nth-child(7n + 3) { grid-column: auto; grid-row: auto; }
}
@media (max-width: 767px) {
  /* Egy oszlop: soronként egy csempe, egymás alatt */
  .view-list-news .view-content {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;       /* magasság a képarányból jön */
  }
  /* Minden csempe az ELSŐ (nagy) csempe arányát veszi fel (668:588) */
  .view-list-news .views-row,
  .view-list-news .views-row:nth-child(7n + 1),
  .view-list-news .views-row:nth-child(7n + 2),
  .view-list-news .views-row:nth-child(7n + 3) {
    grid-column: auto !important;
    grid-row: auto !important;
    min-height: 0 !important;              /* a fix min-magasságok kikapcsolva */
    aspect-ratio: 668 / 588;               /* = az első csempe aránya */
  }
  /* Mobilon nincs hover: a dátum és a szerző MINDIG látszik */
  .view-list-news .views-field-created,
  .view-list-news .views-field-name {
    max-height: 2em;
    opacity: 1;
    transform: none;
    padding-top: .12rem;
  }
  .view-list-news .views-field-name { padding-bottom: 1.1rem; }
  .view-list-news .views-field-title { padding-bottom: .12rem; }  /* cím feljebb, hely a metának */
}


.programok-lista .programok-lista__author-photo img {
  width: 48px;   /* <- ehhez igazítsd */
  height: 48px;  /* <- ehhez igazítsd */
}