/* ==========================================================================
   CityLight — Samenkomsten

   Dit blok gebruikt bewust dezelfde klassenamen als "Deze week", zodat het er
   precies zo uitziet. Draait die plugin, dan komt de opmaak daarvandaan en
   staat hieronder alleen het kleine beetje extra. Draait hij niet, dan doet
   het stuk onderaan dienst als kopie.
   ========================================================================== */

/* ---------- het extra stukje: de spreker onder de naam ---------- */
.cl-week-spreker{
  display:block; color:#9FBEC0; font-size:15px; font-weight:400; margin-top:2px;
}
.cl-week-toelichting .cl-week-naam{color:#9FBEC0; font-size:15px;}

/* ---------- de leeskolom ----------

   Op de homepage staat dit blok in een sectie die de volle breedte pakt, en
   dan loopt het van rand tot rand terwijl de rest van de pagina netjes
   inspringt. Nagemeten op citylightalkmaar.nl: elke gewone sectie is precies
   1160 px breed en gecentreerd — op 1920 loopt hij van 380 tot 1540, op 1600
   van 220 tot 1380. Onder de 1208 px is er niets te centreren; dan vult hij
   de ruimte die er is, met de zijmarge van de sectie eromheen.

   Alleen dit blok krijgt die kolom. Het weekoverzicht op de agendapagina
   staat al in een eigen container en moet daar niet ineens smaller worden. */
.cl-week-diensten{
  --cl-week-breedte:1160px;
  max-width:var(--cl-week-breedte);
  margin-left:auto;
  margin-right:auto;
}

/* ---------- lucht erboven ----------

   Nagemeten op de homepage: tussen het welkomblok en dit blok zat 20 px,
   terwijl de secties op de pagina onderling 75 tot 110 px uit elkaar staan.
   Vandaar dat het tegen het groene blok aan leek te plakken.

   De ruimte staat als eigenschap op het blok zelf, zodat je hem in het
   beheerscherm kunt bijstellen zonder in de opmaak te duiken. */
.cl-week-diensten{
  margin-top:var(--cl-week-ruimte, 72px);
}
@media (max-width:720px){
  .cl-week-diensten{margin-top:calc(var(--cl-week-ruimte, 72px) * .55);}
}

/* ---------- een eigen tint ----------

   Deze week staat op de agendapagina in zijn eentje op een donkere pagina en
   valt daar vanzelf op. Hier staat het blok pal onder een fel gekleurde kaart,
   en dan verdwijnt het bijna in de achtergrond. Een iets lichter vlak en een
   zachte schaduw zetten het los, zonder de huisstijl te verlaten — het is
   dezelfde kleur die de andere blokken op de site als vlak gebruiken.

   Twee klassen, zodat deze regel het wint van .cl-week hierboven. */
.cl-week.cl-week-diensten{
  background:#0E2B30;
  border-color:rgba(255,255,255,.11);
  box-shadow:0 18px 50px rgba(0,0,0,.35);
}

/* ==========================================================================
   Kopie van de opmaak van Deze week, voor als die plugin niet draait.
   Dezelfde waarden; als beide stijlbladen laden maakt het dus niets uit.
   ========================================================================== */

.cl-week, .cl-week *{box-sizing:border-box;}
.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;
  text-transform:none;
}
.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-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;}
}