/**
 * Mobile Device Optimizations
 * Loaded after the framework styles so it can adjust them.
 */

@media (max-width: 768px) {
    main {
        width: 100%;
    }

    /**
     * Tables
     * Every row becomes a simple card.
     * The layout is driven by the .td-* classes on the cells.
     */
    table.styled thead {
        display: none;
    }

    table.styled tbody {
        display: block;
        width: 100%;
    }

    table.styled tr {
        display: grid;
        grid-template-columns: 10% 30% 20% 20%;
        align-items: center;
        column-gap: 1rem;
        row-gap: 0.2rem;
        background: var(--card-background);
        border: 1px solid var(--card-border);
        border-radius: 0.5rem;
        margin-bottom: 0.75rem;
        padding: 0.5rem 0.75rem;
    }

    table.styled tr:hover {
        background: var(--tr-background-hover);
    }

    table.styled td {
        padding: 0;
        border: none;
    }

    .td-id::before {
        content: '#';
    }

    .td-id {
        grid-area: 1 / 1 / 3 / 2;
        opacity: .5;
    }

    .td-hanzi {
        grid-area: 1 / 2 / 2 / 3;
        font-size: 30px;
        text-align: left !important;
    }

    .td-pinyin {
        grid-area: 1 / 3 / 2 / 4;
    }

    .td-translation {
        grid-area: 1 / 4 / 2 / 5;
        text-align: right !important;
    }

    .td-tags {
        grid-area: 2 / 2 / 3 / 5;
        opacity: .5;
        display: flex;
        justify-content: center;
        gap: 1rem;
        text-align: center !important;
    }
}