/* 
-- nom: title.css --
-- framework: loT --
-- grup: Components --
-- autor: A.Moseguí / TT22 --
-- versió: 26.1.0 --
-- descripció: Títol per a regions fixes (hd, bn, ft). Classe base + modificadors de mida i font. Enllaç opcional. Versió llarga/curta a 720px. --
-- dependència: text.css --
*/
:root {
    --title-weight: var(--fw-700);
    --title-size-ss: var(--step-1);
    --title-lh-ss: var(--lh-1);
    --title-size-s: var(--step-2);
    --title-lh-s: var(--lh-2);
    --title-size-m: var(--step-3);
    --title-lh-m: var(--lh-3);
    --title-size-l: var(--step-4);
    --title-lh-l: var(--lh-4);       
}
/* =============================================
   TITLE (classe base)
   El color de tema es resol aquí (no al :root),
   perquè arribi al context on viu el títol.
   ============================================= */
.title {
    --title-color: var(--cl-lyr-fg);
    font-weight: var(--title-weight);
    color: var(--title-color);
    font-size: var(--title-size-m);
    line-height: var(--title-lh-m);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* =============================================
   MODIFICADORS DE MIDA
   ============================================= */
.title--ss {
    font-size: var(--title-size-ss);
    line-height: var(--title-lh-ss);
}

.title--s {
    font-size: var(--title-size-s);
    line-height: var(--title-lh-s);
}

.title--m {
    font-size: var(--title-size-m);
    line-height: var(--title-lh-m);
}

.title--l {
    font-size: var(--title-size-l);
    line-height: var(--title-lh-l);
}

/* =============================================
   MODIFICADORS DE FONT
   Roboto és la font per defecte (heretada del body).
   S'inclou .title--roboto per ús explícit.
   ============================================= */
.title--roboto {
    font-family: 'Roboto', sans-serif;
}

.title--tangerine {
    font-family: 'Tangerine', cursive;
}

.title--nasa {
    font-family: 'Nasa', sans-serif;
}

/* =============================================
   MODIFICADORS DE COLOR FIX
   Colors purs, no s'adapten a clar/fosc.
   ============================================= */
.title--white {
    --title-color: var(--cl-white);
}

.title--black {
    --title-color: var(--cl-black);
}

/* =============================================
   VERSIÓ LLARGA / CURTA
   Només quan l'app necessita dos textos.
   Si el títol és curt, no calen els spans.
   ============================================= */
.title-short {
    display: none;
}

@media (max-width: 720px) {
    .title-long {
        display: none;
    }
    .title-short {
        display: inline;
    }
}