/* JEM Venue Detail – v1.0.17 */
:root{
  --dzg-brand:#060454;
  --dzg-container:1280px;
}
.jem-venue--wrap .container{max-width:var(--dzg-container);margin-inline:auto;padding-inline:clamp(8px,2vw,14px)}
.jem-venue__grid{display:grid;grid-template-columns:1.35fr .85fr;gap:clamp(16px,3vw,28px)}
@media (max-width:980px){.jem-venue__grid{grid-template-columns:1fr}}
.jem-chain>*+*{margin-top:clamp(14px,2.8vw,28px)}
.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:16px}
.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:flex-start;gap:12px;flex-wrap:wrap}
.jem-headcard__meta .spacer{flex:1 1 auto}

/* Actions — matches event look */
.jem-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.jem-actions .btn{cursor:pointer}
.jem-actions .btn--icon img{width:16px;height:16px;display:inline-block;vertical-align:middle}
.jem-actions .btn--icon{padding:.25rem .45rem;border:1px solid #00acf6;border-radius:10px;background:#00acf6;box-shadow:0 1px 2px rgba(0,0,0,.06)}
.jem-actions .btn--icon:hover{filter:brightness(.95)}

/* Address inner box */
.jem-addrbox{background:#f3f4f6;border:1px solid #e5e7eb;border-radius:12px;padding:12px 14px}
.jem-addr{display:flex;gap:10px;align-items:flex-start}
.jem-flagimg{border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.12)}
.jem-muted{color:#6b7280}
.jem-addr-nav{margin-top:10px}
.jem-nav-link{color:#00acf6;text-decoration:underline;font-weight:600}
.jem-nav-link:hover{text-decoration:none}

/* Map */
.jem-map{height:280px;background:#eef2f7;border-radius:12px}
@media (max-width:480px){.jem-map{height:220px}}

/* details toggler for map */
.jem-map-toggle summary{
  cursor:pointer; list-style:none; padding:8px 0; font-weight:600; color:#111827;
}
.jem-map-wrap{ margin-top:8px; }


/* v1.0.20 — wider blocks */
:root{
  --dzg-container: 1440px;     /* was 1280px */
  --dzg-grid-main: 1.8fr;       /* widen main column */
  --dzg-grid-side: 1fr;         /* keep sidebar readable */
}
.jem-venue__grid{
  grid-template-columns: var(--dzg-grid-main) var(--dzg-grid-side);
}
@media (min-width: 1560px){
  :root{ --dzg-container: 1600px; } /* give extra width on very wide screens */
}


/* v1.0.21 — mobile fix */
@media (max-width: 980px){
  .jem-venue__grid{ grid-template-columns: 1fr !important; }
  .jem-venue--wrap .container{ max-width:100% !important; padding-inline: clamp(10px, 4vw, 16px); }
}
@media (min-width: 981px){
  .jem-venue__grid{ grid-template-columns: var(--dzg-grid-main, 1.8fr) var(--dzg-grid-side, 1fr); }
}


/* v1.0.22 — stronger mobile widening */
.jem-venue--wrap{ overflow-x: hidden; }
.jem-venue--wrap .container{
  width: 100% !important;
  max-width: 100% !important;
  padding-left: clamp(12px, 4vw, 18px) !important;
  padding-right: clamp(12px, 4vw, 18px) !important;
}
.jem-card{ width: 100%; box-sizing: border-box; }

/* make 1 column up to larger breakpoint to avoid narrow columns on big phones/tablets */
@media (max-width: 1200px){
  .jem-venue__grid{
    grid-template-columns: 1fr !important;
    gap: clamp(10px, 3.2vw, 18px) !important;
  }
}


/* v1.0.23 — Mobile edge-to-edge width */
:root{
  --dzg-mobile-inset: clamp(6px, 3vw, 12px); /* minimal zijkant padding op mobiel */
}

.jem-venue--wrap{ margin:0; }
.jem-venue--wrap .container{
  width:100% !important;
  max-width:100% !important;
  padding-left: var(--dzg-mobile-inset) !important;
  padding-right: var(--dzg-mobile-inset) !important;
}

/* Zorg dat kaarten/cards echt full width worden */
.jem-card{ width:100%; margin-left:0; margin-right:0; box-sizing:border-box; }

/* 1 kolom tot 1200px (grote telefoons/tablets) */
@media (max-width: 1200px){
  .jem-venue__grid{
    grid-template-columns: 1fr !important;
    gap: clamp(10px, 3vw, 16px) !important;
  }
}

/* Iets krapper inset op super smalle toestellen */
@media (max-width: 390px){
  :root{ --dzg-mobile-inset: 6px; }
}


/* v1.0.24 — smaller mobile side padding + full-bleed tweak */
:root{ --dzg-mobile-inset: clamp(2px, 1.8vw, 8px); }  /* was 6–12px */

@media (max-width: 480px){
  .jem-venue--wrap .container{
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}
@media (max-width: 380px){
  .jem-venue--wrap .container{
    padding-left: 2px !important;
    padding-right: 2px !important;
  }
}

/* Optional: ultra edge-to-edge on tiny screens without breaking layout */
@media (max-width: 360px){
  .jem-venue--wrap{ overflow-x:hidden; }
  .jem-venue--wrap .container{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jem-card{ margin-left: 0; margin-right: 0; }
}


/* v1.0.25 — mobile 0px side padding */
:root{ --dzg-mobile-inset: 0px; }

/* 0px padding op alle mobiele/tussenbrede schermen tot 1200px */
@media (max-width: 1200px){
  .jem-venue--wrap .container{
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .jem-card{ margin-left: 0 !important; margin-right: 0 !important; width: 100% !important; box-sizing: border-box; }
  .jem-venue--wrap{ overflow-x: hidden; }
}


/* v1.0.26 — venue address font-size aligned with listing */
.jem-addrbox .line{ font-size: 1.25rem; line-height: 1.4; }      /* ≈ 20px */
.jem-addrbox .line.jem-muted{ font-size: 1.125rem; line-height: 1.45; } /* ≈ 18px */
@media (max-width: 390px){
  .jem-addrbox .line{ font-size: 1.1875rem; }     /* ≈ 19px tiny phones */
  .jem-addrbox .line.jem-muted{ font-size: 1.0625rem; } /* ≈ 17px */
}


/* v1.0.27 — match /locaties address styling */
.jem-addr{ 
  display:flex; 
  align-items:flex-start;              /* center align flag & text like listing */
  gap:0.35rem;                     /* same gap as listing */
  flex-wrap:wrap;
}
.jem-addrbox .line{ 
  margin:0;
  font-size:0.95rem;               /* ≈ listing size */
  line-height:1.4; 
  color:#444;                      /* listing color */
}
.jem-addrbox .line + .line{ margin-top:2px; }  /* subtle spacing for second line */
.jem-addrbox .line.jem-muted{ 
  font-size:0.95rem;               /* keep same size as first line per request */
  color:#444;                      /* or change to #6b7280 if you want it muted */
}
.jem-flagimg{
  width:18px; height:12px;         /* match listing */
  object-fit:cover;
  border:1px solid #ddd;
  border-radius:2px;
}

/* v1.0.28 — top-align flag with first address line */
.jem-flagimg{ margin-top: 1px; } /* slight optical nudge; increase to 2px if needed */