/* Section: post_grid (template-parts/sections/post_grid.php; the same block is printed by archive.php) — EXALCO-Articles "Article list".
   Head, chips, grid, cards, button and pagination come from base.css / components/post-card.css. */

.ex-post-grid__head { --ex-head-gap: 26px; }
/* Chips of the article list: 6px apart, .1em (rendered mockup: 107.1px for "ΧΟΡΗΓΙΑ"). */
.ex-post-chips { gap: 6px; }
.ex-post-chips .ex-chip { letter-spacing: .1em; }
/* The mockup shows 5 chips on the title's row. With more categories the group keeps its place on the right and wraps
   inside the space beside the title instead of dropping under it as one left-aligned row. */
.ex-post-grid__head .ex-section-head__aside { flex: 1 1 0; min-width: min(100%, 420px); }
/* Mockup grid: 16px between cards. */
.ex-post-grid__list { gap: 16px; }
.ex-post-grid__results { scroll-margin-top: var(--ex-scroll-offset); }
.ex-post-grid__item { display: flex; min-width: 0; }
.ex-post-grid__empty { margin: 0; }
.ex-post-grid__more { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--ex-space-4); margin-top: 30px; }
/* Rendered mockup button: 13.33px / 400 (.ex-btn--regular), .1em, 15px 30px + 2px border = 50px high, 271.7px wide. */
.ex-post-grid__load,
.ex-post-grid__prev { padding: 15px 30px; letter-spacing: .1em; }

/* While JS swaps or appends cards */
.ex-post-grid__results.is-loading .ex-post-grid__list { opacity: .5; transition: opacity var(--ex-t-base); pointer-events: none; }

.ex-post-grid__pagination .navigation.pagination { margin-top: 30px; }

/* Term archive (archive.php): intro text under the banner (.ex-section--sm), same measure as the /nea intro */
.ex-post-archive__intro-text { max-width: min(640px, 66%); margin: 0; font-size: clamp(14.5px, 1.1vw, 16px); line-height: 1.7; color: var(--ex-ink); }
.ex-post-archive__intro-text p { margin: 0 0 14px; }
.ex-post-archive__intro-text p:last-child { margin-bottom: 0; }

@media (max-width: 899px) {
  /* The chips become one scrolling row (.ex-chips--scroll): their wrapper must be a full-width block, otherwise the row takes
     its content width and the page scrolls sideways. */
  .ex-post-grid__head .ex-section-head__aside { display: block; flex: none; width: 100%; min-width: 0; }
  .ex-post-grid__more .ex-btn { min-height: var(--ex-touch); }
  .ex-post-archive__intro-text { max-width: none; }
}

@media (max-width: 599px) {
  .ex-post-grid__more .ex-btn { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .ex-post-grid__results.is-loading .ex-post-grid__list { transition: none; }
}