/* ═══════════════ bijpip — collecties.css ═══════════════
   29-10-2026 (wens klant): de foto's in "Waar wil je beginnen?" waren
   onscherp en te ver ingezoomd. Oorzaak: liggende categoriefoto's (3:2)
   werden in een smalle staande kolom van 180px geperst en daardoor sterk
   bijgesneden en opgeschaald. Nu:
   - gewone tegels: foto bovenaan over de volle tegelbreedte (4:3), tekst eronder;
   - de brede eerste tegel: foto links (3:2, dus de hele foto), tekst rechts;
   - minder zoom bij hover.
   Alleen geladen door templates/page-collecties.php.
   ═══════════════════════════════════════════════════════ */

body.bijpip-p-collecties .tiles .tile {
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0;
}
body.bijpip-p-collecties .tiles .tile__media,
body.bijpip-p-collecties .tiles .tile--wide .tile__media {
  min-height: 0;
  aspect-ratio: 4 / 3;
}
body.bijpip-p-collecties .tiles .tile__media img {
  object-fit: cover;
  object-position: 50% 45%;
}
body.bijpip-p-collecties .tiles .tile:hover .tile__media img { transform: scale(1.02); }
body.bijpip-p-collecties .tiles .tile__body { padding: 20px 24px 24px; }

/* Brede eerste tegel: naast elkaar, foto in zijn eigen 3:2-verhouding. */
body.bijpip-p-collecties .tiles .tile--wide {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  grid-template-rows: auto;
}
body.bijpip-p-collecties .tiles .tile--wide .tile__media { aspect-ratio: 3 / 2; }
body.bijpip-p-collecties .tiles .tile--wide .tile__body {
  padding: clamp(22px, 3vw, 40px);
  align-self: center;
}

@media (max-width: 900px) {
  body.bijpip-p-collecties .tiles .tile--wide { grid-template-columns: minmax(0, 1fr); }
  body.bijpip-p-collecties .tiles .tile--wide .tile__body { padding: 20px 24px 24px; }
}
@media (max-width: 640px) {
  body.bijpip-p-collecties .tiles .tile__body,
  body.bijpip-p-collecties .tiles .tile--wide .tile__body { padding: 16px 18px 22px; }
}

/* 02-11-2026 (wens Marinka): op laptop/desktop waren de foto's te groot.
   Vanaf 901px: compacte kaarten, kleinere foto LINKS en de tekst (naam,
   aantallen, subcategorieknoppen) ERNAAST - ook bij de brede uitgelichte
   tegel. Onder 901px (mobiel/tablet) blijft alles zoals het was. */
@media (min-width: 901px) {
  body.bijpip-p-collecties .tiles .tile,
  body.bijpip-p-collecties .tiles .tile--wide {
    grid-template-columns: minmax(0, 36%) minmax(0, 1fr);
    grid-template-rows: auto;
    align-items: stretch;
  }
  body.bijpip-p-collecties .tiles .tile--wide {
    grid-template-columns: minmax(0, 30%) minmax(0, 1fr);
  }
  body.bijpip-p-collecties .tiles .tile__media,
  body.bijpip-p-collecties .tiles .tile--wide .tile__media {
    aspect-ratio: auto;
    min-height: 210px;
    height: 100%;
  }
  body.bijpip-p-collecties .tiles .tile--wide .tile__media { min-height: 240px; }
  body.bijpip-p-collecties .tiles .tile__media img,
  body.bijpip-p-collecties .tiles .tile--wide .tile__media img { min-height: 0; }
  body.bijpip-p-collecties .tiles .tile__body,
  body.bijpip-p-collecties .tiles .tile--wide .tile__body {
    padding: 20px 24px 20px 26px;
    align-self: center;
  }
  body.bijpip-p-collecties .tiles .tile__body h3 { font-size: 23px; }
  body.bijpip-p-collecties .tiles .tile__intro { margin-top: 8px; }
  body.bijpip-p-collecties .tiles .sublist { margin-top: 12px; }
}