/* =========================================================
   MOBILE OVERRIDES – ELEMENTARY EXPLORER
   Applies only on phones and small tablets
   ========================================================= */

@media (max-width: 768px) {

    /* ---------- MAIN TITLE ---------- */
    .page-title {
        font-size: 26px;
        margin-bottom: 12px;
    }

    /* ---------- HEADER BUTTON ROW ---------- */
    .header-buttons.header-search-row {
        flex-direction: column;
        gap: 10px;
        width: 100%;
        padding: 0 12px;
        box-sizing: border-box;
    }

    /* ---------- SEARCH FORM ---------- */
    .search-form {
        width: 100%;
        justify-content: center;
    }

    /* ---------- SEARCH INPUT ---------- */
    .nav-input {
        width: 100%;
        max-width: 260px;
    }

    /* ---------- BUTTONS ---------- */
    .nav-btn {
        width: 100%;
        max-width: 260px;
        text-align: center;
    }

    /* ---------- PAGE CONTENT ---------- */
    .container-page {
        padding: 14px;
    }

    /* ---------- HOME CARDS ---------- */
    .home-cards {
        grid-template-columns: 1fr;
        max-width: 100%;
    }

    /* ---------- FOOTER COLUMNS ---------- */
    .home-footer-columns {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}

/* =========================================================
   BOOK CLUB – MOBILE (≤ 480px)
   Purpose: Tighter spacing on small screens
   ========================================================= */

@media (max-width: 480px) {
    .bookclub-page .age-group-card .age-link a {
        padding: 0.6rem 0.75rem;
        min-height: 40px;
    }
}
@media (max-width: 480px) {
    .bookclub-page .age-group-card .age-link {
        margin: 0.6rem 0;
    }

        .bookclub-page .age-group-card .age-link a {
            padding: 0.6rem 0.75rem;
            min-height: 40px;
        }
}

/* =========================================================
   BOOKLIST – ACTIONS / NAV (MOBILE)
   ========================================================= */

@media (max-width: 700px) {
    .booklist-page .action-row {
        gap: 0.45rem;
    }

    .booklist-page .action-btn {
        padding: 0.5rem 0.75rem;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .booklist-page .action-row {
        flex-direction: column;
        align-items: stretch;
    }

    .booklist-page .action-btn {
        width: 100%;
        text-align: center;
    }
}

/* Mobile tightening */
@media (max-width: 480px) {
    .booklist-page .book-table thead th,
    .booklist-page .book-table td {
        padding: 0.7rem 0.6rem;
        font-size: 0.92rem;
    }

    .booklist-page .book-table {
        min-width: 700px;
    }
}