/*
=====================================================
TABLE OF CONTENTS (MOBILE FIRST EDITION)
=====================================================
1.  VARIABLES ............. Χρώματα & Ρυθμίσεις
2.  RESET ................. Βασικός καθαρισμός browser
3.  BASE STYLES (MOBILE) .. Ο κώδικας για κινητά (Default)
    3.1 Typography
    3.2 Buttons & Utilities
    3.3 Navbar (Mobile View)
    3.4 Hero Section
    3.5 Stats Section
    3.6 About Section
    3.7 Portfolio Section
    3.8 Contact Section
    3.9 Footer
4.  MEDIA QUERIES ......... Προσαρμογή για μεγαλύτερες οθόνες
    4.1 Tablet (min-width: 768px)
    4.2 Desktop (min-width: 1024px)
=====================================================
*/

/* =====================================================
1. VARIABLES 
=====================================================
*/
:root {
    /* Bright & Airy Colors */
    --primary: #007bff;       /* Sky Blue */
    --secondary: #f8f9fa;     /* Light Gray Background */
    --text-dark: #2c3e50;     /* Navy Title */
    --text-body: #596275;     /* Grey Text */
    --white: #ffffff;
    --shadow: 0 4px 12px rgba(0,0,0,0.08); /* Απαλή σκιά */
    --transition: all 0.3s ease;
}

/* =====================================================
2. RESET 
=====================================================
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Montserrat', sans-serif;
    background-color: var(--white);
    color: var(--text-body);
    line-height: 1.6;
    font-size: 16px; /* Βάση για κινητά */
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

/* =====================================================
3. BASE STYLES (MOBILE DEFAULT) 
   Εδώ γράφουμε ΜΟΝΟ για κινητά.
=====================================================
*/

/* --- 3.1 Typography & Layout --- */
.container {
    width: 90%;       /* Στα κινητά πιάνουμε σχεδόν όλο το πλάτος */
    max-width: 100%;  
    margin: 0 auto;
}

h1, h2, h3 {
    color: var(--text-dark);
    font-weight: 700;
    line-height: 1.3;
}

h1 { font-size: 2.5rem; margin-bottom: 1rem; }
h2 { font-size: 1.8rem; margin-bottom: 1rem; }
p { margin-bottom: 1.5rem; }

.section-padding {
    padding: 60px 0; /* Μικρότερο padding για mobile */
}

/* --- 3.2 Buttons --- */
.btn {
    display: inline-block;
    padding: 15px 30px; /* Μεγάλο padding για δάχτυλα */
    border-radius: 50px;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.9rem;
    transition: var(--transition);
    width: 100%;      /* Στα κινητά τα κουμπιά πιάνουν όλο το πλάτος */
    text-align: center;
    margin-bottom: 10px; /* Απόσταση μεταξύ κουμπιών αν είναι κάθετα */
}

.btn-primary {
    background-color: var(--primary);
    color: var(--white);
    box-shadow: 0 4px 15px rgba(0,123,255,0.3);
}

.btn-secondary {
    border: 2px solid var(--white);
    color: var(--white);
}

/* --- 3.3 Navbar (Mobile Simplified) --- */
.navbar {
    position: fixed;
    top: 0;
    width: 100%;
    background: rgba(255,255,255,0.95);
    padding: 15px 0;
    z-index: 1000;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.nav-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--text-dark);
}

.logo span { color: var(--primary); }

/* Κρύβουμε το πλήρες μενού στα κινητά για απλότητα */
.nav-links {
    display: none; 
}

/* Εμφανίζουμε μόνο ένα κουμπί "Contact" στα κινητά αν θέλουμε */
/* Ή αφήνουμε μόνο το λογότυπο για ultra-clean look */

/* --- 3.4 Hero Section --- */
.hero {
    height: 100vh; /* Full screen ύψος */
    /* Προσοχή: Εικόνα background */
    background-image: url('https://images.unsplash.com/photo-1506953823976-52e1fdc0149a?ixlib=rb-1.2.1&auto=format&fit=crop&w=1000&q=80');
    background-size: cover;
    background-position: center;
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
}

.overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(rgba(0,0,0,0.2), rgba(44, 62, 80, 0.8));
}

.hero-content {
    position: relative;
    z-index: 1;
    color: var(--white);
    padding: 0 20px;
}

