/* =====================================================================
   ΘΑΡΡΟΣ NEWS — new theme, built from scratch
   Typography and metrics measured off the live site, then rewritten clean.
   Desktop pass. Mobile gets its own dedicated design later.
   ===================================================================== */

/* ------------------------------ Fonts ------------------------------- */
@font-face {
  font-family: "KASAntenna";
  src: url("../fonts/U2KASAntenna07Bold.otf") format("opentype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "GothamGreek";
  src: url("../fonts/GothamGRBold.otf") format("opentype");
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: "GothamGreek";
  src: url("../fonts/GothamGRBook.otf") format("opentype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "GothamGreekBook";
  src: url("../fonts/GothamGRBook.otf") format("opentype");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "PFBagueSans";
  src: url("../fonts/PFBagueSansPro-Bold.otf") format("opentype");
  font-weight: 700; font-display: swap;
}

/* ------------------------------ Tokens ------------------------------ */
:root {
  --navy:      #0f123b;
  --crimson:   #9e003a;
  --blue:      #00059e;
  --breaking:  #c1272d;   /* ΣΥΜΒΑΙΝΕΙ ΤΩΡΑ bar */
  --rust:      #b84e26;   /* ticker timestamps */
  --cream:     #f6efe9;
  --paper:     #ffffff;
  --line:      #e7e7e7;
  --ink:       #1f1f1f;
  --ink-soft:  #333333;
  --muted:     #808791;

  --title: "KASAntenna", Georgia, serif;   /* article headlines */
  --ui:    "GothamGreek", Arial, sans-serif;
  --serif: Georgia, "Times New Roman", serif;

  --wrap: 1400px;
  /* Real breathing room at every width. At 1280 this lands ~64px per side,
     at 1440 ~72px — the content never hugs the viewport edge. */
  --pad: clamp(28px, 5vw, 80px);
  --gap: 30px;
}

/* ------------------------------ Reset ------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.2; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }

.wrap { max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* =============================== Header ============================= */
.site-header { background: var(--cream); position: relative; z-index: 30; }

.header-top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 14px;
  padding-block: 10px 8px;
}
/* the issue date rides beside the burger, and the classifieds link beside the
   icons — both flanks on one line, so the header keeps to a single row */
.header-left {
  justify-self: start;
  display: flex; align-items: center; gap: 16px;
}
.header-right {
  justify-self: end;
  display: flex; flex-direction: row; align-items: center;
  gap: 16px;
}
.header-right .row-1 { display: flex; align-items: center; gap: 14px; }
.classifieds {
  margin-bottom: 2px;
  font-family: var(--ui); font-weight: 700; font-size: 14px;
  color: var(--navy); white-space: nowrap;
}
.classifieds:hover { color: var(--crimson); }

/* The bars collapse to the centre, then scissor open into an X — the
   middle sweeps 225deg while the bottom counter-rotates -90deg, each on
   its own delay so the fold reads as one motion. */
.hamburger {
  display: inline-flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 6px; padding: 6px; width: 46px; height: 34px;
  position: relative;
}
.hamburger span {
  width: 34px; height: 3px; background: #3b2f2a; border-radius: 3px;
  position: absolute; left: 6px;
  transition: top .1s .34s ease-in, bottom .1s .34s ease-in, opacity .1s ease-in;
}
.hamburger span:nth-child(1) { top: 7px; }
.hamburger span:nth-child(2) {
  top: 50%; margin-top: -1.5px;
  transition: transform .3s cubic-bezier(.55,.055,.675,.19);
}
.hamburger span:nth-child(3) {
  bottom: 7px;
  transition: bottom .1s .34s ease-in, transform .3s cubic-bezier(.55,.055,.675,.19);
}

.hamburger[aria-expanded="true"] span:nth-child(1) {
  top: 50%; margin-top: -1.5px; opacity: 0;
  transition: top .1s ease-out, opacity .1s .14s ease-out;
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  transform: rotate(225deg);
  transition-delay: .14s;
  transition-timing-function: cubic-bezier(.215,.61,.355,1);
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  bottom: 50%; margin-bottom: -1.5px;
  /* siblings, not nested as in the original, so the two rotations do not
     compose — this bar carries the combined 225deg - 90deg itself */
  transform: rotate(135deg);
  transition: bottom .1s ease-out, transform .3s .14s cubic-bezier(.215,.61,.355,1);
}

.brand { justify-self: center; text-align: center; }
.brand img { width: 470px; height: auto; margin-inline: auto; }

/* search + socials, socials ringed like the original */
.icon-search { color: var(--navy); display: inline-flex; padding: 4px; }
.icon-search svg { width: 27px; height: 27px; fill: currentColor; stroke: currentColor; stroke-width: .8; }
.socials { display: flex; align-items: center; gap: 12px; }
.socials a {
  width: 38px; height: 38px; border: 2.5px solid var(--navy); border-radius: 50%;
  display: grid; place-items: center; color: var(--navy);
}
.socials a svg { width: 18px; height: 18px; fill: currentColor; }
.socials a:hover, .icon-search:hover { background: var(--navy); color: #fff; }
.icon-search:hover { background: none; color: var(--crimson); }

.site-header { border-bottom: 2px solid var(--navy); }
.issue-date {
  display: inline-flex;
  white-space: nowrap;
  line-height: 15px;
  font-family: "GothamGreekBook", Georgia, serif;
  color: #000;
  letter-spacing: .04rem;
  font-size: 12.5px;
  font-weight: 400;
}

.classifieds-bar { border-top: 2px solid var(--navy); }
.classifieds-bar .wrap { display: flex; justify-content: flex-end; }
.classifieds-bar a {
  font-family: var(--ui); font-weight: 700; font-size: 15px;
  color: var(--navy); padding: 12px 0;
}
.classifieds-bar a:hover { color: var(--crimson); }

/* the soft drop shadow under the whole header block */
.header-shadow { height: 14px; background: linear-gradient(rgba(0,0,0,.10), rgba(0,0,0,0)); }

/* Category nav — hidden at rest, revealed by the compact sticky header */
.main-nav { display: none; }
.main-nav > ul { display: flex; justify-content: center; gap: 24px; padding-bottom: 4px; }
.main-nav a {
  font-family: var(--serif); font-size: 14px; color: var(--ink-soft);
  letter-spacing: .4px; padding: 3px 0; white-space: nowrap;
}
.main-nav a:hover { color: var(--crimson); }

/* "ΠΕΡΙΣΣΟΤΕΡΑ" opens a dropdown of the remaining categories */
.main-nav .has-sub { position: relative; }
.main-nav .has-sub > a::after { content: " ▾"; font-size: 11px; }
.main-nav .sub {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(6px);
  background: #fff; min-width: 250px; padding: 10px 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.18);
  opacity: 0; visibility: hidden; transition: opacity .18s ease, transform .18s ease;
  z-index: 40;
}
.main-nav .has-sub:hover .sub,
.main-nav .has-sub:focus-within .sub {
  opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.main-nav .sub li { display: block; }
.main-nav .sub a {
  display: block; padding: 9px 22px; font-size: 15px; color: var(--ink-soft);
}
.main-nav .sub a:hover { background: var(--cream); color: var(--crimson); }

/* ------------------------- Side drawer menu -------------------------
   Cream panel, navy bold entries — matches the live site's off-canvas. */
.drawer {
  position: fixed; top: var(--header-h, 0px); left: 0; bottom: 0; width: 390px; max-width: 88vw;
  background: var(--cream); color: var(--navy); z-index: 120;
  transform: translateX(-100%); transition: transform .3s ease;
  display: flex; flex-direction: column; overflow-y: auto;
  box-shadow: 4px 0 24px rgba(0,0,0,.18);
}
.drawer.open { transform: translateX(0); }

.drawer-top { height: 26px; }
.drawer-close { color: var(--navy); display: inline-flex; padding: 2px; }
.drawer-close svg { width: 30px; height: 30px; stroke: currentColor; stroke-width: 2.6; fill: none; }
.drawer-close:hover { color: var(--crimson); }

/* a full-width rule that fades at its ends */
.drawer .divider { height: 2px; margin: 24px 30px; background: var(--navy); }

.drawer nav ul { display: block; }
.drawer nav > ul > li > a,
.drawer .group > button {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 11px 30px;
  font-family: var(--serif); font-weight: 700; font-size: 20px;
  color: var(--navy); letter-spacing: .6px; text-align: left;
}
.drawer nav > ul > li > a:hover,
.drawer .group > button:hover { color: var(--crimson); }

/* circled chevron on entries that expand */
.drawer .chev {
  width: 34px; height: 34px; border: 2px solid var(--navy); border-radius: 50%;
  display: grid; place-items: center; flex: none;
  color: var(--navy);
  transition: transform .25s ease, background .2s ease, color .2s ease;
}
.drawer .chev svg { width: 17px; height: 17px; }
.drawer .group > button:hover .chev { background: var(--navy); color: var(--cream); }
.drawer .group.open .chev { transform: rotate(180deg); }
.drawer .group ul { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
.drawer .group.open ul { max-height: 700px; }
.drawer .group ul a {
  display: block; padding: 9px 30px 9px 46px;
  font-family: var(--serif); font-size: 17px; color: #4a4f76;
}
.drawer .group ul a:hover { color: var(--crimson); }

.drawer-foot { padding: 0 30px 34px; }
.drawer-logo { display: block; width: auto; height: auto; margin-bottom: 22px; }
.drawer-logo img { width: 230px; height: auto; display: block; }
.drawer-foot .socials-row { display: flex; gap: 12px; }
.drawer-foot .socials-row a {
  width: 38px; height: 38px; border: 2px solid var(--navy); border-radius: 50%;
  display: grid; place-items: center; color: var(--navy);
}
.drawer-foot .socials-row a svg { width: 16px; height: 16px; fill: currentColor; }
.drawer-foot .socials-row a:hover { background: var(--navy); color: var(--cream); }

.drawer-backdrop {
  position: fixed; inset: var(--header-h, 0px) 0 0 0; background: rgba(0,0,0,.45); z-index: 110;
  opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
.drawer-backdrop.open { opacity: 1; pointer-events: auto; }
body.drawer-open { overflow: hidden; }

/* ---------------------- Μεγάλο μενού (desktop) ----------------------
   Στην οθόνη υπολογιστή το hamburger δεν βγάζει συρτάρι αλλά ένα πλήρους
   πλάτους ταμπλό κάτω από την κεφαλίδα: όλες οι κατηγορίες σε στήλες, με
   κόκκινη γραμμή κάτω από κάθε επικεφαλίδα και το Θ ως υδατογράφημα. */
.mega {
  position: fixed; top: var(--header-h, 0px); left: 0; right: 0;
  max-height: calc(100vh - var(--header-h, 0px));
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--cream); color: var(--ink);
  border-bottom: 2px solid var(--navy);
  z-index: 120;
  opacity: 0; visibility: hidden; transform: translateY(-10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s .22s;
  box-shadow: 0 22px 40px rgba(0,0,0,.30);
}
.mega.open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .22s ease, visibility 0s;
}
.mega .wrap { position: relative; padding-block: 22px 26px; }

/* οι ομάδες ρέουν σε στήλες, καμία δεν κόβεται στη μέση */
.mega-cols { columns: 5; column-gap: 36px; }
.mega-group { break-inside: avoid; margin-bottom: 15px; }
.mega-title {
  display: block;
  font-family: var(--serif); font-weight: 700; font-size: 15px;
  letter-spacing: .5px; color: var(--crimson);
  padding-bottom: 4px; margin-bottom: 5px;
  border-bottom: 2px solid var(--crimson);
}
.mega-title:hover { color: var(--navy); }
.mega-group ul { display: block; }
.mega-group li a {
  display: block; padding: 1px 0;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.5;
  color: #000;
}
.mega-group li a:hover { color: var(--crimson); text-decoration: underline; text-underline-offset: 3px; }

/* το Θ του τίτλου, σε μέγεθος σφραγίδας, μισοκομμένο στο δεξί περιθώριο */
.mega-mark {
  position: absolute; right: 4px; bottom: 0;
  width: 250px; height: auto; opacity: .10;
  filter: brightness(0);
  pointer-events: none; user-select: none;
}

/* το συρτάρι ανήκει πλέον στο κινητό — στην οθόνη υπολογιστή παίρνει
   τη θέση του το ταμπλό */
@media (min-width: 781px) {
  .drawer { display: none; }
}

/* --------------------- Compact header on scroll --------------------
   The tall masthead collapses into a slim sticky bar that also exposes
   the category nav, so navigation stays reachable down the page. */
.site-header.stuck {
  position: fixed; top: 0; left: 0; right: 0;
  box-shadow: 0 2px 12px rgba(0,0,0,.14);
  animation: dropin .28s ease;
}
@keyframes dropin { from { transform: translateY(-100%); } to { transform: translateY(0); } }

.site-header.stuck .header-top { padding-block: 8px 2px; }
.site-header.stuck .brand img { width: 290px; }
.site-header.stuck .brand .tagline { margin-top: 4px; font-size: 11px; letter-spacing: 3.4px; }
.site-header.stuck .issue-date { display: none; }
.site-header.stuck .main-nav { display: block; }
.site-header.stuck .socials a { width: 30px; height: 30px; }
.site-header.stuck .icon-search svg { width: 21px; height: 21px; }
.site-header.stuck .hamburger span { width: 28px; height: 3px; }
.site-header.stuck .header-shadow { display: none; }

/* keeps the page from jumping when the header becomes fixed */
.header-spacer { display: none; }
.header-spacer.on { display: block; }

/* --------------------- Search overlay (protothema-style) ------------ */
.search-panel {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  background: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.18);
  transform: translateY(-100%); transition: transform .28s ease;
}
.search-panel.open { transform: translateY(0); }
.search-panel .wrap { display: flex; align-items: center; gap: 20px; padding-block: 26px; }
.search-panel .glass { color: #111; display: inline-flex; }
.search-panel .glass svg { width: 30px; height: 30px; fill: currentColor; }
.search-panel input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: var(--ui); font-size: 26px; color: #111; min-width: 0;
}
.search-panel input::placeholder { color: #b5b5b5; }
.search-panel .submit { font-family: var(--ui); font-weight: 700; font-size: 20px; color: #111; }
.search-panel .submit:hover { color: var(--crimson); }
.search-panel .close { font-size: 34px; line-height: 1; color: #111; padding: 0 4px; }
.search-panel .close:hover { color: var(--crimson); }
.search-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 90;
  opacity: 0; pointer-events: none; transition: opacity .28s ease;
}
.search-backdrop.open { opacity: 1; pointer-events: auto; }

/* ======================= Breaking news strip ======================== */
/* ======================= Breaking news strip ========================
   Rotating headlines; the flag's time and the headline change together.
   Dots are rendered only when there is more than one item. */
.breaking {
  background: var(--breaking); color: #fff;
  box-shadow: 0 2px 10px rgba(193,39,45,.35);
}
.breaking .wrap { display: flex; align-items: center; gap: 22px; padding-block: 13px; }

.breaking .flag { display: flex; align-items: center; gap: 14px; flex: none; }
.breaking .bell {
  width: 44px; height: 44px; border: 2px solid rgba(255,255,255,.55); border-radius: 50%;
  display: grid; place-items: center;
  font-family: var(--ui); font-weight: 700; font-size: 23px; line-height: 1;
}
.breaking .flag-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.3; }
.breaking .flag-text strong {
  font-family: var(--ui); font-weight: 700;
  font-size: 16px; letter-spacing: 1.4px; text-transform: uppercase;
}
.breaking .bk-time { font-family: var(--ui); font-size: 13px; opacity: .85; }

/* dots, left of the divider */
.breaking .bk-dots { display: flex; align-items: center; gap: 7px; flex: none; }
.breaking .bk-dots button {
  width: 9px; height: 9px; border-radius: 50%; padding: 0;
  background: rgba(255,255,255,.42); transition: background .2s, transform .2s;
}
.breaking .bk-dots button:hover { background: rgba(255,255,255,.75); }
.breaking .bk-dots button.active { background: #fff; transform: scale(1.15); }

.breaking .sep { width: 1px; align-self: stretch; background: rgba(255,255,255,.45); flex: none; }

/* headlines stack in place so the bar keeps a steady height */
.breaking .bk-track { position: relative; flex: 1; min-width: 0; display: grid; }
.breaking .bk-item {
  grid-area: 1 / 1;
  display: flex; align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .35s ease;
}
.breaking .bk-item.active { opacity: 1; visibility: visible; }
.breaking .bk-item h2 {
  font-family: var(--title); font-weight: 400;
  font-size: clamp(19px, 1.7vw, 27px); line-height: 1.25;
}
.breaking .bk-item:hover h2 { text-decoration: underline; }

/* =============================== Hero =============================== */
main { padding-bottom: 40px; }
/* The hero's height is set by the slider column alone. The feed column is
   taken out of the height calculation (its contents are absolutely placed),
   so a long feed can never stretch the row — it scrolls inside instead. */
.hero { display: grid; grid-template-columns: 355px 1fr; gap: var(--gap); align-items: stretch; padding-block: 26px 18px; }
.hero-side { position: relative; min-height: 0; }
.hero-side-inner {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; min-height: 0;
}

/* --------------------------- News ticker --------------------------- */
.ticker { background: transparent; display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.ticker-head { display: flex; align-items: center; gap: 11px; padding-bottom: 12px; }
.ticker-head h2 { font-family: var(--ui); font-weight: 700; font-size: 24px; color: var(--ink-soft); letter-spacing: .5px; }
.mark { width: 30px; height: 30px; flex: none; }
.mark.lg { width: 37px; height: 37px; }

/* the feed scrolls inside its own column; once it bottoms out the page
   takes over again (default chaining), so it never traps the wheel */
.ticker-list {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c9c2b9 transparent;
  padding-right: 6px;
}
.ticker-list::-webkit-scrollbar { width: 6px; }
.ticker-list::-webkit-scrollbar-track { background: transparent; }
.ticker-list::-webkit-scrollbar-thumb { background: #c9c2b9; border-radius: 3px; }
.ticker-list::-webkit-scrollbar-thumb:hover { background: #a8a099; }

/* the live-feed mark breathes, to read as "updating" */
.mark.pulse { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { opacity: 1;   transform: scale(1); }
  50%      { opacity: .45; transform: scale(.86); }
}
@media (prefers-reduced-motion: reduce) {
  .mark.pulse { animation: none; }
}
/* Η ώρα κρατά τη στήλη της, με την ημερομηνία από κάτω σε μικρότερα
   γράμματα· η στήλη είναι όσο χρειάζεται για να χωρά ολόκληρη. */
.ticker-item {
  display: grid; grid-template-columns: 66px 1fr; gap: 12px;
  padding: 11px 0; border-bottom: 1px solid #ddd8d2;
}
.ticker-item:last-child { border-bottom: 0; }
.ticker-time {
  display: flex; flex-direction: column; gap: 2px;
  font-family: var(--ui); font-weight: 700; font-size: 13px; color: var(--rust);
}
.ticker-date {
  font-weight: 400; font-size: 10.5px; letter-spacing: .2px;
  color: var(--muted); white-space: nowrap;
}
.ticker-title { font-family: var(--ui); font-weight: 700; font-size: 14px; line-height: 1.25; color: #000; }
.ticker-item:hover .ticker-title { color: var(--crimson); }

.btn-all {
  flex: none;
  display: block; text-align: center;
  background: var(--navy); color: #fff;
  font-family: var(--serif); font-weight: 700; letter-spacing: 2px;
  padding: 20px 16px; margin-top: 18px;
  border-radius: 16px;
  text-transform: uppercase; font-size: 15px;
  transition: background .2s ease;
}
.btn-all:hover { background: var(--crimson); }

/* ------------------------------ Hero main -------------------------- */
.hero-main { display: flex; flex-direction: column; gap: 16px; }
.slider { position: relative; overflow: hidden; }
.slide { display: none; position: relative; }
.slide.active { display: block; }
.slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.slide .overlay {
  position: absolute; inset: auto 0 0 0;
  padding: 90px 30px 26px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
  color: #fff;
}
/* amna-style headline: heavy serif, tight leading, with a lighter
   kicker line sitting above it */
.slide .kicker {
  margin: 0 0 8px;
  font-family: var(--ui); font-weight: 400;
  font-size: 17px; line-height: 1.3; color: rgba(255,255,255,.92);
  max-width: 900px;
}
.slide h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(26px, 2.4vw, 38px); line-height: 1.12;
  color: #fff; max-width: 960px; letter-spacing: .2px;
}
.badge {
  display: inline-block; background: var(--navy); color: #fff;
  font-family: var(--ui); font-weight: 700; font-size: 12px; letter-spacing: 1.2px;
  padding: 6px 14px; margin-bottom: 12px; text-transform: uppercase;
}

.slider-nav { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
/* Το <button> κεντράρει από μόνο του κάθετα ό,τι έχει μέσα του: όποιο κουτί
   είχε κοντύτερο τίτλο κατέβαζε την εικόνα του λίγα εικονοστοιχεία και οι
   τέσσερις φωτογραφίες έπαυαν να ευθυγραμμίζονται. Ως flex στήλη, όλες
   ξεκινούν από την κορυφή. */
.slider-nav button {
  display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
  text-align: left; padding: 0; opacity: .6; transition: opacity .2s;
}
.slider-nav button.active, .slider-nav button:hover { opacity: 1; }
/* display:block, ώστε η εικόνα να μη στέκεται πάνω στη γραμμή βάσης του
   κουμπιού: ως inline άφηνε κενό descender και ένα από τα τέσσερα κουτιά
   έβγαινε λίγα εικονοστοιχεία πιο ψηλά από τα υπόλοιπα. */
.slider-nav img {
  display: block; width: 100%;
  aspect-ratio: 16 / 9; object-fit: cover; vertical-align: top;
}
.slider-nav .meta {
  display: block; margin-top: 10px;
  font-family: var(--ui); font-size: 12px; color: var(--muted);
}
.slider-nav h4 { font-family: var(--title); font-weight: 400; font-size: 14px; line-height: 1.3; color: #000; margin-top: 6px; }

/* ============================= Sections ============================= */
.section { margin-top: 74px; }
/* the first section after the ad row needs clear air, not none */
main > .wrap + .section { margin-top: 62px; }
/* bottom-aligned so the rule sits on the title's baseline, not through its middle */
.section-head { display: flex; align-items: flex-end; gap: 12px; margin-bottom: 22px; }
.section-head h2 {
  font-family: var(--serif); font-weight: bold; font-size: 31px;
  color: #0F123B; white-space: nowrap; line-height: 1;
}
/* 1px rule with a soft glow — reads thicker, exactly as on the live site */
.section-head .rule {
  flex: 1; height: 1px;
  border-top: 1px solid #313131;
  box-shadow: 0 0 5px 0 #888;
  margin-bottom: 7px;
}
.section-head .arrows { display: flex; gap: 10px; margin-bottom: 4px; }
.section-head .arrows button {
  width: 44px; height: 44px; border: 2px solid #4a4a4a; border-radius: 50%;
  color: #111; font-size: 22px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  transition: background .18s, color .18s, border-color .18s;
}
.section-head .arrows button:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.section-head .arrows button:disabled { opacity: .35; cursor: default; }
.section-head .arrows button:disabled:hover { background: none; color: #333; border-color: #b9b3ab; }

.section.tinted { background: #efeae4; padding: 34px 0 38px; }

/* ------------------------------- ΑΓΟΡΑ -----------------------------
   Warm backdrop that fades out before the cards, plain titles in a
   fixed 5-line box with a hairline underneath. */
.section.agora {
  background: linear-gradient(180deg, #f7e7b8 0%, #f8eed3 38%, var(--cream) 78%);
  padding: 36px 0 42px;
}
.section.agora .card .body { background: none; padding: 0; }
.section.agora .card .meta { color: var(--muted); margin: 10px 0 6px; }
.section.agora .card h3 {
  color: var(--ink);
  /* five lines, always — keeps every card the same height */
  line-height: 1.29;
  height: calc(5 * 1.29em);
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 12px;
}
.section.agora .card > a:first-child { display: block; border-bottom: 1px solid #d9d2c8; padding-bottom: 14px; }
.section.agora .card .see-more { border: 0; }
.section.agora .card:hover h3 { color: var(--crimson); text-decoration: none; }

/* ------------------------------ Cards ------------------------------ */
.card .thumb { overflow: hidden; }
.card .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .45s ease; }
.card:hover .thumb img { transform: scale(1.05); }
.card .meta { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--muted); margin: 10px 0 6px; }
.card h3 { font-family: var(--title); font-weight: 400; font-size: 17px; line-height: 1.19; color: var(--ink); }
.card:hover h3 { color: var(--crimson); }

/* Plaque variant: headline painted on a colour block */
.card.plaque .body { background: var(--crimson); color: #fff; padding: 12px 14px 15px; }
.card.plaque.blue .body { background: var(--blue); }
.card.plaque .meta { color: rgba(255,255,255,.82); margin: 0 0 6px; }
.card.plaque h3 { color: #fff; line-height: 1.29; }
.card.plaque:hover h3 { color: #fff; text-decoration: underline; }

/* Grids */
.grid { display: grid; gap: var(--gap); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-5 { grid-template-columns: repeat(5, 1fr); }

/* Section with an ad rail on the right */
.with-rail { display: grid; grid-template-columns: 1fr 300px; gap: 40px; align-items: start; }

/* Lead article */
.lead { display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: center; margin-bottom: 30px; }
.lead .thumb img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.lead .meta { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.lead h3 { font-family: var(--title); font-weight: 400; font-size: 32px; line-height: 1.1; color: var(--ink); }
.lead:hover h3 { color: var(--crimson); }
.lead.text-first .thumb { order: 2; }

/* Big feature + stacked list */
.feature-list { display: grid; grid-template-columns: 677fr 568fr; gap: 56px; align-items: start; }
.feature-big .thumb img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.feature-big .meta { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--muted); margin: 14px 0 8px; }
.feature-big h3 { font-family: var(--title); font-weight: 400; font-size: 26px; line-height: 1.15; color: var(--ink); }
.feature-big:hover h3 { color: var(--crimson); }

.list-stack .row {
  display: grid; grid-template-columns: 150px 1fr; gap: 16px;
  padding: 14px 0; border-bottom: 1px solid #ddd8d2;
}
.list-stack .row:first-child { padding-top: 0; }
.list-stack .row:last-child { border-bottom: 0; }
.list-stack img { aspect-ratio: 16 / 9; object-fit: cover; }
.list-stack .meta { font-family: var(--serif); font-weight: 600; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.list-stack h3 { font-family: var(--title); font-weight: 400; font-size: 16px; line-height: 1.2; color: var(--ink); }
.list-stack .row:hover h3 { color: var(--crimson); }

/* Round-avatar carousel */
.avatars { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--gap); }
.avatars .item { text-align: center; }
.avatars img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin: 0 auto 16px; }
.avatars h3 { font-family: var(--title); font-weight: 400; font-size: 15px; line-height: 1.35; color: var(--ink); }
.avatars .item:hover h3 { color: var(--crimson); }

/* ------------------------------ Ad slots --------------------------- */
/* The rail follows the reader down its own section. `align-items: start`
   on .with-rail keeps the column from stretching, which sticky needs.
   The offset clears the compact sticky header. */
.rail {
  display: flex; flex-direction: column; gap: 20px;
  position: sticky; top: 110px;
}
/* Ad slots. Placeholders now; each one carries a stable
   tharros_ads_* id for the future ad manager to target. */
.ad {
  background: #e6e2dc;
  border: 1px dashed #c3bcb2;
  display: grid; place-items: center;
  min-height: 250px; padding: 10px; text-align: center;
}
.ad .ad-label {
  font-family: var(--ui); font-size: 11px; letter-spacing: .6px;
  color: #9d968c; word-break: break-all;
}
.ad.tall { min-height: 600px; }
.ad-banner { min-height: 90px; margin: 40px 0 46px; }

/* Quote block */
.quote { text-align: center; padding: 50px 20px; }
.quote h2 { font-family: var(--serif); font-weight: 700; font-size: 26px; color: var(--navy); letter-spacing: 4px; margin-bottom: 22px; }
.quote p { font-family: var(--title); font-weight: 400; font-size: 20px; color: var(--ink-soft); margin: 0 0 12px; }
.quote cite { font-family: var(--serif); font-size: 13px; color: var(--muted); font-style: normal; }

/* =============================== Footer ============================ */
.site-footer { background: var(--navy); color: #c9cce4; margin-top: 50px; }
.footer-main { text-align: center; padding-block: 46px 38px; }
.footer-main img.flogo { height: 54px; margin: 0 auto 26px; }
.footer-socials { display: flex; justify-content: center; gap: 14px; margin-bottom: 30px; }
.footer-socials a {
  width: 44px; height: 44px; border: 1.5px solid rgba(255,255,255,.45); border-radius: 50%;
  display: grid; place-items: center; color: #fff;
}
.footer-socials a svg { width: 17px; height: 17px; fill: currentColor; }
.footer-socials a:hover { background: #fff; color: var(--navy); }


.footer-links {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 34px;
  border-top: 1px solid rgba(255,255,255,.14); padding: 20px 0;
  font-family: var(--ui); font-weight: 700; font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
}
.footer-links a:hover { color: #fff; }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14); padding: 16px 0;
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  font-family: var(--ui); font-size: 12.5px; color: #9298c2;
}
.footer-bottom .mht { color: #fff; font-weight: 700; letter-spacing: .5px; }

/* Back-to-top */
.to-top {
  position: fixed; right: 26px; bottom: 26px; z-index: 60;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--navy); color: #fff; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.28);
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.to-top.show { opacity: 1; pointer-events: auto; }
.to-top:hover { background: var(--crimson); }
.to-top svg { width: 22px; height: 22px; fill: currentColor; }

/* ====================== Safety net for narrow screens ==============
   Not the real mobile design — that is a separate pass. This only keeps
   things from overflowing while we iterate on desktop. */
@media (max-width: 1200px) {
  :root { --pad: 20px; }
  .hero, .with-rail, .feature-list { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .avatars { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .grid-3, .grid-4, .grid-5, .slider-nav { grid-template-columns: repeat(2, 1fr); }
  .lead, .avatars { grid-template-columns: 1fr; }
  .lead.text-first .thumb { order: 0; }
  .section-head h2 { font-size: 26px; }
  .breaking .wrap { flex-wrap: wrap; gap: 14px; }
  .footer-bottom { flex-direction: column; gap: 10px; }
}


/* ------------------------ ΠΙΟ ΔΙΑΒΑΣΜΕΝΑ carousel ------------------
   Five cards in view, dotted rules between them, arrows page through. */
.carousel { overflow: hidden; }
.carousel-track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 4 * var(--gap)) / 5);
  gap: var(--gap);
  overflow-x: auto;
  /* Explicit, and load-bearing: with overflow-x:auto the spec promotes a
     `visible` overflow-y to `auto`, which traps the page's vertical scroll
     whenever the pointer is over the carousel. */
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-behavior: smooth;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-track > .card { scroll-snap-align: start; position: relative; }

/* dotted divider between neighbouring cards */
.carousel-track > .card + .card::before {
  content: "";
  position: absolute;
  left: calc(var(--gap) / -2);
  top: 0; bottom: 0;
  border-left: 2px dotted #b6b0a8;
}

.mostread .card h3 { font-size: 17px; line-height: 1.29; }
.mostread .card .meta { font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--muted); }

/* "see more" link */
.see-more-row { margin-top: 22px; }
.see-more {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 14px; padding: 0;
  font-family: var(--ui); font-weight: 700; font-size: 13px;
  letter-spacing: 1.4px; text-transform: uppercase; color: #111;
  border: 0;
}
.see-more:hover { color: var(--crimson); }


/* ================ ΚΑΛΑΜΑΤΙΑΝΟΙ ΤΟΥ ΕΞΩΤΕΡΙΚΟΥ =====================
   A destination block: deep navy field with a faint travel texture,
   centred title, tiles that wash navy on hover, arrows either side. */
.section.abroad {
  position: relative;
  overflow: hidden;
  padding: 56px 0 64px;
  margin-top: 60px;
  background: radial-gradient(120% 90% at 50% 0%, #1c2258 0%, #12163f 55%, #0b0e2c 100%);
}

/* texture: scattered "city lights" + two long flight arcs */
.abroad-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.6px),
    radial-gradient(rgba(255,255,255,.10) 1px, transparent 1.6px);
  background-size: 46px 46px, 87px 87px;
  background-position: 0 0, 23px 31px;
  opacity: .55;
  -webkit-mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
          mask-image: radial-gradient(80% 70% at 50% 40%, #000 30%, transparent 100%);
}
.abroad-bg::after {
  content: "";
  position: absolute; inset: -10% -5%;
  background:
    radial-gradient(60% 40% at 12% 18%, rgba(158,0,58,.22), transparent 60%),
    radial-gradient(50% 40% at 88% 78%, rgba(0,90,190,.20), transparent 60%);
}

.abroad-head { position: relative; text-align: center; margin-bottom: 40px; }
.abroad-head h2 {
  font-family: var(--serif); font-weight: bold;
  font-size: clamp(28px, 2.6vw, 40px); color: #fff; letter-spacing: 1px;
}
.abroad-head p {
  margin: 12px 0 0;
  font-family: var(--ui); font-size: 15px; color: rgba(255,255,255,.72);
}

/* three large tiles in view (the shared track defaults to five) */
.carousel-track.tiles { grid-auto-columns: calc((100% - 2 * var(--gap)) / 3); }

/* carousel with arrows outside the track */
.abroad .carousel {
  position: relative;
  padding-inline: 62px;
}
.abroad .carousel .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--navy);
  font-size: 24px; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: background .2s, color .2s, transform .2s;
  z-index: 3;
}
.abroad .carousel .nav:hover { background: var(--crimson); color: #fff; }
.abroad .carousel .nav:active { transform: translateY(-50%) scale(.94); }
.abroad .carousel .nav.prev { left: 0; }
.abroad .carousel .nav.next { right: 0; }

.abroad .tile a { display: block; position: relative; overflow: hidden; border-radius: 3px; }
.abroad .tile img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  min-height: 460px;
  transition: transform .55s ease;
}
.abroad .tile:hover img { transform: scale(1.05); }
.abroad .tile .wash {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(4,6,22,.9) 0%, rgba(4,6,22,.3) 48%, rgba(4,6,22,0) 72%);
  transition: background .3s ease;
}
.abroad .tile:hover .wash { background: rgba(15,18,59,.88); }

.abroad .tile-body {
  position: absolute; inset: auto 0 0 0;
  padding: 0 26px 26px;
  color: #fff;
  transition: transform .3s ease;
}
.abroad .tile:hover .tile-body { transform: translateY(-4px); }
.abroad .tile h3 {
  font-family: var(--title); font-weight: 400;
  font-size: 21px; line-height: 1.3; color: #fff;
}
.abroad .tile .meta {
  font-family: var(--ui); font-size: 12.5px; color: rgba(255,255,255,.85);
  margin-top: 14px;
}
.abroad .tile .underline {
  display: block; height: 2px; width: 78%;
  background: rgba(255,255,255,.9); margin-top: 16px;
}


/* =============================== VIDEOS ============================
   Warm red field that fades to the page, cards that lift as they come
   forward, play badge on every thumbnail. */
.section.videos {
  position: relative; overflow: hidden;
  padding: 54px 0 56px; margin-top: 60px;
}
.videos-bg {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, #c1272d 0%, #d4544f 30%, #eec9bf 62%, var(--cream) 100%);
}
.videos-bg::after {
  content: ""; position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.6px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(#000, transparent 60%);
          mask-image: linear-gradient(#000, transparent 60%);
}

.videos-head { position: relative; text-align: center; margin-bottom: 34px; }
.videos-head h2 {
  font-family: var(--serif); font-weight: bold;
  font-size: clamp(28px, 2.6vw, 40px); color: #fff; letter-spacing: 1px;
}
.videos-head p {
  margin: 10px 0 0; font-family: var(--ui); font-size: 15px; color: rgba(255,255,255,.85);
}

.videos .carousel { position: relative; padding-inline: 62px; }
.videos .carousel .nav {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--breaking);
  font-size: 24px; line-height: 1; display: grid; place-items: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.3); z-index: 3;
  transition: background .2s, color .2s;
}
.videos .carousel .nav:hover { background: var(--navy); color: #fff; }
.videos .carousel .nav.prev { left: 0; }
.videos .carousel .nav.next { right: 0; }

.carousel-track.clips { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); padding-block: 10px 4px; }

.videos .clip a { display: block; }
.videos .clip-media { position: relative; overflow: hidden; border-radius: 3px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.videos .clip img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .45s ease;
}
/* the card comes forward */
.videos .clip { transition: transform .35s ease; }
.videos .clip:hover { transform: translateY(-8px) scale(1.04); z-index: 2; }
.videos .clip:hover img { transform: scale(1.06); }

.videos .play {
  position: absolute; inset: 0; margin: auto;
  width: 58px; height: 58px; border-radius: 50%;
  background: rgba(193,39,45,.92);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
  transition: transform .3s ease, background .3s ease;
}
.videos .play::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  width: 0; height: 0;
  border-left: 18px solid #fff;
  border-top: 11px solid transparent;
  border-bottom: 11px solid transparent;
  transform: translateX(3px);
}
.videos .clip:hover .play { transform: scale(1.12); background: var(--navy); }

.videos .clip h3 {
  font-family: var(--title); font-weight: 400;
  font-size: 16px; line-height: 1.3; color: var(--ink); margin-top: 14px;
}
.videos .clip .meta { font-family: var(--ui); font-size: 12px; color: #7a6f68; margin-top: 8px; }

.see-more-row.centered { text-align: center; margin-top: 30px; }

/* ========================== ΑΡΧΕΙΟ ΘΑΡΡΟΥΣ =========================
   Aged-paper tones for the whole row — it is a newspaper archive. */
.section.archive {
  position: relative;
  padding: 46px 0 52px; margin-top: 56px;
  background: linear-gradient(180deg, #e8dcc3 0%, #efe6d3 45%, #f4ecdd 100%);
  border-top: 1px solid #d9c9a8;
  border-bottom: 1px solid #d9c9a8;
}
/* faint ruled-paper texture */
.section.archive::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(
    to bottom, rgba(120,95,55,.06) 0 1px, transparent 1px 26px);
}
.section.archive > .wrap { position: relative; }
.section.archive .section-head h2 { color: #5b4526; }
.section.archive .section-head .rule { border-top-color: #9b8663; box-shadow: 0 0 5px 0 #b9a68a; }
.section.archive .feature-big h3,
.section.archive .list-stack h3 { color: #3f3121; }
.section.archive .meta { color: #8a7856; }
.section.archive .list-stack .row { border-bottom-color: #d8c9ab; }


/* Two full-bleed colour bands sit back to back — no cream strip between. */
.section.archive + .section.videos,
.section.videos + .section.archive,
.section.people + .section.archive,
.section.archive + .section.people,
.section.opinions + .section.people,
.section.people + .section.opinions,
.section.videos + .section.abroad,
.section.abroad + .section.videos { margin-top: 0; }


/* =============================== ΚΟΣΜΟΣ ===========================
   Slate band that begins below the top row, so the three large photos
   break out above it. Six compact items sit underneath. */
.section.world .world-band {
  position: relative;
  background: #ffffff;
  box-shadow: 0 2px 14px rgba(20,25,45,.08);
  padding: 0 30px 30px;
  margin-top: 64px;            /* room for the photos to overhang */
}
.section.world .world-top {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
.section.world .world-top .thumb { margin-top: -34px; }   /* the overhang */
.section.world .world-top img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  transition: transform .45s ease;
}
.section.world .wcard:hover img { transform: scale(1.04); }
.section.world .wcard .meta {
  font-family: var(--ui); font-size: 12.5px; color: var(--muted);
  margin: 14px 0 8px;
}
.section.world .wcard h3 {
  font-family: var(--title); font-weight: 400;
  font-size: 20px; line-height: 1.3; color: var(--ink);
  padding-bottom: 18px; border-bottom: 1px solid #e2e2e2;
}
.section.world .wcard:hover h3 { text-decoration: underline; }

.section.world .world-rest {
  display: grid; grid-template-columns: repeat(3, 1fr);
  column-gap: var(--gap); row-gap: 0;
}
.section.world .wrow a {
  display: grid; grid-template-columns: 130px 1fr; gap: 16px;
  padding: 18px 0; border-bottom: 1px solid #e2e2e2;
}
.section.world .wrow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.section.world .wrow .meta { font-family: var(--ui); font-size: 12px; color: var(--muted); margin-bottom: 7px; }
.section.world .wrow h3 {
  font-family: var(--title); font-weight: 400;
  font-size: 15px; line-height: 1.32; color: var(--ink);
}
.section.world .wrow:hover h3 { text-decoration: underline; }

/* ============================== ΑΠΟΨΕΙΣ ===========================
   Pale blue band, black-and-white portraits, centred serif headlines. */
.section.opinions {
  background: #eaf3fa;
  padding: 40px 0 46px;
  margin-top: 56px;
}
.section.opinions .section-head { margin-bottom: 30px; }
.section.opinions .carousel { position: relative; padding-inline: 56px; }
.section.opinions .carousel .nav,
.section.people .carousel .nav {
  position: absolute; top: 42%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 2px solid var(--navy); color: var(--navy);

  font-size: 24px; font-weight: 700; line-height: 1;
  display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(20,25,45,.18);
  transition: background .2s, color .2s;
  z-index: 3;
}
.section.opinions .carousel .nav:hover,
.section.people .carousel .nav:hover { background: var(--navy); color: #fff; }
.section.people .carousel .nav.prev { left: 0; }
.section.people .carousel .nav.next { right: 0; }
.section.opinions .carousel .nav.prev { left: 0; }
.section.opinions .carousel .nav.next { right: 0; }

.carousel-track.faces { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }

.section.opinions .face { text-align: center; }
.section.opinions .face img {
  width: 172px; height: 172px; border-radius: 50%; object-fit: cover;
  margin: 0 auto 18px;
  filter: grayscale(100%);
  transition: filter .35s ease, transform .35s ease;
}
.section.opinions .face:hover img { filter: grayscale(0); transform: scale(1.04); }
.section.opinions .face .meta {
  font-family: var(--ui); font-size: 12.5px; color: #7b8794; margin-bottom: 12px;
}
.section.opinions .face h3 {
  font-family: var(--serif); font-weight: 700;
  font-size: 19px; line-height: 1.38; color: #12213a;
}
.section.opinions .face:hover h3 { color: var(--crimson); }


/* ====================== ΣΥΝΕΝΤΕΥΞΕΙΣ-ΠΡΟΣΩΠΑ ======================
   White cards on a light grey field; the portrait straddles the card's
   top edge, half above it. */
.section.people {
  background: #eceef2;
  padding: 40px 0 44px;
  margin-top: 56px;
}
/* four in view, arrows either side; the track needs headroom so the
   portraits can hang over the cards' top edge */
.section.people .carousel { position: relative; padding-inline: 60px; margin-top: 16px; }
.carousel-track.people-track { grid-auto-columns: calc((100% - 3 * var(--gap)) / 4); }
.section.people .person { position: relative; padding-top: 59px; display: flex; }
.section.people .person > a { display: flex; flex-direction: column; width: 100%; }

.section.people .avatar {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 118px; height: 118px; border-radius: 50%;
  object-fit: cover;
  border: 5px solid #eceef2;
  transition: transform .3s ease;
  z-index: 2;
}
.section.people .person:hover .avatar {
  transform: translateX(-50%) scale(1.06);
}

.section.people .person-body {
  flex: 1;                       /* equal height across the row */
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(20,25,45,.09);
  padding: 72px 22px 28px;
  text-align: center;
  min-height: 0;
  transition: box-shadow .25s ease, transform .25s ease;
}
.section.people .person:hover .person-body {
  box-shadow: 0 8px 22px rgba(20,25,45,.16);
  transform: translateY(-3px);
}
.section.people .person h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: 16px; line-height: 1.35; color: #1b2233;
  /* four lines for every card, so the row keeps one height */
  height: calc(4 * 1.35em);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.section.people .person:hover h3 { color: var(--crimson); }
.section.people .person .meta {
  font-family: var(--ui); font-size: 12px; color: #8a919e;
  margin-top: auto; padding-top: 14px;   /* pinned to the card's foot */
}
.section.people .see-more-row { margin-top: 26px; }


/* ============================ ΠΕΡΙΒΑΛΛΟΝ ==========================
   Four plain cards divided by dotted rules; titles share a fixed
   four-line box so every card lines up. */
.section.divided .divided-grid { display: grid; gap: var(--gap); }
.section.divided.cols-3 .divided-grid { grid-template-columns: repeat(3, 1fr); }
.section.divided.cols-4 .divided-grid { grid-template-columns: repeat(4, 1fr); }
.section.divided.cols-5 .divided-grid { grid-template-columns: repeat(5, 1fr); }
.section.divided .card { position: relative; }
.section.divided .card + .card::before {
  content: "";
  position: absolute; left: calc(var(--gap) / -2); top: 0; bottom: 0;
  border-left: 2px dotted #b6b0a8;
}
.section.divided .card h3 {
  color: var(--ink);
  line-height: 1.29;
  height: calc(4 * 1.29em);          /* four lines, always */
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ============================= ΥΠΟΔΟΜΕΣ ===========================
   Plain cards with a hairline under the title, as in ΑΓΟΡΑ. */
.section.infra .card h3 {
  color: var(--ink);
  line-height: 1.29;
  height: calc(4 * 1.29em);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-bottom: 12px;
}
.section.infra .card > a { display: block; border-bottom: 1px solid #d9d2c8; padding-bottom: 14px; }


/* ===================== Editorial spread (ΑΓΡΟΤΙΚΑ, ΤΟΥΡΙΣΜΟΣ) ======
   Standfirst left, photo across the middle, tinted side card right,
   then a rule and a four-up row. */
.section.editorial .ed-top {
  display: grid; grid-template-columns: 1fr 2.05fr 1.12fr;
  gap: var(--gap); align-items: start;
}
.section.editorial .ed-lead .meta,
.section.editorial .ed-side .meta,
.section.editorial .ed-card .meta {
  font-family: var(--ui); font-size: 12.5px; color: var(--muted); margin-bottom: 10px;
}
.section.editorial .ed-lead h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.22; color: var(--ink);
}
.section.editorial .ed-lead:hover h3 { color: var(--crimson); }
.section.editorial .excerpt {
  margin: 14px 0 0;
  font-family: var(--ui); font-size: 14px; line-height: 1.55; color: #6d6d6d;
}

.section.editorial .ed-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.section.editorial .ed-side { background: #eef1f7; }
.section.editorial .ed-side img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.section.editorial .ed-side-body { padding: 16px 18px 20px; }
.section.editorial .ed-side h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: 17px; line-height: 1.32; color: var(--ink);
}
.section.editorial .ed-side:hover h3 { color: var(--crimson); }

.section.editorial .ed-rule { height: 1px; background: #d8d8d8; margin: 26px 0 24px; }

.section.editorial .ed-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.section.editorial .ed-card img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover; margin-bottom: 12px;
  transition: transform .4s ease;
}
.section.editorial .ed-card { overflow: hidden; }
.section.editorial .ed-card:hover img { transform: scale(1.04); }
.section.editorial .ed-card h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: 16px; line-height: 1.32; color: var(--ink);
  /* three lines everywhere, so the row stays even */
  height: calc(3 * 1.32em);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.section.editorial .ed-card:hover h3 { color: var(--crimson); }
.section.editorial .ed-card .excerpt {
  height: calc(3 * 1.55em);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}


/* The tall rail ad sits under the feed column, outside the hero's height
   budget, so the feed and its button can fill the hero exactly. */
.hero-under { display: grid; grid-template-columns: 355px 1fr; gap: var(--gap); align-items: stretch; }
.hero-under > div { display: flex; }
.hero-under .ad { min-height: 250px; margin: 0; }
/* left slot fills its column; the leaderboard keeps its own width, centred */
.hero-under-side .ad { flex: 1; }
.hero-under-main { justify-content: center; }
.hero-under-main .ad { width: 100%; max-width: 970px; }


/* --------------------- Ruled 3-up grid (ΤΟΠΙΚΑ) --------------------
   Hairlines run between the cells, plus one above the whole block. */
.grid-lined {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #ddd8d2;
  padding-top: 4px;
}
.grid-lined .card { padding: 26px 24px; }
@media (min-width: 1101px) { .grid-lined { margin-inline: -24px; } }
.grid-lined .card:not(:nth-child(3n))          { border-right: 1px solid #ddd8d2; }
.grid-lined .card h3 {
  color: var(--ink);
  line-height: 1.29;
  height: calc(3 * 1.29em);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}


/* ============================== ΤΟΥΡΙΣΜΟΣ =========================
   Grey band; lead photo with a centred headline beneath it, a vertical
   rule, then three ruled items on the right. */
.section.tourism { background: #e9e9e9; padding: 34px 0 38px; }
.section.tourism .tourism-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 42px;
  align-items: start;
}
/* the rule between the two halves */
.section.tourism .tourism-list { position: relative; padding-left: 42px; }
.section.tourism .tourism-list::before {
  content: ""; position: absolute; left: 0; top: 4px; bottom: 4px;
  border-left: 1px solid #c7c7c7;
}

.section.tourism .tourism-lead img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.section.tourism .tourism-lead .meta {
  font-family: var(--serif); font-size: 14px; color: #6f6f6f; margin: 14px 0 16px;
}
.section.tourism .tourism-lead h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: clamp(20px, 1.7vw, 26px); line-height: 1.3;
  color: #1a1a1a; text-align: center; padding: 0 10px;
}
.section.tourism .tourism-lead:hover h3 { color: var(--crimson); }

.section.tourism .tourism-list .row { border-bottom: 1px solid #c7c7c7; }
.section.tourism .tourism-list .row:last-child { border-bottom: 0; }
.section.tourism .tourism-list .row a {
  display: grid; grid-template-columns: 240px 1fr; gap: 20px;
  padding: 22px 0;
}
.section.tourism .tourism-list .row:first-child a { padding-top: 0; }
.section.tourism .tourism-list img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.section.tourism .tourism-list .meta {
  font-family: var(--serif); font-size: 13px; color: #7a7a7a; margin-bottom: 8px;
}
.section.tourism .tourism-list h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: 16px; line-height: 1.35; color: #1a1a1a;
}
.section.tourism .tourism-list .row:hover h3 { color: var(--crimson); }



/* today's front page */
.paper { text-align: center; }
.paper-kicker { margin: 0 0 12px; line-height: 1.15; }
.paper-kicker .today {
  display: block; font-family: var(--serif); font-style: italic;
  font-size: 17px; color: #4a4a4a;
}
.paper-kicker .brand {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 21px; color: #1a1a1a; letter-spacing: .5px;
}
.paper-card {
  display: block; background: #fff; padding: 10px 10px 0;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.paper-card img { width: 100%; height: auto; }
.paper-date {
  margin: 0; padding: 14px 6px 16px;
  font-family: var(--serif); font-weight: 700; font-size: 15px; color: #1a1a1a;
}
.paper-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.2); }

/* the six below, split by dotted rules */
.section.culture .culture-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid #d5d5d5; margin-top: 34px; padding-top: 6px;
}
.section.culture .culture-grid .card { padding: 26px 26px; }
@media (min-width: 1101px) { .section.culture .culture-grid { margin-inline: -26px; } }
.section.culture .culture-grid .card:not(:nth-child(3n)) { border-right: 2px dotted #c9c9c9; }
.section.culture .culture-grid .meta {
  font-family: var(--serif); font-size: 13px; color: #7a7a7a;
}
.section.culture .culture-grid h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: 15px; line-height: 1.4; color: #1a1a1a;
}


/* ------------------- Print widgets in the ΤΟΠΙΚΑ rail ---------------
   Today's paper and the supplement, each with a "see all" link. */
.print-widgets { display: flex; flex-direction: column; gap: 18px; }
.print-widgets .paper { text-align: center; }
.print-widgets .paper-kicker { margin: 0 0 2px; line-height: 1.1; }
.print-widgets .paper-kicker .today {
  display: block; font-family: var(--serif); font-style: italic; font-size: 16px; color: #4a4a4a;
}
.print-widgets .paper-kicker .brand {
  display: block; font-family: var(--serif); font-weight: 700;
  font-size: 20px; color: #1a1a1a; letter-spacing: .5px;
}
.print-widgets .paper-date {
  margin: 0 0 10px; font-family: var(--serif); font-size: 13.5px; color: #6f6f6f;
}
.print-widgets .paper-card {
  display: block; background: #fff; padding: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.print-widgets .paper-card img { width: 100%; height: auto; }
.print-widgets .paper-card:hover { box-shadow: 0 6px 18px rgba(0,0,0,.2); }
.see-all {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  font-family: var(--ui); font-weight: 700; font-size: 12.5px;
  letter-spacing: 1.2px; text-transform: uppercase; color: var(--navy);
}
.see-all:hover { color: var(--crimson); }

/* ========================= ΑΠΕΙΚΑΣΜΑ ΣΟΦΙΑΣ =======================
   A centred quote panel. */
.section.wisdom { text-align: center; padding: 20px 0 10px; }
.section.wisdom h2 {
  font-family: var(--serif); font-weight: 700;
  font-size: clamp(28px, 2.6vw, 40px); color: #1a1a1a; letter-spacing: 1px;
  margin-bottom: 28px;
}
.section.wisdom figure { margin: 0; }
.section.wisdom figure img {
  max-width: 660px; width: 100%; height: auto; margin: 0 auto 26px;
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
}
.section.wisdom blockquote {
  margin: 0 auto; max-width: 900px;
  font-family: var(--serif); font-size: clamp(21px, 1.9vw, 30px);
  line-height: 1.35; color: #1a1a1a;
}
.section.wisdom cite {
  display: block; margin-top: 14px;
  font-family: var(--serif); font-style: normal; font-size: 17px; color: #4a4a4a;
}
.wisdom-share { display: flex; justify-content: center; gap: 12px; margin-top: 26px; }
.wisdom-share a {
  width: 38px; height: 38px; border: 2.5px solid var(--navy); border-radius: 50%;
  display: grid; place-items: center; color: var(--navy);
}
.wisdom-share a svg { width: 18px; height: 18px; fill: currentColor; }
.wisdom-share a:hover { background: var(--navy); color: #fff; }


/* ============================== ΑΘΛΗΤΙΚΑ ==========================
   Lead photo with a white card riding over its right edge, then two
   cards and a dark list panel. */
.section.sports .sports-hero {
  display: grid; grid-template-columns: 1.55fr 1fr;
  align-items: center; margin-bottom: 34px;
}
.section.sports .sports-photo { grid-column: 1 / span 1; }
.section.sports .sports-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; min-height: 560px; }
.section.sports .sports-card {
  grid-column: 2 / span 1;
  background: #fff; padding: 34px 38px;
  margin-left: -80px;                 /* the overlap onto the photo */
  box-shadow: 0 6px 24px rgba(20,25,45,.10);
  position: relative; z-index: 2;
}
.section.sports .sports-card .meta {
  font-family: var(--ui); font-size: 13px; color: #8a8a8a; margin-bottom: 12px;
}
.section.sports .sports-card h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: clamp(21px, 1.8vw, 29px); line-height: 1.28; color: #14181f;
}
.section.sports .sports-card h3 a:hover { color: var(--crimson); }
.section.sports .sports-card .excerpt {
  margin: 16px 0 0; font-family: var(--ui); font-size: 14.5px; line-height: 1.6; color: #5f6673;
}

.section.sports .sports-grid {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap);
  align-items: start;
}
.section.sports .sports-grid .card img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.section.sports .sports-grid .meta {
  font-family: var(--ui); font-size: 12.5px; color: #8a8a8a; margin: 12px 0 8px;
}
.section.sports .sports-grid h3 {
  font-family: var(--ui); font-weight: 700; font-size: 16px; line-height: 1.35; color: #14181f;
}
.section.sports .sports-grid .excerpt {
  margin: 10px 0 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.55; color: #6b7280;
}

/* the dark list panel */
.section.sports .sports-panel { background: #14181f; padding: 8px 18px; }
.section.sports .prow { border-bottom: 1px solid rgba(255,255,255,.12); }
.section.sports .prow:last-child { border-bottom: 0; }
.section.sports .prow a { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 16px 0; }
.section.sports .prow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.section.sports .prow h4 {
  font-family: var(--ui); font-weight: 700; font-size: 13.5px; line-height: 1.4; color: #fff;
}
.section.sports .prow:hover h4 { color: #9fc3ff; }
.section.sports .prow .meta {
  font-family: var(--ui); font-size: 11.5px; color: rgba(255,255,255,.6); margin-top: 8px;
}

/* the supplement beside the ΠΟΛΙΤΙΣΤΙΚΑ lead */
.paper.entheto { text-align: center; }
.paper.entheto .paper-kicker .brand {
  display: block; font-family: var(--serif); font-weight: 700; font-size: 20px; color: #1a1a1a;
}
.paper.entheto .paper-card {
  display: block; background: #fff; padding: 8px; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
.paper.entheto .paper-card img { width: 100%; height: auto; }

.section.people .carousel .nav {
  position: absolute; top: 55%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; border: 2px solid var(--navy); color: var(--navy);
  font-size: 24px; font-weight: 700; display: grid; place-items: center;
  box-shadow: 0 3px 10px rgba(20,25,45,.18); z-index: 4;
}
.section.people .carousel .nav:hover { background: var(--navy); color: #fff; }
.section.people .carousel .nav.prev { left: 0; }
.section.people .carousel .nav.next { right: 0; }


/* ΤΟΠΙΚΑ lead: large photo with a white card riding over its left edge */
.section .topika-hero {
  display: grid; grid-template-columns: 1fr 1.5fr;
  align-items: center; margin-bottom: 30px;
}
.topika-photo { grid-column: 2 / span 1; grid-row: 1; }
.topika-photo img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; min-height: 420px; }
.topika-card {
  grid-column: 1 / span 1; grid-row: 1;
  background: #fff; padding: 32px 34px;
  margin-right: -80px;                /* the overlap onto the photo */
  position: relative; z-index: 2;
  box-shadow: 0 6px 24px rgba(20,25,45,.10);
}
.topika-card .meta {
  font-family: var(--serif); font-size: 14px; color: #7a7a7a; margin-bottom: 12px;
}
.topika-card h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: clamp(22px, 1.9vw, 30px); line-height: 1.25; color: #14181f;
}
.topika-card h3 a:hover { color: var(--crimson); }

/* ΠΟΛΙΤΙΣΤΙΚΑ right column rides along with the scroll */
.culture-rail {
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 20px;
}

/* ΑΠΟΨΕΙΣ arrows sit on the band's own blue, not white */
.section.opinions .carousel .nav { background: #eaf3fa; }
.section.opinions .carousel .nav:hover { background: var(--navy); color: #eaf3fa; }



/* Editorial four-up (ΑΓΡΟΤΙΚΑ, ΑΘΛΗΤΙΚΑ): hairlines between the cards */
.section.editorial .ed-grid .ed-card { position: relative; padding: 0 24px; }
@media (min-width: 1101px) { .section.editorial .ed-grid { margin-inline: -26px; } }
.section.editorial .ed-grid .ed-card:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  border-right: 1px solid #d8d8d8;
}
.section.editorial .ed-grid { gap: 0; }
.section.editorial .see-more-row { margin-top: 26px; }



/* the classifieds link sits at the end of the header's icon row */
.header-right .classifieds {
  margin: 0;
  font-family: var(--ui); font-weight: 700; font-size: 14px;
  color: var(--navy); white-space: nowrap;
}
.header-right .classifieds:hover { color: var(--crimson); }
/* it stays reachable once the header compacts — just tighter */
.site-header.stuck .header-right { gap: 14px; }
.site-header.stuck .header-right .classifieds { font-size: 13px; }

/* ΤΟΠΙΚΑ lead reads like ΑΓΡΟΤΙΚΑ: plain headline column, no white slab */
.topika-card {
  background: none; box-shadow: none;
  margin-right: 0; padding: 0 30px 0 0;
}
.section .topika-hero { grid-template-columns: 1fr 1.6fr; align-items: center; }
.topika-photo { grid-column: 2; }
.topika-card { grid-column: 1; }

/* ΕΛΛΑΔΑ: hairlines between the four cards */
.grid.ruled { gap: 0; }
.grid.ruled .card { position: relative; padding: 0 24px; }
@media (min-width: 1101px) { .grid.ruled { margin-inline: -24px; } }
.grid.ruled .card:not(:last-child)::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0;
  border-right: 1px solid #d8d8d8;
}

/* the section-level ΑΓΟΡΑ link is a mobile affordance only */
.section.agora .agora-more { display: none; }

/* content that belongs to the phone layout only */
.mobile-only { display: none; }

/* section titles lead to their archive */
.section-head h2 a { color: inherit; }
.section-head h2 a:hover { color: var(--crimson); }
.abroad-head h2 a { color: inherit; }

/* ---------------- ΠΡΙΝ 94 ΧΡΟΝΙΑ ----------------
   A clipping from the archive, under today's front page in the rail. */
.throwback { margin-top: 22px; text-align: center; }
.tb-title {
  font-family: var(--serif); font-weight: 700;
  font-size: 17px; letter-spacing: .6px; color: var(--ink);
  margin-bottom: 10px;
}
.tb-card { display: block; box-shadow: 0 2px 10px rgba(20,25,45,.14); }
.tb-card img { width: 100%; height: auto; display: block; }
.tb-card:hover { box-shadow: 0 6px 18px rgba(20,25,45,.24); }

/* the classifieds link reads as a button inside the drawer, at every width */
.drawer-classifieds {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 8px 30px 24px;
  padding: 14px 18px;
  background: var(--navy); color: var(--cream);
  border-radius: 8px;
  font-family: var(--ui); font-weight: 700; font-size: 14px;
  letter-spacing: 1px; text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}
.drawer-classifieds:hover { background: var(--crimson); color: #fff; }

/* The footer menu comes from wp_nav_menu, which wraps the links in a list.
   The row lives on that list rather than on the nav element. */
.footer-links > ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 34px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.footer-links > ul > li { display: block; }

/* ------------------------------------------------------------------
   WordPress menu markup.
   The stylesheet was written against .has-sub / .sub, while wp_nav_menu
   emits .menu-item-has-children / .sub-menu. Mapping the two vocabularies
   here keeps a single stylesheet for both the prototype and the theme.
   ------------------------------------------------------------------ */
.main-nav .menu-item-has-children { position: relative; }
.main-nav .menu-item-has-children > a::after { content: " ▾"; font-size: 11px; }
.main-nav .sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 230px; padding: 8px 0; margin: 0;
  background: #fff; box-shadow: 0 8px 24px rgba(20,25,45,.16);
  list-style: none;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.main-nav .menu-item-has-children:hover > .sub-menu,
.main-nav .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.main-nav .sub-menu li { display: block; }
.main-nav .sub-menu a {
  display: block; padding: 9px 18px; white-space: nowrap;
  font-size: 13px; letter-spacing: .4px;
}
.main-nav .sub-menu a:hover { background: var(--cream); color: var(--crimson); }
/* the last dropdowns open inward so they stay on screen */
.main-nav > ul > li:nth-last-child(-n+2) .sub-menu { left: auto; right: 0; }

/* the drawer keeps its accordion, driven by the same WordPress classes */
.drawer .menu-item-has-children > .sub-menu { display: none; padding-left: 14px; list-style: none; }
.drawer .menu-item-has-children.open > .sub-menu { display: block; }

/* Στα αρχεία ο τίτλος της σελίδας φέρει τη δική του γραμμή αμέσως από κάτω,
   οπότε το περίγραμμα της κεφαλίδας θα διαβαζόταν ως δεύτερη γραμμή. */
body.archive .site-header,
body.category .site-header,
body.search .site-header,
body.single .site-header { border-bottom: 0; }

/* Εφημερεύοντα φαρμακεία — τρίτου, σε δικό μας πλαίσιο ώστε να κάθεται
   στο πλάι σαν τα υπόλοιπα στοιχεία. */
.widget-farmakeia {
  background: #fff;
  border: 1px solid #e3ded7;
  overflow: hidden;
}
.widget-farmakeia iframe { display: block; width: 100%; border: 0; }

/* Στη ζευγαρωμένη ενότητα ο τίτλος και η γραμμή του τρέχουν σε όλο το πλάτος,
   και το πλαϊνό ξεκινά από κάτω τους. */
.section.paired > .wrap > .section-head { margin-bottom: 26px; }
.section.paired .paired-part:first-child { margin-top: 0; }

/* ---------------- ΣΑΝ ΣΗΜΕΡΑ ----------------
   Στο πλάι, κάτω από το σημερινό φύλλο. Παίρνει το χρώμα του αρχείου, ώστε
   τα δύο ιστορικά στοιχεία της σελίδας να διαβάζονται ως ένα σώμα. */
.san-simera { margin-top: 22px; }
.ss-card {
  display: block;
  background: linear-gradient(180deg, #f7e7b8 0%, #f8eed3 100%);
  border: 1px solid #e8dcc0;
  padding: 16px 16px 18px;
  text-align: center;
  transition: box-shadow .25s ease, transform .25s ease;
}
.ss-card:hover { box-shadow: 0 8px 22px rgba(20,25,45,.14); transform: translateY(-2px); }
.ss-logo { width: 100%; max-width: 190px; height: auto; margin: 0 auto 12px; display: block; }
.ss-text {
  margin: 0;
  font-family: var(--serif); font-size: 13.5px; line-height: 1.5;
  color: #4a4038; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden;
}
.ss-more {
  display: inline-block; margin-top: 12px;
  font-family: var(--ui); font-weight: 700; font-size: 11.5px;
  letter-spacing: 1.1px; text-transform: uppercase; color: var(--navy);
}
.ss-card:hover .ss-more { color: var(--crimson); }

/* ============================= ΠΟΛΙΤΙΣΤΙΚΑ ========================
   Ένα κύριο άρθρο, ένα μεσαίο με ένα μικρότερο δίπλα του, και τρεις κάρτες.
   Το πλάι κρατά το ένθετο, ώστε ο χώρος δεξιά να μη μένει κενός. */
.section.culture .culture-body {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;
  align-items: start;
}
.section.culture .culture-main { min-width: 0; }

.section.culture .culture-lead img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.section.culture .culture-lead .meta,
.section.culture .cu-medium .meta,
.section.culture .cu-small .meta,
.section.culture .culture-grid .meta {
  font-family: var(--serif); font-size: 13px; color: #7a7a7a; margin: 12px 0 8px;
}
.section.culture .culture-lead h3 {
  font-family: var(--ui); font-weight: 700;
  font-size: clamp(21px, 1.9vw, 30px); line-height: 1.26; color: var(--ink);
}
.section.culture .culture-lead:hover h3 { color: var(--crimson); }
.section.culture .excerpt {
  margin: 12px 0 0;
  font-family: var(--ui); font-size: 14.5px; line-height: 1.6; color: #6b7280;
}

/* το μεσαίο και το μικρότερο, χωρισμένα με λεπτή γραμμή */
.section.culture .culture-duo {
  display: grid; grid-template-columns: 1.35fr 1fr; gap: 30px;
  margin-top: 30px; padding-top: 28px; border-top: 1px solid #d8d4ce;
}
.section.culture .culture-duo img {
  width: 100%; height: 300px; aspect-ratio: auto; object-fit: cover; display: block;
}
.section.culture .cu-medium h3 {
  font-family: var(--ui); font-weight: 700; font-size: 19px; line-height: 1.3; color: var(--ink);
}
.section.culture .cu-small img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.section.culture .cu-small h3 {
  font-family: var(--ui); font-weight: 700; font-size: 16px; line-height: 1.34; color: var(--ink);
}
.section.culture .cu-medium:hover h3,
.section.culture .cu-small:hover h3,
.section.culture .culture-grid .card:hover h3 { color: var(--crimson); }

.section.culture .culture-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px;
  margin-top: 30px; padding-top: 28px; border-top: 1px solid #d8d4ce;
}
.section.culture .culture-grid img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.section.culture .culture-grid h3 {
  font-family: var(--ui); font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--ink);
}

.section.culture .culture-rail {
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 22px;
}

/* ============= ΑΣΤΥΝΟΜΙΚΑ και ΔΙΚΑΣΤΙΚΑ ===========================
   Κύριο άρθρο με το πλαϊνό δίπλα του, τρεις κάρτες από κάτω σε όλο το
   πλάτος, και τα δικαστικά ως μικρότερες σειρές. */
.section.paired .paired-top {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 40px;
  align-items: start;
}

/* Η φωτογραφία παίρνει όλο το πλάτος της στήλης και ο τίτλος κάθεται από
   κάτω: το θέμα διαβάζεται από την εικόνα, όχι από περίληψη. */
.section.paired .paired-lead { display: block; }
.section.paired .pl-photo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.section.paired .pl-body { padding: 16px 0 0; }
.section.paired .pl-body .meta {
  font-family: var(--serif); font-size: 13px; color: #6f7480; margin-bottom: 10px;
}
.section.paired .pl-body h3 {
  font-family: var(--ui); font-weight: 800;
  font-size: clamp(22px, 2vw, 32px); line-height: 1.22; color: var(--ink);
}
.section.paired .pl-body h3 a:hover { color: var(--crimson); }
.section.paired .pl-body .excerpt {
  margin: 14px 0 0;
  font-family: var(--ui); font-size: 14.5px; line-height: 1.6; color: #5f6673;
}

.section.paired .paired-rail {
  position: sticky; top: 110px;
  display: flex; flex-direction: column; gap: 20px;
}

.section.paired .paired-three {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px var(--gap);
  margin-top: 34px; padding-top: 30px; border-top: 1px solid #d8d4ce;
}
.section.paired .paired-three img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.section.paired .paired-three .meta {
  font-family: var(--serif); font-size: 13px; color: #7a7a7a; margin: 12px 0 8px;
}
.section.paired .paired-three h3 {
  font-family: var(--ui); font-weight: 700; font-size: 17px; line-height: 1.32; color: var(--ink);
}
.section.paired .paired-three .card:hover h3 { color: var(--crimson); }

.section.paired .paired-part { margin-top: 68px; }
.section.paired .paired-small {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px var(--gap);
}
.section.paired .srow a { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: start; }
.section.paired .srow img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.section.paired .srow .meta { font-family: var(--serif); font-size: 12px; color: #7a7a7a; margin-bottom: 6px; }
.section.paired .srow h3 {
  font-family: var(--ui); font-weight: 700; font-size: 15px; line-height: 1.34; color: var(--ink);
}
.section.paired .srow:hover h3 { color: var(--crimson); }

/* Ο τίτλος της ροής οδηγεί στο αρχείο, όπως κάθε άλλη κατηγορία. */
.ticker-head h2 a { color: inherit; }
.ticker-head h2 a:hover { color: var(--crimson); }

/* Στην αρχική οι κάρτες δείχνουν μόνο τίτλο: η ημερομηνία και η ώρα έχουν
   νόημα στη ροή, όπου η σειρά είναι χρονική, όχι σε μια επιλογή ύλης. */
body.home .section .meta,
body.home .catcard .meta,
body.home .slider-nav .meta { display: none; }

/* Η ημερομηνία κρατούσε την ανάσα ανάμεσα στην εικόνα και τον τίτλο· χωρίς
   αυτήν ο τίτλος κολλούσε πάνω στη φωτογραφία. */
body.home .section .meta + h3,
body.home .catcard .meta + h3,
body.home .slider-nav .meta + h4 { margin-top: 10px; }

/* Οι στήλες των πλεγμάτων δεν έχουν όλες το ίδιο πλάτος, οπότε οι εικόνες
   έπαιρναν διαφορετικό ύψος και οι τίτλοι έπαυαν να ευθυγραμμίζονται. Ένας
   κοινός λόγος πλευρών τις φέρνει όλες στο ίδιο μέτρο. */
body.home .section .thumb img,
body.home .catcard img {
  display: block; width: 100%;
  aspect-ratio: 16 / 10; object-fit: cover; height: auto;
}

/* --------------------- Ταυτότητα στο υποσέλιδο ---------------------- */
.footer-identity {
  display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: start;
  padding: 30px 0 6px;
  border-top: 1px solid rgba(255,255,255,.14);
  margin-top: 30px;
}
.footer-identity h3 {
  font-family: var(--ui); font-weight: 700; font-size: 14px;
  letter-spacing: 1.2px; text-transform: uppercase;
  color: #fff; margin-bottom: 12px;
}
.fi-list { font-family: var(--ui); font-size: 13px; line-height: 1.85; color: rgba(255,255,255,.72); }
.fi-list p { margin: 0; }
.fi-list strong { color: rgba(255,255,255,.92); font-weight: 700; }
.fi-list a { color: rgba(255,255,255,.9); text-decoration: underline; text-underline-offset: 2px; }
.fi-list a:hover { color: #fff; }

/* το σήμα σε λευκό πλακίδιο — το αρχείο του μητρώου έχει λευκό φόντο */
.fi-mht { display: flex; align-items: center; gap: 14px; }
.fi-mht img {
  width: 66px; height: auto; display: block;
  background: #fff; border-radius: 8px; padding: 6px;
}
.fi-mht span {
  font-family: var(--ui); font-size: 13px; line-height: 1.5;
  color: rgba(255,255,255,.82); max-width: 170px;
}

/* ------------------- Popup της MantisDevelopment -------------------- */
.credit .by { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; }
.credit .by:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.mantis-backdrop {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.62); backdrop-filter: blur(3px);
  display: grid; place-items: center; padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility 0s .2s;
}
.mantis-backdrop.open { opacity: 1; visibility: visible; transition: opacity .2s ease, visibility 0s; }

.mantis-card {
  position: relative;
  width: min(560px, 100%); max-height: 90vh; overflow-y: auto;
  background: #0d0d0d; color: #fff;
  border: 1px solid rgba(255,255,255,.09); border-radius: 22px;
  padding: 42px 40px 36px;
  box-shadow: 0 30px 70px rgba(0,0,0,.55);
  transform: translateY(12px) scale(.98); transition: transform .22s ease;
}
.mantis-backdrop.open .mantis-card { transform: none; }

.mantis-close {
  position: absolute; top: 18px; right: 18px;
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  font-size: 22px; line-height: 1;
}
.mantis-close:hover { background: rgba(255,255,255,.16); color: #fff; }

.mantis-kicker {
  font-family: var(--ui); font-weight: 700; font-size: 12px;
  letter-spacing: 3.4px; text-transform: uppercase; color: #e3b53c;
  margin-bottom: 14px;
}
.mantis-name {
  font-family: var(--ui); font-weight: 800; font-size: 34px; letter-spacing: -.5px;
  margin-bottom: 26px;
}
.mantis-name .dev { color: #e2453c; }

.mantis-row {
  display: grid; grid-template-columns: 52px 1fr; gap: 16px; align-items: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06);
  border-radius: 14px; padding: 14px 16px;
  color: #fff;
}
.mantis-row + .mantis-row { margin-top: 12px; }
.mantis-row:hover { background: rgba(255,255,255,.09); border-color: rgba(227,181,60,.35); }
.mantis-ico {
  width: 52px; height: 52px; border-radius: 12px;
  display: grid; place-items: center;
  background: rgba(227,181,60,.14); color: #e3b53c;
}
.mantis-ico svg { width: 22px; height: 22px; fill: currentColor; }
.mantis-row .lbl {
  display: block; font-family: var(--ui); font-size: 11.5px;
  letter-spacing: 2.4px; text-transform: uppercase; color: rgba(255,255,255,.45);
  margin-bottom: 3px;
}
.mantis-row .val { display: block; font-family: var(--ui); font-weight: 700; font-size: 17px; }

/* Ο τίτλος «Πριν N χρόνια» πάνω από το σήμα του ΣΑΝ ΣΗΜΕΡΑ */
.print-widgets .ss-title {
  margin: 0 0 10px;
  font-family: var(--serif); font-weight: 700; font-size: 17px;
  color: #1a1a1a; text-align: center; line-height: 1.25;
}

/* Ο αρθρογράφος: στο carousel των ΑΠΟΨΕΩΝ, στο αρχείο τους και στο άρθρο */
.byline {
  display: block; margin-top: 6px;
  font-family: var(--ui); font-weight: 700; font-size: 12.5px;
  letter-spacing: .6px; color: var(--crimson);
}
.byline:hover { text-decoration: underline; text-underline-offset: 3px; }
.section.opinions .byline { text-align: center; color: #b8cbe8; }
.post-body .byline { margin: 2px 0 4px; }
.article-byline {
  text-align: center; margin-bottom: 18px;
  font-family: var(--ui); font-weight: 700; font-size: 15px;
  letter-spacing: .6px;
}
.article-byline .byline { display: inline-block; margin: 0; font-size: 15px; }

/* ΠΡΟΤΑΣΕΙΣ: το ζεστό φόντο που είχε η ΑΓΟΡΑ, απλωμένο σε όλη την ενότητα
   και σβήνοντας στο κρεμ πριν το τέλος της. */
.section.feature.suggestions {
  background: linear-gradient(180deg, #f7e7b8 0%, #f8eed3 38%, var(--cream) 88%);
  padding: 40px 0 46px;
  margin-top: 60px;
}

/* Το «ΠΕΡΙΣΣΟΤΕΡΑ» ανοίγει το ταμπλό, οπότε το μικρό συρταράκι του περισσεύει */
.main-nav .mega-trigger > .sub-menu { display: none !important; }
.main-nav .mega-trigger > a { cursor: pointer; }
.main-nav .mega-trigger > a[aria-expanded="true"] { color: var(--crimson); }

/* Κάθε θέση τυπώνει και τα δύο δημιουργικά — υπολογιστή και κινητού — και η
   επιλογή γίνεται εδώ, ώστε να δουλεύει σωστά πίσω από cache. Χωρίς αυτό
   φαίνονταν και τα δύο, το ένα κάτω από το άλλο. */
.ad-mobile { display: none; }
.ad-desktop { display: block; }

/* ------------------ Το κουτί της διαφήμισης ακολουθεί το δημιουργικό ------
   Τα ελάχιστα ύψη γράφτηκαν όσο οι θέσεις ήταν κενές, για να κρατούν τον χώρο
   τους και να διαβάζεται η διάταξη. Με πραγματικό δημιουργικό μέσα, αυτά τα
   ύψη γίνονται κενά πάνω και κάτω από το banner — ιδίως στο κινητό, όπου ένα
   728x90 συρρικνώνεται σε 45 εικονοστοιχεία μέσα σε κουτί 280. Πλέον ισχύουν
   μόνο για τις θέσεις που είναι όντως άδειες. */
.ad { min-height: 0; }
.ad:has(.ad-label) { min-height: 250px; }
.ad.tall { min-height: 0; }
.ad.tall:has(.ad-label) { min-height: 600px; }
.ad-banner { min-height: 0; }
.ad-banner:has(.ad-label) { min-height: 90px; }
.hero-under .ad:has(.ad-label) { min-height: 250px; }

/* Το κουτί κρατά το πλάτος της στήλης του. Με place-items: center η μοναδική
   στήλη του grid έπαιρνε το πλάτος του περιεχομένου — και ένα AdSense <ins>
   ξεκινά με μηδενικό πλάτος, οπότε το κουτί μάζευε στα 22 εικονοστοιχεία και
   η διαφήμιση δεν είχε πού να ανοίξει. */
.ad { grid-template-columns: minmax(0, 1fr); width: 100%; box-sizing: border-box; }
.ad > .ad-desktop,
.ad > .ad-mobile { width: 100%; }

/* Το γκρίζο φόντο και η διακεκομμένη γραμμή ήταν σήμανση κενής θέσης. Με
   δημιουργικό μέσα, η θέση δεν χρειάζεται πλαίσιο. */
.ad { background: none; border: 0; padding: 0; }
.ad:has(.ad-label) {
  background: #e6e2dc; border: 1px dashed #c3bcb2; padding: 10px;
}

/* Το δημιουργικό κεντράρεται μέσα στη θέση του — χωρίς να πειραχτεί το
   display των δύο περιτυλιγμάτων, γιατί αυτό ακριβώς κρίνει ποιο από τα δύο
   φαίνεται σε κάθε συσκευή. Κεντράρισμα με text-align, όχι με flex. */
.ad > .ad-desktop,
.ad > .ad-mobile { text-align: center; }
.ad img { display: inline-block; max-width: 100%; height: auto; }

/* Η μπάρα κατηγοριών της συμπαγούς κεφαλίδας δείχνει μόνο θεματικές
   κατηγορίες. Το «ΕΙΔΗΣΕΙΣ» και το «ΠΕΡΙΣΣΟΤΕΡΑ» κρύβονται από εκεί — τα
   στοιχεία μενού μένουν στη θέση τους και εξακολουθούν να τροφοδοτούν το
   συρτάρι και το μεγάλο μενού, που ανοίγει από το χάμπουργκερ. */
.main-nav > ul > li:has(> a[href="#"]),
.main-nav > ul > li:has(> a[href$="/all-news"]),
.main-nav > ul > li:has(> a[href$="/all-news/"]) { display: none; }

/* Ο αρθρογράφος μπροστά από τον τίτλο στις ΑΠΟΨΕΙΣ */
.section.opinions .face-photo { display: block; }
.section.opinions .byline { margin: 12px 0 2px; font-size: 13px; }
.section.opinions .face h3 a { color: inherit; }

/* Τα βελάκια του slider της αρχικής: η πλοήγηση γίνεται από τα τέσσερα
   κουτιά κάτω από την εικόνα, οπότε το ζευγάρι από κάτω περίσσευε. */
.hero-main .slider .arrows { display: none; }

/* ---------------- Άδειες θέσεις της Google ----------------
   Όταν το AdSense δεν έχει διαφήμιση να σερβίρει, σημειώνει το <ins> ως
   «unfilled» αλλά κρατά το ύψος που είχε δεσμεύσει — και η σελίδα μένει με
   ένα κενό ορθογώνιο στη μέση. Το μαζεύουμε. */
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
.ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) { display: none; }
/* Το ίδιο για θέση που έμεινε εντελώς άδεια μετά την απόκριση. */
.ad > .ad-desktop:empty,
.ad > .ad-mobile:empty { display: none; }