/*
 * Responzivita pro původní phpBB styl „zelen".
 *
 * Původní styl je postavený na tabulkách s pevnými šířkami — na telefonu
 * se buď nevejde, nebo se scvrkne do nečitelna. Tenhle soubor se proto
 * uplatní AŽ pod 900 px; nad tou hranicí se nezmění vůbec nic, takže
 * vzhled na počítači zůstává 1:1 s originálem.
 *
 * Přístup: nechat tabulky tabulkami, jen jim dovolit zalomení, schovat
 * sloupce, které se na úzkém displeji nevejdou, a z hlavičky udělat
 * jeden sloupec.
 */

@media screen and (max-width: 900px) {

    /* Původní styl má #wrapheader a spol. na pevných 100 %, ale vnitřní
       tabulky mají nowrap a pevné šířky. Tohle je pustí. */
    body,
    #wrapheader,
    #wrapcentre,
    #wrapfooter {
        min-width: 0;
        width: auto;
    }

    /* Fotopruh v hlavičce: na úzkém displeji necháme jen logo. */
    #logodesc table tr:first-child td + td { display: none; }
    #logodesc img { max-width: 100%; height: auto; }
    #logodesc h1 { font-size: 1.4em; }

    /* Menu a datum pod sebe, ne vedle sebe. */
    #menubar table td,
    #datebar table td {
        display: block;
        width: auto;
        text-align: left;
    }

    /* Tabulky fóra: ať se vejdou a text se zalamuje. */
    table.tablebg {
        width: 100% !important;
        table-layout: auto;
    }
    table.tablebg td,
    table.tablebg th {
        white-space: normal !important;
        word-break: break-word;
    }

    /* Sloupce, které se na telefon nevejdou. Poslední příspěvek a autor
       zůstávají — bez nich by výpis ztratil smysl. */
    .forumy-sloupec-temata,
    .forumy-sloupec-prispevky,
    .temata-sloupec-zobrazeni {
        display: none;
    }

    /* Příspěvek v tématu: sloupec s profilem nad text, ne vedle. */
    td.profile {
        display: block;
        width: auto !important;
        border-bottom: 1px solid #b5c2b0;
    }
    td.profile + td {
        display: block;
        width: auto !important;
    }
    td.profile table { width: auto; }

    /* Obrázky a přílohy ať nepřetečou. */
    .postbody img,
    .postbody table { max-width: 100%; height: auto; }
    .postbody { overflow-wrap: break-word; }

    /* Kdyby přece jen něco přeteklo (široká tabulka v příspěvku),
       ať se dá odrolovat vodorovně jen ta věc, ne celá stránka. */
    #pagecontent { overflow-x: auto; }

    /* Formuláře na plnou šířku. */
    input.post,
    textarea.post,
    select {
        max-width: 100%;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 560px) {
    /* Na telefonu vypustíme i autora a odpovědi — zbude název tématu
       a poslední příspěvek, jak to dělají mobilní šablony fór. */
    .temata-sloupec-autor,
    .temata-sloupec-odpovedi {
        display: none;
    }

    #logodesc h1 { font-size: 1.15em; }
    #logodesc .gen2 { display: block; font-size: 0.9em; }

    .searchbar span { float: none !important; display: block; }
}