/*
 * The `###` rung's heading row. Same anatomy as the section rung one step up —
 * a growing title column beside whatever rides its right edge — so a reader
 * meets one shape at every altitude.
 */
@layer theme, base, lotics, components, utilities;
@layer lotics.tokens, lotics.reset, lotics.components;

@layer lotics.components {
  .lotics-subsection-heading {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    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, so the heading breaks
   * one word per line while the verb beside it sits untouched. That is
   * backwards: the title names the group, the verb is the thing that can move.
   * The same READ floor the section rung takes, from the same token.
   */
  .lotics-subsection-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-subsection-heading__title-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    min-width: 0;
    gap: var(--lotics-space-4);
  }
}