/* Teampagina /team en de teamregel op /over, 22 september 2026.
   De stippellijn tekent de pagina zelf: ronde stippen in de inktkleur van de gravures, in het ritme van de
   stippellijn in de werkwijzekolom. Hij loopt van De Kapitein langs alle kaarten en stopt bij De Koning.
   Desktop (drie kolommen): door de gezichten per rij, langs de buitenrand naar de volgende rij.
   Smaller: verticaal langs de gezichten. Bij verminderde beweging staat hij stil. */

.team-page, .team-teaser {
  --team-ink: #0f3f36;
  --team-dot: var(--team-ink);
  --team-face: 148px;
  --team-pad: 28px;
  --team-y0: calc(var(--team-pad) + var(--team-face) / 2);
  --team-g: 28px;
  --team-r: 44px;
  --team-e: 16px;
  --team-step: 10px;
}

/* Teamregel op /over */
main section.team-teaser:not(.hero):not(.proof-band) { padding: 32px 0; }
.team-teaser p { background: var(--surface); border-left: 4px solid var(--team-ink); border-radius: var(--radius); font-size: 1.06rem; margin: 0; padding: 18px 22px; }
.team-teaser .text-link { margin-left: 4px; white-space: nowrap; }

/* Hero */
.team-hero .lede { max-width: 62ch; }

/* Kaarten */
.team-grid { display: grid; gap: var(--team-r) var(--team-g); grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 48px 0 0; padding: 0; }
.team-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; padding: var(--team-pad) 24px 24px; position: relative; }
.team-card-body { display: flex; flex: 1; flex-direction: column; }
.team-face { background: var(--paper); border: 1.5px solid var(--team-ink); border-radius: 50%; display: block; flex: none; height: var(--team-face); margin: 0 auto 20px; overflow: hidden; position: relative; width: var(--team-face); z-index: 2; }
.team-face picture, .team-face img { display: block; height: 100%; width: 100%; }
.team-face.is-empty::after { border: 1px solid var(--team-ink); border-radius: 50%; content: ""; inset: 10px; opacity: .35; position: absolute; }
.team-role { color: var(--slate); font-family: var(--font-mono); font-size: .74rem; letter-spacing: -.01em; margin: 0 0 6px; text-align: center; text-transform: uppercase; }
.team-card h3 { font-family: var(--font-display); font-size: 1.7rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.05; text-align: center; text-transform: uppercase; }
.team-joke { color: var(--ink); font-family: Georgia, "Times New Roman", serif; font-style: italic; margin: 10px 0 18px; text-align: center; text-wrap: balance; }
.team-tasks { border-top: 1px solid var(--line); list-style: none; margin: 0 0 14px; padding: 14px 0 0; }
.team-tasks li { color: var(--slate); font-size: .95rem; line-height: 1.5; padding-left: 18px; position: relative; }
.team-tasks li + li { margin-top: 8px; }
.team-tasks li::before { background: var(--team-ink); border-radius: 50%; content: ""; height: 5px; left: 2px; position: absolute; top: .62em; width: 5px; }
.team-you { background: var(--mist); border-radius: var(--radius); font-size: .93rem; margin: 0 0 16px; padding: 10px 12px; }
.team-card .text-link { align-self: flex-start; margin-top: auto; }

