@charset "utf-8";

/* ==========================================================================
   Banner "Πινακες (2)" (homepage_banner kind = 33)
   Καρτες απο τον table_simple, με γραμμες απο τον table_item.
   Απο τη βαση ερχεται inline ΜΟΝΟ το χρωμα (πεδιο table_color): βαφει το
   πανω border της καρτας και τον διακριτικο τιτλο (pro_title_gr/en).

   ΤΥΠΟΓΡΑΦΙΑ: οι γραμματοσειρες και τα μεγεθη ειναι ΑΥΤΟΥΣΙΑ απο τις καρτες
   του "Πινακες τιμων" (.priceTable, 01-general-style.css) - ωστε οι δυο τυποι
   καρτας να διαβαζονται σαν ενα πραγμα. Η αντιστοιχια:
     .stProTitle  <- .featureDetails        (Syne-Medium 12px / ls 1.44px)
     .stTitle     <- .headerTop .title      (Syne-SemiBold 28px)
     .stSubTitle  <- .featureTxt            (Syne-Regular 16px)
     .stItemTitle <- .headerTop .title      (Syne-SemiBold, στο 16px του body)
     .stItemSub   <- .featureTxt            (Syne-Regular 16px)
   Το βαρος το κουβαλαει η ιδια η γραμματοσειρα, οποτε ΔΕΝ βαζουμε font-weight.
   ========================================================================== */

.simpleTablesBanner {
    width: 100%;
}

/* Το κενο ΠΑΝΩ απο το banner.
   Εδω υπηρχε "padding-top:0" για ολα τα "Πινακες (2)": οσο το .title-area
   κρατουσε min-height 573px και κεντραρε καθετα, το ιδιο το κουτι εδινε ~190px
   κενο πανω απο τον τιτλο, οποτε τα 140px padding του section απο πανω ηταν
   καθαρο περισσευμα (το ιδιο εκανε και το bootstrap "pt-lg-0" στο class_name
   του banner id 86).

   Πλεον, για bannerCardsStyle2 ΧΩΡΙΣ φωτογραφια φοντο - δηλαδη για ολα τα
   "Πινακες (2)" - το υψος το οριζει το κειμενο (01-general-style.css, κανονας
   ":not(.hasPhotoBack)"), αρα δεν υπαρχει κανενα κενο να "απορροφησει" το
   μηδενισμο: ο τιτλος θα κολλαγε στην κορυφη του banner. Το αφαιρεσαμε, ωστε
   το κενο απο πανω να ειναι το padding του section, ιδιο με τα υπολοιπα
   banner. */

/* Το gap δινει τα κενα αναμεσα στις καρτες ΚΑΙ στις σειρες οταν τυλιγονται.
   Δεν χρησιμοποιουμε margin, γιατι θα αφηνε κενο και στις ακρες της σειρας.

   ΠΡΟΣΟΧΗ: το κενο πανω/κατω ΔΕΝ μπαινει εδω. Το κουβαλαει το .cardsContainer
   (margin-top:-140px οταν παιζει bannerCardsStyle2, margin-bottom:80px) - ιδια
   φιλοσοφια με το banner id 86. Padding εδω θα προσθετοταν πανω σε αυτο. */
.simpleTablesBanner .simpleTables {
    gap: 24px;
    align-items: stretch;
}

/* flex-basis 320px + max-width 400px: 3 καρτες σε desktop, 2 σε tablet, 1 σε
   κινητο - χωρις media query για το σπασιμο, το κανει μονο του το flex-wrap. */
.simpleTablesBanner .simpleTable {
    -ms-flex: 1 1 320px;
    flex: 1 1 320px;
    max-width: 400px;
    background: #fff;
    border-radius: 18px;
    /* Το χρωμα ερχεται inline (border-top-color) - εδω μονο το παχος/ειδος.
       Το border ακολουθει το border-radius, οποτε βγαινει το τοξο στην κορυφη. */
    border-top: 5px solid currentColor;
    box-shadow: 0 2px 24px rgba(28, 27, 34, .08);
    padding: 28px 26px 30px;
}

