/* ARTICLES LISTING («Επιστημονικά Άρθρα», blog index). Loaded after tokens.css + site-chrome.css (locked global
   header/footer, untouched here). Design base: the owner-provided listing (breadcrumb · H1 · exam-room photo hero ·
   article grid) in the approved charcoal/graphite + petrol + gold system. Card content (titles, URLs, categories,
   images, alts) is never changed; categories are shown in capitals by CSS only (lang="el" also drops the tonos).
   The hero ends in one broad white wave (owner). The single-article template lives in article.css and is not affected by this file. */
:root{--al-gutter:clamp(20px,3.5vw,72px);--al-max:1760px}
.page-articles .bbwrap{width:min(100% - 2 * var(--al-gutter),var(--al-max))}

/* ---------- hero: the exam-room photo of the reference (bg-exam-room.jpg), clearly visible (owner, 2026-09-28) ----------
   Graphite overlay only where it is needed: a short fade from the header's page-facing graphite (#505050) at the top
   edge, and a left-to-right shade behind the breadcrumb/title for contrast; the right half of the photo stays open. */
.phero-cur--articles.bbs--grad::before{background:
  linear-gradient(180deg,var(--char-2) 0%,rgba(80,80,80,.55) 9%,rgba(80,80,80,0) 30%),
  linear-gradient(90deg,rgba(18,18,18,.82) 0%,rgba(24,24,24,.66) 34%,rgba(30,30,30,.3) 62%,rgba(30,30,30,.12) 100%)}
.phero-cur--articles{--wave-h:clamp(56px,7.6vw,132px)}
@media (min-width:768px){
  .phero-cur--articles{min-height:0}
  .phero-cur--articles .phero-cur__in{padding:clamp(120px,11vw,184px) 0 calc(var(--wave-h) + clamp(96px,8vw,150px))}
}
.phero-cur--articles .crumbs ol{color:#E4E4E1;margin-bottom:20px;text-shadow:0 1px 8px rgba(0,0,0,.45)}
.phero-cur--articles .crumbs a{color:#fff;text-decoration-color:rgba(255,255,255,.5);text-underline-offset:3px}
.phero-cur--articles .crumbs a:hover{color:var(--gold)}
.phero-cur--articles .phero-cur__h{font-size:clamp(40px,4.2vw,62px);max-width:none;margin:0;text-shadow:0 2px 18px rgba(0,0,0,.4)}
.phero-cur--articles .phero-cur__h::after{content:"";display:block;width:56px;height:3px;background:var(--gold);margin-top:22px}

/* ONE broad organic wave is the photo's lower edge: a white shape drawn over the bottom of the hero (the same white
   as the article area), full width, above the photo and its overlay */
.phero-wave{position:absolute;left:0;right:0;bottom:-1px;z-index:3;line-height:0;pointer-events:none}
.phero-wave svg{display:block;width:100%;height:var(--wave-h)}
.phero-wave path{fill:#fff}

/* ---------- article grid ---------- */
.art-list{padding:16px 0 88px}
.art-list__grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:48px clamp(20px,2vw,32px)}
@media (min-width:1680px){.art-list__grid{grid-template-columns:repeat(5,minmax(0,1fr))}}
.art-list .acard a{display:flex;flex-direction:column;height:100%;color:var(--char-0)}
.art-list .ratio{border-radius:10px;background:var(--off)}
.art-list .acard__cat{display:flex;align-items:center;gap:10px;margin:18px 0 8px;font-size:12.5px;letter-spacing:.08em;color:var(--gold-t);text-transform:uppercase}
.art-list .acard__cat::before{content:"";width:22px;height:2px;background:var(--gold);flex:none}
.art-list .acard__t{font-size:20px;line-height:1.3;color:var(--char-0);text-wrap:pretty}
.art-list .acard a:hover .acard__t{color:var(--petrol)}
.art-list .acard a:focus-visible{outline:3px solid var(--focus);outline-offset:6px;border-radius:10px}

@media (max-width:1180px){
  .art-list__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 22px}
  .art-list .acard__t{font-size:18.5px}
}

/* ---------- mobile: flat charcoal hero, then a reading list (first article large, the rest as rows) ---------- */
@media (max-width:767px){
  /* mobile keeps the photo too (the base file hid it below 768px); darker overlay because the text spans the width */
  .phero-cur--articles .bbs__bg,.phero-cur--articles.bbs--grad::before{display:block}
  .phero-cur--articles.bbs--grad::before{background:linear-gradient(180deg,var(--char-2) 0%,rgba(40,40,40,.72) 22%,rgba(30,30,30,.6) 60%,rgba(30,30,30,.4) 100%)}
  .phero-cur--articles{--wave-h:52px}
  .phero-cur--articles .phero-cur__in{padding:28px 0 calc(var(--wave-h) + 40px)}
  .phero-cur--articles .phero-cur__h{font-size:34px}
  .phero-cur--articles .phero-cur__h::after{width:44px;margin-top:16px}
  .art-list{padding:8px 0 48px}
  .art-list__grid{grid-template-columns:1fr;gap:0}
  .art-list .acard{border-bottom:1px solid var(--line)}
  .art-list .acard a{display:grid;grid-template-columns:118px minmax(0,1fr);grid-template-rows:auto 1fr;gap:4px 14px;padding:16px 0;align-items:start}
  .art-list .acard .ratio{grid-row:1/3;border-radius:8px}
  .art-list .acard__cat{margin:2px 0 0;font-size:11.5px;gap:8px}
  .art-list .acard__cat::before{width:14px}
  .art-list .acard__t{font-size:16.5px;line-height:1.3}
  .art-list .acard:first-child a{display:flex;padding:0 0 22px}
  .art-list .acard:first-child .acard__cat{margin:14px 0 6px;font-size:12px}
  .art-list .acard:first-child .acard__t{font-size:22px}
  .art-list .acard:first-child .ratio{border-radius:10px}
}