/* ================================================================
   Ο Κόσμος του Πάρη — Accessible Frontend Prototype
   Stylesheet: design tokens, base, components, layout, motion.
   ================================================================ */

/* ============================================================
   1. DESIGN TOKENS
   ============================================================ */
:root {
  /* Color — light (default) */
  --ink: #1a365d;
  --ink-soft: #45577a;
  --ink-faint: #7e8ba6;
  --bg: #fcfbfa;
  --surface: #f6efe1;
  --surface-raised: #ffffff;
  --border: #e3dccb;
  --accent: #2a9d8f;
  --accent-deep: #1e7469;
  --accent-ink: #1a365d;
  --sage: #5f7d5c;
  --sage-bg: #e7ede4;
  --periwinkle: #5b68ab;
  --periwinkle-bg: #eaecf7;
  --focus-ring: #1e7469;
  --danger: #b3261e;
  --shadow-color: 220 45% 24%;

  /* Typography */
  --font-display: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Zen Maru Gothic", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --fs-100: 0.91rem;
  --fs-200: 1.12rem;
  --fs-300: 1.26rem;
  --fs-400: 1.47rem;
  --fs-500: 1.96rem;
  --fs-600: clamp(2.13rem, 1.74rem + 1.57vw, 2.8rem);
  --fs-700: clamp(2.69rem, 1.9rem + 3.25vw, 4.2rem);

  /* Radii */
  --radius-sm: 12px;
  --radius-md: 18px;
  --radius-lg: 24px;
  --radius-pill: 999px;

  /* Motion */
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-med: 420ms;
  --dur-slow: 640ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #f3ede0;
    --ink-soft: #cbd0dd;
    --ink-faint: #8d97b3;
    --bg: #10182b;
    --surface: #182238;
    --surface-raised: #1d2941;
    --border: #2c3a56;
    --accent: #4fbcac;
    --accent-deep: #7fd0c3;
    --accent-ink: #10182b;
    --sage: #93b48d;
    --sage-bg: #1d2c22;
    --periwinkle: #a3addd;
    --periwinkle-bg: #1f2440;
    --focus-ring: #4fbcac;
    --danger: #ff8a75;
    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --ink: #f3ede0;
  --ink-soft: #cbd0dd;
  --ink-faint: #8d97b3;
  --bg: #10182b;
  --surface: #182238;
  --surface-raised: #1d2941;
  --border: #2c3a56;
  --accent: #4fbcac;
  --accent-deep: #7fd0c3;
  --accent-ink: #10182b;
  --sage: #93b48d;
  --sage-bg: #1d2c22;
  --periwinkle: #a3addd;
  --periwinkle-bg: #1f2440;
  --focus-ring: #4fbcac;
  --danger: #ff8a75;
  color-scheme: dark;
}

:root[data-theme="light"] {
  --ink: #1a365d;
  --ink-soft: #45577a;
  --ink-faint: #7e8ba6;
  --bg: #fcfbfa;
  --surface: #f6efe1;
  --surface-raised: #ffffff;
  --border: #e3dccb;
  --accent: #2a9d8f;
  --accent-deep: #1e7469;
  --accent-ink: #1a365d;
  --sage: #5f7d5c;
  --sage-bg: #e7ede4;
  --periwinkle: #5b68ab;
  --periwinkle-bg: #eaecf7;
  --focus-ring: #1e7469;
  --danger: #b3261e;
  color-scheme: light;
}

/* High-contrast monochrome override — wins regardless of theme */
html.a11y-contrast {
  --ink: #ffffff;
  --ink-soft: #ffffff;
  --ink-faint: #eaeaea;
  --bg: #000000;
  --surface: #0a0a0a;
  --surface-raised: #000000;
  --border: #ffffff;
  --accent: #ffd60a;
  --accent-deep: #ffd60a;
  --accent-ink: #000000;
  --sage: #ffffff;
  --sage-bg: #000000;
  --periwinkle: #ffffff;
  --periwinkle-bg: #000000;
  --focus-ring: #ffd60a;
  color-scheme: dark;
}

/* ============================================================
   2. RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
html.a11y-font-2 { font-size: 125%; }
html.a11y-font-3 { font-size: 150%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-200);
  line-height: 1.65;
  letter-spacing: -0.01em;
  /* clip, not hidden — hidden turns body into a scroll container on
     both axes per spec, which breaks position: sticky (e.g. the
     article page's image sidebar) on every descendant. clip still
     stops horizontal overflow from the hero's decorative blobs
     without creating that scroll container. */
  overflow-x: clip;
  transition: background var(--dur-med) var(--ease-soft), color var(--dur-med) var(--ease-soft);
}

html.a11y-dyslexic body {
  font-family: Verdana, Tahoma, "Trebuchet MS", sans-serif;
  letter-spacing: 0.02em;
  word-spacing: 0.08em;
  line-height: 1.8;
}

img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
input { font: inherit; }
ul { list-style: none; padding: 0; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.18;
  text-wrap: balance;
}
html.a11y-dyslexic h1,
html.a11y-dyslexic h2,
html.a11y-dyslexic h3,
html.a11y-dyslexic h4 {
  font-family: Verdana, Tahoma, sans-serif;
}

p { text-wrap: pretty; }

.container {
  width: min(1180px, 100% - 3rem);
  margin-inline: auto;
}

/* Visually-hidden utility for screen-reader-only text */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link — first focusable node in the document */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 1000;
  background: var(--ink);
  color: var(--bg);
  padding: 0.9rem 1.4rem;
  border-radius: var(--radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--dur-fast) var(--ease-soft);
}
.skip-link:focus {
  top: 1rem;
}

/* Consistent, visible focus state everywhere */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ============================================================
   3. BUTTONS & TAGS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.85rem 1.6rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-200);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--dur-fast) var(--ease-soft),
              background var(--dur-fast) var(--ease-soft),
              border-color var(--dur-fast) var(--ease-soft),
              box-shadow var(--dur-fast) var(--ease-soft);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--ink);
  color: var(--bg);
  box-shadow: 0 1px 0 hsl(var(--shadow-color) / 0.2);
}
.btn--primary:hover {
  background: var(--accent-deep);
  box-shadow: 0 10px 24px -10px hsl(var(--shadow-color) / 0.55);
}

.btn--secondary {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn--secondary:hover {
  background: var(--surface);
  border-color: var(--accent-deep);
}

.btn--ghost {
  background: transparent;
  color: var(--accent-deep);
  padding-inline: 0.2rem;
  border-radius: 4px;
}
.btn--ghost:hover { color: var(--ink); }
.btn--ghost .arrow { transition: transform var(--dur-fast) var(--ease-soft); }
.btn--ghost:hover .arrow { transform: translateX(4px); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: var(--fs-100);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-deep);
}
.eyebrow::before {
  content: "";
  width: 1.5rem;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
}

/* ============================================================
   4. HEADER & NAVIGATION
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--border);
  transform: translateY(0);
  transition: transform var(--dur-med) var(--ease-soft);
}
.site-header.is-hidden {
  transform: translateY(-100%);
}
.site-header__bar {
  /* Wider than the standard .container: with 7 top-level nav tabs
     (including "Διάδραση") the header needs more horizontal room
     than page content does to stay on a single line. */
  width: min(1340px, 100% - 3rem);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: 0.55rem;
}
/* The nav now carries a lot of tabs and wraps onto multiple lines on
   narrower desktop widths — it must be the item that shrinks/wraps,
   never the logo or the header actions (a plain flex item without
   flex-shrink:0 shrinks its box below its content's natural size
   once siblings compete for space, which overflows a fixed-size
   child like the logo image instead of visibly resizing it). */
