/* ============================================================
   ROBOTONIO — brand overrides πάνω στο L3 template
   Φορτώνεται ΜΕΤΑ το robotonio-new-site.webflow.css.
   Το vendor CSS μένει ανέπαφο — ό,τι αλλάζουμε ζει εδώ.

   Παλέτα: δειγματοληψία από το λογότυπο (brand/robotonio-logo.png)
     κόκκινο  #e42023   (τα κόκκινα γρανάζια — κυρίαρχο)
     κυανό    #02b1c7   (το κυανό γρανάζι)
     γκρι     #505052   (το λεκτικό "ROBOTONIO")
   ============================================================ */

body {
  overflow-x: hidden;
}

:root {
  /* --- Κύρια χρώματα --- */
  --main-color--primary: #e42023;    /* ήταν #ea6136 κοραλί */
  --main-color--accent-1: #ffc72c;   /* ήταν #ffb526 — πιο καθαρό κίτρινο, δένει με κόκκινο+κυανό */
  --main-color--accent-2: #02b1c7;   /* ήταν #2fa58a πρασινωπό teal */
  --main-color--accent-3: #b61f1f;   /* ήταν #d23200 — σκούρο κόκκινο του λογοτύπου */
  --main-color--accent-4: #e2711d;   /* πορτοκαλί, ουδέτερο — για κάρτα τμήματος */
  --main-color--accent-5: #2f9e5c;   /* πράσινο, ταιριαστό με την υπόλοιπη παλέτα — για κάρτα τμήματος */

  /* --- Ουδέτερα ---
     Το template είχε θερμό κρεμ (#f7f4ed) που παραπέμπει σε εργαστήρι
     χειροτεχνίας. Το ψυχράνουμε ελαφρώς ώστε να διαβάζεται ως tech/STEM. */
  --neutral--900: #f5f7f8;           /* ήταν #f7f4ed */
  --main-color--neutral-dark: #2b2b2d;
  --neutral--150: #2b2b2d;
  --neutral--300: #4a4a4d;
  --neutral--500: #7a7a7e;
  --neutral--700: #adadb2;

  /* Τα overlays του template είναι δεμένα στο θερμό #262322 — τα ψυχράνουμε
     ώστε να μη «κιτρινίζουν» πάνω στο νέο ουδέτερο. */
  --dark-overlay--20: #2b2b2d33;
  --dark-overlay--40: #2b2b2d66;
  --dark-overlay--60: #2b2b2d99;
  --dark-overlay--80: #2b2b2dcc;
}

/* ============================================================
   Λογότυπο
   Το L3 mark ήταν 31x40 (κάθετο). Το λογότυπο ROBOTONIO είναι
   258x200 (οριζόντιο), άρα χρειάζεται διαφορετικό sizing.
   ============================================================ */
.navigation-logo-wrapper img,
a[class*="logo"] img {
  height: 42px;
  width: auto;
  max-width: none;
}

.footer-logo-wrapper img {
  height: 46px;
  width: auto;
  max-width: none;
}

/* Λεκτικό "ROBOTONIO" δίπλα στο σήμα, στο navbar — να διαβάζεται σαν
   προέκταση του ίδιου του λογότυπου (ίδιο γκρι με το λεκτικό μέσα στην
   εικόνα, #505052), όχι σαν ένα ακόμα navbar-link. Γι' αυτό ζει μέσα στο
   ίδιο <a class="company-logo">, χωρίς δικό του padding/hover state. */
.company-logo.w-nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo-wordmark {
  font-weight: 800;
  font-size: 1.2rem;
  letter-spacing: 0.03em;
  color: #505052;
  white-space: nowrap;
}

/* ============================================================
   Χάρτες
   Το template είχε στατική εικόνα χάρτη (img.map). Τη αντικαταστήσαμε
   με ζωντανά Google Maps embeds, ένα ανά κέντρο — άρα iframe, όχι img.
   ============================================================ */
iframe.map {
  display: block;
  width: 100%;
  min-height: 22rem;
  max-height: none;
  border: 0;
  border-radius: var(--master-radius);
}

@media (max-width: 767px) {
  iframe.map { min-height: 16rem; }
}

/* ============================================================
   Ελληνικά: το Manrope έχει ελληνικό subset, αλλά οι ελληνικές
   λέξεις είναι κατά ~15% μακρύτερες από τις αγγλικές. Χαλαρώνουμε
   τα line-height στις επικεφαλίδες για να μη «κολλάνε».
   ============================================================ */
h1, h2, h3, h4, h5,
[class*="heading"] {
  line-height: 1.25;
}

/* Τα κουμπιά του template έχουν στενό padding — τα ελληνικά CTA
   («Δωρεάν εργαστήριο γνωριμίας») θέλουν λίγο περισσότερο αέρα. */
[class*="button"] {
  white-space: normal;
}

/* ============================================================
   Φόρμες: honeypot + πεδίο συναίνεσης (GDPR)
   Προστέθηκαν μαζί με το js/robotonio-forms.js.
   ============================================================ */

