/* Comfortaa: στρογγυλή/φιλική όψη ΜΕ πλήρη ελληνική υποστήριξη.
   (Το Fredoka καλύπτει μόνο latin/hebrew, οπότε τα ελληνικά έπεφταν
   σε άλλη γραμματοσειρά και δεν ταίριαζαν με αριθμούς/λατινικά.) */
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap');
/* --- 1. Βασικές Ρυθμίσεις & Χρώματα --- */
:root {
    --primary: #52899b;
    --accent-yellow: #f8e16c;
    --light-bg: #f5f9fa;
    --border-color: #333;
}

.custom-home-wrapper {
    font-family: 'Comfortaa', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    color: #2c3e50;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    overflow-x: hidden;
}

section { margin-bottom: 60px; text-align: center; }

/* --- 2. Hand-drawn Styles (Κουτιά & Κουμπιά) --- */
.handdrawn-box {
    background: #fff;
    border: 3px solid var(--border-color);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 20px;
    box-shadow: 4px 5px 0px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
}
/* --- Ειδική κλάση για Κουτιά με Εικόνα Φόντου --- */
.handdrawn-box.with-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden; /* Κόβει την εικόνα στις καμπύλες του border */
    /* Το παρακάτω βάζει ένα λευκό ημιδιάφανο "φίλτρο" πάνω από την εικόνα σου
       ώστε να διαβάζονται πάντα τέλεια τα μαύρα γράμματα! */
    background-color: rgba(255, 255, 255, 0.85);
    background-blend-mode: lighten;
}

.handdrawn-btn {
    display: inline-block;
    background: var(--primary);
    color: #fff;
    padding: 12px 25px;
    text-decoration: none;
    font-weight: bold;
    border: 3px solid var(--border-color);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    box-shadow: 3px 3px 0px var(--border-color);
    transition: transform 0.2s, box-shadow 0.2s;
}

.handdrawn-btn.small { padding: 8px 15px; font-size: 0.9em; }

.handdrawn-btn:hover {
    transform: translate(-2px, -2px);
    box-shadow: 5px 5px 0px var(--border-color);
    color: #fff;
}

/* --- 3. Grid Systems (Πλέγματα) --- */
/* Γενικό Grid για Προϊόντα (Best sellers κλπ) */
.grid-products, .trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

/* ΕΙΔΙΚΟ Grid για Κατηγορίες - 2 ανά σειρά σε desktop/tablet */
.grid-categories-horizontal {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 20px;
}

/* --- 4. Στυλ Ενοτήτων (Hero, Descriptions, Placeholders) --- */
/* ============ COMPACT HERO ============ */
.golab-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;              /* Αέρας ανάμεσα σε κείμενο και εικόνα */
    background: var(--light-bg);
    border-radius: 20px;
    padding: 12px 20px;     /* Μειωμένο */
    margin-bottom: 25px;    /* Μειωμένο */
}

/* Ο τίτλος του hero (H2 — ο H1 είναι πλέον ο τίτλος της εισαγωγής).
   Με class και όχι με tag, ώστε μια αλλαγή h1/h2 να μην αλλάζει το μέγεθος.
   Το .golab-hero μπροστά χρειάζεται: σκέτη class (0,1,0) θα έχανε από το
   «.custom-home-wrapper h2» του design system (0,1,1), που φορτώνει μετά. */
.golab-hero .golab-hero__title {
    margin: 4px 0;
    /* Κλιμακώνεται μόνο του: ποτέ κάτω από 1.3rem, ποτέ πάνω από 1.6rem */
    font-size: clamp(1.3rem, 2.4vw, 1.6rem);
    line-height: 1.25;
}

.golab-hero p {
    margin: 4px 0 12px 0;
    font-size: clamp(0.85rem, 1.1vw, 0.92rem);
    line-height: 1.45;
}

/* ΑΥΤΕΣ ΟΙ 2 ΓΡΑΜΜΕΣ ΕΙΝΑΙ ΠΟΥ ΕΛΕΙΠΑΝ ΚΑΙ ΕΣΠΑΣΕ: */
.hero-content { flex: 1 1 300px; min-width: 0; }
.hero-image { flex: 1 1 300px; min-width: 0; text-align: center; }

