/* =================================================================
   Willow — workshops page

   Shared by social-media-workshops.html and its Dutch twin, one file for
   both languages (same rule as page-customers.css).

   Almost everything on this page is composed from styles.css: .page-head,
   .sec-head, .feat-pair/.feat-tile, .compare-table, .c-steps,
   .cta-card/.cta-quote, .btn, .card.card-media, and the click-to-load
   .embed-consent placeholder that assets/embed-consent.js puts in front of
   the scheduler. What is left below is only what the site had no component
   for:

   - the split hero (copy beside overlapping photo cards) and the photo
     cards, which are the site's image card set to the photo's own ratio,
   - the "now, the workshop, afterwards" row that each workshop section is
     built on (.feat-pair with an arrow between its tiles), its numbered
     module list and its ticks,
   - the ink band that hosts .c-steps (same two overrides as the coaching
     page, which keeps them in page-social-media-coaching.css),
   - the price card, with what is included and what costs extra,
   - the white card around the HubSpot scheduler (a restatement of
     .booking-step in page-contact.css, which is scoped to that page),
   - the FAQ accordion. FAQ rules are page-local by convention (see
     components.md); this is the <details> form from
     page-willow-portefeuille.css, which needs no script. The class names
     stay .faq-item / .faq-q / .faq-a because assets/site.js reads exactly
     those to build the FAQPage schema.

   Everything else is .ws- prefixed.
   ================================================================= */

/* ---------- Hero ----------
   The "split" family from styles.css (see "Hero scale"): something sits
   beside the headline, so the headline takes the smaller split size. The grid
   is the one page-customers.css uses for its hero; here the right side is a
   stack of photo cards. */
.ws-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 0.8fr);
  gap: 56px;
  align-items: center;
}
.page-head .ws-hero h1 { font-size: var(--hero-h1-split); max-width: var(--hero-max-split); }
.page-head .second-actions { margin-top: 36px; }

/* Photos only, no captions. They zigzag down the right column and overlap a
   little, each one on top of the one before. Another photo is one more
   .ws-photo card in the markup and nothing here changes: with three or more,
   the cards narrow so the stack keeps roughly the same height. The ring in
   the page colour keeps the edge of a card clear where it lies on another. */
.ws-hero-cards { display: grid; }
.ws-hero-cards .ws-photo { width: 76%; box-shadow: 0 0 0 4px var(--cream); }
.ws-hero-cards .ws-photo:nth-child(odd) { justify-self: end; }
.ws-hero-cards .ws-photo:nth-child(even) { justify-self: start; }
.ws-hero-cards .ws-photo + .ws-photo { margin-top: -10%; }
.ws-hero-cards .ws-photo:first-child:nth-last-child(n+3),
.ws-hero-cards .ws-photo:first-child:nth-last-child(n+3) ~ .ws-photo { width: 64%; }

/* ---------- Photos ----------
   .card.card-media is built for product thumbnails: its .card-img is a square
   with object-fit: contain. A photo keeps its own ratio, which the width and
   height attributes on the <img> supply. The selector repeats .card.card-media
   because styles.css sets the square on `.card.card-media .card-img`, and a
   shorter selector would lose to it. */
.card.card-media.ws-photo .card-img { aspect-ratio: auto; object-fit: cover; }

/* ---------- Links inside body copy ----------
   styles.css sets `a { color: inherit; text-decoration: none }`, so a link in
   a sentence is invisible. Brand blue plus an underline, as the coaching
   page does for its notes, so the affordance is not carried by colour alone. */
.ws-fine a, .ws-table a, .ws-incl a, .ws-modules a, .ws-list a,
.feat-tile p a, .faq-a a, .ws-book a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Table ----------
   .compare-table is built for ticks in centred columns and three or more of
   them: a 40% first column, and a 580px minimum width that makes it scroll
   on a phone. This one has two columns of sentences, so the first column
   takes a little under half and the table fits any width. */
.ws-table td { color: var(--ink-2); overflow-wrap: anywhere; }
.ws-table td:lang(nl) { hyphens: auto; }
.ws-table td.feat { color: var(--ink); width: 46%; }