/* Το honeypot ΔΕΝ γίνεται display:none — αρκετά bots αγνοούν τα εντελώς κρυφά
   πεδία και τότε η παγίδα δεν πιάνει τίποτα. Το στέλνουμε εκτός οθόνης και το
   κρύβουμε από τα screen readers με aria-hidden στο markup. */
.robotonio-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  opacity: 0;
}

/* Η φόρμα newsletter είναι μονή σειρά (input + κουμπί). Επιτρέπουμε αναδίπλωση
   ώστε το checkbox να πέφτει σε δική του γραμμή αντί να στριμώχνεται δίπλα. */
.subscription-form {
  flex-wrap: wrap;
}

.robotonio-consent {
  display: flex;
  flex: 0 0 100%;
  gap: 0.55rem;
  align-items: flex-start;
  margin: 0.8rem 0 0;
  font-size: 0.82rem;
  line-height: 1.45;
  text-align: left;
}

.robotonio-consent input[type="checkbox"] {
  flex: 0 0 auto;
  margin-top: 0.2rem;
}

.robotonio-consent a {
  text-decoration: underline;
}

/* ============================================================
   Εικόνα hero: το νέο asset είναι κομμένο πιο σφιχτά γύρω από τα
   παιδιά απ' ό,τι το αρχικό (που είχε άφθονο διάφανο περιθώριο
   αριστερά), οπότε ακουμπάει στον τίτλο. Το μικραίνουμε και το
   σπρώχνουμε λίγο δεξιά, κρατώντας την κάτω-δεξιά γωνία σταθερή.
   !important επειδή το animation-on-load του Webflow (IX2) γράφει
   inline transform στο ίδιο στοιχείο όταν ολοκληρώνεται η κίνηση,
   και θα το ακύρωνε χωρίς αυτό.
   ============================================================ */
img.hero-1-image {
  transform: translateX(1.5rem) scale(0.9) !important;
  transform-origin: bottom right !important;
}

/* ============================================================
   Κύκλοι στατιστικών
   Αντικαθιστούν το eyebrow label "ΤΙ ΤΡΕΧΕΙ" πάνω από το "Τι τρέχει
   στο ROBOTONIO": τρεις λευκοί κύκλοι σε σειρά, πάνω στο πετρόλ
   φόντο του section-actualities (BG_Shape.svg).
   ============================================================ */
.hero-stats-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}

.hero-stat-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background-color: var(--main-color--bright);
  flex: 0 0 auto;
  padding: 0.3rem;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hero-stat-number {
  font-size: 1.3rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--main-color--accent-2);
}

.hero-stat-label {
  font-size: 0.65rem;
  line-height: 1.2;
  margin-top: 0.15rem;
  color: var(--neutral--500);
}

@media (max-width: 479px) {
  .hero-stat-circle {
    width: 5rem;
    height: 5rem;
  }
  .hero-stat-number {
    font-size: 1.1rem;
  }
  .hero-stat-label {
    font-size: 0.6rem;
  }
}

/* ============================================================
   Navbar — dropdown "Τμήματα"
   Δεν οδηγεί πουθενά μόνο του πια· ανοίγει λίστα με τα τρία κοινά
   ("Παιδικά", "Εφηβικά", "Ενηλίκων"). Χτισμένο πάνω στο έτοιμο
   w-dropdown component του Webflow (ήδη στυλαρισμένο μέσα στο
   webflow.js runtime) — εδώ μόνο εναρμονίζουμε την εμφάνιση με τα
   υπόλοιπα .navbar-link.
   ============================================================ */
.navbar-link.w-dropdown {
  padding: 0;
  margin: 0;
}

.navbar-link.w-dropdown .w-dropdown-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px 20px;
  font-weight: 600;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  border-radius: inherit;
}

.navbar-link.w-dropdown:hover .w-dropdown-toggle,
.navbar-link.w-dropdown.w--open .w-dropdown-toggle {
  background-color: var(--neutral--900);
  color: var(--main-color--accent-3);
}

.navbar-link.w-dropdown .w-icon-dropdown-toggle {
  position: static;
  margin: 0;
  font-size: 0.7em;
}

.navbar-link.w-dropdown .w-dropdown-list {
  background-color: var(--main-color--bright);
  border-radius: var(--master-radius);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 13rem;
  top: calc(100% + 6px);
  left: 0;
}

.navbar-link.w-dropdown .w-dropdown-link {
  border-radius: 8px;
  padding: 10px 14px;
  color: var(--main-color--neutral-dark);
  font-weight: 500;
  white-space: nowrap;
}

.navbar-link.w-dropdown .w-dropdown-link:hover {
  background-color: var(--neutral--900);
  color: var(--main-color--accent-3);
}

/* ============================================================
   Σελίδες τμημάτων με 2 (αντί για 3) κάρτες πλοήγησης — π.χ.
   efhbika-tmimata.html. Το βασικό .activities-navigation-wrapper
   έχει σταθερό grid 1fr 1fr 1fr· εδώ το περιορίζουμε σε 2 στήλες
   και το κεντράρουμε ώστε να μη μένει άδειο κενό δεξιά.
   ============================================================ */
