/* ==========================================================================
   CityLight — Deze week
   Eén regel per dag in plaats van een tabel, zodat het ook op een telefoon
   leesbaar blijft. Lege dagen worden weggelaten.
   ========================================================================== */

.cl-week, .cl-week *{box-sizing:border-box;}

/* De secties van het ontwerp zetten hun inhoud links uit (align-items:flex-start).
   Een blok krijgt dan de breedte van zijn eigen inhoud in plaats van de volle
   breedte — hier werd het 568 px in een kolom van 860. Deze twee regels dwingen
   het af, zowel op het blok als op de widget eromheen. */
.cl-week{width:100%; align-self:stretch;}
.elementor-widget-shortcode:has(.cl-week),
.elementor-widget-text-editor:has(.cl-week),
.prose > *:has(.cl-week){width:100% !important; align-self:stretch !important;}

.cl-week{
  background:#0A2327; border:1px solid rgba(255,255,255,.08);
  border-radius:24px; overflow:hidden;
  font-family:Inter,-apple-system,Segoe UI,Roboto,sans-serif;
  color:#EFFAFA; text-align:left;
}

.cl-week-kop{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 18px;
  padding:26px 30px; border-bottom:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg,rgba(0,171,172,.10),rgba(0,171,172,0));
}
.cl-week-kop h2{
  font-family:Sora,Inter,sans-serif; font-size:clamp(20px,2.6vw,30px);
  font-weight:800; margin:0; letter-spacing:-.4px; color:#EFFAFA;
}
.cl-week-kop span{color:#9FBEC0; font-size:15.5px; font-weight:500;}

.cl-week-dag{
  display:grid; grid-template-columns:184px 1fr;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.cl-week-dag:last-of-type{border-bottom:0;}
.cl-week-dag.zondag{background:rgba(0,171,172,.07);}

.cl-week-datum{
  padding:18px 24px; display:flex; flex-direction:column; gap:2px;
  border-right:1px solid rgba(255,255,255,.06);
}
.cl-week-datum b{font-family:Sora,Inter,sans-serif; font-size:17px; font-weight:700;}
.cl-week-datum small{color:#9FBEC0; font-size:14px; font-variant-numeric:tabular-nums;}
.cl-week-dag.zondag .cl-week-datum b{color:#00ABAC;}

.cl-week-items{padding:12px 24px; display:flex; flex-direction:column; justify-content:center;}
.cl-week-item{display:flex; align-items:baseline; gap:16px; padding:6px 0;}
.cl-week-tijd{
  flex:0 0 auto; min-width:124px; color:#1FC4C5; font-weight:600;
  font-size:15.5px; font-variant-numeric:tabular-nums;
}
.cl-week-naam{font-size:17px; font-weight:500;}
.cl-week-naam a{color:inherit; text-decoration:none; border-bottom:1px solid rgba(31,196,197,.4);}
.cl-week-naam a:hover{border-bottom-color:#1FC4C5;}

.cl-week-voet{
  padding:18px 30px; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:12px 22px; align-items:center;
  color:#6F9294; font-size:14px;
}
.cl-week-knop{
  display:inline-flex; align-items:center; gap:8px; padding:11px 22px;
  border-radius:999px; background:#F2A93C; color:#0A1A1B !important;
  font-weight:600; font-size:15px; text-decoration:none;
}
.cl-week-knop:hover{background:#FFC46B;}

.cl-week-leeg{padding:26px 30px; color:#9FBEC0;}

@media (max-width:720px){
  .cl-week-dag{grid-template-columns:1fr;}
  .cl-week-datum{
    flex-direction:row; align-items:baseline; gap:10px;
    border-right:0; border-bottom:1px solid rgba(255,255,255,.06); padding-bottom:10px;
  }
  .cl-week-item{flex-direction:column; gap:0;}
  .cl-week-tijd{min-width:0;}
}

/* ---- op het scherm in de zaal: compacter, want daar telt elke pixel ---- */
.cl-loop .cl-week{background:transparent; border:0; border-radius:0;}
.cl-loop .cl-week-kop, .cl-loop .cl-week-voet{display:none;}
.cl-loop .cl-week-dag{
  grid-template-columns:clamp(150px,15vw,260px) 1fr;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.cl-loop .cl-week-datum{padding:clamp(6px,1.1vh,14px) 0; border-right:0;}
.cl-loop .cl-week-datum b{font-size:clamp(15px,2.5vh,29px);}
.cl-loop .cl-week-datum small{font-size:clamp(12px,1.9vh,22px);}
.cl-loop .cl-week-items{padding:clamp(6px,1.1vh,14px) 0;}
.cl-loop .cl-week-item{padding:clamp(1px,.35vh,5px) 0;}
.cl-loop .cl-week-tijd{min-width:clamp(96px,10vw,190px); font-size:clamp(13px,2.1vh,25px);}
.cl-loop .cl-week-naam{font-size:clamp(14px,2.3vh,27px);}
.cl-loop .cl-week-dag.zondag{background:rgba(0,171,172,.10);}