/* The card-less section header. Each of the three anatomies that compose with it
 *  keeps its own sheet; this one pulls them in 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 once there is a group, so it rides the title's FIRST line
   *  instead of the centre of a column whose height is however far the
   *  description wrapped. A lone trailing child still centres. */
  .lotics-section-heading[data-grouped] {
    align-items: flex-start;
  }

  /* The group wraps INSIDE itself and shrinks; only its relationship to the
   *  TITLE is rigid. The shrink and the floor are a PAIR — shrink alone floors
   *  the box at its min-content width. */
  .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);
  }

  /* The narrowest the TITLE column may be before the row wraps and the trailing
   *  slot drops to the next line: without a floor, a title beside a button that
   *  holds its intrinsic width is the half that gives way. The floor is the READ
   *  one, shared with a value column and a `Table` flex column. */
  .lotics-section-heading__title {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex: 1 1 0%;
    min-width: var(--lotics-value-min-width);
    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);
  }
}