.hero h1 { color: var(--white); }
.hero p { color: #eee; font-size: 1rem; }

/* --- 3.5 Stats Section --- */
.stats {
    background-color: var(--white);
    margin-top: -30px; /* Μικρότερο overlap στα κινητά */
    position: relative;
    z-index: 10;
    padding-bottom: 40px;
}

/* Grid Layout: Default = 1 στήλη (Stacked) */
.grid-3, .grid-2 {
    display: grid;
    grid-template-columns: 1fr; /* Μία στήλη για κινητά */
    gap: 30px;
}

.stat-item {
    text-align: center;
    margin-top: 30px;
    padding: 20px;
    background: var(--white);
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.stat-item i {
    font-size: 2rem;
    color: var(--primary);
    margin-bottom: 10px;
}

/* --- 3.6 About Section --- */
.about {
    background-color: var(--secondary);
}
.about-text {
    text-align: center;
}
.about-image img {
    border-radius: 15px;
    box-shadow: var(--shadow);
}

.check-list li {
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
    font-size: 0.95rem;
}

.check-list i {
    color: var(--primary);
    margin-right: 15px;
    min-width: 20px; /* Για ευθυγράμμιση */
}

/* --- 3.7 Portfolio Section --- */
.section-title , .section-subtitle {
    text-align: center;
}
.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 15px;
    background: #000;
    box-shadow: var(--shadow);
}

.video-wrapper iframe {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
}

/* --- 3.8 Contact Section --- */
.contact-box {
    background: var(--primary);
    color: var(--white);
    text-align: center;
    padding: 40px 20px;
    border-radius: 15px;
}

.contact-box h2 { color: var(--white); font-size: 1.6rem; }
.contact-box p { color: rgba(255,255,255,0.9); }

.big-btn {
    background: var(--white);
    color: var(--primary);
    border: none;
    margin-top: 10px;
}

.social-links { margin-top: 25px; }
.social-links a {
    color: var(--white);
    font-size: 1.5rem;
    margin: 0 10px;
}

/* --- 3.9 Footer --- */
footer {
    text-align: center;
    padding: 30px 20px;
    background: var(--secondary);
    font-size: 0.8rem;
}


/* =====================================================
4. MEDIA QUERIES (PROGRESSIVE ENHANCEMENT)
   Εδώ προσθέτουμε στυλ καθώς η οθόνη μεγαλώνει
=====================================================
*/

/* --- 4.1 TABLETS (min-width: 768px) --- */
@media (min-width: 768px) {
    
    /* Typography Upgrades */
    h1 { font-size: 3.5rem; }
    h2 { font-size: 2.2rem; }
    .section-padding { padding: 80px 0; }
    
    /* Layout Upgrades */
    .container { max-width: 720px; }
    
    /* Hero Buttons: Side by side */
    .btn { width: auto; margin-right: 10px; }
    .hero-btns { display: flex; justify-content: center; }
    
    /* Grid Upgrades: 2 Στήλες */
    .grid-2 { 
        grid-template-columns: 1fr 1fr; 
        align-items: center; 
        gap: 50px;
    }
    
    /* Στα Tablets το stats grid γίνεται 3 στήλες */
    .grid-3 { 
        grid-template-columns: repeat(3, 1fr); 
    }
    
    .stats { margin-top: -50px; }
}

/* --- 4.2 DESKTOPS (min-width: 1024px) --- */
@media (min-width: 1024px) {
    
    .container { max-width: 1100px; }
    .section-padding { padding: 100px 0; }
    
    /* Hero Text Size Bump */
    .hero h1 { font-size: 4rem; }
    .hero p { font-size: 1.2rem; max-width: 700px; margin-left: auto; margin-right: auto; }
    
    /* Navbar: Εμφάνιση του πλήρους μενού */
    .nav-links {
        display: flex;
        gap: 30px;
    }
    
    /* About Section */
    .about-text { padding-right: 40px; }
    
    /* Hover Effects (Μόνο για Desktop που έχει ποντίκι) */
    .stat-item:hover { transform: translateY(-10px); transition: var(--transition); }
    .btn:hover { transform: translateY(-3px); box-shadow: 0 10px 20px rgba(0,0,0,0.15); }
}