/* HAMBURGER ICON */
.menu-container {
    position: fixed;
    top: 1.875rem;   /* Target PX / 16 = REM */
    right: 1.875rem; 
    z-index: 5000; 
}

/* HAMBURGER ICON */
.menu-icon {
    width: 2.188rem; 
    height: 1.563rem; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    position: fixed; 
    top: 3vh;         
    right: 3vw;       
    z-index: 5001; 
}

.bar {
    width: 100%;
    height: 0.188rem; 
    background-color: white;
    border-radius: 0.313rem;
    transition: all 0.3s ease-in-out;
}

/* Η μεταμόρφωση σε X */
.menu-icon.active .bar:nth-child(1) {
    transform: translateY(0.688rem) rotate(45deg);
}
.menu-icon.active .bar:nth-child(2) {
    opacity: 0;
}
.menu-icon.active .bar:nth-child(3) {
    transform: translateY(-0.688rem) rotate(-45deg);
}

/* SIDE MENU PANEL */
.side-menu {
    position: fixed;
    top: 0;
    right: -100%;       
    width: 18.75rem;    
    max-width: 80vw;    
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.98); 
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 5000;
    box-shadow: -0.313rem 0 0.938rem rgba(0,0,0,0.5);
}

.side-menu.active {
    right: 0; 
}

.nav-links {
    list-style: none; 
    padding: 0;
    margin: 0;
    text-align: center;
}

.nav-links li {
    margin: 1.25rem 0; 
}

.nav-links a {
    color: white;
    text-decoration: none;
    font-family: 'Arial', sans-serif; 
    font-weight: bold;
    font-size: 1.5rem;  
    letter-spacing: 0.125rem; 
    text-transform: uppercase; 
    transition: 0.3s;
}

.nav-links a:hover {
    opacity: 0.7;
}

/* LANGUAGE SWITCHER */
.language-switcher {
    margin-top: 3.125rem; 
    font-weight: bold;
    font-size: 1.1rem;
}

.lang-link {
    color: #888;
    text-decoration: none;
    padding: 0.313rem; 
    transition: 0.3s;
}
.lang-link.active, .lang-link:hover {
    color: white;
}

.separator {
    color: white;
    margin: 0 0.313rem; 
}

body {
    margin: 0; 
    background-color: #1a3c1a; 
    color: white;
    font-family: 'Arial', sans-serif; 
    overflow-x: hidden;
}

section { 
    min-height: 100vh; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    justify-content: center; 
    position: relative; 
    padding: 2rem; 
}

/* Fixed Logo */
.fixed-logo { 
    position: fixed; 
    bottom: 1.25rem;  
    right: 1.25rem;   
    width: 6.25rem;   
    z-index: 100; 
}

/* Hero Section */
.main-name { 
    font-size: clamp(3rem, 8vw, 6rem); 
    text-align: center; 
    line-height: 1; 
    margin: 0; 
    text-transform: uppercase;
}

.subtitle { 
    font-size: clamp(1.2rem, 3vw, 3rem); 
    letter-spacing: 0.313rem; /* 5px */
    margin-top: 0.625rem;     /* 10px */
    text-align: center;
}

/* Το χέρι με την κάμερα */
.decor-hand { 
    position: absolute; 
    top: 0; 
    right: 0; 
    width: clamp(300px, 40vw, 600px); 
    max-width: 50%; 
}

/* Journal Section */
.journal-section {
    text-align: center;
    background-color: #1a3c1a;
    padding: 2rem 0; 
    min-height: auto; 
}

.journal-preview-container {
    display: inline-block;
    margin-top: 1rem; 
    cursor: pointer;
    perspective: 62.5rem; 
}

