/* Mobile Optimization & Polish */

/* Root variable adjustments for smaller screens */
@media (max-width: 1024px) {
    :root {
        --space-xxl: 6rem;
        --space-xl: 4rem;
        --space-lg: 2.5rem;
    }
}

@media (max-width: 768px) {
    :root {
        --space-xxl: 4rem;
        --space-xl: 3rem;
        --space-lg: 2rem;
        --space-md: 1.5rem;
    }
}

/* Touch Targets & Interactions - Ensure elements are easy to tap */
@media (max-width: 1024px) {
    button,
    a.button,
    .nav-link,
    .theme-toggle,
    .book-card,
    .read-more {
        min-height: 48px;
        min-width: 48px;
        touch-action: manipulation; /* Improves tap response */
    }

    /* Prevent page scroll when swiping the interactive 3D heart on touch devices */
    .hero-logo-container {
        touch-action: none !important;
    }

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

/* Typography polish */
@media (max-width: 1024px) {
    .author-name {
        font-size: clamp(3rem, 8vw, 5rem);
        line-height: 1.1;
    }
    
    .section-title {
        font-size: clamp(2rem, 5vw, 3rem);
    }
}

@media (max-width: 480px) {
    .author-name {
        font-size: clamp(2.5rem, 11vw, 3.5rem);
        letter-spacing: -0.04em;
    }

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

    .tagline {
        font-size: 1.3rem;
    }

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

    .hero-logo-container {
        width: clamp(180px, 60vw, 260px);
    }
    
    /* Adjust quote marks for mobile */
    .tagline-text::before {
        left: 20%;
    }
    .tagline-text::after {
        right: 20%;
    }
}

/* Layout Spacing & Grids for Tablet / iPad (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .books-grid {
        grid-template-columns: repeat(2, 1fr); /* Enforce 2 columns strictly on iPad */
        gap: var(--space-lg);
    }
    
    .about-content {
        gap: var(--space-lg);
    }
}

/* Layout Spacing & Grids for Mobile (under 768px) */
@media (max-width: 768px) {
    .hero {
        min-height: 85vh;
        padding: var(--space-lg) var(--space-sm);
    }

    .hero-content {
        padding: 0;
    }

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

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