/* De Gids (/<stad>/gids, /<stad>/gids/beginnen): only what veld.css does not have yet. Tokens from veld.css,
   spacing from the scale (--s-1 … --s-8 = 4 … 64 px). Ontwerp: docs/ontwerp/ontwerpen-5-nov/gids/. */

.gd .gd-meta { font-size: .9375rem; line-height: 1.4; color: var(--text-3); }
.gd .v-sec > h2 { margin: 0 0 var(--s-4); }
.gd .page-head + .v-sec { border-top: 0; padding-top: 0; }
/* titles in ink, the link shows on hover (principle 3) */
.veld .gd-lead, .veld .gd-card, .veld .gd-who { color: var(--text); }

/* Nu en dit seizoen: the season list as the lead card */
.gd-lead { display: flex; flex-direction: column; gap: var(--s-2); max-width: 760px; color: var(--text); text-decoration: none; }
.gd-lead:hover { text-decoration: none; }
.gd-lead:hover .gd-lead-t { text-decoration: underline; }
.gd-lead-t { font: 700 clamp(1.6rem, 3.4vw, 2.1rem)/1.05 "Barlow Condensed", var(--font); text-transform: uppercase; letter-spacing: .01em; }
.gd-more { margin: var(--s-5) 0 0; }

/* photo with its credit */
.gd-ph { position: relative; display: block; overflow: hidden; border-radius: var(--r-l); background: var(--fill); aspect-ratio: 16 / 7; margin: 0; }
.gd-ph img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gd-cred { position: absolute; right: var(--s-2); bottom: var(--s-2); padding: 2px var(--s-2); border-radius: var(--r-s); font-size: .75rem; font-weight: 600; color: var(--on-pitch); background: rgba(14, 26, 20, .6); }

/* Zo begin je: sport cards */
.gd-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--s-5); }
.gd-card { display: flex; flex-direction: column; gap: var(--s-2); color: var(--text); text-decoration: none; }
.gd-card:hover { text-decoration: none; }
.gd-card:hover .gd-card-t { text-decoration: underline; }
.gd-card .nophoto { aspect-ratio: 4 / 3; border-radius: var(--r-l); }
.gd-card-t { font-size: 1.25rem; font-weight: 700; line-height: 1.2; }
.gd-help { margin: var(--s-5) 0 0; font-weight: 700; }

/* Wat kost het, Voor wie: quiet tiles */
.gd-whos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--s-3); }
.gd-who { display: flex; flex-direction: column; gap: var(--s-1); height: 100%; box-sizing: border-box; padding: var(--s-4); border-radius: var(--r-l); background: var(--fill); color: var(--text); text-decoration: none; }
.gd-who:hover { background: var(--fill-strong); text-decoration: none; }
.gd-who-t { font-size: 1.0625rem; font-weight: 700; }
.gd-who:hover .gd-who-t { text-decoration: underline; }

/* the season list */
.veld .wrap > .page-head.gd-head h1 { max-width: 24ch; font-size: clamp(2.1rem, 5.4vw, 3.6rem); }
.gd-head .lead { max-width: 60ch; }
.gd-by { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-4) 0 0; font-size: .9375rem; color: var(--text-3); }
.gd-by b { color: var(--text); }
.gd-by-mark { display: inline-grid; place-items: center; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--pitch); color: var(--ball); font-weight: 800; font-size: .75rem; }
.gd-hero { margin: 0 0 var(--s-6); }
.gd-cols { display: flex; flex-wrap: wrap; gap: var(--s-6) var(--s-7); padding-bottom: var(--s-7); }
.gd-main { flex: 999 1 560px; min-width: 0; }
.gd-side { flex: 1 1 280px; min-width: 0; display: flex; flex-direction: column; gap: var(--s-4); }
.gd-chips { margin: 0 0 var(--s-2); }
.gd-day { margin-top: var(--s-5); }
.gd-day[hidden] { display: none; }
.gd-day-h { margin: 0 0 var(--s-1); font-size: 1.375rem; }
.gd-box { padding: var(--s-5); border-radius: var(--r-l); background: var(--fill); }
.gd-box .h-small { margin: 0 0 var(--s-3); }
.gd-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); font-size: 1rem; }
.gd-side-links { display: flex; flex-direction: column; gap: var(--s-2); margin: 0; font-weight: 700; }
.gd-empty { max-width: 60ch; margin: 0 0 var(--s-4); font-size: 1.0625rem; }
.gd-empty:last-child { padding-bottom: var(--s-7); }

