/*
 * ==========================================================
 * PROGETTO:    Kerno Framework
 * FILE:        page-header.css
 * Path:        public/css/page-header.css
 * ==========================================================
 * DESCRIZIONE GENERALE:
 * Definisce titolo e sottotitolo dell'intestazione prodotta dal widget
 * PageHeader. Il blocco azioni vive in page-actions.css (widget
 * PageActions, usato internamente da PageHeader), il riepilogo sotto
 * l'header (PageSummary) in page-summary.css: entrambi componenti distinti.
 *
 * FUNZIONE DEL FILE:
 * Questo foglio di stile raccoglie regole CSS specifiche per: l'intestazione
 * di pagina generata da PageHeader.
 * Le regole definiscono solo la presentazione grafica degli elementi HTML e
 * non introducono logica applicativa. Eventuali comportamenti dinamici sono
 * gestiti dai file JavaScript o dal markup prodotto dalle view PHP.
 *
 * NOTE OPERATIVE:
 * - mantenere i selettori coerenti con il markup generato da PageHeader;
 * - modificare colori, spaziature e transizioni solo verificando le pagine
 *   che riutilizzano gli stessi componenti;
 * - evitare rinominazioni dei selettori senza aggiornare anche HTML e JS.
 * ==========================================================
 */

/* ==========================================================
 * SEZIONE: header pagina
 * ========================================================== */

/* Wrapper header: titolo/sottotitolo a sinistra, azioni a destra.
 * row-gap (invece di un margin-top su .page-actions) si applica solo
 * fra le righe del flex-wrap: quando il blocco azioni sta affiancato
 * al titolo sulla stessa riga non introduce spazio, quando invece va a
 * capo su una riga propria (spazio orizzontale insufficiente, non un
 * breakpoint fisso: dipende da quanti pulsanti ci sono pagina per
 * pagina) apre lo spazio verticale che altrimenti mancherebbe fra
 * sottotitolo e pulsanti - senza bisogno di rilevare il wrap via JS. */
.page-header {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-end;
    row-gap: 16px;
    margin-bottom: 25px;
}

/* Blocco titolo+sottotitolo: il margine lo stacca dal blocco azioni
 * affiancato in .page-header, senza legare quel valore a .page-actions
 * (portabile e usato anche fuori da .page-header, es. da solo). */
.page-title-block {
    min-width: 0;
    margin-right: 20px;
}

/* Titolo principale della pagina. */
.page-title {
    margin: 0 0 8px;
    font-size: 30px;
    color: var(--color-text-heading);
    white-space: nowrap;
}

/* Sottotitolo e, nelle liste, contatore risultati affiancato. Il testo
 * (descrizione pagina, o contatore risultati) resta sempre su una sola
 * riga: su schermo stretto un secondo rigo costerebbe piu' spazio
 * verticale di quanto valga l'informazione, quindi il testo viene
 * troncato con l'ellissi invece di andare a capo. */
.page-subtitle {
    display: flex;
    flex-wrap: nowrap;
    align-items: baseline;
    gap: 8px;
    margin: 0;
    overflow: hidden;
    color: var(--color-text-muted);
    font-size: 16px;
    text-align: left;
}

.page-subtitle > * {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Nelle liste (counter: true) .page-subtitle ha due figli: descrizione
 * pagina e contatore risultati (es. "3 corsi trovati", vedi
 * PageHeader::COUNTER_ID). Senza flex-shrink:0 un flex-wrap:nowrap
 * stretto restringerebbe entrambi in proporzione, troncando anche il
 * contatore - poche parole ma piu' importanti da leggere per intero
 * della descrizione libera, che tronca per prima. */
.page-subtitle > *:last-child {
    flex-shrink: 0;
}