/* ==========================================================================
   events-list.css
   Scope:  Events listing page (module events, main.dwt - all languages).
   Purpose: Card grid redesign with event image, date badge, status chip
            and meta rows (date range, time, place).
   Notes:  4px radius rule. Buttons never use box-shadow; cards may.
           Uses CSS logical properties for RTL/LTR safety.
   ========================================================================== */

.fx-events{
  --fx-red:#a51313;
  --fx-red-2:#b91612;
  --fx-red-3:#d22923;
  --fx-ink:#1f2937;
  --fx-body:#3a3a3a;
  --fx-muted:#6b7280;
  --fx-line:#e7e9ee;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(290px,1fr));
  gap:26px;
  padding-block:10px 34px;
}

/* ---------- Card ---------- */
.fx-ev{
  display:flex;
  flex-direction:column;
  background:#fff;
  border:1px solid var(--fx-line);
  border-radius:4px;
  overflow:hidden;
  transition:transform .3s cubic-bezier(.22,.61,.36,1),box-shadow .3s ease,border-color .3s ease;
}
.fx-ev:hover{
  transform:translateY(-4px);
  box-shadow:0 16px 40px rgba(17,24,39,.12);
  border-color:rgba(165,19,19,.30);
}

/* ---------- Media ---------- */
.fx-ev__media{
  position:relative;
  display:block;
  aspect-ratio:16/9;
  background:#eef0f3;
  overflow:hidden;
}
.fx-ev__media img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.fx-ev:hover .fx-ev__media img{transform:scale(1.06);}

/* Placeholder when the event has no picture */
.fx-ev__ph{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
  background:linear-gradient(135deg,#1f2937,#3a3a3a);
}
.fx-ev__ph .fa{
  font-size:52px;
  color:rgba(255,255,255,.22);
}

/* ---------- Date badge ---------- */
.fx-ev__date{
  position:absolute;
  inset-block-end:12px;
  inset-inline-start:12px;
  background:rgba(165,19,19,.95);
  color:#fff;
  border-radius:4px;
  padding:7px 12px;
  text-align:center;
  line-height:1.15;
  min-width:58px;
}
.fx-ev__date .d{display:block;font-size:20px;font-weight:800;}
.fx-ev__date .m{display:block;font-size:11px;font-weight:600;opacity:.92;}
.fx-ev__date .y{display:block;font-size:11px;font-weight:600;margin-top:2px;opacity:.85;}

/* ---------- Status chip ---------- */
.fx-ev__status{
  position:absolute;
  inset-block-start:12px;
  inset-inline-end:12px;
  padding:4px 12px;
  border-radius:4px;
  font-size:12px;
  font-weight:700;
  color:#fff;
  line-height:1.6;
}
.fx-ev__status.is-upcoming{background:#0e7a3d;}
.fx-ev__status.is-ongoing{background:#b46905;}
.fx-ev__status.is-ended{background:#6b7280;}

/* ---------- Body ---------- */
.fx-ev__body{
  display:flex;
  flex-direction:column;
  flex:1 1 auto;
  padding:18px 18px 16px;
}
.fx-ev__title{
  margin:0 0 12px;
  font-size:16.5px;
  font-weight:700;
  line-height:1.75;
}
.fx-ev__title a{
  color:var(--fx-ink);
  text-decoration:none;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
  transition:color .25s ease;
}
.fx-ev__title a:hover{color:var(--fx-red);}
.fx-ev__title a:focus-visible{outline:2px solid rgba(165,19,19,.5);outline-offset:2px;}

/* ---------- Meta ---------- */
.fx-ev__meta{
  list-style:none;
  margin:auto 0 0;
  padding:12px 0 0;
  border-top:1px solid var(--fx-line);
  display:flex;
  flex-direction:column;
  gap:7px;
}
.fx-ev__meta li{
  display:flex;
  align-items:baseline;
  gap:9px;
  font-size:13.5px;
  color:var(--fx-muted);
  line-height:1.8;
}
.fx-ev__meta li .fa{
  color:var(--fx-red);
  font-size:14px;
  width:16px;
  text-align:center;
  flex:0 0 auto;
}
.fx-ev__meta li span{
  overflow:hidden;
  text-overflow:ellipsis;
  display:-webkit-box;
  -webkit-line-clamp:1;
  -webkit-box-orient:vertical;
}

/* ---------- Event detail page: hero picture ---------- */
.fx-ev-hero{
  margin:0 0 26px;
  border:1px solid #e7e9ee;
  border-radius:4px;
  overflow:hidden;
}
.fx-ev-hero img{
  display:block;
  width:100%;
  max-height:480px;
  object-fit:cover;
}

/* ---------- Event detail page: map embed ---------- */
.fx-ev-map{
  margin:26px 0;
  border:1px solid #e7e9ee;
  border-radius:4px;
  overflow:hidden;
}
.fx-ev-map iframe{
  display:block;
  width:100%;
  height:400px;
  border:0;
}

/* ---------- Responsive ---------- */
@media (max-width:640px){
  .fx-events{grid-template-columns:1fr;gap:20px;}
  .fx-ev-map iframe{height:300px;}
}

/* ---------- Motion preference ---------- */
@media (prefers-reduced-motion: reduce){
  .fx-ev,.fx-ev__media img{transition:none;}
  .fx-ev:hover{transform:none;}
  .fx-ev:hover .fx-ev__media img{transform:none;}
}