/* ==========================================================================
   e-Agrotis — ΣΕΛΙΔΑ ΑΡΘΡΟΥ
   ========================================================================== */

.ea-single{ padding-top: 20px; }
.ea-single__grid{ display: block; }

/* --------------------------------------------------------------------------
   ΚΕΦΑΛΙΔΑ ΑΡΘΡΟΥ
   -------------------------------------------------------------------------- */
.ea-single__head .ea-eyebrow{ text-decoration: none; display: inline-block; }
.ea-single__title{
  margin: 9px 0 12px;
  font-size: 29px; line-height: 1.16; font-weight: 800;
  letter-spacing: -.022em; text-wrap: balance; color: var(--ea-ink);
}

.ea-byline{
  display: flex; align-items: center; gap: 9px; padding: 12px 0;
  border-top: 1px solid var(--ea-rule); border-bottom: 1px solid var(--ea-rule);
}
.ea-avatar{ width: 33px; height: 33px; border-radius: 50%; flex: 0 0 auto; }
.ea-byline__who{
  display: block; font-size: 13.5px; font-weight: 700;
  color: var(--ea-ink); line-height: 1.3;
}
.ea-byline__when{
  display: block; font-size: 11.5px; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ea-meta);
}

/* --------------------------------------------------------------------------
   ΚΥΡΙΑ ΕΙΚΟΝΑ
   Δεσμευμένη αναλογία 3:2 ΚΑΙ όριο ύψους: σε μεγάλη οθόνη μια κατακόρυφη
   φωτογραφία αλλιώς καταλαμβάνει ολόκληρη την οθόνη και ο αναγνώστης
   δεν βλέπει καθόλου κείμενο χωρίς κύλιση.
   -------------------------------------------------------------------------- */
.ea-single__fig{ margin: 16px 0 6px; }
.ea-single__fig img{
  display: block; width: 100%; height: auto;
  aspect-ratio: 3/2; object-fit: cover;
  max-height: 62vh;                 /* ← το όριο */
  background: var(--ea-surface);
}
.ea-single__fig figcaption{
  font-size: 12px; color: var(--ea-meta); padding-top: 7px; line-height: 1.4;
  font-family: var(--ea-serif); font-style: italic;
}

/* --------------------------------------------------------------------------
   ΣΩΜΑ ΚΕΙΜΕΝΟΥ
   65-75 χαρακτήρες ανά γραμμή — το εύρος όπου το μάτι δεν κουράζεται.
   -------------------------------------------------------------------------- */
.ea-body{
  font-family: var(--ea-serif);
  font-size: 18px; line-height: 1.72; color: var(--ea-ink); padding-top: 8px;
}
.ea-body > *{ max-width: 68ch; }
.ea-body > figure,
.ea-body > .wp-block-image,
.ea-body > .ea-ad,
.ea-body > table{ max-width: 100%; }

.ea-body p{ margin: 0 0 20px; }
.ea-body p:first-of-type{ font-size: 19.5px; line-height: 1.62; }

.ea-body h2, .ea-body h3{
  font-family: var(--ea-sans); font-weight: 800; letter-spacing: -.012em;
  color: var(--ea-ink);
}
.ea-body h2{ font-size: 21px; line-height: 1.3; margin: 32px 0 12px; }
.ea-body h3{ font-size: 18px; line-height: 1.35; margin: 26px 0 10px; }

.ea-body a{ color: var(--ea-acc); text-decoration: underline; text-underline-offset: 2px; }
.ea-body ul, .ea-body ol{ margin: 0 0 20px; padding-left: 22px; }
.ea-body li{ margin-bottom: 8px; }

.ea-body blockquote{
  margin: 26px 0; padding: 0 0 0 16px; border-left: 3px solid var(--ea-acc);
  font-family: var(--ea-sans); font-size: 19px; line-height: 1.4;
  font-weight: 800; letter-spacing: -.012em; color: var(--ea-ink);
}
.ea-body blockquote p{ margin: 0; font-size: inherit; }

.ea-body img{ height: auto; }
.ea-body figcaption{
  font-size: 12px; color: var(--ea-meta); font-style: italic;
  font-family: var(--ea-serif); padding-top: 6px;
}

/* πίνακες — τα άρθρα πληρωμών τους έχουν συχνά, και είναι φαρδιοί */
.ea-body table{ width: 100%; border-collapse: collapse; margin: 0 0 22px; font-size: 15px; }

/* Πίνακας που δεν χωράει: κυλάει μέσα στο κουτί του, δεν κόβεται.
   Το `min-width:100%` κρατά τον στενό πίνακα σε πλήρες πλάτος, ενώ το
   `width:auto` αφήνει τον πλατύ να πάρει το φυσικό του μέγεθος. */
