/* ============================================================================
   wsoort.css — shared building blocks of the three workshop pages
   ----------------------------------------------------------------------------
   workshops/teams.html, ceos.html and coaching.html (decisions P6, P8, C1, C4,
   C5, T2, T13 and C12 in docs/brainstorms/2026-11-04-workshop-geopende-
   paginas.md). Loaded after site.css, wpagina.css, home.css and rijen.css: the
   ground (grond.js and the hero's washes), the heading, the pill label, the
   wash behind a laptop and the quote form stay the homepage's own classes, and
   only what the homepage does not have lives here.
   ========================================================================== */

/* The heading over the homepage ground, centred (FA6). */
.wsoort-hero { padding-top: 6.5rem; }
/* This hero is short, so the washes still have colour where overflow:hidden cuts them;
   white over them (home.css .h-hero::after) leaves that cut as a faint line. Masking the
   last 2rem to transparent removes it. The hero's bottom padding keeps the text clear. */
.wsoort-hero {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 2rem), transparent);
  mask-image: linear-gradient(180deg, #000 calc(100% - 2rem), transparent);
}
.wsoort-kop { position: relative; z-index: 1; text-align: center; }
/* One large heading on each workshop page (FA6, FT1): larger than the homepage hero, as
   there is nothing beside it. */
.wsoort-kop .h-hero__kop { max-width: 22ch; margin-inline: auto; font-size: clamp(2.1rem, 5vw, 4.25rem); }

