/*
 * Login — adattamento alla risoluzione dopo la rimozione di `zoom: 0.65`.
 *
 * Caricato solo da security/login.html.twig, dopo global.css, quindi vince sulla
 * cascata senza toccare nessun'altra pagina.
 *
 * Il problema non era la dimensione in se': era che il contenuto e' dimensionato
 * in pixel fissi pensati per il mondo a zoom 0.65 (le immagini hanno width/height
 * scritti nell'HTML: 360x135, 250, 50, e il tema aggiunge margin-top: 50px a
 * ognuna). A 0.65 quei ~950px di contenuto ne occupavano ~620 e stavano in
 * qualsiasi schermo; a zoom 1 non ci stanno piu' su un portatile.
 *
 * Due interventi, nessuno dei quali cambia l'aspetto su schermi ampi:
 *   1. quello che eccede torna raggiungibile (vedi overflow qui sotto);
 *   2. immagini, testo e spaziature si legano all'altezza del viewport con
 *      clamp(), cosi' il massimo resta quello di oggi ma su schermi bassi il
 *      contenuto si stringe invece di sparire.
 */

/*
 * Niente scroll: ci pensa l'auto-fit in login.html.twig a scalare il contenuto
 * finche' entra. Lo scroll era la soluzione precedente ed e' stata scartata --
 * su una pagina di login una barra di scorrimento e' una resa sbagliata, non un
 * ripiego accettabile.
 *
 * `overflow: hidden` qui non nasconde nulla proprio perche' l'auto-fit
 * garantisce che il contenuto ci stia: senza quello script tornerebbe il
 * comportamento originale, in cui cio' che eccedeva era irraggiungibile.
 */
#content.full-page.login .inside-block,
#contentlock.full-page.login .inside-block {
    overflow: hidden;

    /*
     * Questa riga e' la causa dello scroll che restava anche a contenuto entrante.
     * Il tema dichiara `box-sizing: content-box` insieme a `height: 100%` e
     * `padding: 50px` (minimal.css:474): con content-box il 100% vale solo per il
     * contenuto e il padding si SOMMA, quindi il pannello e' alto un viewport PIU'
     * il padding e sfora comunque, per quanto piccolo sia cio' che contiene.
     * Con border-box il padding rientra nel 100% e il pannello sta esatto.
     */
    box-sizing: border-box;

    /* Il padding del tema e' 50px: a zoom 0.65 valevano ~32px reali. */
    padding: clamp(12px, 3vh, 50px) clamp(12px, 2vw, 50px);
}

/*
 * Il wrapper scalato dall'auto-fit. L'origine in alto al centro tiene il blocco
 * centrato mentre rimpicciolisce, invece di farlo scivolare verso un lato.
 */
#login-fit {
    transform-origin: top center;
}

/*
 * Le immagini portano width/height come attributi HTML. height:auto li slega,
 * max-height li rilega al viewport: il tetto coincide con la dimensione attuale,
 * quindi su un monitor alto non cambia nulla.
 */
#content.full-page.login .inside-block img,
#contentlock.full-page.login .inside-block img {
    width: auto;
    height: auto;
    max-width: 100%;
    /* Il tema mette margin-top: 50px su OGNI immagine (minimal.css:476): con tre
       immagini sono 150px di solo margine. */
    margin-top: clamp(6px, 2vh, 50px);
}

/* Logo di testata (DS-C4RGO-360x135.png, dentro <a href="c4rgo.com">). */
#content.full-page.login .logo-login > a img,
#contentlock.full-page.login .logo-login > a img {
    max-height: clamp(54px, 13vh, 135px);
}

/* Logo dell'azienda: nell'HTML ha height="250", il pezzo piu' alto della pagina. */
#content.full-page.login .log-in .logo-login img:not([src*="logo-consitech"]),
#contentlock.full-page.login .log-in .logo-login img:not([src*="logo-consitech"]) {
    max-height: clamp(64px, 19vh, 250px);
}

/* Logo Consitech: height="50" nell'HTML. */
#content.full-page.login .log-in .logo-login img[src*="logo-consitech"],
#contentlock.full-page.login .log-in .logo-login img[src*="logo-consitech"] {
    max-height: clamp(24px, 5vh, 50px);
}

/*
 * Testo: <font size="+3"> e l'h3 "Secure Sign in" sono fra i blocchi piu' alti.
 * Legati all'altezza del viewport perche' e' l'altezza a mancare, non la larghezza.
 */
#content.full-page.login .logo-login font[size="+3"],
#contentlock.full-page.login .logo-login font[size="+3"] {
    font-size: clamp(15px, 2.6vh, 30px);
    line-height: 1.2;
}

#content.full-page.login .inside-block h3,
#contentlock.full-page.login .inside-block h3 {
    font-size: clamp(15px, 2.4vh, 24px);
    margin: clamp(4px, 1.2vh, 20px) 0;
}

/*
 * Il markup usa <p>&nbsp;</p> e <br> come spaziatori: a zoom 1 pesano il 50% in
 * piu' di prima. Non li tolgo dal template (cambierebbe la spaziatura anche dove
 * va bene), li comprimo solo quando l'altezza scarseggia.
 */
#content.full-page.login .inside-block p,
#contentlock.full-page.login .inside-block p {
    margin-bottom: clamp(2px, 1.4vh, 10px);
}

#content.full-page.login .inside-block legend,
#contentlock.full-page.login .inside-block legend {
    margin-bottom: clamp(4px, 1.5vh, 20px);
}

/* I campi: piu' compatti solo dove serve, mai piu' grandi di oggi. */
#content.full-page.login .inside-block .input-group,
#contentlock.full-page.login .inside-block .input-group {
    margin-bottom: clamp(6px, 1.5vh, 15px);
}

/*
 * Schermi bassi (portatili 1366x768 e simili, l'area utile scende sotto i ~700px):
 * i <br> di puro riempimento nella sezione dei loghi diventano superflui. Restano
 * quelli dentro <font>, che formano l'indirizzo di Consitech e servono davvero.
 */
@media (max-height: 760px) {
    #content.full-page.login .log-in .logo-login > br,
    #contentlock.full-page.login .log-in .logo-login > br {
        display: none;
    }
}