/* Το <picture> είναι inline element από προεπιλογή. Χωρίς αυτό,
   το margin:auto της εικόνας μέσα του δεν κεντράρει σωστά στο κινητό. */
.hero-image picture {
    display: block;
    width: 100%;
}

/* ΠΕΡΙΟΡΙΣΜΟΣ ΕΙΚΟΝΑΣ HERO
   Το !important χρειάζεται επειδή στο template η <img> έχει inline style
   (max-width:100%) που αλλιώς κερδίζει πάντα.
   Ο selector πιάνει κανονικά και την <img> μέσα σε <picture>. */
.hero-image img,
.hero-image .placeholder-img-tag {
    max-width: min(100%, 400px) !important;
    max-height: 260px;      /* Το βασικό "φρένο" στο ύψος */
    width: auto;
    height: auto;
    object-fit: contain;
    margin: 0 auto;
    display: block;
}

/* Wrapper για τα δύο σηματάκια — μπαίνουν δίπλα δίπλα ή σπάνε σε 2 σειρές */
.hero-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 10px;
}

.boxnow-badge,
.videos-badge {
    /* inline-block αντί για inline-flex ώστε να μη "χάνεται" το κενό πριν το <strong> */
    display: inline-block;
    border-radius: 50px;
    border: 2px dashed #333;
    line-height: 1.2;
    white-space: nowrap;
}

/* BOXNOW: το βασικό/κύριο σηματάκι - μεγαλύτερο & πιο εμφανές */
.boxnow-badge {
    background: var(--accent-yellow);
    padding: 10px 20px;
    font-size: 1rem;
    font-weight: 600;
}

/* Δωρεάν Βιντεομαθήματα: δευτερεύον σηματάκι, λίγο μικρότερο */
.videos-badge {
    background: #d4f1e0;              /* Απαλό πράσινο - λέει "δώρο/bonus" */
    color: #1f5c3d;
    border-color: #1f5c3d;
    padding: 8px 16px;
    font-size: 0.88rem;
    animation-delay: 0.3s;            /* Ξεκινάει λίγο μετά από το BoxNow */
}

.videos-badge strong {
    color: #1f5c3d;
    margin: 0 3px;
}
/* ============ /COMPACT HERO ============ */

.section-description {
    max-width: 700px;
    margin: 0 auto 30px auto;
    font-size: 1.1em;
    line-height: 1.5;
    color: #4a5568;
    text-align: center;
}

/* --- 5. Ειδικό Οριζόντιο Design για Κατηγορίες --- */
.cat-link-horizontal {
    text-decoration: none;
    color: var(--border-color);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 15px;
    height: 100%;
    padding: 5px;
}

.cat-img-horizontal {
    /* Αυξήσαμε τις διαστάσεις από 70px σε 95px */
    width: 110px;
    height: 110px;
    flex-shrink: 0;           /* Δεν "λιώνει" η εικόνα σε στενή οθόνη */
    object-fit: contain;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cat-text-wrapper {
    display: flex;
    flex-direction: column;
    text-align: left;
    min-width: 0;            /* Επιτρέπει στους μεγάλους τίτλους να σπάνε σωστά */
}

.cat-title-horizontal {
    font-size: 1.05em;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
    overflow-wrap: break-word;
}

.cat-subtitle-horizontal {
    font-size: 0.8em;
    color: #718096;
    margin-top: 4px;
    font-weight: bold;
}

/* Στυλ για το Κουμπί Επιστροφής (Ηλικίες) */
.back-btn-bottom {
    grid-column: 1 / -1;
    background-color: #f8f9fa;
    border: 3px dashed var(--border-color);
    display: flex;
    justify-content: center;
    margin-top: 10px;
}

.back-btn-bottom .cat-link-horizontal {
    justify-content: center;
    gap: 10px;
}

.back-icon-horizontal {
    font-size: 2em;
    color: var(--primary);
    transition: transform 0.3s ease;
}
/* Νέα στυλ για περιγραφές και τιμές μέσα στα οριζόντια πινακάκια */
.cat-desc-horizontal {
    font-size: 0.85em;
    color: #555;
    margin: 5px 0;
    line-height: 1.3;
}

.price-horizontal {
    font-weight: bold;
    color: var(--primary);
    font-size: 1.1em;
    margin-top: 5px;
}

/* --- 6. Animations & Hover Effects --- */
.hover-scale:hover { transform: scale(1.03) rotate(1deg); }

/* ΠΡΩΤΑ το Scroll Animation */
.scroll-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.scroll-animate.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ΜΕΤΑ το Smooth Hover για να μην ακυρώνεται */
.hover-bouncy {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    cursor: pointer;
}

.hover-bouncy:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0px 12px 20px rgba(82, 137, 155, 0.15);
}

