/* Mobile Optimization & Polish */

/* Root variable adjustments for mobile */
@media (max-width: 768px) {
    :root {
        --space-md: 1.5rem;
        --space-lg: 3rem;
        --font-display-xs: 2.5rem;
    }
}

/* Touch Targets - Ensure interactive elements are easy to tap */
@media (max-width: 768px) {

    button,
    a.button,
    .nav-link,
    .theme-toggle,
    .book-card,
    .read-more {
        min-height: 44px;
        min-width: 44px;
        touch-action: manipulation;
        /* Improves tap response */
    }

    /* Increase padding on links for better hit area */
    .back-to-books {
        padding: 12px 20px;
        display: inline-block;
    }
}

/* Typography polish for small screens */
@media (max-width: 480px) {
    .author-name {
        font-size: clamp(2.5rem, 10vw, 4rem);
        /* Prevent overflow */
    }

    .book-title {
        font-size: 1.5rem;
    }

    h1 {
        line-height: 1.2;
    }

    /* Prevent horizontal scroll on long words */
    p,
    h1,
    h2,
    h3 {
        word-wrap: break-word;
        hyphens: auto;
    }
}

/* Improved spacing for mobile layout */
@media (max-width: 768px) {
    .hero-content {
        padding: var(--space-lg) var(--space-md);
    }

    .books-grid {
        grid-template-columns: 1fr;
        /* Force single column earlier */
        gap: var(--space-md);
        padding: 0 var(--space-sm);
    }

    .about-content {
        flex-direction: column-reverse;
        /* Text on top often better, but keeping design consistent */
        gap: var(--space-lg);
    }
}