/* Home page: the ranked list ('Aanbevolen') and the Over band; the Over block in the footer. Prototype B. */

/* ---------- Ranked list ---------- */
.home-ranked .ranked { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(24px, 4vw, 72px); }
.home-ranked .ranked li { border-bottom: 1px solid var(--hair); }
.home-ranked .ranked a {
  display: grid; grid-template-columns: 3.2ch 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; min-height: 72px; padding: 0 10px 0 0;
  text-decoration: none; transition: background-color .18s var(--ease), color .18s var(--ease);
}
.home-ranked .rk { font-family: var(--f-num); font-stretch: 62%; font-weight: 900; font-size: 34px; line-height: 1; }
/* The head of the cut-out in a square, not a circle (DESIGN.md: no illustrations in circles). */
.home-ranked .head { position: relative; width: 64px; height: 64px; overflow: hidden; align-self: end; }
.home-ranked .head img { position: absolute; left: -32px; top: calc(var(--t, .2) * -128px); width: 128px; height: 128px; max-width: none; }
.home-ranked .head.photo img { left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); }
.home-ranked .head.type {
  display: flex; align-items: flex-end; justify-content: center; font-family: var(--f-caps); font-stretch: 125%; font-weight: 800;
  font-size: 22px; color: var(--ink-3); padding-bottom: 12px;
}
.home-ranked .t { font-size: 18px; line-height: 1.3; }
.home-ranked .t b { font-weight: 700; }
.home-ranked .t span { color: var(--ink-2); }
.home-ranked .cat { font-family: var(--f-num); font-stretch: 62%; font-weight: 700; color: var(--ink-2); font-size: 20px; }
.home-ranked .ranked a:hover, .home-ranked .ranked a:focus-visible { background: var(--cc, var(--ink)); color: var(--on-cc); }
.home-ranked .ranked a:hover .t span, .home-ranked .ranked a:focus-visible .t span,
.home-ranked .ranked a:hover .cat, .home-ranked .ranked a:focus-visible .cat,
.home-ranked .ranked a:hover .head.type, .home-ranked .ranked a:focus-visible .head.type { color: var(--on-cc); }
.home-ranked .ranked a:focus-visible { outline-offset: 0; }

/* ---------- Over band ---------- */
.home-over .over-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 72px); }
.home-over .over-text { max-width: 62ch; color: var(--ink-2); font-size: 18px; line-height: 1.55; }
.home-over .over-text h3 {
  margin: 0 0 16px; font-family: var(--f-caps); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.08em; color: var(--ink);
}
.home-over .over-text p { margin: 0 0 14px; }
.home-over .over-text a { color: var(--ink); text-underline-offset: 3px; }
.home-over .over-text a:hover { text-decoration-thickness: 2px; }

/* ---------- Footer ---------- */
.site-foot .foot-over { max-width: 60ch; margin-bottom: 28px; }
.site-foot .foot-over h2 {
  margin: 0 0 14px; font-family: var(--f-caps); font-stretch: 125%; font-weight: 800; text-transform: uppercase;
  font-size: 13px; letter-spacing: 0.08em; color: var(--ink);
}
.site-foot .foot-over p { margin: 0 0 12px; font-size: 16px; line-height: 1.5; }
.site-foot .foot-over a { color: var(--ink); text-underline-offset: 3px; }

@media (max-width: 900px) {
  .home-ranked .ranked, .home-over .over-cols { grid-template-columns: minmax(0, 1fr); }
  .home-ranked .ranked a { grid-template-columns: 3ch 56px minmax(0, 1fr) auto; gap: 12px; }
  .home-ranked .head { width: 56px; height: 56px; }
  .home-ranked .head img { left: -28px; top: calc(var(--t, .2) * -112px); width: 112px; height: 112px; }
}