/* ============================================
   A WRITER'S THOUGHTS - RESPONSIVE STYLES
   Mobile-First Responsive Design
   ============================================ */

/* ==================== MOBILE FIRST (Base) ==================== */
/* Already defined in styles.css - these are adjustments */

/* ==================== SMALL DEVICES (320px - 575px) ==================== */
@media screen and (max-width: 575px) {
    :root {
        --space-xl: 1.5rem;
        --space-2xl: 2rem;
        --space-3xl: 2.5rem;
        --space-4xl: 3rem;
        --space-5xl: 4rem;
    }

    .container {
        padding: 0 var(--space-md);
    }

    /* Navigation */
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 85%;
        max-width: 320px;
        height: 100vh;
        background: linear-gradient(135deg, var(--color-shadow), var(--color-void));
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-3xl);
        gap: var(--space-lg);
        transition: right var(--transition-base);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
        z-index: 500;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-mystic);
    }

    .nav-link {
        font-size: var(--text-lg);
        padding: var(--space-md) 0;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
        z-index: 299;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    /* Hero */
    .hero {
        min-height: 100svh;
    }

    .hero-content {
        padding: var(--space-lg);
    }

    .hero-title {
        font-size: var(--text-4xl);
    }

    .hero-cta {
        flex-direction: column;
        width: 100%;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .hero-quote {
        font-size: var(--text-base);
    }

    .scroll-indicator {
        display: none;
    }

    /* About Grid */
    .about-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .about-image::before {
        transform: translate(10px, 10px);
    }

    /* Books Grid */
    .books-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }

    .book-card {
        height: 400px;
    }

    /* Lore Grid */
    .lore-grid {
        grid-template-columns: 1fr;
    }

    /* Shop Grid */
    .shop-grid {
        grid-template-columns: 1fr;
    }

    /* Membership Grid */
    .membership-grid {
        grid-template-columns: 1fr;
    }

    .tier-card.featured {
        transform: none;
    }

    .tier-card.featured:hover {
        transform: translateY(-10px);
    }

    /* Journal Grid */
    .journal-grid {
        grid-template-columns: 1fr;
    }

    /* Newsletter Form */
    .newsletter-form {
        flex-direction: column;
    }

    .newsletter-form .btn {
        width: 100%;
    }

    /* Footer */
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
        text-align: center;
    }

    .footer-brand p {
        max-width: none;
        margin: var(--space-md) 0;
    }

    .social-links {
        justify-content: center;
    }

    .footer-bottom {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* ==================== MEDIUM DEVICES (576px - 767px) ==================== */
@media screen and (min-width: 576px) and (max-width: 767px) {
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 60%;
        max-width: 350px;
        height: 100vh;
        background: linear-gradient(135deg, var(--color-shadow), var(--color-void));
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-3xl);
        gap: var(--space-lg);
        transition: right var(--transition-base);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
        z-index: 500;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-menu::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--gradient-mystic);
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
        z-index: 299;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .about-grid {
        grid-template-columns: 1fr;
    }

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .membership-grid {
        grid-template-columns: 1fr;
    }

    .tier-card.featured {
        transform: none;
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ==================== TABLET DEVICES (768px - 991px) ==================== */
@media screen and (min-width: 768px) and (max-width: 991px) {
    .nav-toggle {
        display: flex;
    }

    .nav-menu {
        position: fixed;
        top: 0;
        right: -100%;
        width: 50%;
        max-width: 400px;
        height: 100vh;
        background: linear-gradient(135deg, var(--color-shadow), var(--color-void));
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: var(--space-3xl);
        gap: var(--space-lg);
        transition: right var(--transition-base);
        box-shadow: -20px 0 60px rgba(0, 0, 0, 0.5);
        z-index: 500;
    }

    .nav-menu.active {
        right: 0;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.7);
        opacity: 0;
        visibility: hidden;
        transition: var(--transition-base);
        z-index: 299;
    }

    .nav-overlay.active {
        opacity: 1;
        visibility: visible;
    }

    .about-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-2xl);
    }

    .books-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .membership-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tier-card.featured {
        grid-column: span 2;
        max-width: 400px;
        margin: 0 auto;
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==================== SMALL DESKTOP (992px - 1199px) ==================== */
@media screen and (min-width: 992px) and (max-width: 1199px) {
    .nav-menu {
        gap: var(--space-lg);
    }

    .membership-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .tier-card.featured {
        transform: scale(1.03);
    }

    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* ==================== LARGE DESKTOP (1200px+) ==================== */
@media screen and (min-width: 1200px) {
    .container {
        max-width: 1400px;
    }

    .nav-menu {
        gap: var(--space-xl);
    }

    .hero-title {
        font-size: var(--text-hero);
    }

    .about-grid {
        gap: var(--space-4xl);
    }

    .books-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .membership-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== ULTRA-WIDE (1600px+) ==================== */
@media screen and (min-width: 1600px) {
    .container {
        max-width: 1600px;
    }

    .books-grid {
        grid-template-columns: repeat(4, 1fr);
    }

    .lore-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==================== TOUCH DEVICE ENHANCEMENTS ==================== */
@media (hover: none) and (pointer: coarse) {

    /* Remove hover-dependent animations on touch */
    .book-card:hover .book-card-inner {
        transform: none;
    }

    .book-card-inner {
        cursor: pointer;
    }

    /* Make tap targets larger */
    .btn {
        min-height: 48px;
        padding: var(--space-md) var(--space-xl);
    }

    .nav-link {
        padding: var(--space-md);
    }

    .social-link {
        width: 48px;
        height: 48px;
    }

    /* Prevent text selection on interactive elements */
    .btn,
    .nav-link,
    .book-card {
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
}

/* ==================== REDUCED MOTION ==================== */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }

    .fog-layer {
        animation: none;
    }

    .particle {
        animation: none;
        display: none;
    }
}

/* ==================== PRINT STYLES ==================== */
@media print {

    .nav,
    .footer,
    .newsletter,
    .scroll-indicator,
    .particles,
    .fog-layer {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: black;
    }

    a {
        color: black;
        text-decoration: underline;
    }
}

/* ==================== LANDSCAPE MOBILE ==================== */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-5xl) 0;
    }

    .hero-title {
        font-size: var(--text-3xl);
    }

    .hero-subtitle,
    .hero-quote {
        display: none;
    }
}