.ea-body .ea-tablewrap{
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 0 22px;
  /* Σκιά στη δεξιά άκρη όσο υπάρχει κι άλλο — υπόδειξη ότι κυλάει.
     Χάνεται μόνη της όταν φτάσεις στο τέλος. */
  background:
    linear-gradient(to right, var(--ea-ground) 30%, transparent),
    linear-gradient(to left,  var(--ea-ground) 30%, transparent) 100% 0,
    radial-gradient(farthest-side at 0 50%, rgba(0,0,0,.12), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(0,0,0,.12), transparent) 100% 0;
  background-repeat: no-repeat;
  background-size: 34px 100%, 34px 100%, 12px 100%, 12px 100%;
  background-attachment: local, local, scroll, scroll;
}
.ea-body .ea-tablewrap table{ margin: 0; width: auto; min-width: 100%; }
.ea-body .ea-tablewrap th, .ea-body .ea-tablewrap td{ white-space: normal; }
/* ⚠ ΚΑΜΙΑ ΕΞΑΝΑΓΚΑΣΜΕΝΗ ΚΥΛΙΣΗ.
   Πρώτη εκδοχή έβαζε min-width ανά πλήθος στηλών (470/560/660px). Λάθος
   κριτήριο: μετρήθηκε 24/8 ότι ο ΤΕΤΡΑΣΤΗΛΟΣ πίνακας τιμών χωρούσε άνετα,
   κι όμως αναγκαζόταν να κυλάει 217px — δηλαδή κρύβαμε το 40% του.

   Το πλήθος στηλών δεν λέει τίποτα· το ΜΗΚΟΣ του κειμένου λέει.
   Και αυτό το ξέρει ήδη ο browser: με `width:auto` ο πίνακας παίρνει το
   ελάχιστο πλάτος που χρειάζεται το περιεχόμενό του. Αν χωράει, το
   `min-width:100%` τον κρατά σε πλήρες πλάτος. Αν δεν χωράει, ξεπερνά το
   κουτί και κυλάει. Ακριβώς η επιθυμητή συμπεριφορά, χωρίς μαντεψιές. */
@media (max-width: 599px){
  .ea-body .ea-tablewrap table{ font-size: 14px; }
  /* Λιγότερο περιθώριο στα κελιά: σε τρίστηλο πίνακα γλιτώνει ~24px, που
     συχνά είναι όλη η διαφορά ανάμεσα στο «χωράει» και στο «κυλάει». */
  .ea-body .ea-tablewrap th, .ea-body .ea-tablewrap td{ padding: 7px 7px; }
}

/* Η πρώτη στήλη μένει ορατή όσο κυλάει ο πίνακας — αλλιώς χάνεις τη
   γραμμή που κοιτάς μόλις μετακινηθείς δεξιά. */
.ea-body .ea-tablewrap th:first-child,
.ea-body .ea-tablewrap td:first-child{
  position: sticky; left: 0; z-index: 1; background: var(--ea-ground);
}
.ea-body .ea-tablewrap th:first-child{ background: var(--ea-surface); }

/* ── Διαδρομή πλοήγησης ── */
.ea-crumbs{ margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--ea-meta); }
.ea-crumbs a{ color: var(--ea-meta); text-decoration: none; }
.ea-crumbs a:hover{ color: var(--ea-acc); text-decoration: underline; }
.ea-crumbs .breadcrumb_last{ color: var(--ea-ink-2); font-weight: 600; }

/* ── Ένδειξη κύλισης ──────────────────────────────────────────────
   Ο πίνακας που κυλάει ΦΑΙΝΕΤΑΙ κομμένος, και ο αναγνώστης δεν έχει
   κανέναν λόγο να μαντέψει ότι σέρνεται. Η σκίαση στην άκρη δεν αρκεί:
   δοκιμάστηκε 24/8 σε πραγματικό κινητό και δεν έγινε αντιληπτή.
   Το μήνυμα μπαίνει από JavaScript ΜΟΝΟ όταν ο πίνακας όντως ξεχειλίζει —
   αν χωράει, δεν εμφανίζεται τίποτα. */