.hover-bouncy:hover .cat-img-horizontal {
    transform: scale(1.1) rotate(3deg);
}

.hover-bouncy:hover .back-icon-horizontal {
    transform: translateX(-5px);
}

.fade-wrapper { animation-duration: 0.4s; }
/* --- Καρουζέλ Προϊόντων (ΑΝΕΠΑΦΟ) --- */
.carousel-wrapper {
    position: relative;
    width: 100%;
    /* ΔΕΝ βάζουμε overflow:hidden γιατί κόβει τις κάρτες όταν "χοροπηδάνε" στο hover.
       Το .custom-home-wrapper έχει ήδη overflow-x:hidden, άρα δεν υπάρχει διαρροή προς τα πλάγια. */
    padding: 40px 0 45px 0;   /* Περισσότερος αέρας πάνω & κάτω για ελεύθερη κίνηση */
}

.carousel-track {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    overflow-y: hidden;              /* Δεν πιάνει καθόλου κάθετο scroll */
    scroll-snap-type: x proximity;   /* Ήταν "mandatory" - το χαλάρωσα */
    scroll-behavior: smooth;
    /* ΣΗΜΑΝΤΙΚΟ: το overflow-x:auto/overflow-y:hidden ΚΟΒΕΙ τα παιδιά στα όρια
       του padding box. Χωρίς padding, το hover (translateY -6px + scale 1.02)
       έβγαζε την κάρτα εκτός και κοβόταν το περίγραμμα/η σκιά.
       Το padding είναι ΜΕΣΑ στην περιοχή που φαίνεται, άρα δίνει χώρο κίνησης. */
    padding: 18px 10px 24px 10px;
    scrollbar-width: none;
    touch-action: pan-x;             /* ΤΟ ΚΛΕΙΔΙ: μόνο οριζόντιο touch */
    overscroll-behavior-x: contain;  /* Δεν "ρουφάει" scroll από τη σελίδα */
    -webkit-overflow-scrolling: touch; /* Ομαλό swipe σε iOS */
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

.carousel-track .product-card {
    /* Στο PC δείχνει 4 προϊόντα (το 25% της οθόνης το καθένα) */
    flex: 0 0 calc(25% - 15px);
    scroll-snap-align: start;
    /* ΧΩΡΙΣ overflow:hidden — σε συνδυασμό με border-radius ΚΑΙ transform
       οι browsers (Chrome/Safari) χάνουν τη στρογγυλή περικοπή κατά το
       animation και η εικόνα "ξεφεύγει" πάνω από το κουτάκι.
       Δεν χρειάζεται: το padding παρακάτω κρατά την εικόνα μακριά από τις καμπύλες. */
    padding: 35px 25px 20px 25px;
}

/* Η εικόνα να μη φτάνει μέχρι τα άκρα (όπου το border-radius κατεβαίνει απότομα) */
.carousel-track .product-card > a:first-of-type {
    display: block;
    width: 88%;
    margin: 0 auto;
}

/* ============================================================
   7. RESPONSIVE — Media Queries
   (Καμία αλλαγή στα προϊόντα/καρουζέλ πέρα από τον αρχικό κανόνα)
   ============================================================ */

/* ---------- Tablet (≤ 1024px): μόνο μάζεμα του Hero ---------- */
@media (max-width: 1024px) {
    .golab-hero { padding: 12px 18px; }

    .hero-image img,
    .hero-image .placeholder-img-tag {
        max-width: min(100%, 340px) !important;
        max-height: 230px;
    }
}

/* ---------- Mobile (≤ 768px) ---------- */
@media (max-width: 768px) {
    .custom-home-wrapper { padding: 15px; }
    .custom-home-wrapper section { margin-bottom: 40px; }
    .custom-home-wrapper h2 { font-size: 1.5em; line-height: 1.25; }
    .section-description { font-size: 1em; margin-bottom: 20px; }

    /* --- HERO: μία στήλη, compact, εικόνα πρώτα --- */
    .golab-hero {
        flex-direction: column;
        gap: 12px;
        padding: 12px;
        margin-bottom: 20px;
        text-align: center;
    }
    .hero-content, .hero-image { flex: 1 1 100%; width: 100%; }
    .hero-image { order: -1; }

    .golab-hero .golab-hero__title { font-size: 1.3rem; margin: 2px 0; }
    .golab-hero p  { font-size: 0.88rem; margin: 4px 0 12px 0; }

    /* Στο κινητό τα σηματάκια κεντραρίζονται και σπάνε σε 2 σειρές αν χρειαστεί */
    .hero-badges { justify-content: center; gap: 6px; margin-bottom: 8px; }
    .boxnow-badge  { font-size: 0.85rem; padding: 7px 14px; }
    .videos-badge  { font-size: 0.78rem; padding: 6px 12px; }

    .hero-image img,
    .hero-image .placeholder-img-tag {
        max-width: min(100%, 300px) !important;
        max-height: 190px;
    }

    /* --- ΚΑΤΗΓΟΡΙΕΣ: υποχρεωτικά 1 στήλη --- */
    .grid-categories-horizontal {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .handdrawn-box { padding: 15px; }
    .cat-img-horizontal { width: 85px; height: 85px; }
    .cat-title-horizontal { font-size: 1em; }
    .cat-desc-horizontal { font-size: 0.8em; }

    /* --- TRUST BADGES: 2 ανά σειρά, το τελευταίο μόνο του σε όλο το πλάτος --- */
    .trust-badges {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .trust-badges .badge { padding: 14px 10px; }
    .trust-badges .badge:last-child:nth-child(odd) { grid-column: 1 / -1; }
    .trust-badges .icon-placeholder { font-size: 2em !important; margin-bottom: 6px !important; }
    .trust-badges .badge span { font-size: 0.82em; line-height: 1.3; }

    /* Στα κινητά δείχνει 1 προϊόν και ένα μικρό κομμάτι του επόμενου */
    .carousel-track .product-card {
        flex: 0 0 calc(85% - 10px);
    }
}

/* ---------- Μικρά κινητά (≤ 420px) ---------- */
@media (max-width: 420px) {
    .custom-home-wrapper { padding: 12px; }
    .custom-home-wrapper h2 { font-size: 1.35em; }

    .golab-hero { padding: 10px; }
    .golab-hero .golab-hero__title { font-size: 1.2rem; }

    .hero-image img,
    .hero-image .placeholder-img-tag {
        max-width: min(100%, 250px) !important;
        max-height: 160px;
    }

    .cat-link-horizontal { gap: 10px; }
    .cat-img-horizontal { width: 70px; height: 70px; }

    /* Trust badges: 1 ανά σειρά για μέγιστη αναγνωσιμότητα */
    .trust-badges { grid-template-columns: 1fr; }
    .trust-badges .badge:last-child:nth-child(odd) { grid-column: auto; }
}

/* --- Ενότητα «Οδηγοί» (κάρτες με emoji αντί για εικόνα) --- */
.guide-icon {
    font-size: 2.6em;
    line-height: 1;
    width: 110px;
    flex-shrink: 0;
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hover-bouncy:hover .guide-icon {
    transform: scale(1.15) rotate(-5deg);
}

@media (max-width: 768px) {
    .guide-icon { width: 60px; font-size: 2.2em; }
}

@media (max-width: 420px) {
    .guide-icon { width: 50px; font-size: 2em; }
}

/* ============ ΕΙΣΑΓΩΓΗ (πάνω από το hero) ============ */

/* Με .custom-home-wrapper μπροστά: στο κινητό ο κανόνας
   «.custom-home-wrapper section { margin-bottom: 40px }» είναι πιο
   ισχυρός από σκέτο .golab-intro και θα άνοιγε κενό πάνω από το hero. */
.custom-home-wrapper .golab-intro {
    max-width: 820px;
    margin: 6px auto 22px auto;
    text-align: center;
}

/**
 * Ο τίτλος της εισαγωγής — ο H1 της σελίδας.
 *
 * Τα μεγέθη εδώ είναι αυτά που ΗΔΗ έβλεπε ο επισκέπτης όσο ήταν H2: το
 * «.custom-home-wrapper h2» του design system φορτώνει μετά από αυτό το
 * αρχείο και κέρδιζε σιωπηλά τα δικά μας (1.9em → 1.7 → 1.5 → 1.35).
 * Γράφονται πλέον ρητά, δεμένα στην class, ώστε η αλλαγή σε H1 να μην
 * αλλάξει τίποτα οπτικά.
 */
.golab-intro .golab-intro__title {
    margin: 0 0 10px 0;
    font-size: 1.9em;
    line-height: 1.25;
    color: var(--border-color);
    /* Ισοζυγισμένες γραμμές όταν ο τίτλος σπάει (κινητό): όχι μία λέξη μόνη της κάτω. */
    text-wrap: balance;
}

@media (max-width: 1024px) {
    .golab-intro .golab-intro__title { font-size: 1.7em; }
}

/* Το «για Κάθε Ηλικία» με κίτρινο μαρκαδόρο — το ίδιο κίτρινο με το
   σηματάκι BOXNOW, για να δένει με το hero ακριβώς από κάτω. */
.golab-intro__mark {
    display: inline-block;
    padding: 0 6px;
    background: linear-gradient(
        transparent 55%,
        var(--accent-yellow) 55%,
        var(--accent-yellow) 92%,
        transparent 92%
    );
    border-radius: 4px;
    transform: rotate(-1deg);
}

/* Τρία επίπεδα κειμένου, όλα κεντραρισμένα σε στενότερες στήλες από
   τον τίτλο: έτσι το μάτι διαβάζει από πάνω προς τα κάτω σαν «πυραμίδα». */

/* 1. Η βασική πρόταση — τι είμαστε, με μια ματιά. */
.golab-intro__lead {
    max-width: 620px;
    margin: 0 auto 10px auto;
    font-size: clamp(1rem, 1.4vw, 1.12rem);
    font-weight: 700;
    line-height: 1.5;
    color: #2c3e50;
    text-wrap: balance;
}

/* 2. Το κυρίως κείμενο. */
.golab-intro__body {
    max-width: 720px;
    margin: 0 auto 12px auto;
    font-size: clamp(0.92rem, 1.15vw, 1rem);
    line-height: 1.75;
    color: #4a5568;
    /* Αποφεύγει μια μόνη λέξη στην τελευταία γραμμή. */
    text-wrap: pretty;
}

/* Οι τρεις δεξιότητες με απαλό πράσινο μαρκαδόρο — το ίδιο πράσινο
   με το σηματάκι «ΔΩΡΕΑΝ Βιντεομαθήματα» στο hero. */
.golab-intro__body strong {
    color: #2c3e50;
    font-weight: 700;
    box-shadow: inset 0 -0.42em 0 #d4f1e0;
}

/* 3. Το κλείσιμο — κάλεσμα για δράση. */
.golab-intro__cta {
    margin: 0 auto;
    font-size: clamp(0.92rem, 1.15vw, 1rem);
    font-weight: 600;
    line-height: 1.6;
    color: #2c3e50;
    text-wrap: balance;
}

/**
 * Σύνδεσμοι με κυματιστή υπογράμμιση — «ζωγραφισμένη» όπως τα κουτιά.
 *
 * Πιο σκούρο από το --primary (#52899b): εκείνο σε λευκό φόντο έχει
 * αντίθεση ~3.6:1, κάτω από το 4.5:1 που χρειάζεται κείμενο αυτού
 * του μεγέθους για να διαβάζεται άνετα.
 */
.golab-intro a {
    color: #2f6b7e;
    font-weight: 700;
    text-decoration: underline wavy var(--primary);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 4px;
    border-radius: 4px;
    transition: background 0.2s ease, color 0.2s ease;
}

.golab-intro a:hover,
.golab-intro a:focus-visible {
    background: var(--accent-yellow);
    color: var(--border-color);
    text-decoration-color: var(--border-color);
}

@media (max-width: 768px) {
    .custom-home-wrapper .golab-intro { margin: 0 auto 16px auto; }
    .golab-intro .golab-intro__title { font-size: 1.5em; }
    .golab-intro__lead { font-size: 0.98rem; margin-bottom: 8px; }
    .golab-intro__body,
    .golab-intro__cta  { font-size: 0.9rem; line-height: 1.6; }
    .golab-intro__body { margin-bottom: 10px; }
}

@media (max-width: 420px) {
    .golab-intro .golab-intro__title { font-size: 1.35em; }
    .golab-intro__lead { font-size: 0.94rem; }
    .golab-intro__body,
    .golab-intro__cta  { font-size: 0.86rem; }
}

/* ============ /ΕΙΣΑΓΩΓΗ ============ */

/* ============ ΑΠΟ ΤΟ BLOG ============ */

.blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 20px 0 30px 0;
    text-align: left;
}

/* Μεγαλύτερο padding πάνω: οι γωνίες του χειροποίητου περιγράμματος
   «κατεβαίνουν» και θα έκοβαν τις άκρες της εικόνας — το ίδιο
   πρόβλημα που είχαν οι κάρτες του καρουζέλ. */
.blog-card {
    display: flex;
    padding: 22px 18px 20px 18px;
}

.blog-card__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    color: var(--border-color);
    text-decoration: none;
}

.blog-card__thumb {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: grid;
    place-items: center;
    background: var(--light-bg);
    border: 2px solid var(--border-color);
    /* Ήπιο «ζωγραφιστό» σχήμα — το 255px των μεγάλων κουτιών θα παραμόρφωνε μικρή εικόνα. */
    border-radius: 18px 24px 16px 22px / 22px 16px 24px 18px;
    margin-bottom: 4px;
}

.blog-card__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease;
}

.hover-bouncy:hover .blog-card__thumb img {
    transform: scale(1.06);
}

.blog-card__placeholder {
    font-size: 2.6em;
}

.blog-card__date {
    font-size: 0.78em;
    font-weight: 700;
    color: #718096;
}

/* Τίτλος έως 2 γραμμές, περίληψη έως 3: οι τρεις κάρτες μένουν ισοϋψείς
   όσο διαφορετικά μήκη κι αν έχουν τα άρθρα. */
.blog-card__title {
    margin: 0;
    font-size: 1.05em;
    font-weight: 700;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
}

.blog-card__excerpt {
    margin: 0;
    font-size: 0.88em;
    line-height: 1.55;
    color: #555;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

/* margin-top:auto = το «Διάβασε περισσότερα» κάθεται πάντα στο κάτω μέρος της κάρτας. */
.blog-card__more {
    margin-top: auto;
    padding-top: 4px;
    font-size: 0.88em;
    font-weight: 700;
    color: #2f6b7e;   /* Πιο σκούρο από το --primary, για αντίθεση 4.5:1 */
}

.blog-card__arrow {
    display: inline-block;
    transition: transform 0.25s ease;
}

.hover-bouncy:hover .blog-card__arrow {
    transform: translateX(5px);
}

@media (max-width: 768px) {
    .blog-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 24px;
    }

    .blog-card { padding: 18px 14px 16px 14px; }
    .blog-card__title { font-size: 1em; }
}

/* ============ /ΑΠΟ ΤΟ BLOG ============ */