/* Διακριτικος τιτλος (pro_title_gr/en) - παιρνει το table_color inline. */
.simpleTablesBanner .stProTitle {
    font-family: 'Syne-Medium';
    font-size: 12px;
    letter-spacing: 1.44px;
    text-transform: uppercase;
    line-height: 1.4;
}

.simpleTablesBanner .stTitle {
    margin-top: 12px;
    font-family: 'Syne-SemiBold';
    font-size: 28px;
    line-height: 1.25;
    color: #1c1b22;
}

.simpleTablesBanner .stSubTitle {
    margin-top: 12px;
    font-family: 'Syne-Regular';
    font-size: 16px;
    line-height: 1.6;
    color: #5b5a66;
}

.simpleTablesBanner .stItems {
    margin-top: 22px;
}

/* Ο διαχωριστικος μπαινει σαν border-top καθε γραμμης (και οχι border-bottom)
   ωστε να μη μενει κρεμασμενη γραμμη κατω απο την τελευταια. */
.simpleTablesBanner .stItem {
    gap: 14px;
    padding: 18px 0;
    border-top: 1px solid rgba(28, 27, 34, .08);
}

/* table_item.hide_title = 1: χωρις διαχωριστικη γραμμη και πιο κοντα στο
   προηγουμενο item, ωστε τα δυο να διαβαζονται σαν ενα.

   Το border ΜΕΝΕΙ και απλα γινεται διαφανες: ενα border-top:0 θα μετατοπιζε τη
   γραμμη κατα 1px και δεν θα ευθυγραμμιζοταν πια με τις υπολοιπες. Αυτο που
   μαζευει το κενο ειναι το padding-top μαζι με το αρνητικο margin-top.

   ΓΙΑΤΙ ΑΡΝΗΤΙΚΟ MARGIN: το κενο δεν ερχεται μονο απο εδω - τα 18px
   padding-bottom του ΠΡΟΗΓΟΥΜΕΝΟΥ item μετρανε κι αυτα. Το css δεν εχει
   "προηγουμενος αδελφος" (το :has() δεν το υποστηριζουν οι παλιοτεροι
   browsers), οποτε αντι να κυνηγαμε το προηγουμενο, τραβαμε αυτο πανω.
   Τελικο κενο: 18 - 14 = 4px. Η ΟΡΙΖΟΝΤΙΑ στοιχηση δεν επηρεαζεται. */
.simpleTablesBanner .stItem.noSepLine {
    border-top-color: transparent;
    padding-top: 0;
    margin-top: -14px;
}

.simpleTablesBanner .stItemIcon {
    -ms-flex: 0 0 36px;
    flex: 0 0 36px;
    width: 36px;
}

.simpleTablesBanner .stItemIcon img {
    display: block;
    width: 36px;
    height: 36px;
}

/* min-width:0 σε flex item: χωρις αυτο ενα μεγαλο κειμενο χωρις κενα δεν
   σπαει και "σπρωχνει" την καρτα πιο φαρδια απο το max-width. */
.simpleTablesBanner .stItemTxt {
    min-width: 0;
}

.simpleTablesBanner .stItemTitle {
    font-family: 'Syne-SemiBold';
    font-size: 16px;
    line-height: 1.4;
    color: #1c1b22;
}

.simpleTablesBanner .stItemSub {
    margin-top: 4px;
    font-family: 'Syne-Regular';
    font-size: 16px;
    line-height: 1.6;
    color: #5b5a66;
}

@media (max-width: 767px) {

    .simpleTablesBanner .simpleTables {
        gap: 18px;
    }

    /* Μονο αποστασεις εδω. Τα μεγεθη γραμματοσειρας ΔΕΝ αλλαζουν σε mobile,
       οπως ακριβως και στις καρτες του "Πινακες τιμων". */
    .simpleTablesBanner .simpleTable {
        max-width: 100%;
        padding: 24px 20px 26px;
    }
}