/* Flight hubs (/vertrektijden/, /aankomsttijden/, /luchtvaartmaatschappijen/; inc/hubs.php, template-parts/hub.php).
   One bold thing: the airport board, each code on a split-flap card like the logo's K (deep card, hinge line across
   the middle; .flap in main.css). The rest stays quiet: photo hero with the switch between the three hubs (main.css,
   shared with the airport pages), page text, a short link list and the destination mosaic from the front page
   (front.css). */

/* the board */
.hub-board-wrap{padding-top:36px}
.hub-board-title{margin:0 0 6px}
.hub-board-group{margin-top:24px}
.hub-country{margin:0 0 10px;font:700 1rem/1.3 var(--font);color:var(--muted)}
.hub-board{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,340px),1fr));gap:10px;margin:0;padding:0;list-style:none}
.hub-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;align-items:center;min-height:76px;padding:12px 16px 12px 12px;color:var(--ink);text-decoration:none;background:#fff;border:1px solid var(--line);border-radius:var(--radius);transition:border-color .15s ease,background-color .15s ease}
.hub-row:hover{border-color:var(--blue);background:#F7FAFF;color:var(--ink)}
.hub-code{grid-row:1/3}
.hub-name{font:800 1.125rem/1.2 var(--display);color:var(--deep);overflow-wrap:anywhere;text-wrap:balance}
.hub-row:hover .hub-name{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:4px}
.hub-line{grid-column:2;color:var(--muted);font-size:.9375rem;line-height:1.35}
.hub-go{grid-row:1/3;grid-column:3;display:grid;place-items:center;width:36px;height:36px;color:var(--blue);border-radius:50%;background:var(--air);transition:transform .15s ease}
.hub-row:hover .hub-go{transform:translateX(3px)}
/* a second, separate link under the region for airports with a destinations page (no link inside the row link) */
.hub-item{position:relative}
.hub-row{height:100%;align-content:center}
.hub-board:has(.has-dest) .hub-row{align-content:start}
.has-dest .hub-row{padding-bottom:44px}
/* side by side, every row as tall as the tallest: a two-line name, the region and the Bestemmingen link */
@media (min-width:761px){.hub-board:has(.has-dest) .hub-row{min-height:122px}.hub-board:not(:has(.has-dest)) .hub-row{min-height:88px}}
.hub-dest{position:absolute;left:87px;bottom:6px;display:inline-flex;align-items:center;min-height:36px;padding:0 4px;font-size:.9375rem;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.hub-dest:hover{color:var(--blue-d);text-decoration-thickness:2px}

/* page text and "Ook handig" */
.hub-more{display:grid;grid-template-columns:minmax(0,1fr);gap:40px;padding-top:var(--sp)}
.hub-text{max-width:var(--read)}
.hub-text h2{font-size:28px}
.hub-extra{align-self:start;padding:22px 24px;background:var(--air);border-radius:var(--radius)}
.hub-extra ul{margin:0;padding:0;list-style:none}
.hub-extra li+li{border-top:1px solid var(--line)}
.hub-extra a{display:flex;align-items:center;min-height:44px;font-weight:700;text-decoration:none}
.hub-extra a:hover{text-decoration:underline}
@media (min-width:1100px){.hub-more{grid-template-columns:minmax(0,var(--read)) 300px;justify-content:space-between}}

.hub-trip{padding-bottom:var(--sp)}
@media (prefers-reduced-motion:reduce){.hub-row:hover .hub-go{transform:none}}
/* the code card's top half drops once on hover or focus, like a split-flap board turning */
@media (prefers-reduced-motion:no-preference){
  .hub-row .flap::before{content:"";position:absolute;z-index:-1;left:0;right:0;top:0;height:50%;border-radius:var(--flap-r) var(--flap-r) 0 0;background:#2A5BD0;transform-origin:50% 100%}
  .hub-row:is(:hover,:focus-visible) .flap::before{animation:hub-flap .25s ease-in}
  @keyframes hub-flap{from{transform:perspective(160px) rotateX(-90deg);background:#5C86E8}}
}