/* CoopMate design system — utilità di layout (RD-1). Poche, composabili, mobile-first. */

.ui-container {
    width: 100%;
    max-width: var(--ui-container);
    margin-inline: auto;
    padding-inline: var(--ui-gutter);
}

.ui-container--narrow {
    max-width: var(--ui-container-narrow);
}

.ui-section {
    margin-block: var(--ui-space-section);
}

/* Colonna: figli impilati con distanza costante (modificatori --sm / --lg). */
.ui-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ui-space-4);
}

.ui-stack--sm {
    gap: var(--ui-space-2);
}

.ui-stack--lg {
    gap: var(--ui-space-6);
}

.ui-stack--center {
    align-items: center;
}

.ui-stack > * {
    margin-block: 0;
}

/* Riga che va a capo (azioni, tag, filtri). */
.ui-cluster {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--ui-space-3);
}

.ui-cluster--between {
    justify-content: space-between;
}

.ui-cluster--center {
    justify-content: center;
}

.ui-cluster--end {
    justify-content: flex-end;
}

/* Griglia che si adatta: tante colonne quante ne stanno (min 14rem; --sm 10rem, --lg 20rem). */
.ui-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
    gap: var(--ui-space-4);
}

.ui-grid--sm {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
}

.ui-grid--lg {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--ui-space-5);
}

/* Intestazione di sezione: titolo a sinistra, link "Tutte..." a destra (a capo su schermi stretti). */
.ui-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--ui-space-1) var(--ui-space-4);
    margin-bottom: var(--ui-space-4);
}

.ui-head > :is(h2, h3) {
    margin: 0;
}

.ui-head__link {
    display: inline-flex;
    align-items: center;
    gap: var(--ui-space-1);
    min-height: var(--ui-tap);
    font-weight: 700;
}

/* Testo */
.ui-eyebrow {
    margin-bottom: var(--ui-space-2);
    color: var(--ui-primary-text);
    font-size: var(--ui-text-sm);
    font-weight: 800;
    letter-spacing: var(--ui-tracking-caps);
    text-transform: uppercase;
}

.ui-lead {
    max-width: var(--ui-measure);
    font-size: var(--ui-text-lg);
    color: var(--ui-ink-muted);
}

.ui-display {
    font-size: var(--ui-text-display);
    line-height: 1.05;
    letter-spacing: -.03em;
}

.ui-muted {
    color: var(--ui-ink-muted);
}

.ui-text-sm {
    font-size: var(--ui-text-sm);
}

.ui-nowrap {
    white-space: nowrap;
}

.ui-center {
    text-align: center;
}

.ui-measure {
    max-width: var(--ui-measure);
}

/* Traccia di debug (pagina errore, solo DEBUG_MODE). */
.ui-debug {
    align-self: stretch;
    font-size: var(--ui-text-sm);
    text-align: start;
}

/* Link senza sottolineatura finché non è in hover (titoli nelle liste di card). */
.ui-link-plain {
    color: inherit;
    text-decoration: none;
}

.ui-link-plain:hover {
    color: var(--ui-link-hover);
    text-decoration: underline;
}

/* Spazio per la barra inferiore mobile (si nasconde da 900 px). */
.ui-has-bottom-bar {
    padding-bottom: calc(var(--ui-bottom-bar-h) + env(safe-area-inset-bottom, 0px));
}

@media (min-width: 900px) {
    .ui-has-bottom-bar {
        padding-bottom: 0;
    }
}