.site-header__bar > .brand,
.site-header__bar > .header-actions {
  flex-shrink: 0;
}
.primary-nav {
  min-width: 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  /* Nudge left to claw back just enough width for the primary nav
     (now with the "Δράσεις" and "Πληροφορίες" tabs) to stay on a
     single line at the container's max-width. */
  margin-left: -1.6rem;
}
/* The logo asset carries its own fixed navy/multicolor palette, so it
   always sits on a light chip — guarantees legibility in dark mode and
   high-contrast mode without recoloring the brand mark itself. */
.brand__logo-chip {
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.brand__logo-img {
  display: block;
  height: 84px;
  width: auto;
}
.footer-brand .brand__logo-img { height: 64px; }
.brand__tag {
  font-size: 0.806rem;
  color: var(--ink-faint);
  letter-spacing: 0.01em;
}

.primary-nav__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.2rem 0.15rem;
}
.primary-nav__link {
  display: inline-block;
  padding: 0.6rem 0.7rem;
  border-radius: var(--radius-pill);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.997rem;
  color: var(--ink-soft);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.primary-nav__link:hover {
  background: var(--surface);
  color: var(--ink);
}

/* Services dropdown — the "Αναζήτηση Υπηρεσιών" nav item opens a
   panel of the 8 categories instead of linking straight through, so
   they stay one click away from anywhere on the site. */
.primary-nav__item--dropdown {
  position: relative;
}
.primary-nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
}
.primary-nav__chevron {
  width: 13px;
  height: 13px;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.primary-nav__trigger[aria-expanded="true"] .primary-nav__chevron {
  transform: rotate(180deg);
}
.nav-dropdown {
  position: absolute;
  top: calc(100% + 0.6rem);
  left: 0;
  z-index: 250;
  width: 300px;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -20px hsl(var(--shadow-color) / 0.35);
  padding: 0.6rem;
  transform-origin: top left;
  transform: translateY(6px) scale(0.98);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft), visibility 0s linear var(--dur-med);
}
.nav-dropdown.is-open {
  transform: translateY(0) scale(1);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft), visibility 0s;
}
.nav-dropdown__item {
  display: block;
  padding: 0.65rem 0.8rem;
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 0.997rem;
  font-weight: 600;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.nav-dropdown__item:hover {
  background: var(--surface);
  color: var(--accent-deep);
}
.nav-dropdown__viewall {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 0.3rem;
  padding: 0.7rem 0.8rem;
  border-top: 1px solid var(--border);
  font-weight: 700;
  font-size: 0.986rem;
  color: var(--accent-deep);
  text-decoration: none;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  /* Nudge right to match the logo's left nudge above — together
     they claw back enough width for the primary nav to stay on a
     single line at the container's max-width. */
  margin-right: -0.8rem;
}

.header-support-btn {
  padding: 0.55rem 1.1rem;
  font-size: 0.952rem;
  white-space: nowrap;
}

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1.5px solid var(--border);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.icon-btn:hover { border-color: var(--accent-deep); transform: translateY(-1px); }
.icon-btn svg { width: 20px; height: 20px; }

.hamburger { display: none; }

/* Mobile navigation sheet — a root panel of top-level categories,
   each opening onto its own full-screen "drill-in" panel of
   sub-links (instead of dumping every category flat in one long
   list). .nav-sheet__viewport clips the panels; only one of
   root/sub is ever the active, interactive one at a time. */
.nav-sheet {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateX(100%);
  visibility: hidden;
  transition: transform var(--dur-slow) var(--ease-soft), visibility 0s linear var(--dur-slow);
}
.nav-sheet.is-open {
  transform: translateX(0);
  visibility: visible;
  transition: transform var(--dur-slow) var(--ease-soft), visibility 0s;
}
.nav-sheet__viewport {
  position: relative;
  flex: 1;
  min-height: 0;
}
.nav-sheet__panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 1.4rem;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--bg);
  transition: transform var(--dur-med) var(--ease-soft);
}
.nav-sheet__panel--root {
  transform: translateX(0);
  z-index: 1;
}
.nav-sheet__panel--sub {
  transform: translateX(100%);
  z-index: 2;
}
.nav-sheet__panel--sub.is-active {
  transform: translateX(0);
}
.nav-sheet__viewport.has-open-panel .nav-sheet__panel--root {
  pointer-events: none;
}
.nav-sheet__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2.5rem;
  min-height: 44px;
}
.nav-sheet__back {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  font-size: 1.12rem;
  color: var(--ink-soft);
  padding: 0.5rem 0.3rem 0.5rem 0;
  margin-left: -0.3rem;
}
.nav-sheet__back:hover { color: var(--ink); }
.nav-sheet__back svg { width: 20px; height: 20px; }
.nav-sheet__panel-title {
  font-family: var(--font-display);
  font-size: 1.904rem;
  font-weight: 700;
  color: var(--ink);
  margin: 0 0 1rem;
}
.nav-sheet__list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.nav-sheet__link {
  display: block;
  padding: 1.1rem 0.4rem;
  font-family: var(--font-display);
  font-size: 1.68rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--ink);
  border-bottom: 1px solid var(--border);
}
.nav-sheet__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  width: 100%;
  background: none;
  border: none;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  text-align: left;
}
.nav-sheet__trigger-chevron {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--ink-faint);
}
.nav-sheet__trigger.is-current-section {
  color: var(--accent-deep);
}
.nav-sheet__footer {
  margin-top: auto;
  padding-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

/* ============================================================
   5. ACCESSIBILITY WIDGET
   ============================================================ */
.a11y-widget {
  position: fixed;
  right: 1.4rem;
  bottom: 1.4rem;
  z-index: 400;
}
.a11y-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.85rem 1.15rem;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: var(--bg);
  border: none;
  cursor: pointer;
  box-shadow: 0 12px 28px -10px hsl(var(--shadow-color) / 0.45);
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft),
              padding var(--dur-med) var(--ease-soft), gap var(--dur-med) var(--ease-soft);
}
.a11y-toggle:hover { transform: translateY(-2px); background: var(--accent-deep); color: var(--accent-ink); }
.a11y-toggle svg { width: 22px; height: 22px; color: var(--accent); flex-shrink: 0; }
.a11y-toggle:hover svg { color: var(--accent-ink); }
.a11y-toggle__label {
  font-weight: 700;
  font-size: 1.008rem;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
  opacity: 1;
  transition: max-width var(--dur-med) var(--ease-soft), opacity var(--dur-fast) var(--ease-soft);
}

/* Scrolled-down state: collapses to an icon-only circle, expands
   back the moment the user scrolls up (see main.js). The label
   stays in the DOM — just visually collapsed — so the button's
   accessible name never changes. */
.a11y-toggle.is-compact {
  padding: 0.85rem;
  gap: 0;
}
.a11y-toggle.is-compact .a11y-toggle__label {
  max-width: 0;
  opacity: 0;
}

