/* ============================================================================
   wceos.css — the CEO page (workshops/ceos.html)
   ----------------------------------------------------------------------------
   Decisions K1 to K4 and FK1 to FK9 (feedback round of 5 November) in
   docs/brainstorms/2026-11-04-workshop-geopende-paginas.md. Loaded after wsoort.css, which holds the parts the workshop
   pages share (glass card, and coaching's wc- heading and row
   washes, used here as they are). The booking panel, the waiting-list form,
   the map frame and the thank-you state keep their styles in wpagina.css. Only
   what the CEO page adds lives here: the facts under the heading, "Je dag in Utrecht" with the
   dates beside it, the photo and the two parts of the day, what you take home
   and "Waar".
   Calm and compact, no mono type below the heading, small labels in Inter.
   ========================================================================== */

/* ---- the dates as glass cards (K1, K4) ---------------------------------------
   Stacked beside the explanation, on a soft peach wash (rijen.css's .rij__beeld
   ::before). One card per date, in the shape of the coaching packages: the
   weekday small at the top with the seats beside it, the date large in the
   middle, time and price under it, a full-width button. */
.wk-datums-blok.rij__beeld { min-width: 0; }
.wk-datums { position: relative; z-index: 1; display: grid; gap: 1rem; }
.wk-datums > .w-laden { text-align: center; }
.wk-datum.wsoort-kaart { display: grid; align-content: start; padding: 1.25rem; }
.wk-datum__kop { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
/* Two classes, to win over wsoort.css's .wsoort-kaart h3 and .wsoort-kaart > p. */
.wk-datum .wk-datum__dag { font-size: 0.95rem; font-weight: 500; letter-spacing: -0.01em; }
.wk-datum__plekken { font-size: 0.8rem; color: var(--muted); white-space: nowrap; }
.wk-datum__plekken--bijna { color: var(--accent); }
.wk-datum > .wk-datum__datum { margin-top: 1rem; text-align: center; }
.wk-datum__datum strong { display: block; font-size: clamp(1.8rem, 2.6vw, 2.2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1.05; }
.wk-datum__datum span { display: block; margin-top: 0.35rem; font-size: 0.875rem; color: #46464b; }
.wk-datum > .wk-datum__tekst { margin-top: 0.6rem; text-align: center; font-size: 0.875rem; line-height: 1.45; }
.wk-datum__tekst small { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--muted); }
.wk-datum .knop { justify-self: stretch; margin-top: 1rem; min-height: 2.5rem; font-size: 0.875rem; }
.wk-datum--vol .wk-datum__datum strong, .wk-datum--vol .wk-datum__dag { color: rgba(13, 14, 17, 0.42); }
.wk-datum--binnenkort.wsoort-kaart { align-content: center; }
.wk-datum > .wk-datum__binnenkort { margin-top: 0; text-align: center; font-size: 1.05rem; font-weight: 500; letter-spacing: -0.015em; color: var(--ink); }

.wk-kop { font-size: var(--kop-blok); font-weight: 500; line-height: 1.15; letter-spacing: -0.03em; text-wrap: balance; }

/* ---- "Je dag in Utrecht" -------------------------------------------------------
   The explanation with the dates beside it, then the photo on a homepage row
   wash beside the timeline. */
.wk-dag { padding-block: clamp(3rem, 6vw, 5rem) clamp(1rem, 2vw, 1.5rem); }
/* The dates as tall as the text beside them (FK4). */
.wk-intro {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(16rem, 4fr); gap: clamp(2rem, 6vw, 6rem);
  align-items: stretch;
}
.wk-datums-blok { display: grid; }
.wk-datums { align-content: center; }
.wk-tekst { display: grid; gap: 0.9rem; max-width: 52ch; margin-top: 1rem; color: #46464b; font-size: 1.0625rem; line-height: 1.6; text-wrap: pretty; }

.wk-programma {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(2rem, 4vw, 3.5rem);
  align-items: center; margin-top: clamp(4rem, 8vw, 6.5rem);
}
/* Four reasons for a day in a small group, two by two: the title and one short
   line, no icons (round 3). On a narrow phone one column. */
.wk-punten { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; margin-top: 2.25rem; padding: 0; list-style: none; }
.wk-punten h3 { font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; }
.wk-punten p { margin-top: 0.2rem; font-size: 0.9375rem; line-height: 1.5; color: #46464b; text-wrap: pretty; }
@media (max-width: 36rem) {
  .wk-punten { grid-template-columns: minmax(0, 1fr); }
}


/* The wash of rijen.css's .rij__beeld::before, toward the left edge as in a turned row. */
.wk-foto::before { right: auto; left: -48%; }
.wk-foto img { position: relative; z-index: 1; display: block; width: 100%; height: auto; border-radius: 1.25rem; }

/* ---- the programme in two parts of the day (FK5) --------------------------------
   Beside the photo: the heading, then one glass card per part of the day. */
.wk-delen { display: grid; gap: 1rem; }
.wk-delen .wk-kop { margin-bottom: 0.25rem; }
.wk-deel.wsoort-kaart { padding: clamp(1.25rem, 2.5vw, 1.6rem); }
.wk-deel h3 { font-size: 1rem; letter-spacing: -0.015em; }

/* ---- "Waar" with the map (K4, T12) -------------------------------------------- */
.wk-waar { padding-block: clamp(3.5rem, 7vw, 6rem) clamp(2rem, 4vw, 3rem); }
.wk-waar > .w-in { position: relative; z-index: 1; }
/* The text and the map as tall as each other (FK9). */
.wk-waar .w-twee { align-items: stretch; }
.wk-waar .w-twee > div:first-child > p { margin-top: 0.8rem; max-width: 40ch; color: #46464b; }
.wk-waar .w-twee > div:first-child > .wk-waar__plek { margin-top: 1rem; font-weight: 500; color: var(--ink); }
.wk-waar__plek span { display: block; font-weight: 400; color: #46464b; }
.wk-kaartje { display: grid; gap: 0.7rem; justify-items: start; min-width: 0; width: 100%; max-width: 32rem; }
@media (min-width: 60.0625rem) { .wk-kaartje { justify-self: end; } }
.wk-kaartje { grid-template-rows: minmax(0, 1fr) auto; }
.wk-kaartje .w-kaart { width: 100%; height: 100%; min-height: 12rem; aspect-ratio: auto; }

/* ---- the facts under the heading (FK6, Joost 2026-11-05) ---------------------------
   Three short facts in a row on a line, centred under the heading, the label small
   above; side by side on a phone too. */
.wk-feiten { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem clamp(1.5rem, 3vw, 2.5rem); max-width: 40rem; margin: 1.75rem auto 0; padding-top: 1.25rem; border-top: 1px solid var(--line); }
@media (max-width: 36rem) {
  .wk-feiten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; }
  .wk-feiten div dd { font-size: 0.85rem; line-height: 1.35; }
}
.wk-feiten dt { font-size: 0.8rem; color: var(--muted); }
.wk-feiten dd { margin: 0.15rem 0 0; font-size: 0.95rem; font-weight: 500; color: var(--ink); }

/* ---- what you take home, who gives the day, the questions ------------------------
   Rows in wpagina.css's .w-twee: the heading on the left, the content on the right. */
.wk-na { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.wk-na__noot { margin-top: 1rem; max-width: 36ch; color: #46464b; line-height: 1.6; }
.wk-lijst { display: grid; gap: 0.9rem; padding: 0; list-style: none; font-size: 1.0625rem; line-height: 1.45; }
.wk-lijst li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.8rem; align-items: start; }
/* The check in a circle of the coaching packages (wsoort.css .wc-ja), a little larger. */
.wk-lijst li::before {
  content: ""; width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; border-radius: 50%;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 55% no-repeat;
}

@media (max-width: 60rem) {
  .wk-intro, .wk-programma { grid-template-columns: minmax(0, 1fr); }
  .wk-datums-blok.rij__beeld { max-width: 24rem; }
  /* On a phone the dates come first: booking is the main action of the page (FK4). */
  .wk-datums-blok { order: -1; }
  .wk-tekst { font-size: 1rem; }
}