/* Σελίδα άρθρων (Insights) και αρχεία κατηγοριών. Μόνο οι προσθήκες πάνω
   στο υπάρχον listing: εισαγωγικό κείμενο, φίλτρα κατηγοριών, CTA. */

.eg-listing__lead {
  max-width: 780px;
  margin: 26px 0 0;
  color: #5a5d63;
  font-size: clamp(17px, 1.35vw, 20px);
  line-height: 1.65;
}

/* ------------------------------------------------------------- φίλτρα */

.eg-filters { margin: 0 0 46px; }
.eg-filters ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.eg-listing .eg-filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1px solid #ddd9cc;
  border-radius: 999px;
  background: var(--eg-white);
  color: #34373d;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.eg-listing .eg-filter:hover { border-color: var(--eg-ink); color: var(--eg-ink); }

/* Το ενεργό φίλτρο παίρνει το brand κίτρινο, όχι απλώς έντονο περίγραμμα. */
.eg-listing .eg-filter.is-active {
  border-color: var(--eg-yellow);
  background: var(--eg-yellow);
  color: var(--eg-ink);
}

/* Το πλήθος άρθρων: βοηθά στην πλοήγηση χωρίς να τραβά το βλέμμα. */
.eg-filter > span {
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #f0eee4;
  color: #6d7078;
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}
.eg-filter.is-active > span { background: rgba(8, 9, 11, .12); color: #45402a; }

/* ---------------------------------------------------------------- CTA */

.eg-listing-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 45px;
  margin-top: 90px;
  padding: clamp(34px, 4vw, 54px);
  overflow: hidden;
  border-radius: var(--eg-radius);
  background: radial-gradient(ellipse at 78% 130%, rgba(248, 214, 8, .3), transparent 52%), var(--eg-ink);
  color: #d7dade;
}
.eg-listing-cta h2 {
  margin: 0;
  color: var(--eg-white);
  font-family: var(--eg-heading-font);
  font-size: clamp(26px, 2.4vw, 40px);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.1;
}
.eg-listing-cta p {
  max-width: 620px;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.65;
}

.eg-listing .eg-listing-cta__button {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 14px;
  padding: 18px 30px;
  border-radius: 999px;
  background: var(--eg-yellow);
  color: var(--eg-ink);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.2;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, transform .2s ease;
}
.eg-listing .eg-listing-cta__button:hover { background: var(--eg-yellow-hot); transform: translateY(-2px); }

/* --------------------------------------------------------- responsive */

@media (max-width: 860px) {
  .eg-listing-cta { align-items: flex-start; flex-direction: column; gap: 30px; }
}

@media (max-width: 620px) {
  /* Δώδεκα chips που αναδιπλώνονται πιάνουν έξι σειρές και σπρώχνουν τα
     άρθρα εκτός οθόνης. Σε κινητό γίνονται μία σειρά που κυλάει πλάγια. */
  .eg-filters {
    margin-bottom: 34px;
    margin-inline: calc(50% - 50vw);
    padding-inline: calc(50vw - 50%);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .eg-filters::-webkit-scrollbar { display: none; }
  .eg-filters ul { flex-wrap: nowrap; scroll-snap-type: x proximity; }
  .eg-filters li { scroll-snap-align: start; }
  .eg-listing .eg-filter { padding: 9px 15px; font-size: 14px; white-space: nowrap; }

  .eg-listing-cta { margin-top: 64px; }
  .eg-listing .eg-listing-cta__button { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .eg-listing .eg-filter,
  .eg-listing .eg-listing-cta__button { transition: none; }
}