.a11y-panel {
  position: absolute;
  right: 0;
  bottom: calc(100% + 0.8rem);
  width: min(320px, 82vw);
  background: var(--surface-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.4rem;
  box-shadow: 0 30px 60px -20px hsl(var(--shadow-color) / 0.35);
  transform-origin: bottom right;
  transform: scale(0.92) translateY(8px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft), visibility 0s linear var(--dur-med);
}
.a11y-panel.is-open {
  transform: scale(1) translateY(0);
  opacity: 1;
  visibility: visible;
  transition: transform var(--dur-med) var(--ease-soft), opacity var(--dur-med) var(--ease-soft), visibility 0s;
}
.a11y-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}
.a11y-panel__head h2 {
  font-size: 1.12rem;
  font-family: var(--font-body);
  font-weight: 700;
}
.a11y-close {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: none;
  background: var(--surface);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.a11y-close svg { width: 16px; height: 16px; }

.a11y-group { margin-bottom: 1.15rem; }
.a11y-group:last-child { margin-bottom: 0; }
.a11y-group__label {
  display: block;
  font-size: 0.918rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 0.55rem;
}

.a11y-steps {
  display: flex;
  gap: 0.4rem;
}
.a11y-step {
  flex: 1;
  padding: 0.55rem 0.3rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: transparent;
  cursor: pointer;
  font-weight: 700;
  transition: background var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.a11y-step[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

.a11y-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.a11y-switch-row span { font-size: 1.008rem; font-weight: 600; }
.a11y-switch {
  position: relative;
  width: 46px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--border);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--dur-fast) var(--ease-soft);
}
.a11y-switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--surface-raised);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.a11y-switch[aria-checked="true"] { background: var(--accent-deep); }
.a11y-switch[aria-checked="true"]::after { transform: translateX(20px); }

.a11y-reset {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 1.2rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  background: none;
  border-left: none; border-right: none; border-bottom: none;
  font-size: 0.952rem;
  font-weight: 600;
  color: var(--ink-faint);
  cursor: pointer;
}
.a11y-reset:hover { color: var(--accent-deep); }

/* Floating social buttons — pinned to the right edge, vertically
   centered. main.js nudges them a few px against the scroll
   direction and eases them back, so they trail the scroll with a
   slight stall instead of snapping instantly to place. */
.social-float {
  position: fixed;
  top: 50%;
  right: 1.2rem;
  z-index: 380;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  transform: translateY(-50%);
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.social-float.is-stalling {
  transition: transform 0.15s ease-out;
}
.social-float__btn {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--surface-raised);
  border: 1px solid var(--border);
  color: var(--ink-soft);
  box-shadow: 0 12px 28px -10px hsl(var(--shadow-color) / 0.45);
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), transform var(--dur-fast) var(--ease-soft);
}
.social-float__btn svg { width: 21px; height: 21px; }
.social-float__btn:hover { transform: translateX(-3px); }
.social-float__btn--facebook:hover { background: #1877f2; border-color: #1877f2; color: #fff; }
.social-float__btn--instagram:hover { background: #d6249f; border-color: #d6249f; color: #fff; }
@media (max-width: 720px) {
  .social-float { right: 0.6rem; gap: 0.5rem; }
  .social-float__btn { width: 40px; height: 40px; }
  .social-float__btn svg { width: 18px; height: 18px; }
}

/* ============================================================
   6. HERO
   ============================================================ */
.hero {
  position: relative;
}
.hero__content {
  position: relative;
  overflow: hidden;
  padding-block: 3.5rem 5rem;
}
.hero__blob {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.35;
}
.hero__blob--one {
  width: 520px; height: 520px;
  background: var(--accent);
  top: -220px; right: -160px;
}
.hero__blob--two {
  width: 380px; height: 380px;
  background: var(--periwinkle);
  bottom: -180px; left: -140px;
  opacity: 0.22;
}
html.a11y-contrast .hero__blob { display: none; }

.hero__portrait {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 16 / 7;
}
.hero__portrait-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.hero__portrait-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(8, 12, 24, 0.78) 0%, rgba(8, 12, 24, 0.4) 38%, rgba(8, 12, 24, 0) 68%);
}
.hero__portrait-content {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  padding: 3.4rem min(6vw, 3.2rem) 0;
}
.hero__portrait-content h1 {
  font-weight: 900;
  color: #ffffff;
  font-size: clamp(3.136rem, 2.128rem + 3.9vw, 5.32rem);
  max-width: 18ch;
}
.hero__subtitle {
  font-size: 1.176rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
  max-width: 42ch;
  margin-top: 0.9rem;
}

/* Standalone kicker, sitting below the photo instead of overlaid on it. */
.hero__lead {
  max-width: 60ch;
  margin-bottom: 2.2rem;
}

.hero__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 3.5rem;
  align-items: center;
}

.hero__intro p {
  font-size: var(--fs-300);
  color: var(--ink-soft);
  max-width: 46ch;
  margin-bottom: 2rem;
}

/* Persona path cards — offset, organic stack */
.persona-stack {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}
.persona-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  padding: 1.9rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  transition: transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.persona-card:hover { transform: translateY(-4px) rotate(0deg); }

.persona-card--primary {
  background: var(--ink);
  color: var(--bg);
  margin-right: 1.6rem;
  box-shadow: 0 26px 50px -22px hsl(var(--shadow-color) / 0.55), 0 0 0 1.5px var(--accent) inset;
  animation: gentle-glow 3.2s var(--ease-soft) infinite;
}
.persona-card--primary .persona-card__desc { color: color-mix(in srgb, var(--bg) 78%, transparent); }
.persona-card--primary .persona-card__icon { background: var(--accent); color: var(--accent-ink); }
.persona-card--primary .btn--ghost { color: var(--accent); }
.persona-card--primary .btn--ghost:hover { color: var(--bg); }

.persona-card--secondary {
  background: var(--surface-raised);
  color: var(--ink);
  margin-left: 1.6rem;
  border: 1.5px solid var(--border);
}
.persona-card--secondary:hover { border-color: var(--accent-deep); }
.persona-card__desc { color: var(--ink-soft); font-size: 1.075rem; }

.persona-card__icon {
  width: 46px; height: 46px;
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  display: grid;
  place-items: center;
}
.persona-card__icon svg { width: 24px; height: 24px; }
.persona-card__title { font-family: var(--font-display); font-size: 1.456rem; }

@keyframes gentle-glow {
  0%, 100% { box-shadow: 0 26px 50px -22px hsl(var(--shadow-color) / 0.55), 0 0 0 1.5px var(--accent) inset; }
  50% { box-shadow: 0 30px 58px -20px hsl(var(--shadow-color) / 0.65), 0 0 0 2.5px var(--accent) inset; }
}

/* ============================================================
   7. SECTION SCAFFOLDING
   ============================================================ */
.section { padding-block: 4.5rem; }
.section--tint { background: var(--surface); }

