/*
 * Shared layout primitives for flex containers.
 *
 * `.layout-flex` is set on any flex container (custom-section inner,
 * block-group inner, etc.). Children opt into responsive sizing by setting
 * `--flex-m` and `--flex-d` (via the flex-item-style snippet).
 *
 * Why flex: <n> 1 0 — gap subtracts from total available space BEFORE
 * flex-basis is applied. Children share post-gap space proportionally
 * with no calc(), no math approximations.
 *
 * Specificity: we double the class selector to outweigh `width:` rules
 * declared in individual block stylesheets (which load AFTER this file
 * via {% stylesheet %} but only have specificity 0,1,0).
 */

.layout-flex.layout-flex > * {
  flex: var(--flex-m, 0 1 auto);
  min-width: 0;
}

@media (width > 750px) {
  .layout-flex.layout-flex > * {
    flex: var(--flex-d, var(--flex-m, 0 1 auto));
  }
}