/* ---------------------------------------------------------------------------
 * .btn-tile — tile button: icon centred on top, label underneath.
 *
 * For entering an area, not for an action inside a form: a handful of equally
 * ranked destinations side by side (the shortcuts on the start page).
 * Everything else stays a normal text button with a leading icon.
 *
 * The modifier only changes the layout — colour and size still come from the
 * Tabler classes (.btn, .btn-primary, …), so the tile follows the dark theme
 * and any theme change.
 *
 * Markup (the label needs its own element, otherwise the line height misses it):
 *   <a class="btn btn-tile" href="…">
 *       <i class="ti ti-calendar-event"></i>
 *       <span>Terminplanung</span>
 *       <span class="badge bg-secondary">67</span>   (optional, top right corner)
 *   </a>
 * ------------------------------------------------------------------------- */

.btn-tile {
    /* Square as the lower bound: the tile is as tall as it is wide and only
       grows sideways when the label needs more room. */
    --btn-tile-size: 4.75rem;

    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-width: var(--btn-tile-size);
    height: var(--btn-tile-size);
    padding: 0.5rem 0.625rem;
    line-height: 1.15;
    text-align: center;
    /* A wrapping label would make the tiles differ in height. */
    white-space: nowrap;
}

.btn-tile > .ti:first-child {
    /* hda-theme.css sets the icon-to-text gap as a margin on the icon; in the
       tile the icon sits above the text and the gap property handles it. */
    margin-inline-end: 0;
    font-size: 1.5rem;
    line-height: 1;
}

/* Counter in the top right corner – overlapping the edge like a tag. */
.btn-tile > .badge {
    position: absolute;
    top: -0.4rem;
    right: -0.4rem;
}

/* ---------------------------------------------------------------------------
 * .btn-tile-row — a row of tiles that all take the width of the widest one.
 *
 * Use it instead of .btn-list where the tiles form one band and a ragged row
 * would read as an accident (the shortcuts on the start page). Tiles that stand
 * on their own, or follow other content, stay in a plain .btn-list.
 *
 * How the equal width comes about: fr columns inside a max-content container
 * all end up as wide as the widest column's content. grid-auto-flow keeps the
 * tiles in one row, which no longer fits on a phone – there the row turns into
 * a wrapping grid of equally wide columns instead.
 * ------------------------------------------------------------------------- */

.btn-tile-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 0.5rem;
    width: max-content;
    max-width: 100%;
}

@media (max-width: 47.98em) {
    .btn-tile-row {
        grid-auto-flow: row;
        grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr));
        width: auto;
    }

    /* The columns are now narrower than some labels, so those may wrap; the tile
       grows downwards, and the grid keeps every row equally tall. Single words
       longer than the column ("Studienfortschritte") are hyphenated – the page
       is declared as German, so the browser knows where to break – and broken
       anywhere as a last resort, so nothing sticks out of the tile. */
    .btn-tile-row .btn-tile {
        height: auto;
        min-height: var(--btn-tile-size);
        white-space: normal;
        hyphens: auto;
        overflow-wrap: anywhere;
    }
}