.aitlocations,
.aitlocations * { box-sizing: border-box; }

/* v0.3.0 – compactere homepage-uitvoering */
.aitlocations {
  width: 100%;
  margin: 18px auto;
  color: #fff;
  background: #0a0a0a;
  font-family: inherit;
}

.aitlocations__inner {
  width: min(1400px, calc(100% - 40px));
  margin: 0 auto;
  padding: 30px 0;
}

.aitlocations__header {
  max-width: 760px;
  margin: 0 auto 20px;
  text-align: center;
}

.aitlocations__eyebrow {
  margin-bottom: 5px;
  color: var(--aitlocations-accent, #f25a00);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
}

.aitlocations__title {
  margin: 0;
  font-size: clamp(25px, 2.7vw, 41px);
  line-height: 1.03;
  font-weight: 800;
  text-transform: uppercase;
}

.aitlocations__title span,
.aitlocations__title strong { display: block; }
.aitlocations__title strong { color: var(--aitlocations-accent, #f25a00); }

.aitlocations__header p {
  margin: 10px 0 0;
  color: #d0d0d0;
  font-size: 14px;
  line-height: 1.45;
}

.aitlocations__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

.aitlocations__card {
  overflow: hidden;
  min-width: 0;
  border: 1px solid #292929;
  border-radius: 7px;
  background: linear-gradient(180deg, #111 0%, #0b0b0b 100%);
  box-shadow: 0 7px 20px rgba(0,0,0,.16);
}

.aitlocations__card--none {
  display: flex;
  min-height: 230px;
}

.aitlocations__card--none .aitlocations__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.aitlocations__media {
  aspect-ratio: 16 / 7.8;
  overflow: hidden;
  background: #151515;
}

.aitlocations__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.aitlocations__illustration {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 105px;
  padding: 12px 20px;
  background: radial-gradient(circle at 50% 30%, #181818 0%, #0c0c0c 70%);
  border-bottom: 1px solid #242424;
}

.aitlocations__illustration svg {
  width: 100%;
  max-width: 155px;
  fill: none;
  stroke: #d8d8d8;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aitlocations__illustration circle { stroke: var(--aitlocations-accent, #f25a00); }

.aitlocations__body { padding: 15px 16px; }

.aitlocations__body h3 {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin: 0 0 10px;
  color: #fff;
  font-size: 15px;
  line-height: 1.22;
  text-transform: uppercase;
}

.aitlocations__body h3 small {
  display: block;
  margin-top: 2px;
  color: #fff;
  font-size: inherit;
  font-weight: inherit;
}

.aitlocations__pin {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  fill: var(--aitlocations-accent, #f25a00);
  stroke: var(--aitlocations-accent, #f25a00);
}
.aitlocations__pin circle { fill: #0a0a0a; stroke: none; }

.aitlocations__address {
  min-height: 40px;
  margin-left: 26px;
  color: #d0d0d0;
  font-size: 13px;
  line-height: 1.42;
}

.aitlocations__hours {
  display: flex;
  gap: 8px;
  margin: 11px 0 0;
  padding-top: 11px;
  border-top: 1px solid #252525;
  color: #ddd;
  font-size: 12px;
  line-height: 1.45;
}

.aitlocations__hours svg,
.aitlocations__route svg {
  flex: 0 0 17px;
  width: 17px;
  height: 17px;
  fill: none;
  stroke: var(--aitlocations-accent, #f25a00);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aitlocations__route {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  margin-top: 12px;
  border: 1px solid #5a5a5a;
  border-radius: 4px;
  color: #fff !important;
  font-size: 11px;
  font-weight: 800;
  text-decoration: none !important;
  transition: .2s ease;
}

.aitlocations__route:hover {
  border-color: var(--aitlocations-accent, #f25a00);
  background: var(--aitlocations-accent, #f25a00);
}
.aitlocations__route:hover svg { stroke: #fff; }

.aitlocations__process {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 16px;
  align-items: center;
  margin-top: 15px;
  padding: 15px 20px;
  border: 1px solid #282828;
  border-radius: 7px;
  background: #0d0d0d;
}

.aitlocations__process-icon svg {
  width: 40px;
  height: 40px;
  fill: none;
  stroke: var(--aitlocations-accent, #f25a00);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.aitlocations__process h3 {
  margin: 0 0 3px;
  color: #fff;
  font-size: 15px;
}

.aitlocations__process p {
  margin: 0;
  color: #ccc;
  font-size: 12px;
  line-height: 1.45;
}

.aitlocations__process ul {
  min-width: 215px;
  margin: 0;
  padding: 0;
  list-style: none;
  color: #eee;
  font-size: 12px;
}

.aitlocations__process li { margin: 3px 0; }
.aitlocations__process li::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid var(--aitlocations-accent, #f25a00);
  border-radius: 50%;
  color: var(--aitlocations-accent, #f25a00);
  font-size: 9px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .aitlocations__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aitlocations__process { grid-template-columns: auto minmax(0, 1fr); }
  .aitlocations__process ul { grid-column: 2; min-width: 0; }
}

@media (max-width: 640px) {
  .aitlocations { margin: 14px auto; }
  .aitlocations__inner { width: calc(100% - 24px); padding: 25px 0; }
  .aitlocations__header { margin-bottom: 17px; }
  .aitlocations__title { font-size: clamp(25px, 9vw, 34px); }
  .aitlocations__header p { font-size: 13px; }
  .aitlocations__grid { grid-template-columns: 1fr; gap: 11px; }
  .aitlocations__card--none { min-height: 0; }
  .aitlocations__illustration { min-height: 100px; }
  .aitlocations__body { padding: 15px; }
  .aitlocations__process { grid-template-columns: 1fr; padding: 15px; }
  .aitlocations__process ul { grid-column: auto; }
}


/* Openingstijden regel 2: veilige HTML en hyperlink */
.aitlocations__hours-extra {
  margin-top: 3px;
}

.aitlocations__hours-extra a {
  color: var(--aitlocations-accent);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.aitlocations__hours-extra a:hover,
.aitlocations__hours-extra a:focus {
  color: #fff;
  text-decoration: none;
}


/* v0.5.0 – uitgebreide CMS-pagina */
.aitlocations--cms {
  margin-top: 8px;
  margin-bottom: 32px;
}

.aitlocations--cms .aitlocations__inner {
  width: min(1400px, calc(100% - 30px));
  padding-top: 42px;
  padding-bottom: 42px;
}

.aitlocations--cms .aitlocations__header {
  max-width: 860px;
  margin-bottom: 30px;
}

.aitlocations--cms .aitlocations__header p {
  font-size: 15px;
}

.aitlocations--cms .aitlocations__grid {
  gap: 18px;
}

.aitlocations--cms .aitlocations__card--none {
  min-height: 260px;
}

.aitlocations--cms .aitlocations__body {
  padding: 20px;
}

.aitlocations--cms .aitlocations__process {
  margin-top: 22px;
  padding: 20px 24px;
}

@media (max-width: 640px) {
  .aitlocations--cms .aitlocations__inner {
    width: calc(100% - 20px);
    padding-top: 28px;
    padding-bottom: 28px;
  }
}