/* ============================================================
   ISMAILBOOKS — COMPREHENSIVE RESPONSIVE OVERHAUL
   Mobile-first CSS covering all pages and components.
   Linked after vibrant.css in main.php layout.
   ============================================================ */

/* ── BASE: prevent overflow on all viewports ──────────────── */
html {
    -webkit-text-size-adjust: 100%;
}

img, video, canvas, svg {
    max-width: 100%;
}

.section,
.dash-page,
.detail-page,
.reading-page,
.auth-page,
.details-container {
    overflow-x: hidden;
}

/* ============================================================
   NAVBAR — small-phone right-side buttons
   ============================================================ */
.nav-right {
    gap: 0.5rem;
}

/* On mobile, hide the login/signup/profile buttons in the header to save space.
   The mobile bottom navigation and the side drawer already handle these links. */
@media (max-width: 767px) {
    .nav-right .btn-ghost-new,
    .nav-right .btn-primary-new,
    .nav-right .nav-login {
        display: none !important;
    }
}

/* Icon buttons: keep consistent size */
@media (max-width: 480px) {
    .icon-btn {
        width: 36px;
        height: 36px;
    }
}

/* ============================================================
   HOME HERO
   ============================================================ */
@media (max-width: 767px) {
    .home-hero {
        padding-top: calc(5.5rem + 56px);
        padding-bottom: 3.5rem;
    }
    .home-hero__inner {
        padding-inline: 1.25rem;
    }
    .home-hero__title {
        font-size: clamp(1.875rem, 7vw, 2.75rem);
        letter-spacing: -0.015em;
    }
    .home-hero__subtitle {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
}

@media (max-width: 479px) {
    .home-hero {
        padding-top: calc(5rem + 56px);
        padding-bottom: 3rem;
    }
    .home-hero__inner {
        padding-inline: 1rem;
    }
    .home-hero__title {
        font-size: clamp(1.75rem, 8vw, 2.25rem);
        letter-spacing: -0.01em;
    }
    .home-hero__subtitle {
        font-size: 0.9375rem;
        margin-bottom: 1.75rem;
    }
    .home-search-form__input {
        padding-right: 5.5rem;
        height: 50px;
        font-size: 0.9375rem;
    }
    .home-search-form__btn {
        padding: 0 1rem;
        height: 40px;
        font-size: 0.875rem;
    }
}

/* Stats pill — responsive row/column */
@media (max-width: 600px) {
    .stats-pill-new {
        display: flex;
        flex-direction: row;
        justify-content: center;
        gap: 1rem;
        width: calc(100% - 2rem);
        padding: 0.75rem 1rem;
        border-radius: 14px;
        flex-wrap: wrap;
    }
    .stat-divider-new {
        display: none;
    }
}

@media (max-width: 360px) {
    .stats-pill-new {
        flex-direction: column;
        align-items: center;
        gap: 0.375rem;
    }
}

/* ============================================================
   SECTION SPACING — mobile-optimised padding
   ============================================================ */
@media (max-width: 767px) {
    .section {
        padding: 2.5rem 1rem;
    }
    .section-head-new {
        flex-wrap: wrap;
        gap: 0.5rem;
        margin-bottom: 1.25rem;
    }
    .section-title-new {
        font-size: 1.125rem;
    }
    .section-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

@media (max-width: 479px) {
    .section {
        padding: 2rem 1rem;
    }
}

/* ============================================================
   BOOK GRID — responsive columns (home + catalog)
   ============================================================ */
@media (min-width: 1200px) {
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 1.75rem;
    }
}

@media (min-width: 768px) and (max-width: 1199px) {
    .book-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1.5rem;
    }
}