/* Founders — photo + story split, used on Ποιοι Είμαστε */
.founders {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 3.5rem;
  align-items: center;
}
.founders__photo {
  margin: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 0 30px 60px -20px hsl(var(--shadow-color) / 0.35);
}
.founders__photo img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}
.founders__content h2 {
  margin-top: 0.5rem;
  font-size: clamp(1.792rem, 1.456rem + 1vw, 2.352rem);
}
.founders__lead {
  font-size: var(--fs-300);
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.1rem;
  max-width: 60ch;
}
.founders__content p {
  color: var(--ink-soft);
  max-width: 62ch;
  margin-top: 1rem;
}
.founders__quote {
  margin: 2rem 0 0;
  padding: 1.3rem 1.6rem;
  border-left: 3px solid var(--accent);
  background: var(--surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family: var(--font-display);
  font-size: 1.288rem;
  font-style: italic;
  color: var(--ink);
  max-width: 60ch;
}
@media (max-width: 900px) {
  .founders { grid-template-columns: 1fr; gap: 2rem; }
  .founders__photo { max-width: 360px; margin: 0 auto; }
}

/* Testimonial cards — stacked, full-width community stories (used on
   Μοιράσου την Εμπειρία σου). One column: these are personal
   narratives, not short pull-quotes, so a multi-column grid would
   force uneven, hard-to-read columns. */
.testimonial-list {
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.testimonial-card {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-lg);
  padding: 1.8rem 2rem;
}
.testimonial-card__quote {
  color: var(--ink-soft);
  line-height: 1.75;
  max-width: 72ch;
}
.testimonial-card__quote p + p { margin-top: 1rem; }
.testimonial-card__author {
  margin-top: 1.2rem;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.testimonial-card__author::before {
  content: "— ";
  color: var(--accent);
}

.section__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 2rem;
  margin-bottom: 2.6rem;
}
.section__head h2 { font-size: var(--fs-600); margin-top: 0.7rem; }
.section__head p { color: var(--ink-soft); max-width: 50ch; margin-top: 0.6rem; }

/* Subpage banner — the top-of-page intro used on every dedicated
   nav-tab page (directory/news/community/about), in place of the
   full photo hero which stays specific to the homepage. */
.page-header {
  padding-block: 3.4rem 3rem;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.page-header h1 {
  font-size: var(--fs-600);
  margin-top: 0.7rem;
}
.page-header p {
  color: var(--ink-soft);
  max-width: 56ch;
  margin-top: 0.7rem;
  font-size: var(--fs-300);
}
.page-header__title-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.page-header__title-row h1 { margin-top: 0; }
.page-header__icon {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  border-radius: var(--radius-md);
  overflow: hidden;
  display: grid;
  place-items: center;
  /* Same fixed light tile as .directory-card__icon — these
     illustrations ship with a cream background baked in, not
     transparent, so they need a stable light backdrop in dark mode. */
  background: #fff;
  border: 1.5px solid var(--border);
}
.page-header__icon img { width: 100%; height: 100%; object-fit: cover; }

/* Current-page indicator in nav — aria-current="page" is set on
   whichever tab matches the page you're on. */
.primary-nav__link[aria-current="page"] {
  background: var(--surface);
  color: var(--ink);
}
.nav-sheet__link[aria-current="page"] {
  color: var(--accent-deep);
}
.footer-col a[aria-current="page"] {
  color: var(--accent-deep);
  font-weight: 700;
}

/* ============================================================
   8. DIRECTORY SEARCH + GRID
   ============================================================ */
.directory-search {
  position: relative;
  max-width: 480px;
  margin-bottom: 2.6rem;
}
.directory-search svg {
  position: absolute;
  left: 1.1rem; top: 50%;
  transform: translateY(-50%);
  width: 19px; height: 19px;
  color: var(--ink-faint);
}
.directory-search input {
  width: 100%;
  padding: 0.95rem 1.2rem 0.95rem 2.9rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 1.098rem;
}
.directory-search input::placeholder { color: var(--ink-faint); }
.directory-search input:focus { border-color: var(--accent-deep); }

.directory-results {
  font-size: 0.952rem;
  color: var(--ink-faint);
  margin-bottom: 1.4rem;
  margin-top: -1.6rem;
}

.directory-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.directory-card {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.6rem;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--ink);
  transition: transform var(--dur-med) var(--ease-soft), border-color var(--dur-fast) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.directory-card:hover {
  transform: translateY(-3px);
  border-color: var(--accent-deep);
  box-shadow: 0 20px 34px -22px hsl(var(--shadow-color) / 0.4);
}
.directory-card__icon {
  width: 56px; height: 56px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  overflow: hidden;
  /* Category illustrations ship with their own cream background baked
     in, not transparent — a fixed light tile keeps them consistent
     regardless of site theme, same reasoning as .brand__logo-chip. */
  background: #fff;
  border: 1.5px solid var(--border);
}
.directory-card__icon svg { width: 23px; height: 23px; }
.directory-card__icon img { width: 100%; height: 100%; object-fit: cover; }
.directory-card__icon--sage { background: var(--sage-bg); color: var(--sage); }
.directory-card__icon--peri { background: var(--periwinkle-bg); color: var(--periwinkle); }
.directory-card__icon--accent { background: color-mix(in srgb, var(--accent) 20%, var(--surface-raised)); color: var(--accent-deep); }

.directory-card__title { font-weight: 700; font-size: 1.12rem; }
.directory-card__desc { font-size: 0.974rem; color: var(--ink-soft); line-height: 1.55; }

.directory-card[hidden] { display: none; }

/* Compact horizontal variant — used for the homepage teaser so the
   category list reads as a quick scroll-past strip instead of a tall
   stacked grid. The dedicated directory page keeps the full grid. */
.directory-grid--compact {
  display: flex;
  grid-template-columns: none;
  gap: 0.7rem;
  overflow-x: auto;
  padding-bottom: 0.5rem;
  scroll-snap-type: x proximity;
  scrollbar-width: thin;
}
.directory-grid--compact .directory-card {
  flex: 0 0 auto;
  flex-direction: row;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 1.15rem 0.6rem 0.6rem;
  white-space: nowrap;
  scroll-snap-align: start;
}
.directory-grid--compact .directory-card__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.directory-grid--compact .directory-card__icon svg { width: 18px; height: 18px; }
.directory-grid--compact .directory-card__title { font-size: 0.986rem; }
.directory-grid--compact .directory-card__desc { display: none; }

/* ΟΠΕΚΑ Κέντρα Κοινότητας directory — 230+ municipal centers, so a
   dense two-column grid of compact cards + the shared
   .directory-search/.directory-results filter above it. */
.kentra-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}
.kentra-card {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.2rem 1.4rem;
}
.kentra-card[hidden] { display: none; }
.kentra-card__name {
  font-family: var(--font-display);
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.kentra-card__row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  font-size: 0.952rem;
  color: var(--ink-soft);
  margin-top: 0.4rem;
  line-height: 1.5;
}
.kentra-card__row svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  margin-top: 0.2rem;
  color: var(--ink-faint);
}
.kentra-card__row a {
  color: var(--accent-deep);
  text-decoration: none;
}
.kentra-card__row a:hover { text-decoration: underline; }
@media (max-width: 760px) {
  .kentra-grid { grid-template-columns: 1fr; }
}

.directory-viewall {
  display: flex;
  justify-content: center;
  margin-top: 2.4rem;
}

/* ============================================================
   9. EDITORIAL "RULE OF THREE"
   ============================================================ */
.editorial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.editorial-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.editorial-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -22px hsl(var(--shadow-color) / 0.4);
}
.editorial-card__media {
  height: 8px;
  background: linear-gradient(90deg, var(--accent), var(--periwinkle));
}
/* object-fit: contain via background-size, not cover — WP post
   photos come in wildly different aspect ratios, and cover was
   cropping straight through the interesting part of several of
   them. contain shows the whole photo; the backing color is white
   (not the tan --surface) so any letterboxing blends into the card
   instead of reading as a tinted frame — same reasoning as the
   draseis-triton/aggelies poster cards. */
.editorial-card__media--photo {
  height: 210px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--surface-raised);
}
.editorial-card__body { padding: 1.8rem; display: flex; flex-direction: column; gap: 0.9rem; flex: 1; }
.editorial-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.874rem;
  color: var(--ink-faint);
  font-weight: 600;
}
.editorial-card__tag {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--sage-bg);
  color: var(--sage);
  font-weight: 700;
}
.editorial-card__title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  line-height: 1.3;
}
.editorial-card__desc { color: var(--ink-soft); font-size: 1.03rem; flex: 1; }
.editorial-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 1.008rem;
  text-decoration: none;
  color: var(--accent-deep);
  margin-top: 0.3rem;
}
.editorial-card__link .arrow { transition: transform var(--dur-fast) var(--ease-soft); }
.editorial-card:hover .editorial-card__link .arrow { transform: translateX(4px); }

