/* JEM Event Detail – v8-card3 */
:root{
  --dzg-badge-bg:#4b5563;
  --dzg-meta-bg:#f5f7fa;
  --dzg-meta-border:#e9edf2;

  --dzg-brand:#060454;
  --dzg-container:1280px; /* makkelijk aan te passen */
}

.jem-event--wrap .container {
  max-width: var(--dzg-container);
  margin-inline: auto;
  padding-inline: clamp(8px, 2vw, 14px);
}

/* Grid */
.jem-event__grid {
  display: grid;
  gap: 18px;
  margin: 6px auto 28px;
  grid-template-columns: minmax(0, 1fr) 400px; /* bredere sidebar */
}
@media (max-width: 1100px) {
  .jem-event__grid { grid-template-columns: 1fr; }
}

.jem-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 6px 16px rgba(16,24,40,.06);
  overflow: hidden;
}
.jem-card__title {
  margin: 0;
  padding: 14px 16px;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 700;
  background: var(--dzg-brand);
  color:#fff;
  border-bottom: 1px solid var(--dzg-brand);
}
.jem-card__body { padding: 14px; }
.jem-card__body p { margin: 0 0 12px; }
.jem-card__body h3, .jem-card__body h4 { margin: 16px 0 8px; }

/* Headcard (match agenda look) */
.jem-headcard__media img {
  display:block; width:100%; height:auto;
  aspect-ratio: 16/9; object-fit: cover;
  border-bottom: 1px solid #eef0f3;
}
.jem-headcard__body { padding: 12px 14px 12px; }
.jem-headcard__title {
  margin:0 0 8px;
  font-size: clamp(22px, 3.2vw, 34px);
  line-height: 1.15;
  color: var(--dzg-brand);
}
.jem-headcard__meta {
  display:flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.jem-headcard__meta .spacer { flex:1 1 auto; }

/* Small date badge like agenda card */
.jem-badge-date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:var(--dzg-badge-bg);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.12);}
.jem-badge-date .d{font-size:20px;line-height:1;}
.jem-badge-date .m{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.95;}

