/* Pulls in its three anatomies' sheets because they ship from one module. */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@import "./section.css";
@import "./subsection.css";
@import "./subsection_heading.css";

@layer lotics.components {
  .lotics-section-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* Top-aligned with a group, riding the title's first line; a lone trailing child centres. */
  .lotics-section-heading[data-grouped] {
    align-items: flex-start;
  }

  /* Only the group's relation to the title is rigid; shrink needs the floor, or it floors at min-content. */
  .lotics-section-heading__trailing {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    flex-shrink: 1;
    min-width: 0;
    gap: var(--lotics-space-8);
  }

  /* Without a floor the title gives way beside an intrinsic-width button. The read floor, shared with
     value and `Table` flex columns — or half a row narrower than two of them, so a phone's heading seats
     its add beside the title rather than on a line of its own. */
  .lotics-section-heading__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0%;
    min-width: min(var(--lotics-value-min-width), 50%);
    gap: var(--lotics-space-4);
  }

  .lotics-section-heading__title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-4);
  }
}