/* Bedrijfspagina (/company/ID): compacte kaarten in de algemene stijl.
   Handgeschreven, geen SCSS-build. Secties dragen de classes vk-company-*. */

/* Bovenste band: naam, adres en contactpersoon */
.vk-company-hero h1 { margin: 0 0 4px; font-size: 32px; line-height: 1.2; }
.vk-company-hero .field { margin: 0 0 12px; font-size: 15px; line-height: 1.5; }
.vk-company-hero .field > h3.h { margin: 0 0 4px; font-size: 13px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #244d4e; }
.vk-company-hero .address { margin: 0; }
.vk-company-hero .block:has(.field-address),
.vk-company-hero .block:has(.field-iban) { display: inline-block; margin: 8px 40px 0 0; vertical-align: top; }
.vk-company-hero fieldset.user {
  margin: 0;
  padding: 16px 20px;
  border: 0;
  border-left: 4px solid #244d4e;
  background: #fff;
  box-shadow: 0 2px 10px 3px rgba(0, 0, 0, .05);
}
.vk-company-hero .user--title { margin: 0 0 8px; font-size: 20px; line-height: 1.3; }
.vk-company-hero .user--title .field { display: inline; margin: 0; font-size: inherit; }
.vk-company-hero .user--email,
.vk-company-hero .user--phone { margin: 0 0 4px; font-size: 14px; overflow-wrap: anywhere; }
.vk-company-hero .user label.h { display: inline-block; min-width: 70px; margin: 0; font-size: 13px; font-weight: 700; }
.vk-company-hero .user a { font-weight: 400; }

/* Kaarten */
.vk-company-cards .layout__region > * > .block,
.vk-company-cards .layout__region .block {
  margin: 0 0 16px;
  padding: 20px 24px;
  box-sizing: border-box;
  background: #fafafa;
  border: 1px solid #f0f0f0;
}
.vk-company-cards .layout__region .block > .field > h3.h,
.vk-company-cards .view__header,
.vk-company-cards .block > h2 {
  margin: 0 0 12px;
  font-size: 18px;
  line-height: 1.3;
}
.vk-company-cards table { width: 100%; margin: 0; font-size: 14px; }
.vk-company-cards th,
.vk-company-cards td { padding: 8px 10px; font-size: 14px; line-height: 1.4; overflow-wrap: anywhere; }
.vk-company-cards th { font-size: 14px; }
.vk-company-cards .table-responsive { margin: 0; }
.vk-company-cards .field { margin: 0; }

/* Beschikbare dagen als chips */
.vk-days { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.vk-day { display: flex; align-items: center; justify-content: center; width: 44px; height: 36px; margin: 0; padding: 0; border: 1px solid #c8d2d2; font-size: 14px; line-height: 1; }
.vk-day--on { border-color: #244d4e; background: #244d4e; color: #fff; font-weight: 700; }
.vk-day--off { background: #fff; color: #9aa7a7; }

@media (max-width: 767px) {
  .vk-company-hero h1 { font-size: 26px; }
  .vk-company-hero .block:has(.field-address),
  .vk-company-hero .block:has(.field-iban) { display: block; margin-right: 0; }
  .vk-company-cards .layout__region .block { padding: 16px; }
}

/* Kolombreedtes via CSS: de opgeslagen layoutinstelling "right_col_size_suffix"
   wordt door het config-schema naar 0 omgezet, waardoor de rechterkolom geen
   breedte-class krijgt. */
@media (min-width: 768px) {
  .vk-company-hero .layout__cols,
  .vk-company-cards .layout__cols { flex-wrap: nowrap; align-items: flex-start; }
  .vk-company-hero .layout__sidebar { flex: 2 1 0; width: auto; min-width: 0; }
  .vk-company-hero .layout__content { flex: 1 1 0; width: auto; min-width: 0; }
  .vk-company-cards .layout__sidebar,
  .vk-company-cards .layout__content { flex: 1 1 0; width: auto; min-width: 0; }
}

/* Nog compacter */
.vk-company-hero .layout__sidebar__row > .block { margin: 0; }
.vk-company-hero h1 { margin-bottom: 12px; }
.vk-company-hero .user--email,
.vk-company-hero .user--phone { display: flex; align-items: baseline; gap: 10px; margin: 0 0 6px; }
.vk-company-hero fieldset.user { padding: 14px 18px; }

/* Bewerkformulier: overzicht van diensten met overschrijfbare prijs/commissie */
.vk-variation-overview table { width: 100%; }
.vk-variation-overview th,
.vk-variation-overview td { padding: 6px 10px; font-size: 14px; line-height: 1.4; vertical-align: middle; }
.vk-variation-overview .form__element,
.vk-variation-overview .form-item { display: flex; align-items: center; gap: 6px; margin: 0; }
.vk-variation-overview input[type="number"] { width: 120px; padding: 6px 10px; font-size: 14px; }
.vk-variation-overview .description { margin: 0 0 12px; }

/* Logo bedrijf in de bovenste band */
.vk-company-hero .block:has(.field-media-company-files) { margin: 0 0 12px; }
.vk-company-hero .field-media-company-files img { display: block; width: auto; max-width: 220px; max-height: 80px; height: auto; object-fit: contain; }
.vk-company-hero .field-media-company-files .media { margin: 0; padding: 0; background: none; }
.vk-company-hero .field-media-company-files .field--name-name,
.vk-company-hero .field-media-company-files figcaption { display: none; }

/* Ruimte tussen adres en IBAN, titel "Contactpersoon" */
.vk-company-hero .layout__sidebar__row > .block + .block { margin-top: 16px; }
.vk-company-hero .block:has(.field-address) { margin-bottom: 16px; margin-right: 2em !important;}
.vk-company-hero .block:has(.field-iban) { margin-top: 16px; }
.vk-company-hero .field-default-contact-person > h3.h { margin: 0 0 8px; font-size: 13px; line-height: 1.3; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #244d4e; }

.vk-variation-overview td > div,
.vk-variation-overview td .form-item { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.vk-variation-overview .field-prefix,
.vk-variation-overview [class*="prefix"] { display: inline-block; margin: 0; }