.jem-headcard__meta-lines .line { line-height:1.35; color:#111827; }
.jem-headcard__meta-lines .line.loc { color:#374151; }
.jem-headcard__meta-lines .weekday { text-transform: lowercase; }
.jem-headcard__meta-lines .time { margin-left:8px; }

/* Map */
.jem-map-toggle summary {
  cursor: pointer; list-style:none; padding:8px 0; font-weight:600; color:#111827;
}
.jem-map-wrap { margin-top:8px; }
.jem-map { height: 280px; background:#eef2f7; border-radius: 12px; }

/* Registratie avatars */
#jem-registratie .jem-card__body img,
.jem-reg img {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; vertical-align: middle;
}
.jem-reg .avatar, .jem-reg .user, .jem-reg li, .jem-reg .attendee {
  display: inline-flex; align-items: center; gap: 8px;
}

/* Buttons */
.jem-btn--cta {
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 14px; border-radius: 10px; text-decoration:none;
}

@media (max-width: 480px) {
  .jem-badge-date{display:inline-flex;flex-direction:column;align-items:center;justify-content:center;width:56px;height:56px;border-radius:12px;background:var(--dzg-badge-bg);color:#fff;font-weight:700;box-shadow:0 3px 10px rgba(0,0,0,.12);}
  .jem-badge-date .d{font-size:20px;line-height:1;}
  .jem-badge-date .m{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.95;}
  .jem-headcard__meta { gap: 10px; }
}


/* v8-card5: sterkere regel voor minder zijruimte op mobiel */
.jem-event--wrap .jem-event__grid.container{
  padding-left: clamp(6px, 2vw, 12px) !important;
  padding-right: clamp(6px, 2vw, 12px) !important;
}
@media (max-width: 420px){
  .jem-event--wrap .jem-event__grid.container{
    padding-left: 6px !important;
    padding-right: 6px !important;
  }
}

/* v8-card5: kleine witruimte onder elk blok */
.jem-event__main > .jem-card,
.jem-event__aside > .jem-card{
  margin-bottom: 10px;
}
/* extra scheiding onder de headcard */
.jem-headcard{ margin-bottom: 10px; }

/* v8-card6: lichtgrijze panel voor datum/tijd/loc zoals events-card */
.jem-headcard__meta{
  background: var(--dzg-meta-bg);
  border: 1px solid var(--dzg-meta-border);
  border-radius: 12px;
  padding: 10px 12px;
}

/* Zorg dat CTA knop niet te dicht op rand staat op kleine schermen */
@media (max-width: 480px){
  .jem-headcard__meta{ padding: 10px; }
  .jem-badge-date{ width:52px; height:52px; }
  .jem-badge-date .d{ font-size:19px; }
}

/* header: time-only row replacing location link */
.jem-headcard__meta-lines .time-only{ color:#111827; }


/* header rows: ensure left alignment and compact spacing */
.jem-headcard__meta-lines{ display:flex; flex-direction:column; gap:2px; }
.jem-headcard__meta-lines .line,
.jem-headcard__meta-lines .time-only{ margin:0; padding:0; }


/* header meta: align badge (col 1), text (col 2), CTA (col 3) */
.jem-headcard__meta{
  display:grid;
  grid-template-columns: auto 1fr auto;
  align-items:center;
  column-gap: 12px;
}
.jem-headcard__meta .spacer{ display:none; }
.jem-headcard__meta-lines{ display:flex; flex-direction:column; gap: 2px; }
.jem-headcard__meta-lines .line{ margin:0; padding:0; }
.jem-headcard__meta-lines .time-row{ color:#111827; }

@media (max-width: 480px){
  .jem-headcard__meta{ column-gap: 10px; }
}


/* v8-card6_headerfix3_regfix: layout fixes for Registratie block */
/* Registered users wrap nicely with spacing */
.jem-reg > ul,
.jem-reg .attendees,
.jem-reg .jem-attendees,
.jem-reg .registered-users,
.jem-reg .user-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding-left: 0;
  margin: 6px 0 8px;
}
.jem-reg li{
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.jem-reg a, .jem-reg span{ line-height: 1.25; }

/* Ensure avatars + check icons don't overlap */
.jem-reg img{ vertical-align: middle; }
.jem-reg .icon-ok, .jem-reg .fa-check, .jem-reg .fa-check-circle{ margin-right: 4px; }

/* Textarea (toelichting) stays within the card */
.jem-reg textarea,
.jem-reg input[type="text"],
.jem-reg select{
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
}
.jem-reg textarea{ min-height: 120px; }

/* Keep radio rows neat */
.jem-reg input[type="radio"]{ vertical-align: middle; margin-right: 6px; }


/* v8-card6_headerfix3_regfix2: align & group the decision radios + textarea */
.jem-reg{ text-align: left; }

/* Maak de hele beslis-sectie (radio's + toelichting) visueel een groep:
   - beetje extra ruimte erboven
   - alle elementen links laten beginnen
*/
.jem-reg form{ 
  margin-top: 10px;
}
.jem-reg form *{
  text-align: left;
}
/* verwijder willekeurige left-indents uit JEM templates */
.jem-reg form .form-group,
.jem-reg form p,
.jem-reg form label,
.jem-reg form .control-label,
.jem-reg form .controls{
  margin-left: 0 !important;
  padding-left: 0 !important;
}

/* radio rijen strak en links */
.jem-reg form label{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 6px 0;
}
.jem-reg input[type="radio"]{ margin-right: 6px; }

/* textarea volledig binnen het blok en direct onder de radio's */
.jem-reg textarea{
  width: 100% !important;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: 8px;
  min-height: 120px;
}

/* kleine marge boven de submitknop, links uitlijnen */
.jem-reg input[type="submit"],
.jem-reg button[type="submit"],
.jem-reg .btn-primary{
  margin-top: 10px;
  align-self: flex-start;
}


/* v8-card6_headerfix3_regfix3: ul.eventlist padding tweak */
.jem-event--wrap ul.eventlist{
  padding-left: 0 !important;
  padding-top: 2rem;
}


/* v8-card6_headerfix3_regfix4: geregistreerde gebruikers onder elkaar */
.jem-reg > ul,
.jem-reg .attendees,
.jem-reg .jem-attendees,
.jem-reg .registered-users,
.jem-reg .user-list{
  display: block !important;
  padding-left: 0;
  margin: 6px 0 8px;
}
.jem-reg li{
  list-style: none;
  display: flex !important;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  border-bottom: 1px solid rgba(0,0,0,.05);
}
.jem-reg li:last-child{ border-bottom: 0; }

/* v28 - locatie card + title size */
#jem-locatie .jem-venue-name a, #jem-locatie .jem-venue-name strong { font-size: 1.25rem; font-weight: 700; }
.jem-addr{display:flex;align-items:flex-start;gap:10px;background:#f5f7fa;border:1px solid #e9edf2;padding:12px 14px;border-radius:12px;margin:.5rem 0 .35rem}
.jem-flagimg{display:inline-block;vertical-align:text-top;margin-top:2px;border-radius:2px}
.jem-addr__lines{display:flex;flex-direction:column;gap:4px}
.jem-addr__l1{font-size:1.05rem;color:#3a3f45}
.jem-addr__l2{color:#6b7280}
.jem-venue-links{display:flex;gap:16px;flex-wrap:wrap;align-items:center;margin:.6rem 0 .4rem;border-top:1px solid #eef0f3;padding-top:.6rem}
.jem-venue-links a, .jem-venue-links summary{color:#21a0e8;text-decoration:underline;cursor:pointer}
.jem-venue-links details{display:inline}
.jem-venue-links details[open]{width:100%}
.jem-venue-links details>summary{list-style:none}
.jem-venue-links details>summary::-webkit-details-marker{display:none}
.jem-map{min-height:280px;border-radius:10px;background:#eaf0f5}

/* v29 - custom SVG marker */
.leaflet-marker-icon.jem-map-marker{will-change: transform}

/* v31 - WhatsApp icon align */
.jem-actions .btn--icon img{vertical-align:middle;display:inline-block}

/* v32 - whatsapp align (idempotent) */
.jem-actions .btn--icon img{vertical-align:middle;display:inline-block}

/* v33 - whatsapp icon align */
.jem-actions .btn--icon img{vertical-align:middle;display:inline-block}

/* v36 - restore compact icon size */
.jem-actions .btn--icon img{width:16px;height:16px;vertical-align:middle;display:inline-block}
.jem-actions .btn--icon span[aria-hidden="true"]{font-size:16px;line-height:1;display:inline-block}
.jem-actions .btn--icon{padding:.25rem .45rem}