/* ==========================================================================
   responsive.css
   Media-kyselyt eri näyttökokoja varten. Sisältö on jaettu:
   - Tabletti: alle 900px
   - Puhelin: alle 640px
   ========================================================================== */

/* --------------------------------------------------------------------
   Tabletti (alle 900px)
   -------------------------------------------------------------------- */

@media (max-width: 900px) {

    .site-header__nav {
        display: none;
    }

    /* Sama koskee julkisten sivujen (etusivu, ohjeet, säännöt,
       tietosuoja) omaa navigaatiota - tämä puuttui aiemmin, minkä
       vuoksi koko työpöytänavigaatio jäi näkyviin hampurilaisvalikon
       RINNALLE mobiilissa ja aiheutti sivun vaakasuuntaisen ylivuodon. */
    .public-header__nav {
        display: none;
    }

    /* "Kirjaudu portaaliin" -painike näkyy vain hampurilaisvalikon
       sisällä mobiilissa (se on jo toisena kopiona siellä) - ei enää
       ylätunnisteen omalla rivillä, missä se veisi liikaa tilaa. */
    .public-header__inner > .public-header__login-btn {
        display: none;
    }

    /* Sama periaate kirjautuneen puolen "Kirjaudu ulos" -painikkeelle:
       ilman tätä käyttäjänimi + painike + logo + otsikko + hampurilais-
       valikko eivät mahtuneet samalle riville kapealla puhelimella,
       jolloin hampurilaisvalikko työntyi näkymän ulkopuolelle eikä
       ollut enää lainkaan käytettävissä. Painike löytyy jo valikosta. */
    .site-header__user {
        display: none;
    }

    .site-header__menu-toggle {
        display: flex;
    }

    .site-header__inner,
    .public-header__inner {
        gap: var(--space-4);
    }

    .login-screen {
        grid-template-columns: 1fr;
    }

    .login-screen__panel--image {
        display: none;
    }

    .login-screen__panel--form {
        padding: var(--space-5);
    }

    .card-section--split {
        grid-template-columns: 1fr;
    }

    .handbook-layout {
        grid-template-columns: 1fr;
    }

    .handbook-sidebar {
        position: static;
    }

    .hero {
        min-height: 0;
        padding: var(--space-6) 0 var(--space-5);
    }

    .hero__title {
        font-size: 38px;
    }

    .hero__description {
        font-size: 15px;
    }

    .public-page-header {
        padding: var(--space-5) 0 var(--space-4);
    }

    .public-page-header__title {
        font-size: 26px;
    }
}

/* --------------------------------------------------------------------
   Puhelin (alle 640px)
   -------------------------------------------------------------------- */

@media (max-width: 640px) {

    .page-container {
        padding: var(--space-5) var(--space-4) var(--space-7);
    }

    .site-header__inner,
    .public-header__inner {
        padding: 0 var(--space-4);
    }

    /* Varmistaa, ettei pitkä sivuston nimi (config.php: site_name) voi
       koskaan itsessään aiheuttaa vaakaylivuotoa hyvin kapealla
       puhelimella - teksti typistyy tarvittaessa "..."-merkkeihin.
       Koskee sekä julkista että kirjautuneen puolen ylätunnistetta. */
    .public-header__title,
    .site-header__title {
        max-width: 46vw;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-header__title {
        font-size: 21px;
    }

    .hero__title {
        font-size: 30px;
    }

    .hero__tagline {
        font-size: 12px;
    }

    .hero__cta-card {
        flex-direction: column;
    }

    .public-page-header__title {
        font-size: 22px;
    }

    .public-page-header__title-row {
        gap: var(--space-3);
    }

    .job-grid,
    .quick-grid,
    .job-showcase-grid,
    .info-strip {
        grid-template-columns: 1fr;
    }

    .job-card {
        padding: var(--space-4);
    }

    .detail-list__row {
        flex-direction: column;
        gap: var(--space-1);
    }

    .detail-list__row dd {
        text-align: left;
    }

    .login-card {
        max-width: 100%;
    }

    /* Jäsen- ja hakemusrivit (Tiimi, Rosteri, Hakemukset): pakotetaan
       nimi/tiedot-osio omalle rivilleen, jotta puhelinnumero, rooli-
       merkki ja toimintopainikkeet eivät jää puristuksiin samalle
       riville kapealla näytöllä. */
    .member-row,
    .application-card {
        flex-wrap: wrap;
    }

    .member-row__info,
    .application-card__body {
        flex-basis: 100%;
    }

    .member-row__rank-select {
        max-width: none;
        flex: 1 1 auto;
    }

    .rank-row {
        flex-wrap: wrap;
    }

    .rank-row__name {
        flex-basis: 100%;
        order: -1;
    }

    .form-inline-add {
        flex-direction: column;
    }

    .application-manage-row__actions {
        width: 100%;
        justify-content: flex-start;
    }
}