.activities-navigation-wrapper.cols-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 40rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .activities-navigation-wrapper.cols-2 {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Ενότητα «Οι επιτυχίες μας» στην αρχική — συνεχές marquee
   βραβείων (σαν ταινία, όχι σε "σελίδες"). Καθαρό CSS animation,
   χωρίς εξάρτηση από το Webflow Slider/IX2: το .awards-track έχει
   τις 6 κάρτες διπλασιασμένες (12 συνολικά) και μετατοπίζεται
   ομαλά κατά -50% — στο μισό της διαδρομής βρίσκεται ακριβώς στο
   σημείο εκκίνησης, οπότε ο βρόχος είναι αδιόρατος.
   Κάθε κάρτα είναι στο layout .activity-card-wrapper (φωτογραφία
   πάνω, ετικέτα έτους, τίτλος, διαγωνισμός/πόλη).
   ============================================================ */
.awards-marquee {
  width: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
}

.awards-track {
  width: max-content;
  display: flex;
  gap: 32px;
  animation: awards-scroll 32s linear infinite;
}

.awards-marquee:hover .awards-track {
  animation-play-state: paused;
}

.award-card {
  flex: 0 0 320px;
  width: 320px;
}

@keyframes awards-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .awards-track {
    animation: none;
  }
}

@media (max-width: 479px) {
  .award-card {
    flex-basis: 260px;
    width: 260px;
  }
}

/* ============================================================
   Σελίδες άρθρων (blog-*.html) — η βασική .blog-main-image
   κόβει την εικόνα σε σταθερό ύψος 460px με object-fit:cover.
   Καλό για φωτογραφίες, όχι για infographics όπου θέλουμε να
   φαίνεται ολόκληρη η εικόνα. Η .blog-main-image-full ακυρώνει
   το crop όπου τη βάζουμε.
   Η .image-caption είναι μικρή λεζάντα πάνω στην κάρτα κειμένου
   (όχι πάνω στην ίδια την εικόνα) — η κάρτα επικαλύπτει το κάτω
   μέρος της εικόνας εξ ορισμού (βλ. .blog-content-wrapper top:-147px
   στο vendor CSS), οπότε λεζάντα κάτω από την εικόνα θα κρυβόταν.
   ============================================================ */
.blog-main-image-full {
  width: 100%;
  height: auto;
  max-height: 800px;
  object-fit: contain;
  background-color: var(--neutral--900);
}

.image-caption {
  margin-bottom: 8px;
}

/* Επικεφαλίδες ενοτήτων μέσα στο κείμενο ενός άρθρου (.w-richtext h2) —
   κληρονομούσαν το γενικό h2{} του site (4.5rem, για τίτλους σελίδων),
   υπερβολικά μεγάλο για υπότιτλο μέσα σε άρθρο. Ίδιο μέγεθος με το
   κυρίως κείμενο (.text-md), απλά bold. */
.w-richtext h2 {
  margin-top: 32px;
  margin-bottom: 8px;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

/* Το vendor .blog-post-wrapper/.blog-content-wrapper επικαλύπτουν σκόπιμα
   το κάτω μέρος της κύριας εικόνας με την κάρτα κειμένου (margin-bottom:-100px
   + top:-147px) — καλό για φωτογραφίες, κακό για infographics όπου θέλουμε να
   φαίνεται ολόκληρη η εικόνα. Το .no-image-overlap ακυρώνει την επικάλυψη:
   η κάρτα κάθεται κανονικά κάτω από την εικόνα, χωρίς να την αγγίζει. */
.blog-post-wrapper.no-image-overlap {
  margin-bottom: 0;
}

.blog-post-wrapper.no-image-overlap .blog-content-wrapper {
  top: 0;
  margin-top: 24px;
  padding-top: 40px;
}

.blog-post-wrapper.no-hero-image .blog-content-wrapper {
  margin-top: 40px;
}

/* ============================================================
   Πλοήγηση «Προηγούμενο / Επόμενο άρθρο» στο κάτω μέρος κάθε
   σελίδας άρθρου (blog-*.html), με βάση τη σειρά δημοσίευσης
   στο blog.html.
   ============================================================ */
.article-prevnext-nav {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--neutral--900);
}

.article-prevnext-link {
  flex: 1;
  max-width: 48%;
  padding: 16px;
  border-radius: var(--master-radius);
  background-color: var(--neutral--900);
  text-decoration: none;
  color: var(--main-color--neutral-dark);
  transition: background-color 150ms;
}

.article-prevnext-link:hover {
  background-color: var(--main-color--bright);
}

.article-prevnext-link.next {
  text-align: right;
  margin-left: auto;
}

@media (max-width: 479px) {
  .article-prevnext-nav {
    flex-direction: column;
  }

  .article-prevnext-link,
  .article-prevnext-link.next {
    max-width: 100%;
    text-align: left;
    margin-left: 0;
  }
}

.article-all-awards-wrapper {
  width: 100%;
  text-align: center;
  margin-top: 12px;
}

.rights-notice {
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--neutral--900);
}

