/*
 * Bitless Opening Hours (op de pagina)
 *
 * Met opzet het minimum: de regels uit elkaar, het label eruit gelicht. Alles erft
 * verder van het thema — geen kleuren, geen lettertype, geen groottes. Zo valt het
 * nergens uit de toon en hoeft een thema niets terug te vechten.
 *
 * Staat dit in de weg, zet de opmaak dan uit bij Settings → Opening hours; de klassen
 * blijven staan zodat je ze zelf kunt vormgeven.
 */

.bl-hours {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.bl-hours-row {
  margin: 0;
}

.bl-hours-label {
  font-style: normal;
  font-weight: 600;
}

.bl-hours-note {
  margin: 0;
  opacity: 0.75;
}

/*
 * Met labels: twee kolommen, label links (één keer per groep), dagen en tijden rechts.
 * Eén grid voor alle groepen (display: contents op de groep), zodat de tweede kolom
 * overal op dezelfde lijn begint. De kolommen komen nooit onder elkaar: op een smalle
 * plek loopt binnen de tweede kolom de tijd onder de dagen door.
 */
.bl-hours {
  container-type: inline-size;
}

/*
 * Een container telt niet mee voor de breedte van zijn ouder. Staat de shortcode in een
 * flex-kolom met align-items: flex-start (zoals bouwers hun kolommen vaak zetten), dan
 * krimpt de wrapper van de bouwer tot de inhoud, en dus tot 0. Daarom nemen het blok en
 * de wrapper om de shortcode de volle breedte van de kolom.
 */
.bl-hours,
:has(> .bl-hours) {
  align-self: stretch;
}

.bl-hours-list {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 1.25em;
  row-gap: 0.6em;
  margin: 0;
}

.bl-hours-group {
  display: contents;
}

.bl-hours-list .bl-hours-label,
.bl-hours-times {
  margin: 0;
}

.bl-hours-times {
  display: flex;
  flex-direction: column;
  gap: 0.4em;
}

/* Smal: de tijd altijd onder de dagen, ook als een korte regel naast elkaar zou passen,
   zodat elke regel er hetzelfde uitziet. */
.bl-hours-times .bl-hours-row {
  display: flex;
  flex-direction: column;
}

.bl-hours-days,
.bl-hours-time {
  white-space: nowrap;
}

/*
 * Is er ruimte genoeg, dan krijgen dagen en tijden elk een eigen kolom, zodat alle
 * tijden recht onder elkaar staan, ook over de groepen heen (subgrid).
 */
@supports (grid-template-columns: subgrid) {
  @container (min-width: 18em) {
    .bl-hours-list {
      grid-template-columns: max-content max-content minmax(0, 1fr);
    }

    .bl-hours-times {
      grid-column: 2 / -1;
      display: grid;
      grid-template-columns: subgrid;
      column-gap: 0.75em;
      row-gap: 0.15em;
    }

    .bl-hours-times .bl-hours-row {
      display: contents;
    }
  }
}