/* ==========================================================================
   HOME PAGE SPECIFIC STYLES - M3 PIXEL DESIGN
   ========================================================================== */

/* 1. Hero Section (Κεντρικό Banner) */
.home-hero { 
    padding: 24px; 
    max-width: 1400px; 
    margin: 0 auto; 
}

.hero-card {
    /* M3 style overlay */
    background: linear-gradient(rgba(10, 58, 106, 0.75), rgba(10, 58, 106, 0.95)), 
                url('https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    border-radius: var(--md-sys-shape-corner-extra-large);
    padding: 120px 32px;
    text-align: center;
    box-shadow: var(--md-sys-elevation-2);
    transition: all 0.4s var(--md-sys-motion-easing-emphasized);
}

/* Dark Mode προσαρμογή για το Hero Banner (πιο ατμοσφαιρικό) */
body.dark-mode .hero-card {
    background: linear-gradient(rgba(17, 19, 24, 0.85), rgba(17, 19, 24, 0.98)), 
                url('https://images.unsplash.com/photo-1589939705384-5185137a7f0f?auto=format&fit=crop&w=1920&q=80') center/cover no-repeat;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.hero-card .display-large { 
    max-width: 800px; 
    margin: 0 auto 16px auto; 
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -1px;
}

.hero-card .body-large { 
    max-width: 600px; 
    margin: 0 auto 40px auto; 
    color: rgba(255, 255, 255, 0.9);
    font-size: 18px;
}

.hero-actions { 
    display: flex; 
    justify-content: center; 
    gap: 16px; 
    flex-wrap: wrap; 
}


/* 2. Features Section (Γιατί να επιλέξετε...) */
.home-features { 
    padding: 80px 24px; 
    max-width: 1200px; 
    margin: 0 auto; 
}

.features-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); 
    gap: 24px; 
}

/* M3 Pixel Cards */
.feature-card {
    background-color: var(--md-sys-color-surface-container-low);
    border-radius: var(--md-sys-shape-corner-extra-large); /* Πιο στρογγυλεμένες M3 γωνίες */
    padding: 40px 32px;
    border: 1px solid var(--md-sys-color-surface-container-high);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    /* Η βουτυρένια κίνηση της Google */
    transition: transform 0.4s var(--md-sys-motion-easing-emphasized), 
                box-shadow 0.4s var(--md-sys-motion-easing-emphasized),
                background-color 0.4s ease;
}

.feature-card:hover { 
    transform: translateY(-6px) scale(1.01); 
    background-color: var(--md-sys-color-surface-container); 
    box-shadow: var(--md-sys-elevation-2);
}

.feature-icon {
    font-size: 36px;
    color: var(--md-sys-color-primary);
    margin-bottom: 24px;
    padding: 20px;
    /* Δυναμικό gradient που προσαρμόζεται στο Dark Mode */
    background: linear-gradient(135deg, var(--md-sys-color-primary-container) 0%, var(--md-sys-color-surface) 100%);
    border-radius: 20px;
    border: 1px solid var(--md-sys-color-surface-container-high);
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
}

.feature-card .title-large { 
    margin-bottom: 12px; 
    color: var(--md-sys-color-on-surface); 
    font-weight: 600;
    letter-spacing: -0.2px;
}

.feature-card .body-medium {
    font-size: 15px;
    line-height: 1.6;
    color: var(--md-sys-color-on-surface);
    opacity: 0.8;
}


/* 3. CTA Section (Ψάχνετε κατάλογο;) */
.home-cta { 
    padding: 80px 24px; 
    background-color: var(--md-sys-color-primary-container); 
    color: var(--md-sys-color-on-primary-container); 
    text-align: center; 
    margin: 48px auto; 
    border-radius: var(--md-sys-shape-corner-extra-large); 
    max-width: 1200px; 
    width: calc(100% - 48px);
    transition: background-color 0.4s ease;
}

body.dark-mode .home-cta {
    border: 1px solid rgba(255,255,255,0.05);
}

.cta-container { 
    max-width: 800px; 
    margin: 0 auto; 
}

.home-cta .headline-large { 
    color: var(--md-sys-color-on-primary-container); 
    font-weight: 700;
    margin-bottom: 16px;
    letter-spacing: -0.5px;
}

.home-cta .body-large { 
    color: var(--md-sys-color-on-primary-container); 
    opacity: 0.9; 
    margin-bottom: 32px;
}

/* ==========================================================================
   MEDIA QUERIES FOR HOME PAGE (Mobile)
   ========================================================================== */
@media (max-width: 768px) {
    .home-hero { padding: 16px; }
    
    .hero-card { 
        padding: 60px 20px; 
        border-radius: var(--md-sys-shape-corner-extra-large); 
    }
    
    .hero-card .display-large { font-size: 32px; line-height: 1.2; }
    
    .hero-actions { flex-direction: column; }
    .hero-actions a { width: 100%; }
    
    .home-features { padding: 48px 16px; }
    
    .feature-card { text-align: center; align-items: center; padding: 32px 24px; }
    
    .home-cta { 
        padding: 48px 24px; 
        margin: 24px auto;
        border-radius: var(--md-sys-shape-corner-extra-large);
        width: calc(100% - 32px);
    }
}