/* 
 * Component Styles
 * Regular CSS for non-Tailwind styles (font-family, etc.)
 * Note: Tailwind classes remain inline in HTML since we're using Tailwind CDN
 */

html {
    scroll-behavior: smooth;
}

.page-container {
    font-family: "Roboto", sans-serif;
    /* Ensure page container is at least viewport height and uses flexbox */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.layout-container {
    /* Ensure layout container grows to fill available space */
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 100%;
}

/* Ensure main content grows to push footer to bottom */
.page-container main {
    flex: 1 1 auto;
}

.app-store-badge-img {
    max-width: 200px;
}

/* Hero Section: Mobile Ordering */
/* Mobile (default): [Title, Gallery, Subtitle] */
/* Use display: contents so wrapper doesn't interfere with flex ordering */
.hero-content-wrapper {
    display: contents;
}

.hero-title-wrapper {
    order: 1;
}

.hero-gallery-wrapper {
    order: 2;
}

.hero-subtitle-wrapper {
    order: 3;
}

/* Desktop (864px+): [Gallery, [Title, Subtitle]] */
@media (min-width: 864px) {
    /* Wrapper becomes a flex container grouping title and subtitle */
    .hero-content-wrapper {
        display: flex;
        flex-direction: column;
        gap: 1.5rem; /* gap-6 equivalent */
        min-width: 400px;
        justify-content: center;
    }
    
    /* Reset order for children inside wrapper */
    .hero-title-wrapper {
        order: 0;
    }
    
    .hero-subtitle-wrapper {
        order: 0;
    }
    
    /* Order the wrapper itself */
    .hero-gallery-wrapper {
        order: 1;
    }
    
    .hero-content-wrapper {
        order: 2;
    }
}