/*
 * TE Events – Közelgő események modul, "mainpage" elrendezés.
 * Szándékosan önálló, minimális CSS: csak ez a nézet használja, a
 * meglévő oldal-CSS-hez (pl. a régi modul helyén maradt stílusokhoz)
 * nem nyúl hozzá.
 *
 * A --te-badge-size a dátumdoboz oldalhossza (mindig négyzet); ebből
 * számolódik a kép aljából kilógó fele és a kártyatörzs felső paddingje,
 * hogy a jelvény sose fedje el a cím szövegét.
 */

.teevents-mainpage {
   --te-badge-size: 56px;

   display: grid;
   grid-template-columns: repeat(4, minmax(0, 1fr));
   gap: 20px;
}

.teevents-mainpage .event {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: inherit;
   background: #fff;
   border-radius: var(--border-radius);
   overflow: hidden;
   transition: box-shadow 0.15s ease;
}

.teevents-mainpage .event:hover {
   box-shadow: 0px 0px 12px hsla(var(--black), 0.4);
}

.teevents-mainpage .eventImage {
   position: relative;
   display: block;
   aspect-ratio: 260 / 350;
   background-color: #e5e7eb;
   background-size: cover;
   background-position: center;
}

/* Mindig négyzet alakú jelvény, a kép aljához igazítva úgy, hogy pontosan
   a fele lógjon ki a képből (a másik fele még a képen belül van). */
.teevents-mainpage .eventDateBadge {
   position: absolute;
   bottom: 0;
   left: 16px;
   transform: translateY(50%);
   z-index: 1;

   width: var(--te-badge-size);
   height: var(--te-badge-size);
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border-radius: var(--border-radius);
   color: #fff;
   line-height: 1.1;
}

.teevents-mainpage .eventDateMonth {
   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.04em;
   text-transform: uppercase;
}

.teevents-mainpage .eventDateDay {
   font-size: 20px;
   font-weight: 700;
}

.teevents-mainpage .eventBody {
   display: flex;
   flex-direction: column;
   /* A tagok közti térközt innentől a saját margin-bottom-juk adja
      (h3, .eventLocation), nem egy közös gap — így külön állítható. */
   /* A felső padding teret hagy a képből félig kilógó jelvénynek, hogy az
      sose fedje a címet: a jelvény magasságának fele + egy kis rés. */
   padding: calc(var(--te-badge-size) / 2 + 12px) 16px 18px;
}

.teevents-mainpage h3 {
   margin: 0 0 5px;
   font-size: 24px;
   line-height: 1.2;
   color: hsla(var(--blue), 1);
}

.teevents-mainpage .eventLocation {
   font-size: 12px;
   margin-bottom: 5px;
   text-transform: uppercase;
   color: hsla(var(--midGray), 1);
}

.teevents-mainpage .eventDetails {
   display: flex;
}

.teevents-mainpage .eventTime {
   font-size: 16px;
   color: hsla(var(--blue), 1);
}

@media (max-width: 992px) {
   .teevents-mainpage {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }
}

@media (max-width: 520px) {
   .teevents-mainpage {
      grid-template-columns: 1fr;
   }
}