@media (max-width: 760px) {
  .gd-ph { aspect-ratio: 4 / 3; }
  /* the four jump links on one row (Levi, ronde 1) */
  .gd .page-head .quick { display: flex; flex-wrap: nowrap; gap: var(--s-2); overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--s-4)); padding-right: var(--s-4); }
  .gd .page-head .quick .chip { flex: none; }
  .gd-chips { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: calc(-1 * var(--s-4)); padding-right: var(--s-4); }
  .gd-chips .chip { flex: none; }
  .gd-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4) var(--s-3); }
  .gd-card-t { font-size: 1.0625rem; }
  /* phone: the numbers above the list, the links under it */
  .gd-side { display: contents; }
  .gd-box { order: -1; flex: 1 1 100%; padding: var(--s-4); }
  .gd-box .h-small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .gd-facts { flex-direction: row; flex-wrap: wrap; gap: var(--s-1) var(--s-4); }
  .gd-side-links { order: 1; flex: 1 1 100%; }
  .gd-cols { gap: var(--s-5); }
}

/* nieuws van clubs (Pro) */
.gd-news { list-style: none; margin: 0; padding: 0; }
.gd-news li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--hair); }
.gd-news a { font-weight: 600; }
.gd-news span { color: var(--text-2); }
.gd-post > p { white-space: pre-line; }

/* De artikelen (/<stad>/gids/<slug>): prose, tabellen en de vormen die alleen hier voorkomen */
.gd-body > section { margin: 0 0 var(--s-7); scroll-margin-top: var(--s-7); }
.gd-body > section:last-child { margin-bottom: 0; }
.gd-body h2 { margin: 0 0 var(--s-3); }
.gd-body h3 { margin: var(--s-5) 0 var(--s-2); font-size: 1.125rem; font-weight: 700; }
.gd-body p, .gd-body li { font-size: 1.0625rem; line-height: 1.55; max-width: 68ch; }
.gd-body p { margin: 0 0 var(--s-3); }
.gd-list { margin: 0 0 var(--s-3); padding-left: var(--s-5); }
.gd-list li { margin-bottom: var(--s-2); }
.gd-body .gd-count { margin: var(--s-4) 0 var(--s-2); font-weight: 700; }
.gd-acts { margin: 0 0 var(--s-3); padding: 0; list-style: none; }
.gd-body .lc-list { margin: 0 0 var(--s-3); padding: 0; list-style: none; }

.gd-table { width: 100%; border-collapse: collapse; margin: 0 0 var(--s-4); font-size: 1rem; }
.gd-table th, .gd-table td { padding: var(--s-2) var(--s-3) var(--s-2) 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--hair); }
.gd-table thead th { font-weight: 700; border-bottom: 2px solid var(--hair); }
.gd-table tbody th { font-weight: 700; }
.gd-table td:last-child, .gd-table th:last-child { padding-right: 0; }
.gd-num td { font-variant-numeric: tabular-nums; }

/* padel: the court */
.gd-court { display: block; width: 100%; max-width: 520px; height: auto; margin: var(--s-3) 0; color: var(--text); }

/* running: the weeks */
.gd-weeks tbody th { width: 3ch; }
.gd-bar-h, .gd-bar-c { width: 26%; min-width: 88px; }
.gd-bar { display: block; height: 8px; margin: var(--s-2) 0 var(--s-1); border-radius: 0 4px 4px 0; background: var(--accent-ink); }
.gd-bar-v { font-size: .875rem; color: var(--text-2); white-space: nowrap; }

/* costs: one year as a range */
.gd-bars { list-style: none; margin: var(--s-4) 0; padding: 0; }
.gd-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--s-1) var(--s-3); padding: var(--s-3) 0; border-top: 1px solid var(--hair); max-width: none; }
.gd-bars-t { font-weight: 700; }
.gd-bars-a { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gd-range { grid-column: 1 / -1; display: block; height: 8px; border-radius: 4px; background: var(--fill); }
.gd-range span { display: block; height: 8px; border-radius: 4px; background: var(--accent-ink); }
.gd-bars-h, .gd-bars-w { grid-column: 1 / -1; font-size: .9375rem; color: var(--text-2); }

/* unusual sports */
.gd-odd { list-style: none; margin: 0; padding: 0; counter-reset: gd; }
.gd-odd > li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--s-5); padding: var(--s-5) 0; border-top: 1px solid var(--hair); scroll-margin-top: var(--s-7); max-width: none; }
.gd-odd > li:first-child { border-top: 0; padding-top: 0; }
.gd-odd h2 { margin: 0 0 var(--s-1); }
.gd-body .gd-odd-hook { font-weight: 700; margin-bottom: var(--s-2); }
.gd-odd-art .nophoto { border-radius: var(--r-l); }
.gd-body .gd-odd-clubs { margin-bottom: 0; }

/* the guides on the hub */
.gd-ph-card { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--r-l); background: var(--fill); }
.gd-ph-card img { display: block; width: 100%; height: 100%; object-fit: cover; }

.gd-faq h3 { margin-top: var(--s-4); }

@media (max-width: 760px) {
  .gd-body > section { margin-bottom: var(--s-6); }
  .gd-table { font-size: .9375rem; }
  .gd-table th, .gd-table td { padding-right: var(--s-2); }
  .gd-odd > li { grid-template-columns: 72px minmax(0, 1fr); gap: var(--s-3); }
}
.gd-now { grid-template-columns: minmax(0, 1fr); max-width: 760px; }