.editorial-footer {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2.6rem;
}
.editorial-status {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--ink-soft);
  padding: 2.4rem 0;
}
.editorial-status a { color: var(--accent-deep); font-weight: 700; }

/* ============================================================
   9c. SINGLE ARTICLE (article.html)
   ============================================================ */
.container--article { width: min(760px, 100% - 3rem); }

.article-featured-image {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  margin-bottom: 2.2rem;
}

/* Desktop: image sidebar beside the body text instead of a full-width
   banner above it — mobile stays exactly as-is (single stacked
   column, in source order: image, then body). Falls back to one
   column when an article has no featured image, via :has(). */
@media (min-width: 900px) {
  .container--article {
    width: min(1080px, 100% - 3rem);
    display: grid;
    grid-template-columns: minmax(260px, 360px) 1fr;
    gap: 0 3rem;
    /* stretch (not start) so #articleFeaturedImage's box fills the
       full row height — the sticky image inside it needs that
       height as room to stick within while the text column scrolls
       past; without it, sticky has nowhere to travel and just
       scrolls away with the rest of the page. */
    align-items: stretch;
  }
  .container--article:has(#articleFeaturedImage:empty) {
    grid-template-columns: 1fr;
  }
  #articleFeaturedImage { grid-column: 1; grid-row: 1; }
  .article-body { grid-column: 2; grid-row: 1; }
  .container--article:has(#articleFeaturedImage:empty) .article-body { grid-column: 1; }
  .article-back { grid-column: 1 / -1; }
  .article-featured-image {
    position: sticky;
    top: 2rem;
    margin-bottom: 0;
  }
}

.article-body { font-size: var(--fs-200); color: var(--ink); overflow-wrap: break-word; }
.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 { margin-top: 2rem; margin-bottom: 0.9rem; }
.article-body h1 { font-size: var(--fs-500); }
.article-body h2 { font-size: var(--fs-400); }
.article-body h3 { font-size: var(--fs-300); }
.article-body p { margin-bottom: 1.1rem; color: var(--ink-soft); }
.article-body strong { color: var(--ink); }
.article-body a { color: var(--accent-deep); text-decoration: underline; }
.article-body ul,
.article-body ol {
  list-style: disc;
  padding-left: 1.4rem;
  margin-bottom: 1.1rem;
  color: var(--ink-soft);
}
.article-body ol { list-style: decimal; }
.article-body li { margin-bottom: 0.4rem; }
.article-body blockquote {
  border-left: 3px solid var(--accent);
  padding-left: 1.2rem;
  margin: 1.6rem 0;
  color: var(--ink-soft);
  font-style: italic;
}
.article-body img {
  border-radius: var(--radius-md);
  margin-block: 1.2rem;
}
.article-body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 1.1rem;
  font-size: var(--fs-100);
}
.article-body th,
.article-body td {
  border: 1px solid var(--border);
  padding: 0.6rem 0.8rem;
  text-align: left;
}
.article-body figure { margin: 1.6rem 0; }
.article-body figcaption {
  font-size: var(--fs-100);
  color: var(--ink-faint);
  margin-top: 0.4rem;
}

.article-back { margin-top: 2.6rem; }

/* ============================================================
   9d2. PROFESSIONAL PROFILE (professional.html)
   ============================================================ */
.container--profile { width: min(1040px, 100% - 3rem); }

.professional-profile-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.1rem; }

.professional-profile {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 2.2rem;
  align-items: start;
}
.professional-profile__side { position: sticky; top: 100px; min-width: 0; }
.professional-profile__main { min-width: 0; }

.professional-profile-photo {
  display: block;
  max-width: 240px;
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  margin-bottom: 1.6rem;
  background: var(--surface-raised);
  object-fit: contain;
  padding: 0.8rem;
  box-sizing: border-box;
}

.professional-contact-card {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.professional-contact-card__section h3 {
  font-size: 0.896rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink-faint);
  margin-bottom: 0.6rem;
}
.professional-contact-card__section p { color: var(--ink-soft); margin-bottom: 0.4rem; }
.professional-contact-card__map-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-weight: 700;
  font-size: 0.986rem;
  color: var(--accent-deep);
  text-decoration: none;
}
.professional-contact-card__map-link:hover { text-decoration: underline; }
.professional-contact-card__row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.03rem;
  color: var(--ink-soft);
  margin-bottom: 0.5rem;
}
.professional-contact-card__row:last-child { margin-bottom: 0; }
.professional-contact-card__row a { color: var(--accent-deep); text-decoration: none; font-weight: 600; }
.professional-contact-card__row a:hover { text-decoration: underline; }
.professional-contact-card__icon { display: inline-flex; width: 18px; height: 18px; flex-shrink: 0; color: var(--ink-faint); }
.professional-contact-card__icon svg { width: 100%; height: 100%; }

.professional-ratings { margin-top: 2.6rem; border-top: 1.5px solid var(--border); padding-top: 2rem; }
.professional-ratings h2 { font-size: var(--fs-400); margin-bottom: 1.2rem; }
.professional-ratings__score { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1.6rem; font-weight: 700; color: var(--ink); }
.professional-stars { display: inline-flex; gap: 0.1rem; font-size: 1.288rem; line-height: 1; color: var(--border); }
.professional-stars__star.is-filled { color: #e0a828; }
.professional-ratings__list { display: flex; flex-direction: column; gap: 1.2rem; }
.professional-review {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.4rem;
}
.professional-review__head { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-bottom: 0.5rem; }
.professional-review__date { font-size: 0.896rem; color: var(--ink-faint); }
.professional-review h4 { font-size: 1.12rem; margin-bottom: 0.4rem; color: var(--ink); }
.professional-review p { color: var(--ink-soft); font-size: 1.03rem; margin-bottom: 0.4rem; }
.professional-review__author { font-size: 0.952rem; color: var(--ink-faint); font-style: italic; }

@media (max-width: 860px) {
  .professional-profile { grid-template-columns: 1fr; }
  .professional-profile__side { position: static; }
}

/* ============================================================
   9d. SCHOOLS MAP (category-schools.html)
   ============================================================ */
.schools-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 1.6rem;
  align-items: start;
}
.schools-map {
  height: 560px;
  border-radius: var(--radius-lg);
  border: 1.5px solid var(--border);
  overflow: hidden;
  background: var(--surface);
}
.schools-map .leaflet-popup-content-wrapper {
  border-radius: var(--radius-sm);
  background: var(--surface-raised);
  color: var(--ink);
}
.schools-map .leaflet-popup-tip { background: var(--surface-raised); }
.schools-popup__title { font-weight: 700; margin-bottom: 0.3rem; }
.schools-popup__line { font-size: 0.952rem; color: var(--ink-soft); }
.schools-popup__line a { color: var(--accent-deep); }

.schools-list {
  height: 560px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-right: 0.3rem;
}
.schools-list-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 0.9rem 1.1rem;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.schools-list-item:hover,
.schools-list-item.is-active {
  border-color: var(--accent-deep);
  background: var(--surface);
}
.schools-list-item__title { font-weight: 700; font-size: 1.03rem; margin-bottom: 0.25rem; }
.schools-list-item__line { font-size: 0.918rem; color: var(--ink-soft); }