.book-cover-static {
    position: relative;
    width: clamp(250px, 25vw, 350px); 
    height: auto;
    box-shadow: 0.938rem 0.938rem 2.5rem rgba(0,0,0,0.5); 
    transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.book-cover-static img {
    width: 100%;
    display: block;
    border-radius: 0.125rem 0.625rem 0.625rem 0.125rem;
}
.book-cover-static:hover .click-overlay {
    opacity: 1;
}

/* CLICK OVERLAY */
.click-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Απόλυτο κέντρο πάνω στο βιβλίο */
    width: auto;
    height: auto;
    opacity: 0;
    transition: 0.3s;
}

/* PHOTOGRAPHY GRID */
.camera-grid {
    display: grid;
    /* Χρησιμοποιούμε 2 στήλες, αλλά μειώνουμε το κενό αναλογικά */
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(1.25rem, 5vw, 3.75rem); /* Από 20px έως 60px ανάλογα την οθόνη */
    text-align: center;
    width: 90%;
    max-width: 75rem; /* 1200px / 16 */
    margin: 0 auto;
}

.camera-container {
    position: relative; 
    width: clamp(200px, 20vw, 280px); 
    margin: 0 auto;
    z-index: 10;
}

.camera-container:hover img {
    transform: scale(1.05);
    transition: 0.3s ease;
}

.cam-box h3 {
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    margin-bottom: 1rem;
    letter-spacing: 0.063rem;
}

.cam-box img {
    width: 100%;
    position: relative;
    z-index: 2; 
    cursor: pointer;
    transition: 0.3s;
}

/* Η θέση της φωτογραφίας πίσω από την οθόνη */
/* Εδώ κρατάμε τα ποσοστά (%) γιατί εξασφαλίζουν ότι η εικόνα 
   θα μένει ΠΑΝΤΑ μέσα στο πλαίσιο της κάμερας καθώς αυτή μικραίνει */
.cam-screen {
    position: absolute;
    top: 15%;    
    left: 2%;   
    width: 75%;  
    height: 80%; 
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    z-index: 1;  
    overflow: hidden;
}

.cam-screen img, .cam-screen1 img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.cam-screen1 {
    position: absolute;
    top: 25%;    
    left: 2%;   
    width: 65%;  
    height: 60%; 
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    z-index: 1;  
    overflow: hidden;
}

/* CASSETTE GRID (VIDEOS) */
.cassette-grid { 
    display: grid;
    /* 3 στήλες που γίνονται αυτόματα λιγότερες αν δεν χωράνε */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.875rem; /* 30px - αυξάνουμε λίγο το κενό για να αναπνέουν */
    text-align: center;
    width: 90%;
    max-width: 75rem; /* 1200px */
    margin: 20px auto; /* Μικρό περιθώριο πάνω-κάτω */
}

.cas-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Βασικό για να δουλέψει το z-index του hover */
    z-index: 10;
}

.cas-box h3 {
    font-size: 1rem;
    margin-bottom: 0.625rem; /* 10px */
    letter-spacing: 0.063rem; /* 1px */
    min-height: 2.5rem; /* 40px */
}

.cas-box img { 
    width: 100%;
    max-width: 18.75rem; /* 300px */
    height: auto;
    cursor: pointer;
    display: block; /* Αφαιρεί κενά κάτω από την εικόνα */
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1); 
}
.cas-box:hover img {
    transform: scale(1.08) rotate(1deg); 
}

/* MEDIA QUERY ΓΙΑ ΚΙΝΗΤΑ/TABLET */
@media (max-width: 768px) {
    .camera-grid {
        grid-template-columns: 1fr; /* Οι κάμερες μπαίνουν η μία κάτω από την άλλη */
    }
    
    .camera-container {
        width: 70vw; /* Μεγαλώνουν λίγο στο κινητό για να φαίνονται καλύτερα */
    }
}
/* OVERLAY ΓΚΑΛΕΡΙ */
.overlay { 
    display: none; 
    position: fixed; 
    top: 0; left: 0; 
    width: 100%; height: 100%; 
    background: rgba(0,0,0,0.95); 
    z-index: 6000; /* Πάνω από το μενού */
    overflow-y: auto; 
}

