/* =========================================================
   events.css — Events & Public Holidays (нүүр хуудас)
   Дээд мөр: 2 өргөн карт, доод мөр: 3 карт. Зураг дээр текст, хулгана очиход тайлбар гарна
   ========================================================= */
.events { background: var(--ivory); }

.events-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: 320px 280px;
  gap: 20px;
}
.event-card {
  position: relative;
  grid-column: span 2;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  border-radius: 16px;
  color: #fff;
  text-decoration: none;
  background: var(--altai-forest);
  isolation: isolate;
}
.event-card--wide { grid-column: span 3; }

.event-card img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.event-card::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to bottom, rgba(12, 20, 16, 0) 35%, rgba(12, 20, 16, 0.82));
  transition: background 0.3s;
}
.event-card:hover img { transform: scale(1.06); }
.event-card:hover::after { background: linear-gradient(to bottom, rgba(12, 20, 16, 0.1) 15%, rgba(12, 20, 16, 0.88)); }
.event-card:focus-visible { outline: 3px solid var(--sand-gold); outline-offset: 3px; }

.event-tag {
  position: absolute; top: 16px; left: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--altai-forest);
}

.event-body { padding: 22px 24px; }
.event-card h3 {
  font-size: clamp(1.1rem, 1.6vw, 1.35rem);
  line-height: 1.25;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
}
.event-card--wide h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
/* Тайлбар ба "Read the story": хулгана очиход гарч ирнэ */
.event-card p,
.event-more {
  max-height: 0; opacity: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, opacity 0.3s, margin 0.3s;
}
.event-card p { font-size: 0.92rem; line-height: 1.55; }
.event-more {
  display: inline-flex; gap: 8px;
  font-size: 0.85rem; font-weight: 700;
  color: var(--sand-gold);
}
.event-card:hover p,
.event-card:focus-visible p { max-height: 80px; opacity: 0.92; margin-top: 8px; }
.event-card:hover .event-more,
.event-card:focus-visible .event-more { max-height: 30px; opacity: 1; margin-top: 10px; }

/* Мэдрэгч дэлгэц: hover байхгүй тул тайлбар үргэлж харагдана */
@media (hover: none) {
  .event-card p { max-height: none; opacity: 0.92; margin-top: 8px; }
  .event-more { max-height: none; opacity: 1; margin-top: 10px; }
}

/* Таблет: 2 багана */
@media (max-width: 1024px) {
  .events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; grid-auto-rows: 280px; }
  .event-card, .event-card--wide { grid-column: span 1; }
  .event-card:last-child { grid-column: 1 / -1; }
}

/* Гар утас: хажуу тийш гүйлгэнэ */
@media (max-width: 640px) {
  .events-grid {
    display: flex; gap: 14px;
    margin: 0 -16px; padding: 0 16px 6px;
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 16px;
    scrollbar-width: none;
  }
  .events-grid::-webkit-scrollbar { display: none; }
  .event-card, .event-card--wide { flex: 0 0 82%; height: 340px; scroll-snap-align: start; }
}