@media (min-width: 480px) and (max-width: 767px) {
    .book-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 479px) {
    .book-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

/* ── Book card v2 — mobile adjustments ── */
@media (max-width: 767px) {
    .book-card-v2__info {
        padding: 0.875rem;
    }
    .book-card-v2__title {
        font-size: 0.9375rem;
    }
    .book-card-v2__btn {
        padding: 0.4rem 0.7rem;
        font-size: 0.7rem;
    }
}

@media (max-width: 479px) {
    .book-card-v2__info {
        padding: 0.6rem;
    }
    .book-card-v2__title {
        font-size: 0.85rem;
        line-height: 1.25;
        margin-bottom: 0.2rem;
    }
    .book-card-v2__author {
        font-size: 0.75rem;
        margin-bottom: 0.5rem;
    }
    .book-card-v2__price {
        font-size: 0.8rem;
    }
    .book-card-v2__btn {
        padding: 0.35rem 0.5rem;
        font-size: 0.65rem;
    }
    .book-card-v2__badge {
        font-size: 0.55rem;
        padding: 0.2rem 0.4rem;
        top: 6px;
        left: 6px;
    }
}

/* Carousel book cards */
@media (max-width: 767px) {
    .book-card {
        flex: 0 0 170px;
    }
}

@media (max-width: 479px) {
    .book-card {
        flex: 0 0 150px;
    }
}

/* ============================================================
   BLOG GRID — responsive
   ============================================================ */
@media (min-width: 640px) and (max-width: 1023px) {
    .blog-grid-new {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 639px) {
    .blog-grid-new {
        grid-template-columns: 1fr;
    }
    .blog-card-new {
        padding: 14px;
    }
    .blog-title-new {
        font-size: 1rem;
    }
}

/* ============================================================
   SUMMARY GRID — responsive
   ============================================================ */
@media (max-width: 767px) {
    .summary-grid {
        grid-template-columns: 1fr !important;
    }
    .summary-card {
        flex-direction: row;
        gap: 0.875rem;
    }
    .summary-thumb {
        width: 60px;
        min-width: 60px;
        height: 90px;
    }
}

@media (max-width: 479px) {
    .summary-card {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .summary-thumb {
        width: 80px;
        height: 110px;
        min-width: unset;
    }
    .summary-row {
        justify-content: center;
    }
}

/* ============================================================
   CATEGORIES GRID
   ============================================================ */
@media (max-width: 479px) {
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    .category-icon {
        font-size: 1.75rem;
    }
    .category-name {
        font-size: 0.875rem;
    }
}

/* ============================================================
   CATALOG FILTER FORM (books/free & books/premium pages)
   ============================================================ */
@media (max-width: 767px) {
    .catalog-filter-form {
        flex-direction: column;
        gap: 0.75rem;
    }
    .catalog-search-group {
        min-width: unset;
        width: 100%;
    }
    .catalog-search-input {
        height: 48px;
        font-size: 0.9375rem;
    }
    .catalog-select-group {
        width: 100%;
        flex-wrap: wrap;
    }
    .catalog-select {
        flex: 1;
        height: 48px;
        padding: 0 1rem;
        font-size: 0.875rem;
    }
    .catalog-submit-btn {
        height: 48px;
        flex: 1;
        font-size: 0.9375rem;
    }
}

/* ============================================================
   BOOK DETAIL PAGE
   ============================================================ */
@media (max-width: 767px) {
    .detail-page {
        padding: 5rem 1rem 2rem;
    }
    .detail-stats {
        grid-template-columns: repeat(2, 1fr);
    }
    .detail-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    .btn-filled,
    .btn-gradient-border {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 479px) {
    .detail-stats {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   RELATED BOOKS ROW
   ============================================================ */
@media (max-width: 767px) {
    .related-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
}

@media (max-width: 479px) {
    .related-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
}

/* ============================================================
   PREMIUM SECTION
   ============================================================ */
@media (max-width: 479px) {
    .premium-card {
        padding: 1.5rem 1rem;
        border-radius: 16px;
    }
    .premium-card h2 {
        font-size: 1.375rem;
    }
    .btn-amber {
        width: 100%;
        justify-content: center;
    }
}

/* ============================================================
   READING PAGE (Summaries)
   ============================================================ */
@media (max-width: 767px) {
    .reading-page {
        padding: 5rem 1rem 2rem;
    }
    .reading-body {
        font-size: 1rem;
        line-height: 1.85;
    }
    .reading-full-book {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }
    .reading-full-book-thumb {
        margin: 0 auto;
    }
}

/* ============================================================
   AUTH PAGES
   ============================================================ */
@media (max-width: 479px) {
    .auth-card {
        padding: 1.75rem 1.125rem;
        border-radius: 16px;
    }
    .auth-heading {
        font-size: 1.375rem;
    }
}

/* ============================================================
   USER DASHBOARD
   ============================================================ */
@media (max-width: 767px) {
    .dash-page {
        padding: 5rem 1rem 6rem;
    }
    .dash-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        flex-wrap: nowrap;
        padding-bottom: 0.75rem;
    }
    .dash-tabs::-webkit-scrollbar {
        display: none;
    }
    .dash-tab {
        white-space: nowrap;
        flex-shrink: 0;
    }
    .dash-books-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

@media (max-width: 479px) {
    .dash-books-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .upgrade-banner {
        padding: 1rem;
    }
}

/* ============================================================
   FOOTER
   ============================================================ */
@media (max-width: 767px) {
    /* Compact footer with padding for mobile bottom nav */
    .footer-strip-new {
        padding-bottom: calc(72px + env(safe-area-inset-bottom, 12px)) !important;
    }
    .footer-links-new {
        flex-wrap: wrap;
        justify-content: center;
        gap: 12px;
    }
    .footer-link-new {
        font-size: 0.875rem;
    }
    /* Old .footer class */
    .footer {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   MOBILE BOTTOM NAV — touch target & safe area
   ============================================================ */
@media (max-width: 767px) {
    .mobile-bottom-nav {
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .bottom-nav-item span {
        font-size: 0.6rem;
    }
}

/* ============================================================
   DRAWER — full-width on very small phones
   ============================================================ */
@media (max-width: 360px) {
    .drawer {
        width: 100vw;
        right: -100vw;
    }
    .drawer.open {
        right: 0;
    }
}

/* ============================================================
   MODAL — full-screen on phones
   ============================================================ */
@media (max-width: 479px) {
    .modal-overlay {
        padding: 0;
        align-items: flex-end;
    }
    .modal-card {
        border-radius: 20px 20px 0 0;
        max-height: 92vh;
        width: 100%;
    }
}

/* ============================================================
   DETAILS CONTAINER (Book Detail Redesign)
   ============================================================ */
@media (max-width: 767px) {
    .details-container {
        margin-top: 70px;
        padding: 0 1rem 2rem;
    }
}

/* ============================================================
   DEVICE MOCKUP (Reading Preview on Home)
   ============================================================ */
@media (max-width: 767px) {
    .reading-preview {
        gap: 2rem;
    }
    .device-mockup {
        width: 200px;
        height: 340px;
    }
}

/* ============================================================
   GLOBAL: body/page padding for mobile nav
   ============================================================ */
@media (max-width: 767px) {
    body {
        padding-bottom: env(safe-area-inset-bottom, 0);
    }
    .reading-page,
    .auth-page,
    .dash-page {
        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px));
    }
}

/* ============================================================
   LIGHT MODE: ensure text readable on all screen sizes
   ============================================================ */
:root.light-mode .home-hero__title {
    color: var(--text);
}
:root.light-mode .home-search-form__input {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text);
}
:root.light-mode .home-search-form__input::placeholder {
    color: var(--muted);
}
:root.light-mode .book-card-v2__title {
    color: var(--text);
}
:root.light-mode .stats-pill-new {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
:root.light-mode .stats-pill-new strong {
    color: var(--text);
}

/* ============================================================
   ABOUT PAGE — fix author flex layout on mobile
   ============================================================ */
@media (max-width: 600px) {
    /* The about author section uses inline flex — ensure wrap */
    .dash-page section > div[style*="display: flex"][style*="gap: 1.5rem"] {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .dash-page section > div[style*="display: flex"][style*="gap: 1.5rem"] > div:last-child {
        min-width: unset !important;
        width: 100%;
    }
}

/* ============================================================
   ADMIN PANEL — extra mobile polish
   ============================================================ */
@media (max-width: 767px) {
    /* Stats bar in admin */
    .admin-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 479px) {
    .admin-stats {
        grid-template-columns: 1fr !important;
    }
    .admin-content {
        padding: 0.75rem !important;
    }
}