/* 
 * Maison Riti - Mobile Redesign (Homepage & Layouts)
 * Perfectly aligned with the mobile mockup.
 * This file contains strictly mobile-only overrides (@media max-width: 768px).
 */

@media (max-width: 768px) {
    /* Base resets for mobile */
    body, html {
        overflow-x: hidden;
    }
    
    /* Hero Section Overlay */
    .hero-section {
        display: block !important;
        min-height: 80vh !important;
    }
    .hero-right {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 1;
    }
    .hero-right::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: linear-gradient(to top, rgba(250,249,246,0.9) 0%, rgba(250,249,246,0) 50%);
    }
    .hero-left {
        position: absolute;
        bottom: 40px;
        left: 0;
        width: 100%;
        background: transparent !important;
        padding: 0 20px !important;
        z-index: 2 !important;
        text-align: center;
        align-items: center;
    }
    .hero-title {
        font-size: 38px !important;
    }
    .hero-description {
        max-width: 100% !important;
    }
    
    .hero-carousel-dots {
        position: absolute;
        bottom: 20px;
        left: 0; width: 100%;
        display: flex;
        justify-content: center;
        gap: 8px;
        z-index: 3;
    }
    .hero-carousel-dots .dot {
        width: 6px; height: 6px;
        background-color: var(--color-taupe);
        border-radius: 50%;
        opacity: 0.3;
    }
    .hero-carousel-dots .dot.active {
        opacity: 1;
        background-color: var(--color-signature-gold);
    }

    /* Mobile Trust Badges (Below Hero) */
    .mobile-trust-badges {
        display: flex;
        overflow-x: auto;
        gap: 16px;
        padding: 30px 20px;
        background-color: var(--color-warm-ivory);
        scrollbar-width: none;
    }
    .mobile-trust-badges::-webkit-scrollbar { display: none; }
    .mobile-trust-badges .trust-badge {
        flex: 0 0 120px;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 8px;
    }
    .mobile-trust-badges .icon { color: var(--color-heritage-gold); }
    .mobile-trust-badges .title {
        font-size: 11px;
        font-weight: 600;
        color: var(--color-text-dark);
        line-height: 1.3;
    }
    .mobile-trust-badges .desc {
        font-size: 10px;
        color: var(--color-taupe);
        line-height: 1.3;
    }
    
    /* Horizontal Scrolling for Grids */
    .mobile-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        padding: 0 20px;
    }
    .mobile-section-header .section-title {
        font-size: 13px;
        letter-spacing: 1.5px;
    }
    .horizontal-scroll-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        padding: 0 20px 20px 20px;
        gap: 16px !important;
        scrollbar-width: none;
        margin-left: -20px; /* pull out of container */
        width: calc(100% + 40px);
    }
    .horizontal-scroll-mobile::-webkit-scrollbar { display: none; }
    
    /* Category Cards Mobile Overlays */
    .category-cards .horizontal-scroll-mobile .category-card {
        flex: 0 0 70%;
        position: relative;
    }
    .category-cards .card-image {
        aspect-ratio: 4/5;
        border-radius: 4px;
    }
    .category-cards .category-card::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 50%;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
        border-radius: 4px;
        pointer-events: none;
    }
    .category-cards .card-info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 2;
        padding: 0;
        background: transparent !important;
    }
    .category-cards .card-info h3 {
        color: var(--color-white) !important;
        font-size: 24px;
        margin-bottom: 0;
    }
    .category-cards .explore-link {
        display: none; /* Hide 'explore now' text on mobile since the whole card is clickable */
    }
    
    /* Our Promise Section Overlay */
    .mobile-hero-overlay {
        display: block !important;
    }
    .mobile-hero-overlay .banner-image {
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        z-index: 1;
    }
    .mobile-hero-overlay::after {
        content: '';
        position: absolute;
        top: 0; left: 0; width: 100%; height: 100%;
        background: rgba(0,0,0,0.4);
        z-index: 1;
    }
    .mobile-hero-overlay .banner-content {
        position: relative;
        z-index: 2 !important;
        padding: 60px 30px !important;
        text-align: center;
        align-items: center;
    }
    .mobile-hero-overlay .banner-content * {
        color: var(--color-white) !important;
    }
    
    /* Journal Section Mobile */
    .journal-grid.horizontal-scroll-mobile .journal-card {
        flex: 0 0 80%;
        position: relative;
    }
    .journal-card .card-image {
        aspect-ratio: 16/9;
        border-radius: 4px;
    }
    .journal-card::after {
        content: '';
        position: absolute;
        bottom: 0; left: 0; width: 100%; height: 50%;
        background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 100%);
        border-radius: 4px;
        pointer-events: none;
    }
    .journal-card .card-info {
        position: absolute;
        bottom: 20px;
        left: 20px;
        z-index: 2;
    }
    .journal-card .card-info h3 {
        color: var(--color-white) !important;
        font-size: 18px;
        margin: 0;
    }
    
    /* Newsletter Mobile Stack */
    .newsletter-banner {
        padding: 40px 20px !important;
    }
    .newsletter-inner {
        flex-direction: column !important;
        gap: 30px !important;
        text-align: center !important;
    }
    .newsletter-left {
        flex-direction: column !important;
        gap: 12px !important;
    }
    .newsletter-form {
        width: 100% !important;
    }
    .newsletter-right {
        display: none !important; /* hide benefits on mobile to match mockup */
    }
}