/* Επιπλέον φωτογραφίες μέσα στο κείμενο ενός άρθρου (πέρα από την κεντρική) —
   πλήρες πλάτος, στρογγυλεμένες γωνίες όπως η υπόλοιπη εικονογραφία του site. */
.richtext-image-wrapper {
  margin: 24px 0;
}

.richtext-image {
  width: 100%;
  border-radius: var(--master-radius);
}

/* ============================================================
   Πεδίο αναζήτησης στη σελίδα blog.html — client-side φιλτράρισμα
   των καρτών άρθρων, χωρίς backend/βάση δεδομένων (βλ. script
   στο ίδιο το blog.html).
   ============================================================ */
.blog-search-wrapper {
  max-width: 480px;
  margin: 0 auto 48px;
}

.blog-search-input {
  width: 100%;
  border: 1px solid var(--neutral--700);
  border-radius: var(--master-radius);
  padding: 12px 20px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--main-color--neutral-dark);
  background-color: var(--main-color--bright);
}

.blog-search-input:focus {
  outline: none;
  border-color: var(--main-color--primary);
}

.blog-search-input::placeholder {
  color: var(--neutral--500);
}

/* ============================================================
   Το «Graphic_Element_1» κάτω από τη λέξη «παιδιά» στο hero ήταν
   τόσο έντονο (πλήρη αδιαφάνεια) που η λέξη δυσκολευόταν να
   διαβαστεί. Το μετατρέπουμε σε ::after ώστε να μπορούμε να
   χαμηλώσουμε μόνο τη διαφάνεια του σκίτσου, χωρίς να επηρεάζει
   το ίδιο το κείμενο.
   ============================================================ */
.heading-underline {
  background-image: none;
  position: relative;
}

.heading-underline::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: -16px;
  right: -16px;
  background-image: url('../images/Graphic_Element_1.svg');
  background-position: 50% 95%;
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.35;
  z-index: -1;
}

/* ============================================================
   Ενότητα «Τι λένε οι γονείς μας» στην αρχική — κάτω από το
   «Τι μας ξεχωρίζει». Ελαφρύ έγχρωμο φόντο (απόχρωση accent-2)
   ώστε να ξεχωρίζει οπτικά από τις γειτονικές ενότητες που έχουν
   απλό λευκό φόντο. Native Webflow Slider με autoplay ανά "σελίδα"
   3 κριτικών — διακριτά βήματα, όχι συνεχής κύλιση σαν τα βραβεία.
   ============================================================ */
.section-reviews {
  background-color: #02b1c714;
}

.reviews-slider.w-slider {
  height: auto;
  min-height: 0;
  background: none;
  width: 100%;
  max-width: 1100px;
  margin-top: 24px;
}

.reviews-slide-grid {
  gap: 24px;
  width: 100%;
  padding: 8px 56px 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
}

.review-card {
  flex: 0 1 300px;
  max-width: 300px;
}