@media (max-width: 860px) {
  .schools-layout { grid-template-columns: 1fr; }
  .schools-map { height: 400px; }
  .schools-list { height: 400px; }
}

/* ============================================================
   9e. PROFESSIONALS GRID (category-doctors.html)
   ============================================================ */
.professional-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-bottom: 1rem;
}
.professional-filters .directory-search { margin-bottom: 0; flex: 1 1 320px; }
/* .directory-results normally sits directly under a bare .directory-search
   and uses a negative margin-top to pull in close to it. Here it follows
   .professional-filters instead (search + category select side by side),
   which doesn't carry that same bottom spacing — so the negative margin
   needs to be neutralized, or the results line overlaps the filters row. */
.professional-filters + .directory-results { margin-top: 0; }

.professional-category-select { flex: 0 1 280px; min-width: 220px; }
.professional-category-select select {
  width: 100%;
  padding: 0.95rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  font-size: 1.064rem;
  cursor: pointer;
}
.professional-category-select select:focus { border-color: var(--accent-deep); }

.professional-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.professional-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform var(--dur-med) var(--ease-soft), box-shadow var(--dur-med) var(--ease-soft);
}
.professional-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 44px -22px hsl(var(--shadow-color) / 0.4);
}
.professional-card[hidden] { display: none; }
.professional-card__media {
  position: relative;
  height: 170px;
  overflow: hidden;
  background: var(--surface);
}
.professional-card__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 1.1rem;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
}
/* Third-party event posters (draseis-triton.html, aggelies.html) are
   mostly tall/portrait flyers, unlike the square-ish provider logos
   the base card was built for — a 170px box left them shrunk down
   with lots of empty padding. Give posters a taller box, no padding,
   and a white (not tan) backing so they read as a clean poster flush
   against the card, matching the original site instead of sitting in
   a visibly tinted frame. */
.professional-card__media--poster { height: 260px; background: var(--surface-raised); }
.professional-card__media--poster img { padding: 0; }
.professional-card__media--placeholder {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--accent), var(--periwinkle));
}
.professional-card__media--placeholder svg { width: 40px; height: 40px; color: var(--accent-ink); opacity: 0.85; }
.professional-card__body { padding: 1.5rem; display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.professional-card__name { font-family: var(--font-display); font-size: 1.232rem; line-height: 1.3; }
.professional-card__tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.professional-card__tag {
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-pill);
  background: var(--sage-bg);
  color: var(--sage);
  font-weight: 700;
  font-size: 0.851rem;
}
.professional-card__tag--more { background: var(--surface); color: var(--ink-faint); }
.professional-card__area {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.952rem;
  color: var(--ink-soft);
}
.professional-card__area svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-faint); }
.professional-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.986rem;
  text-decoration: none;
  color: var(--accent-deep);
  margin-top: auto;
  padding-top: 0.3rem;
}

@media (max-width: 1020px) {
  .professional-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .professional-grid { grid-template-columns: 1fr; }
  .professional-category-select { flex-basis: 100%; }
}

/* ============================================================
   9e2. RESOURCE CARDS (seminaria.html "Τρέχουσες Προτάσεις") —
   text-only cards for hand-curated external resources.
   ============================================================ */
.resource-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.resource-card {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1.6rem;
}
.resource-card__title { font-family: var(--font-display); font-size: 1.232rem; line-height: 1.35; }
.resource-card__desc { color: var(--ink-soft); font-size: 1.03rem; line-height: 1.6; }
.resource-card__list {
  list-style: disc;
  padding-left: 1.2rem;
  color: var(--ink-soft);
  font-size: 1.03rem;
  line-height: 1.6;
}
.resource-card__list li { margin-bottom: 0.3rem; }
.resource-card__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.986rem;
  text-decoration: none;
  color: var(--accent-deep);
  margin-top: auto;
  padding-top: 0.3rem;
}

/* Institution directory (seminaria.html "Φορείς & Σχολές") — a
   compact multi-column list, filterable via the shared
   .directory-search/.directory-results components. */
.institutions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
.institution-item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.9rem 1.1rem;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.institution-item:hover { border-color: var(--accent-deep); background: var(--surface); }
.institution-item[hidden] { display: none; }
.institution-item__name { font-weight: 700; font-size: 1.03rem; color: var(--ink); }
.institution-item__url { font-size: 0.918rem; color: var(--accent-deep); }

@media (max-width: 1020px) {
  .resource-grid { grid-template-columns: repeat(2, 1fr); }
  .institutions-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .resource-grid { grid-template-columns: 1fr; }
  .institutions-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   9e3. VIDEO GRID (videos.html) — YouTube-embed cards. Entries
   with an empty youtubeId (assets/data/videos.json) render as a
   dashed placeholder slot instead of a player, so the page has
   the right look before the real links are added.
   ============================================================ */
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3.2rem 2.4rem;
}
.video-card { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
.video-card__embed {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface);
  border: 1.5px solid var(--border);
}
.video-card__embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.video-card__play {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background-color: var(--surface);
  background-size: cover;
  background-position: center;
}
.video-card__play::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, hsl(220 45% 6% / 0.05) 55%, hsl(220 45% 6% / 0.55));
  transition: background var(--dur-fast) var(--ease-soft);
}
.video-card__play:hover::after { background: hsl(220 45% 6% / 0.4); }
.video-card__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: var(--radius-pill);
  background: hsl(0 0% 100% / 0.92);
  color: var(--accent-deep);
  box-shadow: 0 12px 30px -10px hsl(0 0% 0% / 0.5);
  transition: transform var(--dur-fast) var(--ease-soft), background var(--dur-fast) var(--ease-soft);
}
.video-card__play-icon svg { width: 30px; height: 30px; margin-left: 4px; }
.video-card__play:hover .video-card__play-icon {
  transform: translate(-50%, -50%) scale(1.08);
  background: #fff;
}
.video-card__embed--playing iframe { z-index: 1; }
.video-card__embed--placeholder {
  display: grid;
  place-items: center;
  gap: 0.6rem;
  border-style: dashed;
  color: var(--ink-faint);
  text-align: center;
  padding: 1rem;
}
.video-card__embed--placeholder svg { width: 36px; height: 36px; }
.video-card__embed--placeholder span { font-size: 0.918rem; }
.video-card__title { font-family: var(--font-display); font-size: 1.456rem; line-height: 1.35; }
.video-card__author { color: var(--accent-deep); font-size: 0.952rem; font-weight: 700; }
.video-card__desc { color: var(--ink-soft); font-size: 1.064rem; line-height: 1.65; overflow-wrap: break-word; }

@media (max-width: 760px) {
  .video-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   9b. SUPPORTER TIERS — gold/big/regular sponsor badges, sized to
   match .auspice-badge/.auspice-grid below for visual consistency
   between the two adjacent "supporters" and "Αναγνώριση & Στήριξη"
   sections. Text-only badges (no logos yet): the name stands in
   for the image, everything else — grid gap, padding, border,
   radius — matches auspice exactly.
   ============================================================ */
.supporter-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.supporter-tier-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  min-width: 0;
}
.supporter-tier-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 140px;
  width: 100%;
  padding: 1.3rem 1.8rem;
  /* Fixed light tile regardless of site theme — these are third-party
     logos/photos with their own colors (often dark text on
     transparent), so they need a stable light background to stay
     legible in dark mode, same reasoning as .brand__logo-chip. */
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}
.supporter-tier-badge__logo {
  max-width: 100%;
  max-height: 96px;
  object-fit: contain;
}
.supporter-tier-badge__name {
  font-weight: 700;
  font-size: 1.23rem;
  color: var(--ink);
  line-height: 1.3;
}
.supporter-tier-item__text {
  font-size: 0.952rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

.auspice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.6rem;
}
.auspice-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  /* Grid items default to min-width: auto, which floors each column at
     its content's min-content size — the fixed-width badge image below
     would otherwise force every column to stay ~180px+ wide even when
     the grid collapses to 2 columns on narrow screens, overflowing the
     viewport. This lets the column actually shrink. */
  min-width: 0;
}
.auspice-item__text {
  font-size: 0.986rem;
  color: var(--ink-soft);
  line-height: 1.5;
}
.auspice-item__meta {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.896rem;
  color: var(--ink-faint);
}
.auspice-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  margin-inline: auto;
  padding: 0.9rem 1.3rem;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
}
.auspice-badge img {
  width: 140px;
  height: auto;
}

