/* ==========================================================================
   Aircoheld — aanvulling voor regiopagina's met plaatsen/stadsdelen
   (Amsterdam, Waterland). Laadt NA /breda/breda.css, zodat alle regio's
   exact hetzelfde Breda V2-designsysteem gebruiken; hier staan alleen de
   onderdelen die Breda niet heeft.
   ========================================================================== */

/* ---------- Plaatsen / stadsdelen ---------- */
.ah-places { background: #fff; }
.ah-places .info-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ah-places .info-card { background: var(--ah-grey); box-shadow: none; }
.ah-places .info-card__icon { background: var(--ah-orange); }
.ah-places__intro { margin: 10px 0 0; max-width: 640px; font: 500 15px/1.6 var(--ah-font); color: var(--ah-muted); }
.ah-places .ah-section-head .ah-btn { height: 44px; padding: 0 20px; flex: 0 0 auto; }

/* Langere hero-teksten (stadsdelen/plaatsen) — extra ruimte boven de card */
.ah-places-page .ah-hero__inner { padding-bottom: 112px; }
/* Langere knoptekst ("Doe de AircoCheck voor Amsterdam") mag over 2 regels */
.ah-places-page .ah-region-btn--primary { height: auto; min-height: 46px; padding-block: 10px; line-height: 1.25; }

@media (max-width: 1100px) {
  .ah-places .info-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .ah-places .info-card-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Certificering-intro in de USP-card (tekst uit de originele regiopagina) */
.ah-usp-card__intro { margin: -4px 0 10px; font: 500 12.5px/1.45 var(--ah-font); color: var(--ah-muted); }
/* Langere benefit-tekst ("Voor woningen en bedrijven in heel …") op 2 regels */
.ah-places-page .ah-hero__content { max-width: 610px; }

/* ---------- Overzichtspagina /regios/ ---------- */
.ah-hub .ah-hero__inner { min-height: 0; padding-bottom: 72px; }
.ah-hub-list { background: #fff; }
.ah-hub-list__inner { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 56px; align-items: start; }
.ah-hub-list__intro { margin: 12px 0 30px; max-width: 640px; font: 500 15.5px/1.6 var(--ah-font); color: var(--ah-muted); }
.ah-hub-group + .ah-hub-group { margin-top: 30px; }
.ah-home .ah-hub-group__title { margin: 0 0 12px; font: 700 13px/1 var(--ah-font); letter-spacing: .06em; text-transform: uppercase; color: var(--ah-orange-dark); }
.ah-hub-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ah-hub-card {
  display: flex; flex-direction: column; gap: 10px;
  padding: 20px 20px 18px; border-radius: var(--ah-radius); background: var(--ah-grey);
  color: var(--ah-text); text-decoration: none; border: 1px solid transparent;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.ah-hub-card:hover { transform: translateY(-2px); border-color: var(--ah-orange); box-shadow: 0 14px 30px -18px rgba(5, 15, 34, .45); color: var(--ah-text); }
.ah-hub-card__top { display: flex; align-items: center; justify-content: space-between; }
.ah-hub-card__top b { font: 800 19px/1.2 var(--ah-font); letter-spacing: -.02em; color: var(--ah-navy); }
.ah-hub-card__top span { color: var(--ah-orange); font-size: 20px; transition: transform .18s ease; }
.ah-hub-card:hover .ah-hub-card__top span { transform: translateX(3px); }
.ah-hub-card__desc { font: 500 14px/1.55 var(--ah-font); color: var(--ah-muted); }
.ah-hub-card .ah-tags { margin: 2px 0 0; }
.ah-hub-card .ah-tags li { background: #fff; }
.ah-hub-map { position: sticky; top: 24px; }
.ah-hub-map img { display: block; width: 100%; height: auto; }
@media (max-width: 1100px) {
  .ah-hub-list__inner { grid-template-columns: minmax(0, 1fr); }
  .ah-hub-map { position: static; max-width: 260px; justify-self: center; order: -1; }
}
@media (max-width: 720px) {
  .ah-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .ah-hub-map { max-width: 200px; }
}
.ah-404 .ah-hero__inner { min-height: 520px; padding-bottom: 80px; }
.ah-404__link { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.ah-404__link:hover { color: #ffb48d; }