/* De Koning sluit af */
.team-card.is-king { --team-dot: #9fd8c9; background: var(--ink); border-color: var(--ink); color: #fff; }
.team-card.is-king .team-face { border-color: #9fd8c9; box-shadow: 0 0 0 5px var(--ink), 0 0 0 6.5px #9fd8c9; }
.team-card.is-king h3, .team-card.is-king .team-joke { color: #fff; }
.team-card.is-king .team-role { color: #9fd8c9; }
.team-king-text { border-top: 1px solid #ffffff33; color: #e8f2ef; font-size: .98rem; margin: 0 0 16px; padding-top: 14px; }
.team-card.is-king .text-link { color: #fff; }
.team-card.is-king .text-link:hover { background: #ffffff1f; }

/* Stippellijn: stippen als achtergrond, zodat hij kan lopen */
.team-card::before, .team-card::after, .team-line::before, .team-line::after { content: none; pointer-events: none; position: absolute; z-index: 0; }
.team-grid .team-card::before, .team-grid .team-card:nth-child(3n+1):not(:first-child)::after,
.team-grid .team-card:nth-child(3n+1):not(:first-child) .team-line::after,
.team-grid .team-card:nth-child(3n):not(:last-child) .team-line::before { content: ""; }
.team-card::before, .team-card::after { animation: team-x 1.2s linear infinite; background: radial-gradient(circle at 5px 2px, var(--team-dot) 1.3px, transparent 1.8px) 0 0 / var(--team-step) 4px repeat-x; height: 4px; }
.team-line::before, .team-line::after { animation: team-y 1.2s linear infinite; background: radial-gradient(circle at 2px 5px, var(--team-ink) 1.3px, transparent 1.8px) 0 0 / 4px var(--team-step) repeat-y; width: 4px; }
@keyframes team-x { to { background-position: var(--team-step) 0; } }
@keyframes team-y { to { background-position: 0 var(--team-step); } }

/* Desktop: rij voor rij door de gezichten */
.team-card::before { left: calc(var(--team-g) / -2); right: calc(var(--team-g) / -2); top: calc(var(--team-y0) - 2px); }
.team-card:nth-child(3n+1)::before { left: calc(var(--team-e) * -1); }
.team-card:first-child::before { left: 50%; }
.team-card:nth-child(3n)::before { right: calc(var(--team-e) * -1); }
.team-card:last-child::before { right: 50%; }
/* Terugweg door de rijgoot naar de volgende rij, die loopt van rechts naar links */
.team-card:nth-child(3n+1)::after { animation-direction: reverse; left: calc(var(--team-e) * -1); top: calc(var(--team-r) / -2 - 2px); width: calc(300% + 2 * var(--team-g) + 2 * var(--team-e)); }
.team-line::after { height: calc(var(--team-r) / 2 + var(--team-y0)); left: calc(var(--team-e) * -1 - 2px); top: calc(var(--team-r) / -2); }
.team-line::before { bottom: calc(var(--team-r) / -2); left: calc(100% + var(--team-e) - 2px); top: var(--team-y0); }

/* Hoe werkt dit team */
.team-steps { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 32px 0 0; padding: 0; }
.team-steps li { background: var(--surface); border-radius: var(--radius); padding: 24px 26px; }
.team-steps .card-number { margin-bottom: 14px; }
.team-steps p { color: var(--slate); margin: 10px 0 0; }

/* Aanbod in de beeldtaal van het team */
.team-offers { display: grid; gap: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); list-style: none; margin: 40px 0 0; padding: 0; }
.team-offers > li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); display: flex; flex-direction: column; gap: 8px; padding: 26px 24px; }
.team-offers > li.is-free { background: var(--ink); border-color: var(--ink); color: #fff; }
.team-offers strong { color: inherit; font-family: var(--font-display); font-size: 2.3rem; letter-spacing: -.02em; line-height: 1; text-transform: uppercase; }
.team-offers .offer-step { color: var(--slate); font-family: var(--font-mono); font-size: .74rem; text-transform: uppercase; }
.team-offers .is-free .offer-step { color: #9fd8c9; }
.team-offers .offer-name { font-weight: 650; }
.team-offers p { color: var(--slate); font-size: .96rem; margin: 0; }
.team-offers .is-free p { color: #e8f2ef; }
.team-offers .offer-badge { align-self: flex-start; background: var(--mint); border-radius: 64px; color: var(--ink); font-size: .8rem; margin: 4px 0 8px; padding: 4px 12px; }
.team-offers .button, .team-offers .text-link { align-self: flex-start; margin-top: auto; }
.team-offers .is-free .button { background: #9fd8c9; border-color: #9fd8c9; color: var(--ink); }
.team-offers .team-face { --team-face: 76px; margin: 0 0 8px; }
.team-offers .team-face.is-question { border-color: #9fd8c9; border-style: dashed; }
.team-offers .team-face.is-question::after { border: 0; color: #9fd8c9; content: "?"; display: grid; font-family: Georgia, serif; font-size: 2.2rem; inset: 0; opacity: 1; place-items: center; }
.team-offer-faces { display: flex; margin-bottom: 8px; }
.team-offer-faces .team-face { margin: 0; }
.team-offer-faces .team-face + .team-face { margin-left: -18px; }
.team-offer-note { color: var(--slate); margin: 20px 0 0; }

/* Smaller dan drie kolommen: kaarten onder elkaar, de lijn loopt verticaal langs de kaarten met een ring
   op de hoogte van elk gezicht, zoals de stippellijn met ringen in de werkwijzekolom. */
@media (max-width: 959px) {
  .team-page { --team-face: 112px; --team-pad: 22px; --team-r: 20px; --team-rail: 18px; }
  .team-grid { grid-template-columns: 1fr; margin-inline: auto; max-width: 760px; padding-left: calc(var(--team-rail) + 8px); }
  .team-card { column-gap: 22px; display: grid; grid-template-columns: var(--team-face) minmax(0, 1fr); padding: var(--team-pad) 22px 22px; }
  .team-face { margin: 0; }
  .team-role, .team-card h3, .team-joke { text-align: left; }
  .team-joke { margin-bottom: 14px; }
  .team-grid .team-card:nth-child(n)::after, .team-grid .team-card:nth-child(3n+1):not(:first-child)::after { content: none; }
  .team-grid .team-card::before, .team-grid .team-card:nth-child(n)::before { animation-name: team-y; background: radial-gradient(circle at 2px 5px, var(--team-ink) 1.3px, transparent 1.8px) 0 0 / 4px var(--team-step) repeat-y; bottom: calc(var(--team-r) / -2); height: auto; left: calc(var(--team-rail) * -1 - 2px); right: auto; top: calc(var(--team-r) / -2); width: 4px; }
  .team-grid .team-card:first-child::before { top: var(--team-y0); }
  .team-grid .team-card:last-child::before { bottom: auto; height: calc(var(--team-r) / 2 + var(--team-y0)); }
  .team-grid .team-card .team-line::before, .team-grid .team-card .team-line::after { content: ""; }
  .team-grid .team-line::before { animation: none; background: var(--canvas); border: 1.5px solid var(--team-ink); border-radius: 50%; bottom: auto; box-sizing: border-box; height: 12px; left: calc(var(--team-rail) * -1 - 6px); top: calc(var(--team-y0) - 6px); width: 12px; z-index: 1; }
  .team-grid .team-line::after { animation-name: team-x; background: radial-gradient(circle at 5px 2px, var(--team-ink) 1.3px, transparent 1.8px) 0 0 / var(--team-step) 4px repeat-x; height: 4px; left: calc(var(--team-rail) * -1 + 7px); top: calc(var(--team-y0) - 2px); width: calc(var(--team-rail) - 7px); }
  .team-steps, .team-offers { grid-template-columns: 1fr; }
  .team-offers { margin-inline: auto; max-width: 760px; }
}
@media (max-width: 560px) {
  .team-page { --team-face: 96px; --team-pad: 20px; --team-rail: 12px; }
  .team-grid { padding-left: calc(var(--team-rail) + 6px); }
  .team-card { display: flex; padding: var(--team-pad) 16px 18px; }
  .team-face { margin: 0 auto 16px; }
  .team-role, .team-card h3, .team-joke { text-align: center; }
  .team-card h3 { font-size: 1.5rem; }
  .team-teaser .text-link { white-space: normal; }
}

@media (prefers-reduced-motion: reduce) {
  .team-card::before, .team-card::after, .team-line::before, .team-line::after { animation: none; }
}
.team-offers .is-free .offer-name { color: #fff; }
.team-offers .team-face.is-question { background: transparent; }
.team-line { inset: 0; pointer-events: none; position: absolute; }