/* ════════════════════════════════════════════════════════════════
   DECISIO.BE — theme-hub.css
   Pages hubs thématiques (/themes/famille/, /sante/, /epargne/,
   /voiture/, /primes-energie-belgique/ et leurs équivalents NL/EN).

   Ces pages ne déclaraient aucun $page_css : toute leur mise en page
   vivait dans des attributs style="" (jusqu'à 65 par page). Un style
   inline ne peut pas être annulé par media query — les sections
   gardaient donc 60px de padding latéral sur un écran de 360px, soit
   240px utiles pour le texte.

   Les valeurs reprennent celles des inline pour ne rien changer en
   desktop ; seul le responsive s'ajoute.
   ════════════════════════════════════════════════════════════════ */

.hub-section {
  padding: 64px var(--gutter);
  border-bottom: var(--border);
}
.hub-section-alt { background: var(--cream); }
.hub-section-plain { border-bottom: none; }

/* Le corps de texte des hubs était à 17px inline, contre 16px sur les
   articles et les régions : trois tailles de corps pour un même site.
   Aligné sur les articles, avec la même mesure de lecture. */
.hub-section > p,
.hub-lead {
  font-size: 17px;
  line-height: 1.75;
  max-width: var(--measure);
  color: var(--black);
}

.hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-top: 24px;
}

.hub-card {
  border: var(--border);
  border-radius: 14px;
  padding: 24px;
  background: var(--white);
}
a.hub-card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  a.hub-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hard-sm); }
}

@media (max-width: 900px) {
  .hub-section { padding: 44px var(--gutter); }
}
@media (max-width: 560px) {
  .hub-section { padding: 36px var(--gutter); }
  .hub-card { padding: 20px; }
}