/* The glass card (C4, T2): half see-through and blurred, in the glass of the menu bar. */
.wsoort-kaart {
  position: relative; z-index: 1; min-width: 0; padding: clamp(1.25rem, 3vw, 2rem);
  border-radius: 1.25rem; background: var(--glass); border: 1px solid rgba(13, 14, 17, 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 10px 30px -14px rgba(120, 90, 170, 0.28), 0 1px 3px rgba(13, 14, 17, 0.04);
}
.wsoort-kaart h2, .wsoort-kaart h3 { font-size: var(--kop-kaart); letter-spacing: var(--kop-kaart-ls); font-weight: 500; }
.wsoort-kaart > p { margin-top: 0.8rem; color: #46464b; }

/* The soft wash behind one card (C5), the same one as behind the homepage laptops:
   a wrapper with class="rij__beeld rij--geel wsoort-vlek" (or rij--perzik, rij--lila)
   gets rijen.css's blurred ::before. Only the laptop's pull into the margin goes. */
.wsoort-vlek.rij__beeld { margin: 0; }

/* The comparison table (C3, T6): hairlines as in the homepage lists, no boxes. */
.wsoort-tabel { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 0.95rem; }
.wsoort-tabel caption { margin-bottom: 1.25rem; text-align: left; font-size: var(--kop-kaart); letter-spacing: var(--kop-kaart-ls); font-weight: 500; }
.wsoort-tabel th, .wsoort-tabel td {
  padding: 0.9rem 0.6rem; border-bottom: 1px solid var(--line); vertical-align: top;
  text-align: left; overflow-wrap: anywhere;
}
.wsoort-tabel th { font-weight: 500; }
.wsoort-tabel thead th { border-bottom-color: var(--line-strong); }
.wsoort-tabel td { color: #46464b; }
@media (max-width: 40rem) {
  .wsoort-tabel { font-size: 0.8125rem; }
  .wsoort-tabel th, .wsoort-tabel td { padding: 0.7rem 0.3rem; }
}

/* ============================================================================
   Parts the team and coaching pages share, moved from wcoaching.css in step 2a.
   They keep their wc- names so coaching.html needs no change; teams.html uses
   the same classes. Coaching's own parts (the price, the raised full programme,
   the table's emphasis and price row, the portrait) stay in wcoaching.css, and
   the team page's own parts (four columns, the small calendars) in wteams.css.
   ========================================================================== */

/* ---- the heading (FA6) ------------------------------------------------------
   One large centred heading, no label above it and no sentence under it. */
.wc-hero { padding-bottom: clamp(2rem, 4vw, 3rem); }
/* The homepage ground at the homepage hero's height (about 42rem on a laptop), so its colours
   are as light as there; stretched over this taller hero the field turned darker (round 3). */
.wc-hero .g-veld { height: min(100%, 44rem); }

/* ---- the package cards (C2, C3, C11, T7, round 3) ---------------------------
   Small, quiet cards after Joost's example: name, the price or the calendar in
   the middle, one sentence, a full-width button, then a short list with a check
   in a circle per line. The cards share the rows of the grid (subgrid), so the
   middles, buttons and lists line up across the cards whatever their text. Each
   page sets its own number of columns and width. */
.wc-pakketten {
  position: relative; z-index: 1; margin: clamp(2rem, 4vw, 3rem) auto 0;
  display: grid; column-gap: 1rem; row-gap: 0;
  align-items: stretch;
}
.wc-pakket { display: grid; grid-row: span 5; grid-template-rows: subgrid; row-gap: 0; }
.wc-pakket.wsoort-kaart { padding: 1.25rem; }

.wc-pakket h3 { font-size: 0.95rem; letter-spacing: -0.01em; }
.wc-pakket__naam { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; }
.wc-pakket > .wc-pakket__tekst { margin-top: 0.6rem; text-align: center; font-size: 0.875rem; line-height: 1.45; }
.wc-pakket .knop { justify-self: stretch; margin-top: 1rem; min-height: 2.5rem; font-size: 0.875rem; }
.wc-pakket__inhoud { margin-top: 1.1rem; }
.wc-pakket__lijst { display: grid; gap: 0.45rem; margin-top: 0.55rem; font-size: 0.875rem; line-height: 1.35; color: #46464b; }
.wc-pakket__lijst li { display: grid; grid-template-columns: 1.05rem minmax(0, 1fr); gap: 0.55rem; align-items: start; }

/* The check in a circle, in the package lists and in the table. */
.wc-ja, .wc-pakket__lijst li::before {
  content: ""; display: inline-block; vertical-align: middle; width: 1.4rem; height: 1.4rem; 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;
}
.wc-pakket__lijst li::before { width: 1.05rem; height: 1.05rem; margin-top: 0.05rem; }

/* The small print under the packages, small so it does not draw the eye. */
.wc-noot { position: relative; z-index: 1; max-width: 60ch; margin: 1.25rem auto 0; text-align: center; font-size: 0.75rem; color: var(--muted); }

/* Phone and small tablet: the packages stack in their own order (C11, T7). */
@media (max-width: 52rem) {
  .wc-pakketten { grid-template-columns: minmax(0, 1fr); row-gap: 1rem; max-width: 24rem; }
  .wc-pakket { grid-row: auto; grid-template-rows: none; }
}

/* ---- the homepage's soft row washes further down (round 3) ------------------
   A box the size of a homepage laptop carries rijen.css's blurred wash
   (.rij__beeld::before) toward the outer edge, behind a section. */
.wc-vlek.rij__beeld {
  position: absolute; z-index: 0; top: 50%; width: min(40rem, 60vw); height: 24rem; margin: 0;
  translate: 0 -50%; pointer-events: none;
}
.wc-vlek--links { left: 0; }
.wc-vlek--links::before { right: auto; left: -48%; }
.wc-vlek--rechts { right: 0; }
.wc-schema > .w-in { position: relative; z-index: 1; }

/* ---- the comparison table (C3, T6) ----------------------------------------- */
.wc-schema { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); }
.wc-schema__kop { margin-bottom: 1.25rem; font-size: var(--kop-blok); line-height: 1.15; letter-spacing: -0.03em; font-weight: 500; }
.wc-schema__vak { position: relative; }
.wc-tabel { position: relative; z-index: 1; }
.wc-tabel thead td:first-child { width: 40%; }
.wc-tabel thead th, .wc-tabel td { text-align: center; vertical-align: middle; }
.wc-tabel thead th { color: var(--ink); vertical-align: bottom; }
.wc-tabel tbody tr:last-child > * { border-bottom: 0; }
.wc-nee { display: inline-block; vertical-align: middle; width: 0.9rem; height: 1.5px; border-radius: 1px; background: rgba(13, 14, 17, 0.3); }

/* Phone: the row label spans the width and the values sit under it, so the labels
   do not squeeze into a narrow column. Each page sets the number of value columns. */
@media (max-width: 40rem) {
  .wc-tabel thead tr, .wc-tabel tbody tr { display: grid; }
  .wc-tabel thead td:first-child { display: none; }
  .wc-tabel th, .wc-tabel td { display: block; }
  .wc-tabel th[scope="row"] { grid-column: 1 / -1; padding: 0.9rem 0 0.2rem; border-bottom: 0; text-align: left; color: var(--muted); }
  .wc-tabel td { padding: 0.35rem 0.25rem 0.9rem; }
}

/* ---- the short heading beside the form (C8, C12, T13) ----------------------
   The heading at the top left beside the form, not centred in the air (round 3). */
.wc-aanvraag { padding-block: clamp(1.5rem, 3vw, 2.5rem) clamp(3rem, 6vw, 4.5rem); }
.wc-aanvraag .w-twee { align-items: start; }
/* Smaller than a section heading: it sits in half the width beside the form (round 2). */
.wc-aanvraag__kop { font-size: var(--kop-blok); max-width: 18ch; }
/* The Pakket field looks like the other fields (site.css styles input and textarea only),
   on the pages and in the overview's quote panel. */
.wc-aanvraag .veld select, .wo-offerte .veld select {
  width: 100%; min-height: 3rem; padding: 0.7rem 2.5rem 0.7rem 1rem; border-radius: 0.75rem;
  border: 1px solid var(--line-strong); color: var(--ink); font: inherit; font-size: 1rem; appearance: none;
  background: var(--canvas) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230d0e11' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E") right 1rem center / 1rem no-repeat;
  transition: border-color 140ms, box-shadow 140ms;
}
.wc-aanvraag .veld select:hover, .wo-offerte .veld select:hover { border-color: rgba(13, 14, 17, 0.4); }
.wc-aanvraag .veld select:focus, .wo-offerte .veld select:focus { outline: 0; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(138, 63, 102, 0.18); }

/* ---- steps with a dot (CEO programme, coaching route) ----------------------
   As on the old timeline; a break has an open dot. */
.wsoort-stappen { display: grid; gap: 0.8rem; margin-top: 0.9rem; padding: 0; list-style: none; }
.wsoort-stap { display: grid; grid-template-columns: 0.6rem minmax(0, 1fr); column-gap: 0.9rem; align-items: start; }
.wsoort-stap__punt { width: 0.6rem; height: 0.6rem; margin-top: 0.45rem; border-radius: 50%; background: var(--ink); }
.wsoort-stap--pauze .wsoort-stap__punt { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }
.wsoort-stap h4 { margin: 0; font-size: 1rem; font-weight: 500; letter-spacing: -0.015em; line-height: 1.35; }
.wsoort-stap p { margin: 0.1rem 0 0; font-size: 0.875rem; line-height: 1.45; color: #46464b; }