.close-overlay { 
    position: fixed; 
    top: 1.25rem;  /* 20px */
    right: 2.5rem; /* 40px */
    font-size: clamp(2.5rem, 5vw, 4rem); /* 40px έως 64px */
    cursor: pointer; 
    color: white; 
    z-index: 6001;
}

.gallery-img { 
    width: clamp(280px, 80%, 1000px); /* 80% πλάτος, αλλά με όρια */
    display: block; 
    margin: 2rem auto; 
    border: 0.25rem solid white; /* 4px */
}

/* GRAPHIC DESIGN SECTION - ΚΑΔΡΑ */
.graphic-design-section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #1a3c1a;
    padding: 4rem 1rem;
}

.frame-grid {
    display: grid;
    text-align: center;
    /* 3 στήλες που γίνονται 1 στα κινητά */
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); 
    gap: clamp(1rem, 3vw, 2rem); /* 16px έως 32px */
    width: 95%;
    max-width: 75rem; /* 1200px */
    margin-top: 2.5rem; /* 40px */
}

.frame-container {
    position: relative;
    width: 100%;
    max-width: 20rem; /* 320px - περιορίζουμε το μέγεθος για να μην "ξεχειλώνει" */
    margin: 0 auto;
    aspect-ratio: 2 / 3; 
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.3s ease;
}

.frame-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2; 
    pointer-events: none; 
    object-fit: contain; /* Διασφαλίζει ότι το κάδρο δεν θα παραμορφωθεί */
}

.frame-content, .frame-content1 {
    position: absolute;
    z-index: 1; 
    width: 78%;  /* Ελαφριά αύξηση για καλύτερη κάλυψη του κενού */
    height: 70%; 
    overflow: hidden;
}

.frame-content1 {
    height: 78%; /* Για το κάδρο που είναι πιο ψηλό */
}

.frame-content img {
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: 0.5s ease;
}
.frame-content1 img{
    width: 100%;
    height: 100%;
    object-fit: cover; 
    transition: 0.5s ease;}
/* Hover εφέ */
.frame-container:hover {
    transform: scale(1.05);
}

.frame-container:hover .frame-content img, 
.frame-container:hover .frame-content1 img {
    transform: scale(1.1); /* Μικρό zoom στο περιεχόμενο του κάδρου */
}
/* CONTACT SECTION */
.contact-section {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #1a3c1a;
    padding: 20px;
}

.receipt-container {
    position: relative;
    /* Η απόδειξη θα πιάνει το 90% του πλάτους σε μικρές οθόνες 
       αλλά δεν θα ξεπερνά ποτέ τα 600px */
    width: 100%;
    max-width: 600px; 
    margin: 0 auto;
    transform: rotate(-2deg);
    /* Διασφαλίζει ότι το ύψος ακολουθεί το πλάτος αναλογικά */
    line-height: 0; 
}

.receipt-bg {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(10px 10px 20px rgba(0,0,0,0.4));
}

/* Η ΦΟΡΜΑ - Εδώ είναι το μυστικό */
.contact-form {
    position: absolute;
    /* Κατεβάζουμε όλη τη φόρμα πιο κάτω (από 12% σε 22%) */
    top: 13%; 
    left: 28%;  
    right: 15%; 
    bottom: 15%;
    
    display: flex;
    flex-direction: column;
    color: #333;
    font-family: 'Courier New', Courier, monospace;
    z-index: 10;
}

.contact-form h2 {
    text-align: center;
    font-size: clamp(1rem, 3vw, 1.4rem);
    /* Δίνουμε χώρο κάτω από το "ΕΠΙΚΟΙΝΩΝΙΑ" */
    margin-bottom: 2.5rem; 
    letter-spacing: 2px;
    margin-right: 15%;
}

