@charset "utf-8";

/* ==========================================================================
   Banner "Μετρητές" (homepage_banner kind = 34)

   Μεγαλοι αριθμοι που τρεχουν απο το 0 μολις μπουν στην οθονη. Τα δεδομενα
   ερχονται απο τον counters (banners.php).

   Ο τιτλος και ο υποτιτλος ΔΕΝ εχουν κανονες εδω: κουβαλανε την κλαση
   "bannerCardsStyle2" και παιρνουν αυτουσια την τυπογραφια τους απο το
   01-general-style.css, ιδια με το banner 43.

   ΧΩΡΙΣ ΠΛΑΙΣΙΑ: καθε μετρητης ειναι σκετο κειμενο - ουτε background, ουτε
   περιγραμμα, ουτε σκια. Το μονο που τον ξεχωριζει ειναι το μεγεθος.
   ========================================================================== */

.countersBanner {
    width: 100%;
}

/* Το .cardsBanner.banner_out δινει 140px πανω-κατω, που ειναι για banner με
   καρτες. Εδω το περιεχομενο ειναι λιγες σειρες κειμενο και τοσο κενο το
   "ξεκολλαει" απο την ενοτητα. */
.countersBanner.banner_out {
    padding: 90px 0px;
}

/* Το .cardsBanner.banner_out .title-area δινει margin-bottom:100px, φτιαγμενο
   για να "αναπνεουν" οι καρτες απο κατω. Οι μετρητες ειναι κειμενο και με τοσο
   κενο διαβαζονται σαν ξεχωριστη ενοτητα, οχι σαν συνεχεια του τιτλου. */
.countersBanner.banner_out .title-area {
    margin-bottom: 50px;
}

/* Το gap δινει τα κενα και αναμεσα στις στηλες και αναμεσα στις σειρες οταν
   τυλιγονται - χωρις να αφηνει κενο στις ακρες, οπως θα εκανε το margin. */
.countersBanner .countersRow {
    gap: 30px 70px;
    align-items: flex-start;
}

/* Το flex-basis κραταει τους μετρητες ισοπλατους μεταξυ τους, ωστε οι αριθμοι
   να πεφτουν σε ισαποστα κεντρα ακομα κι αν το ενα κειμενο ειναι πιο μακρυ.
   Το max-width ειναι που τους αναγκαζει να σπασουν σε δευτερη σειρα σε μικρη
   οθονη αντι να στριμωχτουν. */
.countersBanner .counterItem {
    -ms-flex: 0 1 260px;
    flex: 0 1 260px;
    max-width: 320px;
    text-align: center;
    /* Προεπιλογη λευκο, ιδια λογικη με .title/.subtitle.bannerCardsStyle2 (αυτα
       τα banner εχουν χρωματιστο φοντο). Καθε μετρητης μπορει να το αλλαξει
       inline απο το πεδιο "color" του counters. */
    color: #fff;
}

.countersBanner .counterNumber {
    font-family: 'Syne-Bold';
    font-size: 56px;
    line-height: 1.1;
    /* Το χρωμα ΔΕΝ ξαναδηλωνεται εδω: κληρονομειται απο το .counterItem, οποτε
       το inline χρωμα του καθε μετρητη πιανει και τον αριθμο και το "+" και το
       συμβολο μετα τον αριθμο, με μια μονο δηλωση. */
    white-space: nowrap;
}

/* Το + και το συμβολο μετα τον αριθμο ("%", "x") ειναι μερος του ιδιου
   αριθμου - ιδιο μεγεθος, χωρις κενο αναμεσα τους. */
.countersBanner .counterPlus,
.countersBanner .counterAfter,
.countersBanner .counterValue {
    display: inline;
}

.countersBanner .counterText {
    margin-top: 12px;
    font-family: 'Syne-Regular';
    font-size: 16px;
    line-height: 24px;
}

@media (max-width: 1200px) {

    .countersBanner .countersRow {
        gap: 30px 45px;
    }

    .countersBanner .counterNumber {
        font-size: 46px;
    }
}

@media (max-width: 768px) {

    .countersBanner.banner_out {
        padding: 50px 0px;
    }

    .countersBanner .countersRow {
        gap: 28px;
    }

    /* Ενας μετρητης ανα σειρα. Χρειαζεται ΚΑΙ το max-width:100%: το
       .counterItem πιο πανω το εχει 320px, που θα κρατουσε δυο μετρητες
       διπλα-διπλα ακομα και με flex-basis 100%. */
    .countersBanner .counterItem {
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .countersBanner .counterNumber {
        font-size: 38px;
    }

    .countersBanner .counterText {
        margin-top: 8px;
        font-size: 15px;
        line-height: 21px;
    }
}