/* ============================================================================
   wteams.css — the team page (workshops/teams.html)
   ----------------------------------------------------------------------------
   Decisions FT1 to FT6 (feedback round of 5 November) in docs/brainstorms/
   2026-11-04-workshop-geopende-paginas.md. Loaded after wsoort.css, which holds
   what the three workshop pages share and what this page shares with coaching
   (package card, row washes, table), and after rijen.css, whose homepage rows
   carry the photo. Only what the team page adds lives here: two packages side
   by side and level, the two-column table and the photo row.
   No mono type, no prices.
   ========================================================================== */

/* ---- the two packages (FT2, FT5) -------------------------------------------
   Side by side on a laptop, stacked on a phone (wsoort.css), Basis first. */
@media (width > 52rem) {
  /* As wide as the rest of the page (Joost, 2026-11-05). */
  .wt-pakketten { max-width: none; column-gap: 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* The heading over the cards, centred under the page heading. */
.wt-pakketten__kop {
  position: relative; z-index: 1; margin-top: clamp(2.5rem, 5vw, 3.5rem); text-align: center;
  font-size: var(--kop-blok); line-height: 1.15; letter-spacing: -0.025em; font-weight: 500;
}
.wt-pakketten__kop + .wt-pakketten { margin-top: clamp(1.25rem, 2.5vw, 1.75rem); }
.wt-pakketten .wc-pakket__naam {
  display: block; text-align: center; font-size: clamp(1.35rem, 1.9vw, 1.6rem); line-height: 1.15; letter-spacing: -0.025em;
}
/* Four rows per card (name, sentence, button, list), and long cards with room around
   their parts (Joost, 2026-11-05). */
.wt-pakketten .wc-pakket { grid-row: span 4; }
.wt-pakketten .wc-pakket.wsoort-kaart { padding: clamp(2rem, 4vw, 3.25rem) clamp(1.5rem, 3vw, 2.5rem); }
.wt-pakketten .wc-pakket > .wc-pakket__tekst { margin-top: 1rem; }
.wt-pakketten .wc-pakket .knop { margin-top: 1.75rem; }
.wt-pakketten .wc-pakket__inhoud { margin-top: 2rem; }
.wt-pakketten .wc-pakket > .wc-pakket__tekst { font-size: 1rem; }
.wt-pakketten .wc-pakket__lijst { gap: 0.9rem; font-size: 1rem; }
.wt-pakketten .wc-pakket .knop { min-height: 3rem; font-size: 0.95rem; }
.wc-noot .link { white-space: nowrap; }

/* ---- the table: what Op maat adds (FT5) ------------------------------------ */
.wt-schema__tekst { max-width: 52ch; margin-bottom: 1.25rem; color: #46464b; }
.wc-tabel td:last-child { color: var(--ink); }
.wc-tabel__prijs td { font-weight: 500; color: var(--ink); }
@media (max-width: 40rem) {
  .wc-tabel thead tr, .wc-tabel tbody tr { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- the row with the photo (T10, T12, rounds 2 and 3) ---------------------
   A homepage row (rijen.css) with a photo in place of the laptop, closer to its
   neighbours than on the homepage. Round 3: text and photo share the row half
   and half, and the photo stays modest, so the text is not lost beside it. */
.wt-rij { padding-block: clamp(2rem, 4vw, 3.5rem); }
.wt-rij .rij__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.wt-rij .rij__beeld { justify-self: end; width: 100%; max-width: 30rem; margin: 0; }
.wt-rij .w-kop { font-size: var(--kop-blok); max-width: 18ch; }
.wt-rij__foto {
  position: relative; z-index: 1; display: block; width: 100%; height: auto;
  aspect-ratio: 1280 / 1023; object-fit: cover; border-radius: 1.25rem; background: var(--paper);
}
@media (max-width: 60rem) {
  .wt-rij .rij__in { grid-template-columns: minmax(0, 1fr); }
  .wt-rij .rij__beeld { justify-self: stretch; max-width: none; }
}