/* ---------- One workshop: now, the workshop, afterwards ----------
   Each workshop section is a transition, built from the site's .feat-pair
   and .feat-tile: where you are now, what happens in the room, what you have
   afterwards. The middle tile is the workshop, so it takes the blue outline,
   and an arrow in the gap reads as "then". The arrows are decoration drawn
   here, and they point down where the tiles stack, on a phone. The selector is
   .feat-pair.ws-flow because styles.css sets the columns on .feat-pair and
   .feat-pair.three, which a bare .ws-flow would lose to. */
.feat-pair.ws-flow {
  --ws-gap: 40px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 1.1fr);
  gap: var(--ws-gap);
}
.ws-flow .feat-tile { position: relative; }
.ws-flow .feat-tile > p { font-size: 15px; line-height: 1.55; }
.ws-flow .ws-mid { border-color: var(--blue); }
.ws-flow .ws-modules, .ws-flow .ws-list { margin-top: 4px; }
.ws-flow .feat-tile + .feat-tile::before {
  content: "→";
  content: "→" / "";
  position: absolute;
  left: calc(var(--ws-gap) / -2);
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 22px;
  line-height: 1;
  color: var(--blue);
}

/* Numbered, like .what-happens on the contact page, but on a light surface. */
.ws-modules {
  list-style: none;
  padding: 0;
  margin: 20px 0 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  counter-reset: ws-m;
  max-width: 62ch;
}
.ws-modules li {
  position: relative;
  padding-left: 36px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  counter-increment: ws-m;
}
.ws-modules li::before {
  content: counter(ws-m, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 2px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  color: var(--blue);
}
.ws-modules strong { color: var(--ink); font-weight: 600; }

.ws-list {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.ws-list li { position: relative; padding-left: 22px; font-size: 15px; line-height: 1.45; color: var(--ink); }
.ws-list li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 600; }
/* Each tick of a workshop starts with a bold word (A process, AI skills, ...). */
.ws-list strong { color: var(--ink); font-weight: 600; }
/* The "now" tile lists what holds people back, so plain grey bullets, not ticks. */
.ws-list.ws-struggles li { color: var(--ink-2); }
.ws-list.ws-struggles li::before { content: "•"; color: var(--ink-3); font-weight: 400; }

.ws-fine { font-size: 13px; color: var(--ink-3); }

/* ---------- One tile beside a photo (onboarding) ---------- */
.ws-detail {
  display: grid;
  /* minmax(0, …) lets a column shrink below its content. Plain fr tracks
     take the widest unbreakable word as their minimum, and a Dutch compound
     like "communicatieverantwoordelijken" was enough to push the whole page
     40px wider than a phone. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
  gap: 56px;
  margin-top: 32px;
  align-items: stretch;
}
.ws-detail > .feat-tile { justify-content: center; }
.ws-detail .ws-list { margin-top: 4px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 40px; }

/* ---------- Ink band ----------
   .c-steps is a dark-surface component, so the section hosting it has to be
   an ink band. .sec-head has no dark variant, hence the two overrides. The
   step sizes are set here because styles.css deliberately leaves them to
   the page: 22px for a tile title and 15px for copy inside a card, the
   roles foundations.md gives them. */
.ws-band { background: var(--ink); }
.ws-band .sec-head h2 { color: var(--cream); }
.ws-band .c-step h4 { font-size: 22px; line-height: 1.2; }
.ws-band .c-step p { font-size: 15px; }

/* ---------- Price ----------
   One card: the starting price on the left, what is included and what costs
   extra on the right. */
.ws-price {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  margin-top: 32px;
  padding: 40px;
}
.ws-price .ws-from { font-size: 15px; color: var(--ink-3); }
.ws-amt, .ws-figure {
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.028em;
  color: var(--ink);
}
.ws-price .ws-amt { margin-top: 10px; }
.ws-price .ws-per { margin-top: 8px; font-size: 14px; color: var(--ink-3); }
.ws-price .ws-disc { margin-top: 24px; font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--blue); }
.ws-price h3 { font-size: 22px; letter-spacing: -0.018em; line-height: 1.2; }
.ws-incl h3:not(:first-child) { margin-top: 28px; }
.ws-incl p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); }

/* ---------- Booking ----------
   The scheduler is an iframe that assets/embed-consent.js hides behind a
   click-to-load placeholder; it has no src until the visitor clicks. The
   :not([src]) rule keeps its reserved height from showing as an empty box
   in the moment before that script runs. */
