/* /modules/events/style.css */
/* Compact, miniature cards for lots of events. */

#ema-events-root.ema-events{
  font-family: system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:#0f172a;
}

/* header */
#ema-events-root .ema-header{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:baseline;
  justify-content:space-between;
  margin-bottom:10px;
}
#ema-events-root .ema-h2{ margin:0; font-size:24px; line-height:1.2; }
#ema-events-root .ema-h3{ margin:14px 0 8px; font-size:16px; }
#ema-events-root .ema-h4{ margin:0 0 6px; font-size:14px; line-height:1.2; }

/* tabs */
#ema-events-root .ema-tabs{ display:flex; gap:6px; flex-wrap:wrap; }
#ema-events-root .ema-tab{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.18);
  text-decoration:none;
  color:inherit;
  font-size:12px;
}
#ema-events-root .ema-tab.active{
  border-color:rgba(15,23,42,.55);
  font-weight:800;
}
#ema-events-root .ema-filter{ font-size:12px; }
#ema-events-root .ema-link{ color:inherit; text-decoration:underline; }

/* grid: stacked (tight) */
#ema-events-root .ema-grid.compact{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2-up default */
  gap:12px;
  align-items:stretch;
}

/* card */
#ema-events-root .ema-card{
  border:1px solid rgba(15,23,42,.14);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}

/* NEW: row card layout */
#ema-events-root .ema-card.ema-rowcard{
  display:grid;
  grid-template-columns:150px 1fr; /* bigger flyer preview */
  gap:10px;
  padding:10px;                   /* tight */
  align-items:center;
}

#ema-events-root .ema-card-body{ padding:0; }

#ema-events-root .ema-card-top{
  display:flex;
  gap:6px;
  flex-wrap:wrap;
  align-items:center;
  margin-bottom:4px;
}

#ema-events-root .ema-row{ font-size:12px; margin:2px 0; }
#ema-events-root .ema-muted{ opacity:.75; }
#ema-events-root .ema-empty{ opacity:.8; margin:6px 0 10px; }

/* Larger miniature flyer "window" — fits full flyer, no crop */
#ema-events-root .ema-thumb-window{
  width:150px;
  height:200px; /* bigger than before, still compact */
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(15,23,42,.03);
  border:1px solid rgba(15,23,42,.10);
  border-radius:12px;
  padding:6px;
  box-sizing:border-box;
}

#ema-events-root .ema-thumb-link{ display:block; width:100%; height:100%; }
#ema-events-root .ema-thumb-img{
  max-width:100%;
  max-height:100%;
  object-fit:contain; /* key: entire flyer fits */
  display:block;
  border-radius:10px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
}

#ema-events-root .ema-thumb-empty{
  font-size:12px;
  opacity:.7;
}

/* buttons: smaller */
#ema-events-root .ema-btn{
  display:inline-block;
  margin-top:6px;
  padding:7px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:800;
  font-size:12px;
  background:#0b1220;
  color:#fff;
}
#ema-events-root .ema-btn.secondary{
  background:transparent;
  color:#0b1220;
  border:1px solid rgba(15,23,42,.25);
}

/* badges */
#ema-events-root .ema-badge{
  display:inline-block;
  padding:2px 8px;
  border-radius:999px;
  font-size:11px;
  font-weight:900;
  border:1px solid rgba(15,23,42,.22);
  background:rgba(15,23,42,.03);
}
#ema-events-root .ema-badge-fed{ border-color:rgba(124,58,237,.35); background:rgba(124,58,237,.08); }
#ema-events-root .ema-badge-pin{ border-color:rgba(180,83,9,.35); background:rgba(180,83,9,.10); }

/* detail page */
#ema-events-root .ema-detail .ema-topbar{ margin-bottom:10px; }
#ema-events-root .ema-meta{
  display:flex; flex-wrap:wrap; gap:10px; align-items:center;
  margin:8px 0 12px;
}
#ema-events-root .ema-meta-item{ font-size:12px; opacity:.85; }

#ema-events-root .ema-poster img{
  width:100%;
  max-width:920px;
  height:auto;
  display:block;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
}

