/* Mobile Responsive Styles for Lily Memorial */

/* Mobile Navigation */
@media (width <= 768px) {
    /* Gateway Adjustments */
    .gateway-title {
        font-size: 2rem !important;
    }
    
    .gateway-subtitle {
        font-size: 1.25rem !important;
    }
    
    /* Station Room - Stack stations vertically on mobile */
    .station-room {
        padding: 1rem;
    }
    
    .circular-container {
        display: flex;
        flex-direction: column;
        width: 100%;
        height: auto;
        gap: 1rem;
        padding: 2rem 0;
    }
    
    .station-circle {
        position: static !important;
        transform: none !important;
        width: 60px;
        height: 60px;
        font-size: 1.5rem;
        margin: 0 auto;
    }
    
    /* Group LILY JADE LEAH */
    .station-1, .station-2, .station-3, .station-4 {
        order: 1;
    }
    
    .station-5, .station-6, .station-7, .station-8 {
        order: 2;
    }
    
    .station-9, .station-10, .station-11, .station-12 {
        order: 3;
    }
    
    /* Add spacing between groups */
    .station-4::after,
    .station-8::after {
        content: '';
        display: block;
        height: 2rem;
        width: 100%;
    }
    
    /* Station Content */
    .station-content {
        padding: 1.5rem;
    }
    
    .station-letter {
        font-size: 3rem;
    }
    
    .station-poem {
        font-size: 1rem;
        padding: 0 1rem;
    }
    
    /* Video Container */
    .video-container {
        max-width: 100%;
    }
    
    /* Spotify Container */
    .spotify-container {
        max-width: 100%;
    }
    
    /* Navigation controls */
    .nav-controls {
        bottom: 1rem;
        gap: 0.5rem;
    }

    .nav-button {
        padding: 0.75rem 1.5rem;
        font-size: 1rem;
        min-height: 44px;
        min-width: 44px;
    }

    /* Header back link - ensure adequate tap target */
    .header-back-link {
        min-height: 44px;
        padding: 0.75rem 1.25rem !important;
        display: inline-flex;
        align-items: center;
    }
    
    /* Begin journey button */
    .begin-journey {
        bottom: 10%;
        padding: 1.25rem 2.5rem;
        font-size: 1.125rem;
    }
    
    /* Memorial Room */
    .lily-garden {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .placement-section {
        margin: 2rem 1rem;
        padding: 1.5rem;
    }
    
    .placement-title {
        font-size: 1.75rem;
    }
    
    .object-selection {
        gap: 1rem;
    }
    
    .object-icon {
        font-size: 2.5rem;
    }
    
    /* Headstone adjustments */
    .headstone-image {
        max-height: 300px;
    }
    
    .memorial-animals {
        gap: 2rem;
        bottom: -10px;
    }
    
    .kitty {
        font-size: 2.5rem;
    }
    
    .doggie {
        font-size: 3rem;
    }
    
    .donation-bubble {
        width: 280px;
        padding: 1.25rem;
        font-size: 0.875rem;
    }
    
    /* Quiz button - ensure 44px minimum tap target */
    .quiz-button {
        min-width: 280px;
        min-height: 44px;
        font-size: 1rem;
        padding: 1.5rem 1.25rem;
    }

    .quiz-popup {
        padding: 1.5rem;
    }

    /* Quote/Sun button containers - ensure adequate tap targets */
    .quote-button, .quiz-button-elem {
        min-height: 44px;
        min-width: 44px;
        padding: 0.875rem 1.75rem;
    }

    /* Carousel navigation buttons - 44px minimum for mobile */
    .nav-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        width: 44px !important;
        height: 44px !important;
    }

    /* Memorial flower buttons - 100px minimum on mobile */
    .lily-flower {
        width: 100px !important;
        height: 100px !important;
        min-width: 100px;
        min-height: 100px;
    }

    .lily-svg {
        width: 100px !important;
        height: 100px !important;
    }

    .poem-text-overlay {
        width: 90px;
    }

    .poem-title {
        font-size: 0.75rem;
    }
    
    /* Full poem section */
    .full-poem-section {
        bottom: 5%;
    }
}

/* Small Mobile */
@media (width <= 480px) {
    /* Even smaller adjustments */
    .gateway-title {
        font-size: 1.75rem !important;
    }
    
    .station-circle {
        width: 50px;
        height: 50px;
        font-size: 1.25rem;
    }
    
    .station-letter {
        font-size: 2.5rem;
    }
    
    .lily-svg {
        width: 100px;
        height: 100px;
    }

    .placement-section {
        padding: 1rem;
    }

    /* Stack object selection vertically */
    .object-selection {
        flex-direction: column;
        align-items: center;
    }

    .object-option {
        width: 100%;
        text-align: center;
    }

    /* Smaller nav button but maintain 44px minimum */
    .nav-button {
        padding: 0.6rem 1.25rem;
        font-size: 0.9rem;
        min-height: 44px;
    }

    /* Full width quiz button */
    .quiz-button {
        min-width: 100%;
        min-height: 44px;
    }
}

/* Tablet (769px - 1024px) */
@media (width >= 769px) and (width <= 1024px) {
    /* Memorial flower buttons - 140px on tablet */
    .lily-flower {
        width: 140px !important;
        height: 140px !important;
        min-width: 140px;
        min-height: 140px;
    }

    .lily-svg {
        width: 140px !important;
        height: 140px !important;
    }

    .poem-text-overlay {
        width: 120px;
    }

    .poem-title {
        font-size: 0.9rem;
    }

    /* Quiz/Sun button containers - wider on tablet */
    .quiz-button-container {
        max-width: 450px;
    }

    .quiz-button {
        min-width: 400px;
        max-width: 450px;
    }

    /* Navigation buttons side-by-side on tablet */
    .navigation-section {
        gap: 3rem;
    }

    .nav-button {
        min-width: 150px;
        padding: 1rem 2.5rem;
    }
}

/* Landscape Mobile */
@media (width <= 768px) and (orientation: landscape) {
    .station-room {
        height: auto;
        min-height: 100vh;
    }

    .circular-container {
        flex-flow: row wrap;
        justify-content: center;
        gap: 1rem;
        padding: 1rem;
    }

    .station-circle {
        flex: 0 0 auto;
        margin: 0.5rem;
    }
}