/*
  Wortic macOS UI Kit — Titles
  wm-title — títulos de página e de seção: eyebrow (sobretítulo em
  accent), heading na escala HIG, contador em pílula, descrição com
  largura de leitura e bloco de ações à direita. Sem comportamento:
  é pura tipografia e layout.
*/

@layer components {
  .wm-title {
    display: flex;
    align-items: flex-start;
    gap: var(--wm-space-8);
  }

  .wm-title__main {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--wm-space-2);
  }

  /* ---------- Eyebrow ---------- */

  .wm-title__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--wm-space-3);
    font-size: var(--wm-font-size-subheadline);
    line-height: var(--wm-leading-subheadline);
    letter-spacing: var(--wm-letter-spacing-wide);
    font-weight: var(--wm-font-weight-semibold);
    text-transform: uppercase;
    color: var(--wm-accent-text);
  }
  .wm-title__eyebrow-icon {
    flex: none;
    display: inline-flex;
  }

  /* ---------- Heading ---------- */

  .wm-title__heading {
    display: flex;
    align-items: center;
    gap: var(--wm-space-4);
    margin: 0;
    font-size: var(--wm-font-size-title3);
    line-height: var(--wm-leading-title3);
    letter-spacing: var(--wm-tracking-title3);
    font-weight: var(--wm-font-weight-semibold);
    color: var(--wm-label-primary);
    min-width: 0;
  }
  .wm-title__heading-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Título de página: large-title, peso bold */
  .wm-title--page .wm-title__heading {
    font-size: var(--wm-font-size-large-title);
    line-height: var(--wm-leading-large-title);
    letter-spacing: var(--wm-tracking-large-title);
    font-weight: var(--wm-font-weight-bold);
  }

  /* Título intermediário (grupo dentro de página) */
  .wm-title--group .wm-title__heading {
    font-size: var(--wm-font-size-title2);
    line-height: var(--wm-leading-title2);
    letter-spacing: var(--wm-tracking-title2);
  }

  /* ---------- Contador ---------- */

  .wm-title__counter {
    flex: none;
    min-width: var(--wm-control-height-xs);
    height: var(--wm-control-height-xs);
    padding-inline: var(--wm-space-4);
    display: inline-grid;
    place-items: center;
    border-radius: var(--wm-radius-pill);
    background: var(--wm-fill-secondary);
    color: var(--wm-label-secondary);
    font-size: var(--wm-font-size-caption);
    line-height: 1;
    letter-spacing: var(--wm-tracking-caption);
    font-weight: var(--wm-font-weight-semibold);
  }
  .wm-title__counter--accent {
    background: var(--wm-accent-fill);
    color: var(--wm-accent-text);
  }

  /* ---------- Descrição ---------- */

  .wm-title__desc {
    margin: 0;
    font-size: var(--wm-font-size-body);
    line-height: var(--wm-line-height-relaxed);
    letter-spacing: var(--wm-tracking-body);
    color: var(--wm-label-secondary);
    max-width: 65ch;
  }

  /* ---------- Ações à direita ---------- */

  .wm-title__actions {
    flex: none;
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: var(--wm-space-3);
    /* alinha opticamente com a linha do heading de seção */
    padding-top: var(--wm-space-1);
  }
  .wm-title--page .wm-title__actions {
    padding-top: var(--wm-space-3);
  }

  /* ---------- Divisor ---------- */

  .wm-title--divided {
    padding-bottom: var(--wm-space-6);
    border-bottom: var(--wm-border-width-hairline) solid
      color-mix(in srgb, var(--wm-separator) 85%, transparent);
  }
}