@media (max-width: 900px) {
  .supporter-tier-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .auspice-grid { grid-template-columns: repeat(2, 1fr); }
  .auspice-badge img { width: 110px; }
}
@media (max-width: 480px) {
  .auspice-grid { grid-template-columns: 1fr; }
  .supporter-tier-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   9d. ASK THE EXPERT BANNER
   ============================================================ */
.ask-expert-banner {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  flex-wrap: wrap;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 2rem 2.2rem;
}
.ask-expert-banner__icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--accent) 18%, var(--surface-raised));
  color: var(--accent-deep);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.ask-expert-banner__icon svg { width: 26px; height: 26px; }
.ask-expert-banner__text { flex: 1; min-width: 220px; }
.ask-expert-banner__text h2 { font-size: var(--fs-500); margin-top: 0.4rem; }
.ask-expert-banner__text p { color: var(--ink-soft); margin-top: 0.4rem; max-width: 56ch; }

/* ============================================================
   10. CTA BAND
   ============================================================ */
.cta-band {
  background: var(--ink);
  color: var(--bg);
  border-radius: var(--radius-lg);
  padding: 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}
.cta-band h2 { color: var(--bg); font-size: var(--fs-500); max-width: 26ch; }
.cta-band p { color: color-mix(in srgb, var(--bg) 75%, transparent); margin-top: 0.5rem; max-width: 40ch; }
.cta-form {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.cta-form input {
  padding: 0.85rem 1.2rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid color-mix(in srgb, var(--bg) 30%, transparent);
  background: color-mix(in srgb, var(--bg) 10%, transparent);
  color: var(--bg);
  min-width: 240px;
}
.cta-form input::placeholder { color: color-mix(in srgb, var(--bg) 60%, transparent); }
.cta-form .btn--primary {
  background: var(--accent);
  color: var(--accent-ink);
}
.cta-form .btn--primary:hover { background: var(--bg); }
.cta-confirm {
  font-size: 0.952rem;
  color: var(--accent);
  font-weight: 600;
  margin-top: 0.7rem;
}

/* ============================================================
   10b. GENERIC FORM FIELDS — full-page forms (e.g. Ρώτα τον Ειδικό)
   ============================================================ */
.simple-form {
  max-width: 560px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 1.2rem;
}
.form-field label {
  font-size: 0.952rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.form-field input,
.form-field textarea {
  padding: 0.85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--border);
  background: var(--surface-raised);
  color: var(--ink);
  font: inherit;
}
.form-field textarea {
  min-height: 140px;
  resize: vertical;
}
.form-field input:focus,
.form-field textarea:focus {
  border-color: var(--accent-deep);
}
.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 1.4rem;
  font-size: 0.952rem;
  color: var(--ink-soft);
}
.form-checkbox-row input { margin-top: 0.2rem; }
.form-confirm {
  font-size: 1.008rem;
  color: var(--sage);
  font-weight: 600;
  margin-top: 1rem;
}
.form-error {
  font-size: 1.008rem;
  color: var(--danger);
  font-weight: 600;
  margin-top: 1rem;
}

/* ============================================================
   10c. SUPPORT ACCORDION — "Θέλω να προσφέρω" ways to help on
   support.html, built on native <details>/<summary> so it needs
   no JS to open/close.
   ============================================================ */
.support-list {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  max-width: 720px;
}
.support-item {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-raised);
  overflow: hidden;
}
.support-item__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem 1.4rem;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.support-item__summary::-webkit-details-marker { display: none; }
.support-item__chevron {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ink-soft);
  transition: transform var(--dur-fast) var(--ease-soft);
}
.support-item[open] .support-item__chevron {
  transform: rotate(180deg);
}
.support-item__body {
  padding: 0 1.4rem 1.3rem;
  color: var(--ink-soft);
  font-size: 1.064rem;
  line-height: 1.65;
}
.support-item__body p + p { margin-top: 0.8rem; }
.support-item__body a { color: var(--accent-deep); font-weight: 600; }

/* ============================================================
   11. FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: 3.5rem 2rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 2.5rem;
  padding-bottom: 2.5rem;
}
.footer-brand p {
  color: var(--ink-soft);
  font-size: 1.008rem;
  margin-top: 0.9rem;
  max-width: 32ch;
}
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.918rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 1rem;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.65rem; }
.footer-col a {
  text-decoration: none;
  color: var(--ink-soft);
  font-size: 1.03rem;
}
.footer-col a:hover { color: var(--accent-deep); }
.footer-contact-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1.03rem;
  color: var(--ink-soft);
}
.footer-contact-item svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 0.15rem; color: var(--accent-deep); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.8rem;
  border-top: 1px solid var(--border);
  font-size: 0.896rem;
  color: var(--ink-faint);
}
.footer-legal-links { display: flex; gap: 1.2rem; }
.footer-legal-link { color: var(--ink-faint); text-decoration: underline; }
.footer-legal-link:hover { color: var(--accent-deep); }
.footer-bottom__proto {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
}

.theme-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.25rem;
  border-radius: var(--radius-pill);
  background: var(--surface);
  border: 1px solid var(--border);
}
.theme-switch__option {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius-pill);
  border: none;
  background: transparent;
  color: var(--ink-faint);
  font-size: 0.874rem;
  font-weight: 600;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft), color var(--dur-fast) var(--ease-soft);
}
.theme-switch__option svg { width: 15px; height: 15px; flex-shrink: 0; }
.theme-switch__option span { white-space: nowrap; }
.theme-switch__option:hover { color: var(--ink); }
.theme-switch__option[aria-checked="true"] {
  background: var(--surface-raised);
  color: var(--ink);
  box-shadow: 0 1px 0 hsl(var(--shadow-color) / 0.12);
}

/* ============================================================
   9f. RESOURCE DIRECTORIES — Εξοπλισμός, Χρήσιμες Πηγές
   (logo-card: a single outer frame around the whole cell, no
   divider line between the logo and the title inside it. Built on
   native <details>/<summary> like .support-item so "Περισσότερα"
   expands the description + outbound link with no JS).
   ============================================================ */
.logo-card-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.9rem;
}
.logo-card {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}
.logo-card__summary {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.4rem;
  padding: 0.7rem 0.6rem 0.65rem;
  cursor: pointer;
  list-style: none;
}
.logo-card__summary::-webkit-details-marker { display: none; }
.logo-card__media {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 4 / 3;
}
.logo-card__media img { display: block; width: 100%; height: 100%; object-fit: contain; }
.logo-card__name {
  font-family: var(--font-display);
  font-size: 0.85rem;
  line-height: 1.25;
  color: var(--ink);
}
.logo-card__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--accent-deep);
}
.logo-card__chevron {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  transition: transform var(--dur-fast) var(--ease-soft);
}
.logo-card[open] .logo-card__chevron { transform: rotate(180deg); }
.logo-card__body { padding: 0.5rem 0.7rem 0.8rem; text-align: center; }
.logo-card__desc { font-size: 0.8rem; color: var(--ink-soft); line-height: 1.5; margin-bottom: 0.5rem; }
.logo-card__link { font-size: 0.8rem; font-weight: 600; color: var(--accent-deep); text-decoration: none; }
.logo-card__link:hover { text-decoration: underline; }

