/*
 * The services hub (services-hub.mjs, /services/), over apple-service.css (its hero, logo band and
 * section heads). The five services as cards on white, two across then three, one on phones: the
 * service's picture (its film on hover, apple.css .project-media), its name, its line and
 * « Découvrir ». Then the types of videos and the expertises: each group of the menu a light grey
 * panel of links, side by side.
 */
.hub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(2rem,3.5vw,3rem) clamp(1rem,2vw,1.5rem);width:min(100% - 2 * var(--gutter),80rem);margin:0 auto;padding:0;list-style:none}
.hub-service{grid-column:span 2}
.hub-service--wide{grid-column:span 3}
.hub-card{display:grid;align-content:start;gap:1.125rem;height:100%;color:var(--label)}
.hub-card:hover .project-poster{transform:scale(1.04)}
.hub-card-text{display:grid;justify-items:start;gap:.5rem}
.hub-card-title{display:flex;flex-wrap:wrap;align-items:center;gap:.375rem .75rem;margin:0;font-size:clamp(1.375rem,1.1rem + .8vw,1.75rem);font-weight:500;line-height:1.15;letter-spacing:-.02em}
.hub-badge{padding:.1875rem .5rem;border-radius:calc(var(--radius) / 2);box-shadow:inset 0 0 0 1px var(--black-24);font-size:.6875rem;font-weight:600;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--label-2)}
.hub-card-note{margin:0;max-width:34rem;font-size:1.0625rem;line-height:1.45;color:var(--label-2);text-wrap:pretty}
.hub-card-more{display:inline-flex;align-items:center;gap:.375rem;font-size:1rem;font-weight:500;color:var(--button)}
.hub-card-more .icon,.hub-link .icon{flex:none;width:1.125rem;height:1.125rem;transition:transform .2s var(--ease-standard)}
.hub-card:hover .hub-card-more .icon,.hub-card:focus-visible .hub-card-more .icon,.hub-link:hover .icon,.hub-link:focus-visible .icon{transform:translateX(.25rem)}

.hub-index>*{width:min(100% - 2 * var(--gutter),80rem);margin-inline:auto}
.hub-index + .hub-index{padding-top:0}
.hub-groups{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1rem}
.hub-group{padding:clamp(1.25rem,2vw,1.75rem);border-radius:var(--radius);background:var(--bg-alt)}
.hub-group-title{margin:0 0 .5rem;font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--label)}
.hub-links{margin:0;padding:0;list-style:none}
.hub-links li + li{border-top:1px solid var(--black-6)}
.hub-link{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:3rem;padding:.625rem 0;font-size:1.0625rem;font-weight:500;line-height:1.3;color:var(--label);transition:color .2s var(--ease-standard)}
.hub-link .icon{color:var(--button)}
.hub-link:hover{color:var(--button)}

/* Tablets: two cards across; phones: one. */
@media (max-width:64rem){
  .hub-service,.hub-service--wide{grid-column:span 3}
}
@media (max-width:40rem){
  .hub-service,.hub-service--wide{grid-column:1 / -1}
}
@media (prefers-reduced-motion:reduce){
  .hub-card-more .icon,.hub-link .icon{transition:none;transform:none!important}
}