.reviews-slider .w-slider-arrow-left,
.reviews-slider .w-slider-arrow-right {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reviews-slider .w-slider-arrow-left img,
.reviews-slider .w-slider-arrow-right img {
  width: 18px;
  opacity: 0.6;
}

.reviews-slider .w-slider-arrow-left:hover img,
.reviews-slider .w-slider-arrow-right:hover img {
  opacity: 1;
}

.reviews-slider .w-slider-dot {
  background-color: var(--neutral--700);
}

.reviews-slider .w-slider-dot.w-active {
  background-color: var(--main-color--accent-2);
}

/* Οι τελίτσες είναι εξ ορισμού position:absolute/bottom:0 πάνω στο ίδιο το
   slider — σε μεγάλες κριτικές (πιο ψηλή κάρτα) το ύψος του slide δεν
   προλαβαίνει να ενημερωθεί σωστά και κάθονται πάνω στην κάρτα. Τις βγάζουμε
   από το absolute ώστε να ρέουν πάντα φυσικά ΚΑΤΩ από το πραγματικό
   περιεχόμενο, ό,τι ύψος κι αν έχει. */
.reviews-slider .w-slider-nav {
  position: static;
  margin-top: 16px;
  padding-top: 0;
  height: auto;
}

@media (max-width: 767px) {
  .reviews-slide-grid {
    padding: 8px 16px 48px;
  }

  .review-card {
    flex-basis: 100%;
    max-width: 100%;
  }

  .reviews-slider.w-slider {
    min-height: 0;
  }

  .reviews-slider .w-slider-arrow-left,
  .reviews-slider .w-slider-arrow-right {
    display: none;
  }
}

/* ============================================================
   Τμήματα ανά ηλικία — κάρτες πλοήγησης (paidika-tmimata.html)
   Δύο επιπλέον χρώματα καρτών + παραλλαγή του grid για 5 στήλες
   αντί για 3, με μικρότερα μεγέθη ώστε να χωράνε άνετα.
   ============================================================ */
.background-color-accent-4 {
  background-color: var(--main-color--accent-4);
}

.background-color-accent-5 {
  background-color: var(--main-color--accent-5);
}

.activities-navigation-wrapper.five-items {
  grid-template-columns: repeat(5, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.activities-navigation-wrapper.five-items .activities-navigation-item {
  grid-row-gap: 16px;
  padding: 24px 16px;
}

.activities-navigation-wrapper.five-items .activity-navigation-icon {
  width: 2.25rem;
}

.activities-navigation-wrapper.five-items .heading-6 {
  font-size: 1.25rem;
  line-height: 1.6rem;
}

.activities-navigation-wrapper.five-items .text-lg {
  font-size: 1rem;
  line-height: 1.4rem;
}

.activities-navigation-wrapper.five-items .button-ghost-default-white {
  height: 40px;
  padding: 1px 14px;
}

@media (max-width: 991px) {
  .activities-navigation-wrapper.five-items {
    grid-template-columns: none;
    flex-flow: row;
    overflow-x: auto;
  }

  .activities-navigation-wrapper.five-items .activities-navigation-item {
    flex: 0 0 220px;
  }
}

@media (max-width: 767px) {
  .activities-navigation-wrapper.five-items {
    flex-flow: column;
  }

  .activities-navigation-wrapper.five-items .activities-navigation-item {
    flex: none;
  }
}

/* ============================================================
   Εφηβικά τμήματα (efhbika-tmimata.html) — 4 κάρτες αντί για 2.
   Ίδια λογική με το five-items, με λίγο μεγαλύτερα μεγέθη αφού
   υπάρχει περισσότερος χώρος ανά κάρτα.
   ============================================================ */
.activities-navigation-wrapper.four-items {
  grid-template-columns: repeat(4, 1fr);
  grid-column-gap: 16px;
  grid-row-gap: 16px;
}

.activities-navigation-wrapper.four-items .activities-navigation-item {
  grid-row-gap: 16px;
  padding: 24px 16px;
}

.activities-navigation-wrapper.four-items .activity-navigation-icon {
  width: 2.5rem;
}

.activities-navigation-wrapper.four-items .heading-6 {
  font-size: 1.375rem;
  line-height: 1.75rem;
}

.activities-navigation-wrapper.four-items .text-lg {
  font-size: 1rem;
  line-height: 1.4rem;
}

.activities-navigation-wrapper.four-items .button-ghost-default-white {
  height: 40px;
  padding: 1px 14px;
}

@media (max-width: 991px) {
  .activities-navigation-wrapper.four-items {
    grid-template-columns: none;
    flex-flow: row;
    overflow-x: auto;
  }

  .activities-navigation-wrapper.four-items .activities-navigation-item {
    flex: 0 0 240px;
  }
}

@media (max-width: 767px) {
  .activities-navigation-wrapper.four-items {
    flex-flow: column;
  }

  .activities-navigation-wrapper.four-items .activities-navigation-item {
    flex: none;
  }
}

/* ============================================================
   Διαγωνιστικά τμήματα (diagonistika-tmimata.html) — στατικό
   grid βραβείων (όχι marquee): διακριτό περίγραμμα ανά κάρτα,
   ώστε να ξεχωρίζουν μέσα στο grid, μιας και κάθε κάρτα είναι
   πλέον link προς τη σελίδα του βραβείου.
   ============================================================ */
.awards-grid .award-card {
  border: 2px solid var(--main-color--neutral-grey, #e5e5e5);
  border-radius: var(--master-radius);
  transition: border-color .2s;
}

.awards-grid .award-card:hover {
  border-color: var(--main-color--primary);
}

/* ============================================================
   Διαγωνιστικά τμήματα — πιο συμπαγής σελίδα, ώστε τίτλος +
   κείμενο + κάρτες διαγωνισμών να χωράνε στην πρώτη οθόνη χωρίς
   scroll. Σμικρύνει τίτλους, κενά και τις κάρτες διαγωνισμών —
   μόνο σε αυτή τη σελίδα (.page-diagonistika στο body).
   ============================================================ */
.page-diagonistika .section-activities-header .section-container,
.page-diagonistika .section-header .section-container,
.page-diagonistika .section-actualities .section-container {
  padding-top: 48px;
  padding-bottom: 48px;
}

.page-diagonistika .section-activities-header .section-container.container-bottom-0,
.page-diagonistika .section-header .section-container.container-bottom-0,
.page-diagonistika .section-actualities .section-container.container-bottom-0 {
  padding-bottom: 0;
}

.page-diagonistika .section-activities-header .container-vertical,
.page-diagonistika .section-header .container-vertical,
.page-diagonistika .section-actualities .container-vertical {
  grid-row-gap: 20px;
}

.page-diagonistika .heading-2 {
  font-size: 2.5rem;
  line-height: 3rem;
}

.page-diagonistika .heading-4 {
  font-size: 1.75rem;
  line-height: 2.2rem;
}

.page-diagonistika .header-divider {
  width: 80px;
}

.page-diagonistika .section-header .text-lg,
.page-diagonistika .section-actualities._2 .text-lg {
  font-size: 1rem;
  line-height: 1.5rem;
}

.page-diagonistika .activities-navigation-item {
  padding: 16px 12px;
}

.page-diagonistika .activity-navigation-icon {
  width: 2rem;
}

.page-diagonistika .activities-navigation-item .heading-6 {
  font-size: 1.25rem;
  line-height: 1.5rem;
}

/* ============================================================
   Οι συνεργασίες μας (index.html) — 5 κάρτες, λογότυπο (placeholder
   κειμένου μέχρι να δοθούν τα πραγματικά αρχεία) + μία πρόταση.
   Το section-partners δεν είχε καθόλου CSS πριν — το φτιάχνουμε
   από την αρχή εδώ.
   ============================================================ */
.section-partners .section-container {
  padding-top: 56px;
  padding-bottom: 56px;
}

.partners-grid {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  grid-template-columns: repeat(6, 1fr);
  display: grid;
  width: 100%;
}

.partner-card {
  border: 2px solid var(--main-color--neutral-grey, #ededed);
  border-radius: var(--master-radius);
  flex-flow: column;
  align-items: center;
  gap: 16px;
  padding: 24px 16px;
  display: flex;
}

.partner-card.partner-card-empty {
  border-style: dashed;
  color: var(--neutral--500);
}

.partner-logo-slot {
  color: var(--main-color--neutral-dark);
  font-size: 1.125rem;
  font-weight: 700;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.partner-logo-image {
  max-width: 100%;
  max-height: 48px;
  width: auto;
  object-fit: contain;
}

.partner-card-empty .partner-logo-slot {
  color: var(--neutral--500);
  font-weight: 500;
}

.partner-description {
  color: var(--neutral--500);
  text-align: center;
  font-size: .875rem;
  line-height: 1.3rem;
}

@media (max-width: 991px) {
  .partners-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .partners-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 479px) {
  .partners-grid {
    grid-template-columns: 1fr;
  }

  /* Το vendor CSS έμενε στα 2.875rem εδώ — η λέξη "Προγραμματισμός" δεν
     χωράει σε στενές οθόνες (~360px) και ξεχειλίζει. */
  .heading-2 {
    font-size: 2rem;
    line-height: 2.5rem;
  }
}

/* Φόντο των 4 στατιστικών (about-us.html) — πραγματική φωτογραφία από το
   ROBOTONIO Festival, αντί για το γενικό stock της βάσης. Η ίδια φωτογραφία
   ζούσε πριν στο .cta-container του index.html («Ολοκληρωμένα έτη σπουδών»),
   ενότητα που αφαιρέθηκε από την αρχική. */
.overview-container {
  background-image: linear-gradient(to bottom, var(--dark-overlay--80), var(--dark-overlay--80)), url('../images/cta-robotonio-festival.jpg');
}

/* Robotonio Kids / Intermediate — το κείμενο δίπλα μεγάλωσε (πολλαπλές ενότητες
   επιπέδων), οπότε η στήλη με τις 3 κάρτες τεντώνεται (align-items:stretch στον
   γονιό) και το space-between αφήνει μεγάλα κενά ανάμεσά τους. Τις κρατάμε μαζεμένες. */
.page-robotonio-kids .activity-information-cards-wrapper,
.page-robotonio-intermediate .activity-information-cards-wrapper,
.page-cybersecurity .activity-information-cards-wrapper,
.page-pcep .activity-information-cards-wrapper,
.page-pcap .activity-information-cards-wrapper,
.page-psifiaki-asfaleia .activity-information-cards-wrapper,
.page-programming-python .activity-information-cards-wrapper,
.page-robotics-python .activity-information-cards-wrapper {
  justify-content: flex-start;
}

/* Ενότητα NEWSLETTER (footer) — τα δύο decorative patterns και το κείμενο
   κανονικά μοιράζονται το ίδιο css-grid κελί, μέσω συγκεκριμένων Webflow
   w-node id που υπάρχουν μόνο στο index.html. Στις σελίδες που φτιάξαμε ή
   προσαρμόσαμε εμείς αυτά τα id λείπουν, οπότε τα patterns "σκάνε" σε πλήρες
   ύψος αντί να επικαλύπτονται διακριτικά πίσω από το κείμενο. Γενική διόρθωση
   με βάση τις ίδιες τιμές grid-area/place-self, για όλες τις σελίδες. */
.subscription-container .subscription-pattern.right {
  grid-area: 1 / 1 / 2 / 2;
  place-self: stretch start;
}
.subscription-container .subscription-pattern.left {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: end;
}
.subscription-container .subscription-content-wrapper {
  grid-area: 1 / 1 / 2 / 2;
  justify-self: center;
}

/* STEM Challenge Day — ξεχωριστή, οριοθετημένη ενότητα για την ημερομηνία
   της επόμενης διοργάνωσης. */
.stem-next-date-notice {
  border: 1px solid var(--main-color--accent-5);
  border-radius: var(--master-radius);
  padding: 16px 20px;
}

/* Η φωτογραφία (1100x619) κόβεται με το σταθερό height:435px του
   .activity-detail-image (object-fit:cover). Αντικαθιστούμε με aspect-ratio
   ίσο με της φωτογραφίας, ώστε το πλαίσιο να ταιριάζει ακριβώς — καμία
   περικοπή. */
.page-stem-challenge-day .activity-detail-image {
  height: auto;
  aspect-ratio: 1100 / 619;
}

/* Δημιουργική Γραφή (παιδικό) — η φωτογραφία (1890x945) κόβεται με το
   σταθερό height:435px του .activity-detail-image (object-fit:cover).
   Αντικαθιστούμε με aspect-ratio ίσο με της φωτογραφίας, ώστε το πλαίσιο να
   ταιριάζει ακριβώς — καμία περικοπή. */
.page-dimiourgiki-grafi .activity-detail-image {
  height: auto;
  aspect-ratio: 1890 / 945;
}

/* Δημιουργική Γραφή (εφηβικό) — ξεχωριστή σελίδα πλέον, με δική της
   φωτογραφία (1600x550), διαφορετική αναλογία από την παιδική. Το πλαίσιο
   (.activity-detail-image-frame) κρατά την αναλογία + το στρογγύλεμα +
   κόβει (overflow:hidden) ό,τι ξεφεύγει· η ίδια η εικόνα μέσα ζουμάρει
   κατά 15% (transform:scale) χωρίς να αλλάζει το μέγεθος του πλαισίου. */
.page-dimiourgiki-grafi-efhbiko .activity-detail-image-frame {
  border-radius: var(--master-radius);
  aspect-ratio: 1600 / 550;
  overflow: hidden;
  align-self: stretch;
}

.page-dimiourgiki-grafi-efhbiko .activity-detail-image {
  height: 100%;
  width: 100%;
  border-radius: 0;
  transform: scale(1.15);
}

/* ============================================================
   Ενότητα «Οι επιτυχίες μας» στην αρχική — καρουζέλ βραβείων.
   Native Webflow Slider (w-slider) με autoplay· κάθε slide δείχνει
   3 κάρτες βραβείων δίπλα-δίπλα (awards-grid), η κάθε μία στο ίδιο
   layout με τις κάρτες δραστηριοτήτων (.activity-card-wrapper) —
   φωτογραφία πάνω, ετικέτα έτους, τίτλος και διαγωνισμός/πόλη κάτω.
   ============================================================ */
.awards-slider.w-slider {
  height: 480px;
  background: none;
}

.awards-slider .award-slide-wrap {
  height: 100%;
  padding: 0 56px 72px;
  display: flex;
  align-items: center;
}

.awards-grid {
  grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  width: 100%;
  display: grid;
}

.award-card {
  height: 100%;
}

/* Οι κάρτες κρατούν ακόμα flex:0 0 320px από το παλιό marquee (που ζει στο
   about-us.html και δεν το πειράζουμε). Μέσα στο grid της αρχικής αυτό τις
   κρατά στενές και αφήνει τεράστια κενά — εδώ γεμίζουν τη στήλη τους.
   Ειδικότερος selector (0,2,0), οπότε κερδίζει και μέσα σε media query. */
.awards-grid .award-card {
  flex: initial;
  width: 100%;
  max-width: none;
}

/* diagonistika-tmimata.html — εδώ το .awards-grid ζει πάνω στο ίδιο div με
   .activities-list-wrapper (display:flex από το vendor CSS), και οι κάρτες
   είναι τυλιγμένες μέσα σε ένα ακόμα grid (.activities-list) και ένα flex
   wrapper (.activity-card) — δύο επιπλέον στρώσεις που δεν υπάρχουν στο
   marquee της αρχικής. Το display:contents βγάζει το ενδιάμεσο .activities-list
   από το κουτί, ώστε οι κάρτες να γίνουν απευθείας παιδιά του .awards-grid. */
.activities-list-wrapper.awards-grid {
  display: grid;
}

.activities-list-wrapper.awards-grid .activities-list {
  display: contents;
}

.activities-list-wrapper.awards-grid .activity-card {
  width: 100%;
}

.awards-slider .w-slider-arrow-left,
.awards-slider .w-slider-arrow-right {
  width: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.awards-slider .w-slider-arrow-left img,
.awards-slider .w-slider-arrow-right img {
  width: 18px;
  opacity: 0.6;
}

.awards-slider .w-slider-arrow-left:hover img,
.awards-slider .w-slider-arrow-right:hover img {
  opacity: 1;
}

.awards-slider .w-slider-dot {
  background-color: var(--neutral--700);
}

.awards-slider .w-slider-dot.w-active {
  background-color: var(--main-color--primary);
}

@media (max-width: 767px) {
  /* Κινητό: αντί για 3 κάρτες στοιβαγμένες κάθετα μέσα σε σταθερό ύψος
     (που έκοβε πάνω-κάτω όποτε το περιεχόμενο δεν χωρούσε ακριβώς), οι
     κάρτες μπαίνουν σε οριζόντια σειρά με swipe, μία πλήρης κάρτα τη
     φορά (scroll-snap) — ίδιο ύψος με desktop, καμία κοπή περιεχομένου. */
  .awards-slider .award-slide-wrap {
    padding: 0 16px 72px;
  }

  .awards-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 100%;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }

  .awards-grid .award-card {
    scroll-snap-align: center;
  }

  .awards-slider .w-slider-arrow-left,
  .awards-slider .w-slider-arrow-right {
    display: none;
  }
}
/* ============================================================
   Footer: κόψιμο του κάτω κενού
   Το .section-container του template έχει padding: 100px 80px, που ισχύει και
   μέσα στο footer και αφήνει 100px κενό στο τέλος κάθε σελίδας. Μηδενίζουμε
   ΜΟΝΟ το κάτω — το πάνω και τα πλαϊνά μένουν, αλλιώς το footer κολλάει.
   ============================================================ */
.section-footer .section-container {
  padding-bottom: 0;
}

/* ============================================================
   Οριζόντιο scroll από διακοσμητικά που ξεφεύγουν
   Το template βάζει <img> με max-width:none και μεγάλα αρνητικά margins
   (-100px έως -1000px), βασιζόμενο σε πρόγονο με overflow. Το
   .subscription-container το κάνει· αυτά τα τρία δεν το έχουν, οπότε το δεξί
   διακοσμητικό ξεφεύγει και γεννά οριζόντια μπάρα.
   clip και όχι hidden: το hidden φτιάχνει scroll container και ακυρώνει τυχόν
   position:sticky μέσα στην ενότητα.
   ============================================================ */
.section-header,
.blog-list-section,
.section-blog-post {
  overflow-x: clip;
}

/* Κριτικές γονέων (index.html) — αφαιρέθηκαν η λεζάντα πάνω και ο υπότιτλος
   κάτω από τον τίτλο. Χωρίς αυτά, το σταθερό padding:100px της
   .section-container αφήνει πολύ κενό πάνω/κάτω — το μαζεύουμε. Παλιότερα
   υπήρχε ΚΑΙ padding-top/bottom:80px στην ίδια την .section-reviews, που
   στοίβαζε επιπλέον κενό πάνω από αυτό — αφαιρέθηκε, μία μόνο πηγή padding
   πλέον. */
.section-reviews .section-container {
  padding-top: 48px;
  padding-bottom: 48px;
}

/* «Έτοιμοι να ξεκινήσετε» (index.html) — ανάμεσα σε Συνεργασίες και FAQ, και
   οι τρεις με άσπρο φόντο εξ ορισμού, χωρίς κανέναν οπτικό διαχωρισμό. Το
   ίδιο ελαφρύ γκρι που ήδη χρησιμοποιεί η ενότητα Νέα (var(--neutral--900))
   ώστε άσπρο→χρώμα→άσπρο, χωρίς νέο χρώμα στην παλέτα. */
.section-steps {
  background-color: var(--neutral--900);
}

/* Σελίδες τμημάτων (π.χ. mikroi-epistimones.html) — 3 κουμπιά δίπλα-δίπλα
   αντί για ένα «Όλα τα τμήματα»: Εφηβικά (κόκκινο, default), Ενηλίκων
   (γαλάζιο) και Όλα τα τμήματα (σκούρο γκρι), για γρήγορη πλοήγηση σε
   γειτονικές κατηγορίες χωρίς να χρειάζεται να πάει κανείς πρώτα πίσω. */
.tmimata-cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
  margin-top: 24px;
}

/* contact.html — αφαιρέθηκε ο υπότιτλος κάτω από τον τίτλο «Επικοινωνήστε
   μαζί μας», οπότε το πάγιο padding-top:100px της .section-container (πριν
   τη φόρμα) έμενε άδειο κενό χωρίς περιεχόμενο να το δικαιολογεί. Μαζεύεται
   μόνο εδώ (.section-contact είναι μοναδικό σε αυτή τη σελίδα) — τα άλλα
   section-header σε άλλες σελίδες έχουν υπότιτλο και δεν πειράζονται. */
.section-contact .section-container {
  padding-top: 40px;
}

/* about-us.html — «Ποιοι είμαστε»: κάρτες συνεργατών χωρίς φωτογραφίες
   (δεν υπάρχει έτοιμο τέτοιο component στο template — το «Meet Our
   Lecturers» περίμενε φωτογραφία+όνομα ανά CMS item). Απλό grid, ίδιο
   ύφος με τις γκρι κάρτες πληροφορίας (.activity-information-card). */
.team-cards-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  width: 100%;
}

.team-card {
  background-color: var(--neutral--900);
  border-radius: var(--master-radius);
  padding: 32px;
  display: flex;
  flex-flow: column;
  gap: 8px;
  text-align: left;
}

/* Ιδρυτές (Κασμίρης, Κομβοτέα) σε δική τους σειρά, ξεχωριστά από την
   υπόλοιπη ομάδα — 2 στήλες αντί για 3, κεντραρισμένο. */
.team-cards-wrapper.cols-2 {
  grid-template-columns: 1fr 1fr;
  max-width: 44rem;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 767px) {
  .team-cards-wrapper.cols-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 991px) {
  .team-cards-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .team-cards-wrapper {
    grid-template-columns: 1fr;
  }
}