/* ============================
   Responsive / Mobile Styles
   ============================ */

/* Tablet breakpoint (MkDocs Material sidebar collapses) */
@media (max-width: 76.25em) {
    .md-typeset h1 {
        font-size: 3em;
    }

    .md-typeset h2 {
        font-size: 2.25em;
    }

    .md-typeset h3 {
        font-size: 2em;
    }

    .md-typeset h4 {
        font-size: 1.75em;
    }

    .md-typeset h5 {
        font-size: 1.5em;
    }

    .md-typeset h6 {
        font-size: 1.25em;
    }

    /* Slightly tighter browse grid */
    .browse-index ul {
        grid-template-columns: repeat(auto-fill, minmax(12em, 1fr));
    }
}

/* Phone breakpoint */
@media (max-width: 44.9375em) {
    .md-typeset h1 {
        font-size: 2.25em;
        word-break: break-word;
    }

    .md-typeset h2 {
        font-size: 1.75em;
    }

    .md-typeset h3 {
        font-size: 1.5em;
    }

    .md-typeset h4 {
        font-size: 1.35em;
    }

    .md-typeset h5 {
        font-size: 1.2em;
    }

    .md-typeset h6 {
        font-size: 1.1em;
    }

    /* Single-column browse index on small screens */
    .browse-index ul {
        grid-template-columns: 1fr;
        gap: 0.3em;
    }

    /* Single-column preferences grid */
    .prefs-grid {
        grid-template-columns: 1fr;
    }

    /* Tighter blockquote padding */
    .md-typeset blockquote {
        padding: 0.5em 0.75em;
    }

    /* Ensure body text stays readable */
    .md-typeset {
        font-size: 0.95rem;
    }

    /* Ability info tables: stack on very small screens */
    .md-typeset blockquote table td {
        padding: 0.25em 0.4em;
        font-size: 0.85em;
    }

    /* Grid cards: single column */
    .md-typeset .grid.cards {
        grid-template-columns: 1fr;
    }

    /* Reduce ability card hover effect on touch devices */
    .md-typeset blockquote[data-ability-type]:hover {
        transform: none;
        box-shadow: none;
    }
}

/* Very small phones */
@media (max-width: 30em) {
    .md-typeset h1 {
        font-size: 1.75em;
    }

    .md-typeset h2 {
        font-size: 1.5em;
    }

    .md-typeset h3 {
        font-size: 1.3em;
    }

    /* Two-column ability info tables: allow wrapping */
    .md-typeset table:not([class]) td {
        word-break: break-word;
    }
}