/* Productfiche (/producten/:id): header, main sections and a side column ------ */
/* Phones: one column, activation panel first; desktop: the sections next to the activation panel and a sidebar. */
.civios-kruimelpad { padding-top: 1.5rem; font-size: .8125rem; color: var(--civios-muted); }
.civios-kruimelpad ol { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .5rem; }
.civios-kruimelpad li { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.civios-kruimelpad li + li::before { content: "/"; color: var(--civios-sage); }
.civios-kruimelpad a { font-weight: 600; color: var(--civios-teal); text-decoration: none; }
.civios-kruimelpad a:hover { text-decoration: underline; }
.civios-kruimelpad [aria-current] { overflow-wrap: anywhere; }

.civios-productkop { padding-top: 1.25rem; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 1rem 1.5rem; }
.civios-productkop-tekst { flex: 1 1 28rem; min-width: 0; }
.civios-productkop-tekst .civios-paginatitel { margin-top: .75rem; overflow-wrap: anywhere; }
.civios-productkop-tekst .civios-productkaart-leverancier { margin-top: .5rem; font-size: .9375rem; }
.civios-productkop-badges { margin-top: 1rem; display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.civios-productkop-acties { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }

.civios-productfiche { margin-top: 1.5rem; display: grid; gap: 1.25rem; align-items: start; }
.civios-productfiche-hoofd, .civios-productfiche-zij { display: grid; gap: 1.25rem; min-width: 0; }

.civios-fichesectie { padding: 1.25rem; }
.civios-fichesectie > .civios-inline-link { align-self: flex-start; }
.civios-fichetekst { margin-top: .75rem; display: grid; gap: .75rem; font-size: .9375rem; color: var(--civios-tekst); }
.civios-fichesectie .civios-standaarden { margin-top: .5rem; }
.civios-fichesectie .civios-productkaart-prijs { margin-top: .75rem; }
.civios-fichesectie .civios-tegel-lijst li { justify-content: flex-start; }
.civios-fichesectie .civios-tegel-lijst i { color: var(--civios-teal-mid); }

/* Integrations, licences and framework agreements: icon, text, badge. */
.civios-fichelijst { margin-top: 1rem; display: grid; gap: .75rem; }
.civios-fichelijst li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: .25rem .75rem;
  padding: .75rem;
  border: 1px solid var(--civios-line);
  border-radius: var(--civios-r-lg);
  background: var(--civios-paper);
}
.civios-fichelijst li:not(:has(.civios-icoonvak)) { grid-template-columns: minmax(0, 1fr); }
.civios-fichelijst .civios-icoonvak { width: 2.25rem; height: 2.25rem; border-radius: var(--civios-r-md); font-size: 1rem; background: var(--civios-wit); }
.civios-fichelijst-tekst { min-width: 0; font-size: .875rem; }
.civios-fichelijst-tekst strong { font-family: var(--civios-font-display); font-weight: 600; color: var(--civios-teal); overflow-wrap: anywhere; }
.civios-fichelijst-tekst p { margin-top: .125rem; color: var(--civios-muted); }
.civios-fichelijst li > .civios-badge { grid-column: -2; }

.civios-fiche-activatie .civios-paneel-noot { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .875rem; color: var(--civios-teal); }
.civios-fiche-activatie .civios-btn { width: 100%; }
.civios-fiche-activatie .civios-knoppen .civios-btn { width: auto; }

@media (min-width: 640px) {
  .civios-fichesectie { padding: 1.5rem; }
  .civios-fichelijst li { grid-template-columns: auto minmax(0, 1fr) auto; }
  .civios-fichelijst li:not(:has(.civios-icoonvak)) { grid-template-columns: minmax(0, 1fr) auto; }
  .civios-fichelijst li > .civios-badge { grid-column: auto; align-self: center; }
}

/* The sections span both rows; the 1fr row keeps the sidebar right under the activation panel. */
@media (min-width: 1024px) {
  .civios-productfiche {
    grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "hoofd activatie" "hoofd zij";
  }
  .civios-productfiche > .civios-fiche-activatie { grid-area: activatie; }
  .civios-productfiche-hoofd { grid-area: hoofd; }
  .civios-productfiche-zij { grid-area: zij; }
}