@media (max-width: 1200px) { .logo-card-grid { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 900px) { .logo-card-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .logo-card-grid { grid-template-columns: repeat(2, 1fr); } }

/* ============================================================
   9g. ACTIVITY CARDS — Παιχνίδια για δημιουργική απασχόληση
   (photo + title + how-to description, not clickable).
   ============================================================ */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}
.activity-card {
  display: flex;
  flex-direction: column;
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.activity-card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--surface); }
.activity-card__media img { width: 100%; height: 100%; object-fit: cover; }
.activity-card__body { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: 0.6rem; }
.activity-card__title { font-family: var(--font-display); font-size: 1.176rem; }
.activity-card__desc { font-size: 1.008rem; color: var(--ink-soft); line-height: 1.6; }

/* Clickable variant — a <button> instead of a <div>, opening the
   lightbox preview below instead of just being a static photo. */
button.activity-card__media--clickable {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: none;
  cursor: zoom-in;
  transition: opacity var(--dur-fast) var(--ease-soft);
}
button.activity-card__media--clickable:hover { opacity: 0.88; }
button.activity-card__media--clickable:focus-visible { outline: 2.5px solid var(--accent); outline-offset: 2px; }

@media (max-width: 1020px) { .activity-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px) { .activity-grid { grid-template-columns: 1fr; } }

/* Lightbox — a simple full-photo preview opened by clicking a
   clickable gallery image. One shared overlay per page; JS swaps
   its image/caption on each open rather than building N modals. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.4rem 1.4rem;
  background: hsl(220 45% 6% / 0.86);
  backdrop-filter: blur(4px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-med) var(--ease-soft), visibility 0s linear var(--dur-med);
}
.lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-med) var(--ease-soft), visibility 0s;
}
.lightbox__img {
  max-width: min(90vw, 1100px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 70px -20px hsl(0 0% 0% / 0.6);
  background: var(--surface);
}
.lightbox__caption {
  color: #fff;
  font-size: 1.064rem;
  text-align: center;
  max-width: 60ch;
}
.lightbox__close {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-pill);
  background: hsl(0 0% 100% / 0.12);
  border: 1.5px solid hsl(0 0% 100% / 0.3);
  color: #fff;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-soft);
}
.lightbox__close:hover { background: hsl(0 0% 100% / 0.22); }
.lightbox__close svg { width: 20px; height: 20px; }

/* ============================================================
   9h. Διακοπές με αναπηρία — travel tips, plain-text/link lists
   (beaches, cities, hotels) and rich featured-profile cards.
   ============================================================ */
.tips-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 1rem; counter-reset: tip; }
.tips-list li {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  color: var(--ink-soft);
  font-size: 1.064rem;
  line-height: 1.6;
}
.tips-list li::before {
  counter-increment: tip;
  content: counter(tip);
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.952rem;
}

.simple-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 1.6rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.simple-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 1.03rem;
  color: var(--ink-soft);
}
.simple-list li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.18rem; color: var(--accent-deep); }
.simple-list a { color: var(--accent-deep); font-weight: 700; text-decoration: none; }
.simple-list a:hover { text-decoration: underline; }

.diakopes-directory-note {
  margin-top: 1.4rem;
  font-size: 1.03rem;
  color: var(--ink-soft);
}
.diakopes-directory-note a { color: var(--accent-deep); font-weight: 700; }

.featured-profile {
  background: var(--surface-raised);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 2rem;
}
.featured-profile img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.featured-profile__body { padding: 1.8rem 2rem; }
.featured-profile__body h3 { font-family: var(--font-display); font-size: var(--fs-300); margin-top: 1.3rem; margin-bottom: 0.6rem; color: var(--ink); }
.featured-profile__body h3:first-child { margin-top: 0; }
.featured-profile__body h4 { font-family: var(--font-display); font-size: var(--fs-200); margin-top: 1.1rem; margin-bottom: 0.5rem; color: var(--ink); }
.featured-profile__body p { color: var(--ink-soft); margin-bottom: 0.9rem; line-height: 1.7; }
.featured-profile__body ul { list-style: disc; padding-left: 1.3rem; color: var(--ink-soft); margin-bottom: 0.9rem; }
.featured-profile__body li { margin-bottom: 0.35rem; }

@media (max-width: 760px) {
  .simple-list { grid-template-columns: 1fr 1fr; }
  .featured-profile__body { padding: 1.4rem 1.5rem; }
}
@media (max-width: 480px) {
  .simple-list { grid-template-columns: 1fr; }
}

/* ============================================================
   12. SCROLL REVEAL
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--dur-slow) var(--ease-soft), transform var(--dur-slow) var(--ease-soft);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   13. REDUCED MOTION — flattens every animation above
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .persona-card--primary { animation: none; }
  .btn:hover, .icon-btn:hover, .directory-card:hover, .editorial-card:hover, .persona-card:hover {
    transform: none;
  }
}

/* ============================================================
   14. RESPONSIVE
   ============================================================ */
@media (max-width: 1020px) {
  .hero__grid { grid-template-columns: 1fr; }
  .persona-stack { margin-top: 1rem; }
  .directory-grid { grid-template-columns: repeat(2, 1fr); }
  .editorial-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .primary-nav, .header-actions .icon-btn--search-desktop, .header-support-btn { display: none; }
  .hamburger { display: grid; }
  .directory-grid { grid-template-columns: 1fr; }
  .section__head { flex-direction: column; align-items: flex-start; }
  .cta-band { flex-direction: column; align-items: flex-start; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .persona-card--primary, .persona-card--secondary { margin: 0; }
  .hero { padding-block: 3rem 3.5rem; }
  /* Taller crop + smaller/tighter heading so the (now multi-line)
     title and subtitle never reach down into the portrait's face,
     no matter how narrow the screen. Phones get an even taller
     crop below, since that's where the heading wraps to the most
     lines and needs the most extra headroom. The text block itself
     also moves from the top of the photo to the bottom — on a
     mobile crop the face sits in the upper/middle of the frame, so
     anchoring the title low keeps it clear of the face instead of
     racing to out-shrink it. The scrim flips to match, darkening
     the bottom of the photo instead of the top. */
  .hero__portrait { aspect-ratio: 1 / 1; }
  .hero__portrait-scrim {
    background: linear-gradient(0deg, rgba(8, 12, 24, 0.82) 0%, rgba(8, 12, 24, 0.45) 32%, rgba(8, 12, 24, 0) 62%);
  }
  .hero__portrait-content { top: auto; bottom: 0; padding: 0 min(6vw, 3.2rem) 1.8rem; }
  .hero__portrait-content h1 { font-size: clamp(2.352rem, 1.792rem + 3.5vw, 3.136rem); max-width: 15ch; }
  .hero__subtitle { font-size: 1.064rem; max-width: 32ch; }
  .footer-bottom { justify-content: center; text-align: center; }
  .theme-switch__option span {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .theme-switch__option { padding: 0.5rem; }
}

@media (max-width: 480px) {
  .hero__portrait { aspect-ratio: 3 / 4; }
}