.input-group {
    margin-bottom: 1.8rem; 
    display: flex;
    flex-direction: column;
}
.input-group label {
    font-size: 0.8rem;
    font-weight: bold;
    margin-left: 2px; 
}

.input-group input, 
.input-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px dashed #333; 
    font-family: inherit;
    padding: 5px 0;
    outline: none;
    width: 90%; 
    color: #000;
    font-size: 1rem;
}
.input-group textarea {
    flex-grow: 1; 
    border-bottom: none;
    line-height: 1.5;
    margin-top: 5px;
}

/* Το κουμπί ΑΠΟΣΤΟΛΗ / SENT */
.send-btn {
    align-self: center;
    margin-right: 20%;
    margin-top: 10px;
    background: white;
    border: 2px solid #333;
    padding: 5px 20px;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: 0.3s;
    text-transform: uppercase;
}

.send-btn:hover {
    background-color: #333;
    color: white;
}
/* MEDIA QUERY ΓΙΑ ΜΙΚΡΑ ΚΙΝΗΤΑ */
@media (max-width: 480px) {
    .receipt-container {
        transform: rotate(0deg); /* Ισιώνουμε την απόδειξη στα κινητά για να μη χάνεται χώρος */
    }
    .contact-form {
        left: 22%; /* Προσαρμόζουμε το κενό αριστερά */
    }
}
/* Ειδική ρύθμιση για πολύ μικρές οθόνες (Κινητά) */
@media (max-width: 480px) {
    .contact-form {
        left: 20%;
        right: 10%;
    }
    .contact-form h2 {
        margin-bottom: 0.5rem;
    }
    .input-group {
        margin-bottom: 0.5rem;
    }
}

.send-btn {
    margin-top: 0.625rem; /* 10px */
    /* Αφαιρούμε το margin-right: 65px για να μην "κλοτσάει" στο πλάι */
    background: white;
    border: 0.125rem solid #333; /* 2px */
    padding: 0.313rem 1.563rem; /* 5px 25px */
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    align-self: center; /* Αυτό το κεντράρει αυτόματα μέσα στο flex container */
    transition: 0.2s;
    margin-bottom: 2rem; /* Μειωμένο margin για να χωράει στην απόδειξη */
    font-size: 0.9rem;
}

.send-btn:hover {
    background-color: #333;
    color: white;
}
/* Media Queries */

/* Για laptop (μικρότερες οθόνες 13-14 ίντσες) */
@media (max-width: 1200px) {
    /* Τα clamp() φροντίζουν τα περισσότερα, αλλά μπορούμε να μαζέψουμε τα κενά */
    section { padding: 1.5rem; }
    .camera-grid { gap: 1.875rem; } /* 30px */
}

/* Για Tablet (iPad κτλ) */
@media (max-width: 992px) {
    .frame-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 στήλες αντί για 3 */
    }
}

/* Για Κινητά (iPhone, Android) */
@media (max-width: 768px) {
    .camera-grid, .frame-grid, .cassette-grid {
        grid-template-columns: 1fr; /* Όλα σε μία στήλη */
        gap: 2.5rem;
    }

    .main-name {
        line-height: 1.1; /* Λίγο περισσότερος χώρος ανάμεσα στα ονόματα */
    }

    .receipt-container {
        width: 95%; /* Η απόδειξη πιάνει σχεδόν όλο το πλάτος */
        transform: rotate(0deg); /* Αφαιρούμε την κλίση για να διαβάζεται πιο εύκολα στο κινητό */
    }

    .contact-form {
        left: 20%; /* Περισσότερος χώρος για τα γράμματα στο κινητό */
        right: 10%;
    }
}

/* Ειδική ρύθμιση για πολύ μικρά κινητά */
@media (max-width: 480px) {
    .fixed-logo {
        width: 4.375rem; /* 70px - μικρότερο logo για να μην ενοχλεί */
    }
    .send-btn {
        width: 100%; /* Το κουμπί πιάνει όλο το πλάτος της φόρμας */
    }
}