.ea-tablehint{
  display: flex; align-items: center; gap: 6px;
  margin: 0 0 6px; font-size: 12px; font-weight: 700;
  letter-spacing: .04em; color: var(--ea-meta);
}
.ea-tablehint::before{
  content: "↔"; font-size: 15px; color: var(--ea-acc);
}
@media (min-width: 900px){ .ea-tablehint{ display: none; } }
.ea-body table th, .ea-body table td{
  border: 1px solid var(--ea-rule); padding: 8px 10px; text-align: left;
}
.ea-body table th{ background: var(--ea-surface); font-weight: 700; }
.ea-body table td{ font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   ΕΤΙΚΕΤΕΣ
   -------------------------------------------------------------------------- */
.ea-tags{ display: flex; flex-wrap: wrap; gap: 7px; padding: 4px 0 22px; }
.ea-tag{
  font-size: 12px; font-weight: 600; color: var(--ea-ink-2);
  border: 1px solid var(--ea-rule); padding: 5px 10px; text-decoration: none;
}
.ea-tag:hover{ border-color: var(--ea-acc); color: var(--ea-acc); }

/* --------------------------------------------------------------------------
   ΠΛΑΪΝΗ ΣΤΗΛΗ — κρυφή σε κινητό
   -------------------------------------------------------------------------- */
.ea-sidebar{ display: none; }

.ea-sb{ border: 1px solid var(--ea-rule); padding: 14px; margin-bottom: 18px; }
.ea-sb h2{
  margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ea-ink);
  padding-bottom: 7px; border-bottom: 2px solid var(--ea-acc);
}
.ea-sb__row{
  display: grid; grid-template-columns: 1fr auto auto; gap: 8px;
  align-items: baseline; padding: 7px 0; border-bottom: 1px solid var(--ea-rule);
}
.ea-sb__row:last-child{ border-bottom: 0; }
.ea-sb__row .n{ font-size: 13.5px; font-weight: 600; color: var(--ea-ink); }
.ea-sb__row .v{
  font-size: 14px; font-weight: 800; color: var(--ea-ink);
  font-variant-numeric: tabular-nums;
}
.ea-sb__row .d{
  font-size: 12px; font-weight: 800; min-width: 48px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.ea-sb__row .d.up, .ea-sb .up{ color: var(--ea-acc); }
.ea-sb__row .d.dn, .ea-sb .dn{ color: var(--ea-down); }

.ea-sb__dl{
  display: grid; gap: 5px; padding: 9px 0; border-bottom: 1px solid var(--ea-rule);
}
.ea-sb__dl:last-child{ border-bottom: 0; }
.ea-sb__dl .t{ font-size: 13.5px; font-weight: 600; line-height: 1.3; }
.ea-sb__dl .t a{ text-decoration: none; }
.ea-sb__dl .ea-pill{ justify-self: start; }

.ea-temps--sb{ grid-template-columns: repeat(2, 1fr); margin-bottom: 0; }
.ea-temps--sb .ea-t{ padding: 7px 9px; }
.ea-temps--sb .ea-t .v{ font-size: 16px; }

.ea-sb .ea-rank__i{ padding: 9px 0; }
.ea-sb .ea-rank h3{ font-size: 14px; line-height: 1.3; }

/* --------------------------------------------------------------------------
   ΔΙΑΒΑΣΤΕ ΕΠΙΣΗΣ
   -------------------------------------------------------------------------- */
.ea-related{ border-top: 1px solid var(--ea-rule); margin-top: 8px; }
/* .ea-grid / .ea-card--stacked → base.css (κοινά σε όλα τα πρότυπα) */

.ea-comments{ padding-top: 10px; padding-bottom: 20px; }

/* ==========================================================================
   ΥΠΟΛΟΓΙΣΤΗΣ
   ========================================================================== */
@media (min-width: 900px){
  .ea-single__grid{
    display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;
    align-items: start;
  }
  .ea-single__title{ font-size: 37px; }
  .ea-body{ font-size: 19px; }
  .ea-single__fig img{ max-height: 54vh; }

  .ea-sidebar{ display: block; position: sticky; top: 16px; }

  .ea-grid--3{ grid-template-columns: repeat(3, 1fr); gap: 0 26px; }
}

@media (max-width: 400px){
  .ea-single__title{ font-size: 26px; }
}

/* Στην πλαϊνή στήλη οι σύνδεσμοι δεν υπογραμμίζονται — είναι λίστα, όχι κείμενο */
.ea-sidebar a{ text-decoration: none; }
.ea-sidebar a:hover{ text-decoration: underline; text-underline-offset: 2px; }
.ea-sb .ea-rank h3{ font-size: 14px; line-height: 1.35; }


/* --------------------------------------------------------------------------
   ΠΡΟΤΙΜΩΜΕΝΗ ΠΗΓΗ GOOGLE

   ⚠ ΤΑ ΥΨΗ ΕΙΝΑΙ ΜΕΤΡΗΜΕΝΑ, ΟΧΙ ΥΠΟΘΕΣΗ (29/8, live, κινητό + υπολογιστή).
   Η Google σχεδιάζει το κουμπί ως IFRAME **πλήρους πλάτους, ύψους 60px**
   (764×60 σε 1280px, 343×60 σε 375px) — άρα πέφτει ΠΑΝΤΑ σε δική του γραμμή,
   κάτω από το κείμενο.

   Η πρώτη εκδοχή δέσμευε 46px ενώ το τελικό ύψος είναι 99-103px: το κουτί
   μεγάλωνε ~55px τη στιγμή που φόρτωνε το iframe — δηλαδή πρόσθετε ακριβώς
   το CLS που ήθελε να αποτρέψει. Τώρα ο χώρος δεσμεύεται στο ΙΔΙΟ το κουμπί.
   -------------------------------------------------------------------------- */
.ea-pref{
  display:flex; flex-direction: column; align-items: flex-start; gap: 8px;
  min-height: 100px;
  margin: 14px 0 0;
  padding: 10px 0 0;
  border-top: 1px solid var(--ea-rule);
}
.ea-pref__tx{
  font-size: 13.5px; font-weight:600; color: var(--ea-meta);
}
/* Ο πραγματικός φύλακας: το iframe της Google είναι 60px. */
.ea-pref > [google-add-preferred-source-btn]{
  display: block; width: 100%; min-height: 60px;
}
@media (max-width: 520px){
  .ea-pref__tx{ font-size:13px; }
}