.ws-book {
  background: var(--white);
  border: 1px solid var(--rule);
  border-radius: var(--r-xl);
  padding: 40px;
}
.ws-book > p { margin-top: 16px; max-width: 56ch; font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.ws-embed { display: block; width: 100%; height: 780px; border: 0; }
.ws-embed:not([src]) { display: none; }
.ws-book > p.ws-fine { font-size: 13px; color: var(--ink-3); }

/* ---------- Case tile that is a link, and the figure beside it ---------- */
.ws-proof { color: inherit; text-decoration: none; transition: border-color 0.15s; }
.ws-proof:hover { border-color: var(--ink); }
.ws-proof .ws-cta {
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--mono);
  font-size: var(--t-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--blue);
}
/* .feat-tile p sets 14px and the muted colour, so the figure needs a selector
   of its own to be set as a figure. */
.feat-tile .ws-figure { font-size: var(--t-h2); line-height: 1; color: var(--blue); }

/* ---------- FAQ accordion (<details> form, no script) ---------- */
.faq-list { max-width: 920px; }
.faq-item { border-top: 1px solid var(--rule); padding: 20px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--rule); }
.faq-q {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  cursor: pointer;
  list-style: none;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.012em;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q .indic {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  /* Optically centre the "+": see --optical-plus. */
  padding-top: calc(2 * var(--optical-plus));
  line-height: 1;
  letter-spacing: 0;
  transition: transform 0.2s;
}
.faq-item[open] .indic { background: var(--blue); color: var(--white); transform: rotate(45deg); }
.faq-q:focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; }
.faq-a { margin-top: 16px; font-size: 15px; line-height: 1.6; color: var(--ink-2); max-width: 64ch; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  /* Single column, so the full-width headline scale applies again, as on the
     customers page. The photos sit in a row and overlap sideways instead of
     down: each takes an equal share of the row, and the overlap makes the
     shares wider, so any number of photos fits. Every second one drops a
     little, which keeps the zigzag. */
  .ws-hero { grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: start; }
  .page-head .ws-hero h1 { font-size: var(--hero-h1); max-width: var(--hero-max); }
  .ws-hero-cards { display: flex; align-items: flex-start; }
  .ws-hero-cards .ws-photo,
  .ws-hero-cards .ws-photo:first-child:nth-last-child(n+3),
  .ws-hero-cards .ws-photo:first-child:nth-last-child(n+3) ~ .ws-photo { width: auto; flex: 1 1 0; min-width: 0; }
  .ws-hero-cards .ws-photo + .ws-photo { margin: 0 0 0 -8%; }
  .ws-hero-cards .ws-photo:nth-child(even) { margin-top: 8%; }
  /* Two columns of sentences fit a phone, so the table does not need to scroll.
     Here styles.css frames the wrapper, so the table gives up its own frame
     and its top margin, which would otherwise show as a double border and an
     empty band above the header row. */
  .compare-wrap { margin-top: 32px; }
  .compare-table.ws-table { min-width: 0; margin-top: 0; border: 0; }
}
@media (max-width: 1000px) {
  .ws-detail { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .ws-detail .ws-list { grid-template-columns: minmax(0, 1fr); }
  /* Stacked, the portrait would run the full width and be taller than a phone. */
  .ws-detail > .ws-photo { max-width: 460px; }
  .ws-price { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 860px) {
  /* .feat-pair stacks here (styles.css); the flow follows, with its arrows
     pointing down, and a photo card keeps off the full width of a tablet. */
  .feat-pair.ws-flow { grid-template-columns: minmax(0, 1fr); }
  .ws-flow .feat-tile + .feat-tile::before {
    content: "↓";
    content: "↓" / "";
    left: 50%;
    top: calc(var(--ws-gap) / -2);
  }
  .feat-pair > .ws-photo { max-width: 560px; }
}
@media (max-width: 720px) {
  .ws-book { padding: 24px; }
  .ws-price { padding: 24px; }
  .ws-price .ws-amt { font-size: var(--t-h3); }
  .ws-embed { height: 820px; }
  .faq-q { font-size: 17px; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .faq-q .indic, .ws-proof { transition: none; }
}