#ema-events-root .ema-facts{
  margin-top:12px;
  padding:12px;
  border-radius:12px;
  border:1px solid rgba(15,23,42,.14);
  background:rgba(15,23,42,.02);
  max-width:920px;
}
#ema-events-root .ema-ul{ margin:8px 0 0; padding-left:18px; font-size:13px; }
#ema-events-root .ema-note{ opacity:.75; font-size:12px; }
#ema-events-root .ema-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:10px; }
#ema-events-root .ema-desc{ margin-top:12px; max-width:920px; }
#ema-events-root .ema-tags{ margin-top:14px; max-width:920px; }
#ema-events-root .ema-tag-row{ display:flex; flex-wrap:wrap; gap:8px; }
#ema-events-root .ema-tag, #ema-events-root .ema-tag-static{
  display:inline-block;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.18);
  text-decoration:none;
  color:inherit;
  font-size:12px;
}

/* responsive: stack image on top on small screens */
@media (max-width: 520px){
  #ema-events-root .ema-card.ema-rowcard{
    grid-template-columns:1fr;
  }
  #ema-events-root .ema-thumb-window{
    width:100%;
    height:220px;
  }
}
/* ===== Event Detail Two-Column Layout (Title full width, Flyer 50%, Info 50%) ===== */
#ema-events-root.ema-detail-page{
  margin-top: 10px;
}

/* Back to Events pill button */
#ema-events-root .ema-back-btn{
  display:inline-block;
  margin-bottom:10px;
  padding:6px 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  text-decoration:none;
  background:rgba(15,23,42,.08);
  color:#0f172a;
  border:1px solid rgba(15,23,42,.20);
}

/* Detail title */
#ema-events-root .ema-detail-title{
  margin: 6px 0 4px;
  font-size: 26px;
  line-height: 1.2;
}

/* Two-column grid */
#ema-events-root .ema-detail-grid{
  display:grid;
  grid-template-columns: 1fr 1fr; /* 50/50 */
  gap: 20px;
  margin-top: 14px;
  align-items: start;
}

/* Flyer */
#ema-events-root .ema-detail-left{
  text-align:center;
}
#ema-events-root .ema-detail-flyer{
  width: 100%;
  max-height: 520px;
  object-fit: contain;
  border-radius: 14px;
  border: 1px solid rgba(15,23,42,.15);
  background: #fff;
  display:block;
}

/* Facts panel tweaks for two-column */
#ema-events-root .ema-detail-right .ema-facts{
  margin-top: 0;
  max-width: none;
}

/* Mobile stacking */
@media (max-width: 900px){
  #ema-events-root .ema-detail-grid{
    grid-template-columns: 1fr;
  }
  #ema-events-root .ema-detail-flyer{
    max-height: 420px;
  }
}

/* ===== Readability overlays for Event Detail (transparent panels) ===== */
#ema-events-root.ema-detail-page .ema-detail-title{
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
  display: inline-block;
}

#ema-events-root.ema.detail-page .ema-meta,
#ema-events-root.ema-detail-page .ema-meta{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 8px 10px;
  backdrop-filter: blur(6px);
}

#ema-events-root.ema-detail-page .ema-detail-right .ema-facts{
  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15,23,42,.12);
  box-shadow: 0 6px 20px rgba(15,23,42,.08);
  backdrop-filter: blur(6px);
}

#ema-events-root.ema-detail-page .ema-desc{
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 12px 14px;
  backdrop-filter: blur(6px);
}

#ema-events-root.ema-detail-page .ema-tags{
  background: rgba(255,255,255,.60);
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 14px;
  padding: 10px 12px;
  backdrop-filter: blur(6px);
}


/* 1-up on smaller screens */
@media (max-width: 900px){
  #ema-events-root .ema-grid.compact{
    grid-template-columns: 1fr;
  }
}

/* 3-up on wide screens */
@media (min-width: 1200px){
  #ema-events-root .ema-grid.compact{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ===== PRE description containment (admin may wrap plain text in <pre>) ===== */
#ema-events-root.ema-detail-page .ema-desc{
  width: 100%;
  max-width: none; /* allow full width of the module container */
  box-sizing: border-box;
}

#ema-events-root.ema-detail-page .ema-desc pre{
  margin: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  white-space: pre-wrap;      /* keep formatting but wrap to container */
  word-break: break-word;
  overflow-wrap: anywhere;
  overflow-x: auto;           /* only if something truly can't wrap */
}

#ema-events-root.ema-detail-page .ema-desc pre code{
  white-space: inherit;
}

/* Keywords box can also use full width */
#ema-events-root.ema-detail-page .ema-tags{
  max-width: none;
  box-sizing: border-box;
}

/* ===== Mobile: center flyer thumbnail on listing cards ===== */
@media (max-width: 520px){
  #ema-events-root .ema-thumb-window{
    margin-left: auto;
    margin-right: auto;
  }
  #ema-events-root .ema-thumb-img{
    margin-left: auto;
    margin-right: auto;
  }
}