/* ═══════════════════════════════════════════════════════════
   Συμπίεση κατακόρυφου ρυθμού σε κοντές οθόνες.

   Το style.css είναι φτιαγμένο για ψηλό viewport: η αρχική
   χρειάζεται 956px (header 65 + hero 386 + section 422 + footer 83).
   Σε laptop 1080p με 125% κλίμακα το ωφέλιμο ύψος είναι ~760px,
   οπότε εμφανίζεται scrollbar.

   Εδώ μικραίνουν ΜΟΝΟ τα κενά (paddings/margins) και η κλίμακα του
   τίτλου, σταδιακά, μέσω max-height. Σε ψηλές οθόνες δεν αλλάζει
   τίποτα — το style.css μένει αυτούσιο, όπως ήρθε από το prototype.
   ═══════════════════════════════════════════════════════════ */

/* ── Footer κολλημένο στον πάτο ─────────────────────────── */
/* Το .page-wrapper έχει min-height:100vh. Όταν το περιεχόμενο είναι
   κοντύτερο από την οθόνη, το footer σταματούσε εκεί που τελείωνε το
   περιεχόμενο και από κάτω έμενε κενό. Με flex column και margin-top:auto
   το footer σπρώχνεται στον πάτο· σε μακριές σελίδες δεν αλλάζει τίποτα,
   γιατί δεν περισσεύει χώρος. */
.page-wrapper { display: flex; flex-direction: column; }
.page-wrapper > .site-footer { margin-top: auto; }

/* Το .container έχει margin:0 auto — και ένα flex item με auto πλαϊνά
   περιθώρια ΔΕΝ κάνει stretch, οπότε θα μάζευε στο πλάτος του κειμένου.
   Το width:100% (με border-box) επαναφέρει ακριβώς τη συμπεριφορά που
   είχε ως block: πλάτος έως max-width και κεντραρισμένο. */
.page-wrapper > * { width: 100%; }

/* ── Επίπεδο 1: ~990px και κάτω ─────────────────────────── */
@media (max-height: 990px) {
    .hero { padding: 32px 0 4px; }
    .hero-badge { margin-bottom: 14px; }
    .hero p { margin-top: 14px; }
    .hero-pills { margin-top: 14px; }

    .section { padding: 24px 0 36px; }

    .module-card { padding: 22px 24px; gap: 14px; }

    .site-footer .container { padding-top: 20px; padding-bottom: 20px; }
}

/* ── Επίπεδο 2: ~850px και κάτω ─────────────────────────── */
@media (max-height: 850px) {
    .site-header .container { height: 56px; }

    .hero { padding: 20px 0 0; }
    .hero-badge { margin-bottom: 10px; }
    .hero h1 { font-size: clamp(30px, 3.2vw, 40px); }
    .hero p { margin-top: 12px; font-size: 15.5px; }
    .hero-pills { margin-top: 12px; }

    .section { padding: 18px 0 24px; }

    .module-card { padding: 18px 22px; gap: 12px; }

    .site-footer .container { padding-top: 16px; padding-bottom: 16px; }
}

/* ── Επίπεδο 3: ~800px και κάτω ─────────────────────────── */
@media (max-height: 800px) {
    .hero { padding: 14px 0 0; }
    .hero-badge { margin-bottom: 8px; }
    .hero h1 { font-size: clamp(26px, 2.6vw, 34px); }
    .hero p { margin-top: 10px; font-size: 15px; }
    .hero-pills { margin-top: 10px; }

    .section { padding: 14px 0 18px; }

    .module-card { padding: 16px 20px; gap: 10px; }
    .module-card-name { font-size: 18px; }
    .module-card-price { font-size: 20px; }

    .site-footer .container { padding-top: 13px; padding-bottom: 13px; }
}

/* ── Επίπεδο 4: ~680px και κάτω (πολύ κοντό παράθυρο) ───── */
@media (max-height: 680px) {
    .site-header .container { height: 50px; }

    .hero { padding: 10px 0 0; }
    .hero-badge { margin-bottom: 6px; }
    .hero h1 { font-size: clamp(24px, 2.2vw, 30px); }
    .hero p { margin-top: 8px; font-size: 14.5px; }
    .hero-pills { margin-top: 8px; }

    .section { padding: 10px 0 14px; }

    .module-card { padding: 14px 18px; gap: 9px; }
    .module-card-desc { font-size: 13.5px; }

    .site-footer .container { padding-top: 10px; padding-bottom: 10px; }
}

/* ── FAQ: ομαλό άνοιγμα, χωρίς κομμένο κείμενο ──────────── */
/* Το style.css κινεί το max-height 0 → 200px. Αυτό έχει δύο προβλήματα:
   οι ελληνικές απαντήσεις φτάνουν τα ~310px και κόβονταν, και η κίνηση
   δεν είναι ομαλή — το max-height δεν ξέρει το πραγματικό ύψος, οπότε το
   άνοιγμα «τελειώνει» νωρίς και το κλείσιμο ξεκινά με καθυστέρηση.

   Το grid-template-rows 0fr → 1fr κινείται ακριβώς στο ύψος του κειμένου,
   άρα η κίνηση είναι ομοιόμορφη και προς τις δύο κατευθύνσεις και τίποτα
   δεν κόβεται, όσο μακριά κι αν είναι η απάντηση. */
.faq-answer {
    display: grid;
    grid-template-rows: 0fr;
    max-height: none;
    padding-bottom: 0;
    transition: grid-template-rows .28s ease, padding-bottom .28s ease;
}

.faq-answer-inner { min-height: 0; overflow: hidden; }

.faq-item.open .faq-answer {
    grid-template-rows: 1fr;
    max-height: none;
    padding-bottom: 16px;
}

/* Το style.css εναλλάσσει το content από '+' σε '−' — δεν χρειάζεται
   περιστροφή, και τα δύο σύμβολα είναι συμμετρικά. */

/* ── Κουμπί που μοιάζει με σύνδεσμος ────────────────────── */
/* Ίδια εμφάνιση με το a του style.css (γραμμή 51-52), αλλά χωρίς href —
   ώστε να μη μπορεί να πλοηγηθεί πουθενά όταν το πατήσει ο χρήστης. */
.link-btn {
    background: none; border: 0; padding: 0;
    font: inherit; color: var(--accent);
    text-decoration: none; cursor: pointer;
}
.link-btn:hover { text-decoration: underline; }

/* Ο διακόπτης γλώσσας έγινε <button> (αλλάζει γλώσσα εν κινήσει, δεν πλοηγεί πουθενά).
   Τα κουμπιά δεν κληρονομούν γραμματοσειρά από μόνα τους. */
.lang-toggle { font-family: inherit; }