/*
  Starter theme — hand-written, no build step (like admin.css).

  A plain, neutral starting point: every new site begins here. A client's
  look goes in public/site/site.css (override the variables in section 1
  first, then any rule) — never in this file, which CMS updates replace.
  Keep the data-* attributes in the templates: the JS finds elements only
  by them (see resources/views/theme/README.md).

  The look: white page, dark text, one accent colour, ordinary rounded
  buttons, a light footer. Font: Google Sans (self-hosted in
  public/theme/fonts, SIL OFL). Section 14 holds the look.

  Sections, in order:
    0. Font                 8. Cards & pagination
    1. Variables            9. Blocks
    2. Reset & base        10. Forms
    3. Layout helpers      11. Cookie bar
    4. Header & menu       12. Utilities
    5. Footer              13. Search, breadcrumbs, print
    6. Page layouts        14. The look
    7. Content text        15. Page rows, sections and their elements
*/

/* ===================== 0. Font ===================== */

/* Google Sans, self-hosted (SIL Open Font License 1.1, see OFL.txt). Subsets: greek, latin, latin-ext, cyrillic; weights 400-700.
   The browser downloads only the files for the characters and weights a page uses. */
/* cyrillic 400 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/google-sans-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* greek 400 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/google-sans-greek-400-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext 400 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/google-sans-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin 400 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("../fonts/google-sans-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* cyrillic 500 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/google-sans-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* greek 500 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/google-sans-greek-500-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext 500 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/google-sans-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin 500 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("../fonts/google-sans-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* cyrillic 600 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/google-sans-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* greek 600 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/google-sans-greek-600-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext 600 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/google-sans-latin-ext-600-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin 600 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("../fonts/google-sans-latin-600-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* cyrillic 700 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/google-sans-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}

/* greek 700 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/google-sans-greek-700-normal.woff2") format("woff2");
  unicode-range: U+0370-0377,U+037A-037F,U+0384-038A,U+038C,U+038E-03A1,U+03A3-03FF;
}

/* latin-ext 700 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/google-sans-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* latin 700 */
@font-face {
  font-family: "Google Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url("../fonts/google-sans-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ===================== 1. Variables ===================== */

:root {
  --color-bg: #FFFFFF;
  --color-surface: #F4F4F5;
  --color-surface-2: #E4E4E7;
  --color-text: #18181B;
  --color-ink: #18181B;
  --color-muted: #52525B;
  --color-border: rgb(24 24 27 / 0.12);
  --color-border-strong: rgb(24 24 27 / 0.28);
  --color-accent: #1D4ED8;
  --color-accent-hover: #1E40AF;
  --color-accent-soft: #DBEAFE;
  --color-accent-contrast: #FFFFFF;
  /* The accent as text or an outline on the light page: BrandPalette darkens a brand colour too
     light to read there (audit W7); else the accent itself. */
  --color-accent-text: var(--color-accent);
  --color-accent-text-hover: var(--color-accent-hover);
  /* Kept for older site.css files; the starter look no longer uses it. */
  --color-sage: var(--color-accent);
  --color-error: #B3261E;
  --color-error-bg: #FBEAE8;
  --color-success: #3E6B2A;
  --color-success-bg: #EAF1E3;

  --font-body: "Google Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-heading: var(--font-body);

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg: 1.25rem;
  --fs-h3: clamp(1.3rem, 1vw + 1rem, 1.75rem);
  --fs-h2: clamp(1.9rem, 2.2vw + 1rem, 3rem);
  --fs-h1: clamp(2.5rem, 4.2vw + 1rem, 4.5rem);

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3.5rem;
  --space-8: 5.5rem;

  --radius: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;
  --container: 1320px;
  --edge: clamp(1.25rem, 5vw, 4rem);
  --measure: 760px;
  --header-height: 76px;
  --shadow: 0 18px 40px rgb(32 30 29 / 0.14);
  --focus-ring: 2px solid var(--color-accent-text);

  /* Page sections (section 15): backgrounds, the small line above headings, spacing steps, nudges. */
  --color-soft: var(--color-surface);
  --color-brand: var(--color-accent);
  --color-brand-ink: var(--color-accent-contrast);
  --color-dark: var(--color-ink);
  --color-dark-ink: var(--color-bg);
  --fs-eyebrow: 0.75rem;
  --eyebrow-tracking: 0.12em;
  --fs-h4: 1.15rem;
  --wide: var(--container);
  --gap-xs: 0.75rem;
  --gap-s: 1.5rem;
  --gap-m: clamp(2.5rem, 5vw, 4rem);
  --gap-l: clamp(3.5rem, 8vw, 6.5rem);
  --gap-xl: clamp(5rem, 11vw, 9.5rem);
  --offset-step: clamp(0.75rem, 1.7vw, 1.5rem);
  --main-pad: var(--space-7);

  /* The menu becomes the phone menu below 1024px: see js/nav.js (DESKTOP_QUERY)
     and every "@media (min-width: 1024px)" / "(max-width: 1023.98px)" here. */
}

/* ===================== 2. Reset & base ===================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font: 400 var(--fs-base)/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

img, svg, video, iframe { max-width: 100%; }
img, video { height: auto; display: block; }

h1, h2, h3, h4 {
  margin: 0 0 0.5em;
  font-family: var(--font-heading);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--color-accent-text); text-underline-offset: 2px; }
a:hover { color: var(--color-accent-text-hover); }

button { font: inherit; color: inherit; }

:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

::selection { background: var(--color-accent-soft); }

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -100px;
  z-index: 1000;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
}
.skip-link:focus { top: var(--space-2); color: var(--color-accent-contrast); }

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
    scroll-behavior: auto !important;
  }
}

/* ===================== 3. Layout helpers ===================== */

.container {
  width: min(100% - 2 * var(--edge), var(--container));
  margin-inline: auto;
}

.measure { max-width: var(--measure); margin-inline: auto; }

.stack > * + * { margin-top: var(--space-4); }

main { display: block; padding-block: var(--main-pad); min-height: 50vh; }
main:focus { outline: none; }

/* Sticky header shell; the menu itself is in section 4. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-height);
}

.site-logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  color: var(--color-text);
  font-weight: 800;
  font-size: var(--fs-lg);
  letter-spacing: -0.02em;
  text-decoration: none;
}
.site-logo:hover { color: var(--color-text); }
.site-logo__img { max-height: 40px; width: auto; }

/* ===================== 4. Header & menu ===================== */

/*
  js/nav.js sets data-nav-mode="desktop" | "mobile" on .site-header before
  the first paint; data-nav-open while the phone menu is open. Without JS
  (no data-nav-mode) the menu is a plain list under the logo.
*/

.site-nav ul { list-style: none; margin: 0; padding: 0; }
.site-nav a { text-decoration: none; }

.site-header__burger {
  display: none;
  width: 44px;
  height: 44px;
  flex: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text);
  cursor: pointer;
}
/* A real mouse only: on a touch screen :hover stays after the tap. */
@media (hover: hover) { .site-header__burger:hover { background: var(--color-surface); } }
.site-header__burger:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

/* The burger's three lines; open, the outer two cross into its ✕ and the middle one goes. */
.site-header { --ease-menu: cubic-bezier(.22, 1, .36, 1); }
.site-header__burger-lines { position: relative; display: block; width: 24px; height: 18px; }
/* Transforms only (no layout work per frame): the outer lines move to the middle and turn. */
.site-header__burger-line {
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform-origin: center;
  transition: transform 0.45s var(--ease-menu), opacity 0.2s;
}
.site-header__burger-line:nth-child(1) { top: 2px; }
.site-header__burger-line:nth-child(2) { top: 8px; transform-origin: left center; transform: scaleX(0.667); }
.site-header__burger-line:nth-child(3) { top: 14px; }
@media (hover: hover) { .site-header__burger:hover .site-header__burger-line:nth-child(2) { transform: scaleX(1); } }
.site-header[data-nav-open] .site-header__burger-line:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.site-header[data-nav-open] .site-header__burger-line:nth-child(2) { transform: scaleX(0); opacity: 0; }
.site-header[data-nav-open] .site-header__burger-line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-menu__contact { display: none; }

.site-nav__toggle {
  display: inline-grid;
  place-items: center;
  flex: none;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-muted);
  cursor: pointer;
}
.site-nav__toggle .icon { width: 18px; height: 18px; transition: transform 0.2s; }
.site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }

/* ----- Without JS: a plain list ----- */

.site-header:not([data-nav-mode]) .site-header__inner { flex-wrap: wrap; padding-block: var(--space-3); }
.site-header:not([data-nav-mode]) .site-menu { width: 100%; display: grid; gap: var(--space-3); }
.site-header:not([data-nav-mode]) .site-nav__list { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.site-header:not([data-nav-mode]) .site-nav__submenu { padding-left: var(--space-4); font-size: var(--fs-sm); }
.site-header:not([data-nav-mode]) .site-nav__toggle { display: none; }

/* With JS on its way (.js, set in <head>; nav.js comes after the header and a slow line paints
   before it): the menu waits hidden and the header stays one row, so choosing desktop or burger
   moves nothing below it. */
.js .site-header:not([data-nav-mode]) .site-menu { display: none; }
.js .site-header:not([data-nav-mode]) .site-header__inner { flex-wrap: nowrap; padding-block: 0; }

/* ----- Desktop ----- */

[data-nav-mode="desktop"] .site-menu {
  flex: none;
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

[data-nav-mode="desktop"] .site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  white-space: nowrap;
}

[data-nav-mode="desktop"] .site-nav__item { position: relative; }
[data-nav-mode="desktop"] .site-nav__row { display: flex; align-items: center; }

[data-nav-mode="desktop"] .site-nav__list > .site-nav__item > .site-nav__row > a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 500;
}
[data-nav-mode="desktop"] .site-nav__list > .site-nav__item[data-has-children] > .site-nav__row > a { padding-right: 0.25rem; }
[data-nav-mode="desktop"] .site-nav__list > .site-nav__item > .site-nav__row > a:hover { background: var(--color-surface); }

[data-nav-mode="desktop"] .site-nav a[aria-current="page"],
[data-nav-mode="desktop"] [data-active-trail] > .site-nav__row > a { color: var(--color-accent-text); }

[data-nav-mode="desktop"] .site-nav__toggle { width: 28px; height: 28px; border-radius: 6px; }
[data-nav-mode="desktop"] .site-nav__toggle:hover { background: var(--color-surface); color: var(--color-text); }

[data-nav-mode="desktop"] .site-nav__submenu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  min-width: 220px;
  max-width: 320px;
  padding: 6px;
  white-space: normal;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  /* Closed: display none, so it adds no width to the page. */
  display: none;
}
/* A bridge over the 4px gap, so the pointer can travel into the dropdown. */
[data-nav-mode="desktop"] .site-nav__submenu::before { content: ""; position: absolute; inset: -6px 0 auto 0; height: 6px; }
[data-nav-mode="desktop"] li[data-open] > .site-nav__submenu { display: block; animation: dropdown-in 0.15s ease-out; }
@keyframes dropdown-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

[data-nav-mode="desktop"] .site-nav__submenu .site-nav__submenu { top: -7px; left: calc(100% + 6px); }
[data-nav-mode="desktop"] .site-nav__submenu .site-nav__submenu::before { inset: 0 auto 0 -8px; width: 8px; height: auto; }
[data-nav-mode="desktop"] .site-nav__submenu[data-flip] { left: auto; right: 0; }
[data-nav-mode="desktop"] .site-nav__submenu .site-nav__submenu[data-flip] { left: auto; right: calc(100% + 6px); }

[data-nav-mode="desktop"] .site-nav__submenu .site-nav__row { justify-content: space-between; gap: var(--space-1); }
[data-nav-mode="desktop"] .site-nav__submenu a {
  flex: 1;
  display: block;
  padding: 0.55rem 0.75rem;
  border-radius: 6px;
  color: var(--color-text);
}
[data-nav-mode="desktop"] .site-nav__submenu a:hover { background: var(--color-surface); }
[data-nav-mode="desktop"] .site-nav__submenu .site-nav__toggle .icon { transform: rotate(-90deg); }
[data-nav-mode="desktop"] .site-nav__submenu .site-nav__toggle[aria-expanded="true"] .icon { transform: rotate(-90deg); }

/* ----- Phone & tablet: full-screen menu ----- */

/* The header's logo and burger stay on top of the open menu, which unrolls
   from under them («Κουρτίνα»): clipped to nothing, then to everything. */
[data-nav-mode="mobile"] .site-header__burger { display: inline-flex; margin-left: auto; }
[data-nav-mode="mobile"] .site-logo,
[data-nav-mode="mobile"] .site-header__burger { position: relative; z-index: 2; }

/* It starts under the header (its own background stays behind the logo
   and ✕), so a long menu scrolls under the header, never through them. */
[data-nav-mode="mobile"] .site-menu {
  position: fixed;
  inset: var(--header-height) 0 0 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--space-3) var(--edge) calc(var(--space-6) + env(safe-area-inset-bottom, 0px));
  background: var(--color-bg);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.5s var(--ease-menu), visibility 0s linear 0.5s;
}
[data-nav-mode="mobile"][data-nav-open] .site-menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path 0.55s var(--ease-menu), visibility 0s;
}

/* Its rows come in one after another, the languages and contact last. */
[data-nav-mode="mobile"] .site-nav__list > li,
[data-nav-mode="mobile"] .site-menu > .language-switcher,
[data-nav-mode="mobile"] .site-menu__contact {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.25s ease, transform 0.4s var(--ease-menu);
}
[data-nav-mode="mobile"][data-nav-open] .site-nav__list > li,
[data-nav-mode="mobile"][data-nav-open] .site-menu > .language-switcher,
[data-nav-mode="mobile"][data-nav-open] .site-menu__contact {
  opacity: 1;
  transform: none;
  transition: opacity 0.35s ease, transform 0.5s var(--ease-menu);
  transition-delay: calc(var(--i, 0) * 45ms + 140ms);
}
.site-nav__list > li:nth-child(2) { --i: 1; }
.site-nav__list > li:nth-child(3) { --i: 2; }
.site-nav__list > li:nth-child(4) { --i: 3; }
.site-nav__list > li:nth-child(5) { --i: 4; }
.site-nav__list > li:nth-child(6) { --i: 5; }
.site-nav__list > li:nth-child(7) { --i: 6; }
.site-nav__list > li:nth-child(8) { --i: 7; }
.site-nav__list > li:nth-child(n+9) { --i: 8; }
.site-menu > .language-switcher { --i: 8; }
.site-menu__contact { --i: 9; }

[data-nav-mode="mobile"] .site-nav__row { display: flex; align-items: stretch; border-bottom: 1px solid var(--color-border); }
[data-nav-mode="mobile"] .site-nav a {
  flex: 1;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0.75rem 0.25rem;
  color: var(--color-text);
  font-size: 1.0625rem;
  font-weight: 500;
  overflow-wrap: anywhere;
}
[data-nav-mode="mobile"] .site-nav a[aria-current="page"],
[data-nav-mode="mobile"] [data-active-trail] > .site-nav__row > a { color: var(--color-accent-text); font-weight: 600; }

/* A parent's submenu: its arrow in a round button; the list slides open. */
[data-nav-mode="mobile"] .site-nav__toggle {
  width: 40px;
  height: 40px;
  align-self: center;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  transition: background 0.2s;
}
@media (hover: hover) { [data-nav-mode="mobile"] .site-nav__toggle:hover { background: var(--color-surface-2); } }
[data-nav-mode="mobile"] .site-nav__toggle .icon { width: 18px; height: 18px; transition: transform 0.35s var(--ease-menu); }

[data-nav-mode="mobile"] .site-nav__submenu { display: none; padding-left: var(--space-4); }
[data-nav-mode="mobile"] li[data-open] > .site-nav__submenu { display: block; animation: site-menu-open 0.35s var(--ease-menu); }
[data-nav-mode="mobile"] .site-nav__submenu .site-nav__row { border-bottom: 0; }
[data-nav-mode="mobile"] .site-nav__submenu a { font-size: 1rem; font-weight: 400; }
@keyframes site-menu-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* At the foot: the languages, then the site's phone and email. */
[data-nav-mode="mobile"] .site-menu > .language-switcher { margin-top: auto; padding-top: var(--space-6); }
[data-nav-mode="mobile"] .site-menu__contact { display: grid; justify-items: start; margin-top: auto; padding-top: var(--space-4); font-size: var(--fs-sm); }
[data-nav-mode="mobile"] .language-switcher + .site-menu__contact { margin-top: 0; }
[data-nav-mode="mobile"] .site-menu__contact a,
[data-nav-mode="mobile"] .site-menu__contact span { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-muted); text-decoration: none; overflow-wrap: anywhere; }
[data-nav-mode="mobile"] .site-menu__contact > :first-child { color: var(--color-text); font-weight: 700; }
@media (hover: hover) { [data-nav-mode="mobile"] .site-menu__contact a:hover { color: var(--color-accent-text); } }

@media (prefers-reduced-motion: reduce) {
  .site-header__burger-line,
  [data-nav-mode="mobile"] .site-menu,
  [data-nav-mode="mobile"] .site-menu *,
  [data-nav-mode="mobile"] .site-menu__contact { transition: none !important; animation: none !important; }
}

html.nav-locked { overflow: hidden; }
/* The open phone menu covers everything, the cookie bar too. */
.site-header[data-nav-open] { z-index: 300; }

/* ----- Language switcher (<details>) ----- */

.language-switcher__menu { position: relative; }
.language-switcher__menu > summary {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 36px;
  padding: 0 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.language-switcher__menu > summary::-webkit-details-marker { display: none; }
.language-switcher__menu > summary .icon { width: 16px; height: 16px; transition: transform 0.2s; }
.language-switcher__menu[open] > summary .icon:not(.icon--globe) { transform: rotate(180deg); }
.language-switcher ul { list-style: none; margin: 0; padding: 0; }
.language-switcher a { display: flex; align-items: center; gap: 0.6rem; color: var(--color-text); text-decoration: none; }
.language-switcher__menu > summary .icon--globe { width: 18px; height: 18px; }
.language-switcher__flag { flex: none; width: 22px; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 3px; box-shadow: 0 0 0 1px rgb(0 0 0 / 0.1); }
.language-switcher__code { display: none; }
.language-switcher a[aria-current="page"] { color: var(--color-accent-text); font-weight: 600; }

/* Desktop: a small dropdown under the code. */
.language-switcher__menu > ul {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 160px;
  padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}
.language-switcher__menu > ul a { padding: 0.5rem 0.75rem; border-radius: 6px; }
.language-switcher__menu > ul a:hover { background: var(--color-surface); }

/* Phone menu (and without JS): the languages as a row of buttons. */
/* (js/nav.js keeps the <details> open in the phone menu.) */
[data-nav-mode="mobile"] .language-switcher__menu > summary { display: none; }
[data-nav-mode="mobile"] .language-switcher__menu > ul,
.site-header:not([data-nav-mode]) .language-switcher__menu > ul {
  position: static;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  padding: 0;
  border: 0;
  box-shadow: none;
  background: none;
}
/* In the phone menu: round pills, flag + code (the name stays for screen readers). */
[data-nav-mode="mobile"] .language-switcher__menu > ul a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 var(--space-4) 0 0.7rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  font-weight: 700;
  font-size: var(--fs-sm);
}
[data-nav-mode="mobile"] .language-switcher__code { display: inline; }
[data-nav-mode="mobile"] .language-switcher__menu > ul a > span:not(.language-switcher__code) {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
[data-nav-mode="mobile"] .language-switcher__menu > ul a[aria-current="page"] {
  background: var(--color-accent);
  border-color: var(--color-accent-text);
  color: var(--color-accent-contrast);
}

/* ===================== 5. Footer ===================== */

.site-footer {
  margin-top: var(--space-8);
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}

.site-footer__inner {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  padding-block: var(--space-7);
}

.site-footer a { color: var(--color-text); text-decoration: none; }
.site-footer a:hover { color: var(--color-accent-text); text-decoration: underline; }

.site-footer__bottom {
  padding-block: var(--space-4);
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-5);
}
.site-footer__bottom p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }

.site-contact { display: grid; gap: var(--space-4); align-content: start; }
.site-contact__details { display: grid; gap: var(--space-2); font-style: normal; }
.site-contact__socials { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: 0; padding: 0; }
.site-contact__socials a { font-weight: 600; }
/* Footer: the logo and the home page's description; contact details and social links with their icons. */
.site-footer__brand { display: grid; gap: var(--space-3); align-content: start; }
.site-footer__brand .site-logo__img { max-height: 56px; width: auto; }
.site-footer__about { margin: 0; max-width: 34ch; color: var(--color-muted); font-size: var(--fs-sm); line-height: 1.6; }
.site-contact__item { display: inline-flex; align-items: flex-start; gap: var(--space-2); color: inherit; text-decoration: none; }
a.site-contact__item:hover span { text-decoration: underline; }
.site-contact__icon { flex: none; margin-top: 0.15em; color: var(--color-accent-text); }
@media (pointer: coarse) { .site-footer a.site-contact__item:not(.site-contact__address) .site-contact__icon { margin-top: 0; } }
.site-contact__socials a { display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; }
.site-contact__socials a:hover span { text-decoration: underline; }
.site-contact__brand { flex: none; }

/* The footer menu: its top items as columns, their children under them. */
/* "columns" (the footer, a «Μενού» block): each top item a column — its title, its links below. */
.site-nav--columns > .site-nav__list {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
}
.site-nav--columns > .site-nav__list > .site-nav__item > .site-nav__row > :is(a, .site-nav__heading) { font-weight: 600; }
.site-nav--columns .site-nav__submenu { display: grid; gap: var(--space-2); margin-top: var(--space-3); }
.site-nav--columns .site-nav__submenu a { color: var(--color-muted); }
/* "list": a plain list (a «Μενού» block in a sidebar). */
.site-nav--list .site-nav__list, .site-nav--list .site-nav__submenu { display: grid; gap: var(--space-2); }
.site-nav--list .site-nav__submenu { margin-top: var(--space-2); padding-left: var(--space-4); }
/* An item without a link (Επικεφαλίδα). */
.site-nav__heading { color: var(--color-text); }
.site-footer__inner:not(:has(*)) { display: none; }

/* ===================== 6. Page layouts ===================== */

.message-page {
  min-height: 50vh;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: var(--space-3);
  text-align: center;
  padding-block: var(--space-7);
}
.message-page h1 { margin: 0; }
.message-page__code { margin: 0; color: var(--color-accent-text); font-weight: 700; letter-spacing: 0.04em; }

.main-image { width: min(100% - 2 * var(--edge), var(--container)); margin: 0 auto var(--space-6); }
/* A tall (portrait) picture is cropped to the screen, not shown at full height. */
.main-image img { width: 100%; max-height: min(75vh, 720px); object-fit: cover; border-radius: var(--radius-lg); }

.page-header { margin-bottom: var(--space-6); }
.page-header__eyebrow {
  margin: 0 0 var(--space-2);
  color: var(--color-accent-text);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.page-header__title { margin: 0; font-size: var(--fs-h1); }
.page-header__intro { margin: var(--space-4) 0 0; font-size: var(--fs-lg); color: var(--color-muted); }

.article-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin: calc(-1 * var(--space-3)) 0 var(--space-6);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-muted);
  font-size: var(--fs-sm);
}
.article-meta:empty { display: none; }
.article-meta p { margin: 0; }
.byline { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text); font-weight: 600; }
.byline img { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; }

.content + .body { margin-top: var(--space-6); }
.body:empty { display: none; }

.related, .featured-articles, .cards-section { margin-top: var(--space-8); }
.related h2, .featured-articles h2 { margin-bottom: var(--space-5); }
.cards-section + .cards-section { margin-top: var(--space-6); }
.empty-note { color: var(--color-muted); }

/* «Φίλτρα υποκατηγοριών» (theme.partials.category-filters): a row of chips
   above a category's list; one line that scrolls sideways when it overflows. */
.category-filters { margin-top: var(--space-8); }
.category-filters__list {
  /* 4px: room for the 2px focus ring and its 2px offset inside the scrolling row. */
  display: flex; gap: var(--space-2, 0.5rem); margin: 0; padding: 4px 4px var(--space-2, 0.5rem); list-style: none;
  overflow-x: auto; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.category-filters__chip {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.1rem; border-radius: 999px; white-space: nowrap;
  border: 1px solid var(--color-border); background: var(--color-bg); color: var(--color-text); text-decoration: none; font-weight: 600; font-size: 0.95rem;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
.category-filters__chip:hover { background: var(--color-surface); }
.category-filters__chip:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.category-filters__chip.is-active { background: var(--color-accent); border-color: var(--color-accent-text); color: var(--color-accent-contrast); }
.category-filters + .cards-section { margin-top: var(--space-5); }

.area--sidebar {
  width: min(100% - 2 * var(--edge), var(--measure));
  margin: var(--space-7) auto 0;
}

/* ===================== 7. Content text ===================== */

/* .content: the rich editor's text; .block-text: the Text block. */
.content > * + *, .block-text > * + * { margin-top: 1em; }
.content > *, .block-text > * { margin-bottom: 0; }
.content h2, .block-text h2 { margin-top: 2em; }
.content h3, .content h4, .block-text h3, .block-text h4 { margin-top: 1.6em; }
.content :is(ul, ol), .block-text :is(ul, ol) { padding-left: 1.4em; }
.content li + li, .block-text li + li { margin-top: 0.35em; }

.content blockquote, .block-text blockquote {
  margin-inline: 0;
  padding-left: 1.25em;
  border-left: 2px solid var(--color-border-strong);
  color: var(--color-muted);
  font-style: italic;
}

.content table, .block-text table {
  width: 100%;
  border-collapse: collapse;
  display: block;
  overflow-x: auto;
  font-size: var(--fs-sm);
}
.content :is(th, td), .block-text :is(th, td) {
  padding: 0.6em 0.8em;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: top;
}
.content th, .block-text th { background: var(--color-surface); font-weight: 600; }

/* An embedded page written into the text (the editor's «Ενσωμάτωση»):
   16:9 and the full width of the text, like the Ενσωμάτωση block. */
.content :is(iframe, .ql-video), .block-text :is(iframe, .ql-video) {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  border: 0;
  border-radius: var(--radius);
  background: var(--color-surface);
}

.content figure, .block-text figure { margin-inline: 0; }
.content figcaption, .block-text figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }
.content img, .block-text img { border-radius: var(--radius); }
.content hr, .block-text hr { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-6); }

.content a[download], .content a[href$=".pdf"] {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
.content a[download]::before, .content a[href$=".pdf"]::before {
  content: "";
  width: 1em;
  height: 1em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ===================== 8. Cards & pagination ===================== */

.cards {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  margin: 0;
  padding: 0;
  list-style: none;
}
/* «Εμφάνιση λίστας» → Στήλες: N on a wide screen, two on a tablet, one on a phone. */
.cards[class*="cards--cols-"] { grid-template-columns: 1fr; }
@media (min-width: 640px) { .cards[class*="cards--cols-"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  /* .cards.… so these outweigh the attribute selector above ([class*] counts as a class). */
  .cards.cards--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards.cards--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.card:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: 2px; }

.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--color-surface); }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__placeholder {
  display: block;
  width: 100%;
  height: 100%;
  background:
    radial-gradient(circle at 30% 30%, rgb(37 99 235 / 0.14), transparent 60%),
    linear-gradient(135deg, var(--color-accent-soft), var(--color-surface));
}
/* The site's logo (or name), faded, so a missing picture looks meant (App\Theme\ImageFallback). */
.card__placeholder { display: grid; place-items: center; }
.card__media .card__placeholder-logo { width: 40%; height: auto; max-width: 160px; max-height: 40%; object-fit: contain; }
.card__placeholder-logo { width: 40%; max-width: 160px; max-height: 40%; object-fit: contain; opacity: 0.4; filter: grayscale(1); mix-blend-mode: multiply; border-radius: var(--radius); }
.card__placeholder-name { padding: 0 var(--space-4); color: var(--color-accent-text); font-weight: 600; text-align: center; opacity: 0.45; }

.card__body { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4) var(--space-4) var(--space-5); }
.card__category { margin: 0; color: var(--color-accent-text); font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.card__title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.card__title a { color: var(--color-text); text-decoration: none; }
.card__title a:focus-visible { outline: none; }
/* The whole card is the title's link. */
.card__title a::after { content: ""; position: absolute; inset: 0; }
.card:hover .card__title a { color: var(--color-accent-text); }
.card__date { color: var(--color-muted); font-size: var(--fs-sm); }
.card__meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-3); margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }
.card__author::before { content: "·"; margin-right: var(--space-3); }
.card__meta > .card__author:first-child::before { content: none; }
.card__more { margin-top: auto; color: var(--color-accent-text); font-size: var(--fs-sm); font-weight: 600; }
.card__intro {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  color: var(--color-muted);
  font-size: var(--fs-sm);
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-top: var(--space-7);
}
.pager__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0.6em 1.1em;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  color: var(--color-text);
  font-weight: 600;
  text-decoration: none;
}
.pager__link:hover { background: var(--color-surface); color: var(--color-text); }
.pager__link.is-disabled { opacity: 0.45; }
.pager__info { color: var(--color-muted); font-size: var(--fs-sm); }
@media (max-width: 480px) {
  .pager { flex-wrap: wrap; }
  .pager__info { order: -1; flex: 1 1 100%; text-align: center; }
  .pager__link { flex: 1; justify-content: center; }
}

/* ===================== 9. Blocks ===================== */

.block { margin-block: var(--space-6); }
.body > .block:first-child { margin-top: 0; }

/* Image */
.block-image { margin-inline: 0; }
.block-image img { width: 100%; border-radius: var(--radius-lg); }
.block-image figcaption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }

/* Quote */
.block-quote {
  position: relative;
  margin-inline: 0;
  padding-top: 2.25rem;
  font-size: var(--fs-h3);
  font-weight: 500;
  line-height: 1.45;
}
.block-quote::before {
  content: "\201C";
  position: absolute;
  top: -0.35rem;
  left: -0.1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 4.5rem;
  line-height: 1;
  color: var(--color-accent-text);
}
.block-quote cite {
  display: block;
  margin-top: var(--space-3);
  font-style: normal;
  font-size: var(--fs-sm);
  color: var(--color-muted);
}
.block-quote cite::before { content: "— "; }

/* Call to action */
.block-cta {
  padding: var(--space-7) var(--space-6);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  text-align: center;
}
.block-cta h2 { margin: 0 0 var(--space-5); }

/* Divider */
.block-divider { border: 0; border-top: 1px solid var(--color-border); margin-block: var(--space-7); }

/* Accordion (<details>, works without JS) */
.block-accordion { border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; }
.block-accordion__item + .block-accordion__item { border-top: 1px solid var(--color-border); }
.block-accordion__item summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.block-accordion__item summary::-webkit-details-marker { display: none; }
.block-accordion__item summary::after {
  content: "";
  width: 1.1em;
  height: 1.1em;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s;
}
.block-accordion__item[open] summary::after { transform: rotate(180deg); }
.block-accordion__item summary:hover { background: var(--color-surface); }
.block-accordion__answer { padding: 0 var(--space-5) var(--space-5); color: var(--color-muted); }
/* Answers are rich text: paragraphs, lists, links. */
.block-accordion__answer > :first-child { margin-top: 0; }
.block-accordion__answer > :last-child { margin-bottom: 0; }
.block-accordion__answer p, .block-accordion__answer ul, .block-accordion__answer ol { margin: 0 0 .75em; }
.block-accordion__answer ul, .block-accordion__answer ol { padding-left: 1.3em; }
.block-accordion__answer a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.block-accordion__answer strong { color: var(--color-text, inherit); }

/* Gallery (lightbox: Alpine, in the template) */
.gallery-grid {
  display: grid;
  gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
}
.gallery-item {
  display: block;
  padding: 0;
  border: 0;
  background: var(--color-surface);
  border-radius: var(--radius);
  overflow: hidden;
  /* The tile takes «Αναλογία εικόνας» when the block sets one
     (--ratio inherits, §15), else the square it has always been. */
  aspect-ratio: var(--ratio, 1);
  cursor: zoom-in;
}
/* Said through .gallery-grid so the photo fills its tile whatever §15 says
   about images in a block with a ratio: the tile is already that shape. */
.gallery-grid .gallery-item img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: var(--focal, var(--focal-media, center)); transition: transform 0.25s; }
.gallery-item:hover img { transform: scale(1.04); }

/* App\Theme\PhotoLayout: «Απόσταση φωτογραφιών» and «Στήλες». A set number
   is the computer's; a tablet shows at most 3 and a phone at most 2, so a
   photo never shrinks to a stamp (photo-grid.blade.php's sizes say the
   same). Without a number the grid fills the width by itself, as above.
   Each count is spelt out (no min() inside repeat(), which not every browser
   takes there), and every rule is .gallery-grid.gallery-grid--…, so no
   general rule can outrank the number chosen. */
.gallery-grid { --gallery-gap: var(--space-2); gap: var(--gallery-gap); }
.gallery-grid.gallery-grid--gap-none { --gallery-gap: 0; }
.gallery-grid.gallery-grid--gap-small { --gallery-gap: var(--space-1); }
.gallery-grid.gallery-grid--gap-large { --gallery-gap: var(--space-4); }
.gallery-grid.gallery-grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.gallery-grid:is(.gallery-grid--cols-2, .gallery-grid--cols-3, .gallery-grid--cols-4, .gallery-grid--cols-5, .gallery-grid--cols-6) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 640px) {
  .gallery-grid:is(.gallery-grid--cols-3, .gallery-grid--cols-4, .gallery-grid--cols-5, .gallery-grid--cols-6) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .gallery-grid.gallery-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .gallery-grid.gallery-grid--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .gallery-grid.gallery-grid--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* «Στήλες σε tablet» / «Στήλες σε κινητό» (App\Theme\DeviceColumns): that
   screen's own number instead of the rule above; masonry's below. */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .gallery-grid.gallery-grid--tablet-1 { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid.gallery-grid--tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery-grid.gallery-grid--tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .gallery-grid.gallery-grid--tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .gallery-grid.gallery-grid--phone-1 { grid-template-columns: minmax(0, 1fr); }
  .gallery-grid.gallery-grid--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* «Masonry»: each photo in its own shape («gallery_masonry»), in columns
   that fill top to bottom (CSS columns: no script, nothing moves once
   loaded). The links stay in their saved order, which is the order the
   lightbox goes through. The negative margin takes back the gap under the
   last photo of each column. No zoom on hover here: a transform inside
   columns is where WebKit has drawn photos blank or in the wrong column. */
.gallery-grid.gallery-grid--masonry { display: block; column-gap: var(--gallery-gap); margin-bottom: calc(-1 * var(--gallery-gap)); columns: 2; }
.gallery-grid.gallery-grid--masonry.gallery-grid--cols-1 { columns: 1; }
@media (min-width: 640px) {
  .gallery-grid.gallery-grid--masonry:is(.gallery-grid--cols-3, .gallery-grid--cols-4, .gallery-grid--cols-5, .gallery-grid--cols-6) { columns: 3; }
}
@media (min-width: 1024px) {
  .gallery-grid.gallery-grid--masonry.gallery-grid--cols-4 { columns: 4; }
  .gallery-grid.gallery-grid--masonry.gallery-grid--cols-5 { columns: 5; }
  .gallery-grid.gallery-grid--masonry.gallery-grid--cols-6 { columns: 6; }
}
@media (min-width: 640px) and (max-width: 1023.98px) {
  .gallery-grid.gallery-grid--masonry.gallery-grid--tablet-1 { columns: 1; }
  .gallery-grid.gallery-grid--masonry.gallery-grid--tablet-2 { columns: 2; }
  .gallery-grid.gallery-grid--masonry.gallery-grid--tablet-3 { columns: 3; }
  .gallery-grid.gallery-grid--masonry.gallery-grid--tablet-4 { columns: 4; }
}
@media (max-width: 639.98px) {
  .gallery-grid.gallery-grid--masonry.gallery-grid--phone-1 { columns: 1; }
  .gallery-grid.gallery-grid--masonry.gallery-grid--phone-2 { columns: 2; }
}
.gallery-grid--masonry .gallery-item { aspect-ratio: auto; break-inside: avoid; margin-bottom: var(--gallery-gap); }
.gallery-grid.gallery-grid--masonry .gallery-item img { height: auto; transition: opacity 0.2s; }
.gallery-grid--masonry .gallery-item:is(:hover, :focus-visible) img { transform: none; opacity: 0.88; }
.gallery-item:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

/* «Σε σειρά που σύρεται»: the same photo links, laid out as a Splide row
   (theme/js/gallery.js). Before it mounts the photos are a plain row, so
   nothing jumps and a page with no JS still shows them. */
.gallery-grid--slider { display: block; }
.gallery-grid--slider .splide__list { margin: 0; padding: 0; list-style: none; }
.gallery-grid--slider .splide__slide { height: auto; }
/* The chosen gap before Splide mounts too, so nothing jumps when it does. */
.gallery-grid--slider:not(.is-ready) .splide__list { display: flex; gap: var(--gallery-gap); overflow: hidden; }
/* As many as the script will show, per screen (photo-grid.blade.php's --per…): nothing jumps (audit W8). */
.gallery-grid--slider { --per-now: var(--per, 4); }
@media (max-width: 1024px) { .gallery-grid--slider { --per-now: var(--per-tablet, 3); } }
@media (max-width: 640px) { .gallery-grid--slider { --per-now: var(--per-phone, 1); } }
.gallery-grid--slider:not(.is-ready) .splide__slide { flex: 0 0 calc((100% - (var(--per-now) - 1) * var(--gallery-gap)) / var(--per-now)); }
.gallery-grid--slider .splide__track { touch-action: pan-y; }
.gallery-grid--slider .splide__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 0; border-radius: 50%;
  background: rgb(255 255 255 / 0.92);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
.gallery-grid--slider .splide__arrow:disabled { opacity: 0.35; cursor: default; }
.gallery-grid--slider .splide__arrow--prev { left: var(--space-2); }
.gallery-grid--slider .splide__arrow--next { right: var(--space-2); }
.gallery-grid--slider .splide__arrow svg { width: 20px; height: 20px; fill: currentColor; }
.gallery-grid--slider .splide__arrow--prev svg { transform: scaleX(-1); }
/* «Τελείες» under the row, not over a photograph — a thumbnail is too small
   to put anything on top of. Splide's own stylesheet hides the pagination
   with `.splide:not(.is-overflow)`, which outranks a plain selector here and
   can be false while the photographs are still loading, so the block's
   choice is honoured with !important, as the slideshow does. */
.gallery-grid--slider .splide__pagination {
  display: flex !important;
  justify-content: center;
  gap: var(--space-2);
  margin: var(--space-3) 0 0;
  padding: 0;
  list-style: none;
}
.gallery-grid--slider .splide__pagination__page {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
}
.gallery-grid--slider .splide__pagination__page.is-active { background: var(--color-accent); transform: scale(1.25); }
.gallery-grid--slider :is(.splide__arrow, .splide__pagination__page):focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

/* The lightbox is PhotoSwipe (theme/js/gallery.js); its own stylesheet
   comes from assets/vendor/photoswipe.css and is fetched only where
   there is a gallery. Only the caption is the theme's. */
.pswp__caption {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 10;
  padding: var(--space-4) var(--space-5) var(--space-5);
  margin: 0 auto;
  max-width: min(92vw, 70ch);
  color: #fff;
  text-align: center;
  font-size: 0.95rem;
  text-shadow: 0 1px 3px rgb(0 0 0 / 0.6);
  pointer-events: none;
}

/* Slideshow (js/slideshow.js) */
.block-slideshow { position: relative; overflow: hidden; border-radius: var(--radius-lg); outline-offset: 4px; }
.block-slideshow img { -webkit-user-drag: none; user-select: none; }
/* Splide drags with pointer events but sets no touch-action, so the page
   would stop scrolling vertically over a slideshow on a phone: pan-y
   keeps the scroll and leaves the horizontal swipe to the library. */
.block-slideshow__track { margin: 0; touch-action: pan-y; }
.block-slideshow .splide__list { margin: 0; padding: 0; list-style: none; }
.block-slideshow__slide { position: relative; }
.block-slideshow__slide img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Before Splide mounts (and with JS off) the first slide stands alone,
   so the page never shows a column of images: theme/js/slideshow.js. */
.block-slideshow:not(.is-ready) .splide__list { display: block; }
.block-slideshow:not(.is-ready) .block-slideshow__slide + .block-slideshow__slide { display: none; }

/* A hero slideshow runs edge to edge above the page title. */
.block-slideshow--hero { border-radius: 0; margin-block: 0; }
.block-slideshow--hero .block-slideshow__slide img { aspect-ratio: 4 / 5; max-height: 80vh; }
@media (min-width: 640px) { .block-slideshow--hero .block-slideshow__slide img { aspect-ratio: 16 / 9; } }
@media (min-width: 1024px) { .block-slideshow--hero .block-slideshow__slide img { aspect-ratio: 21 / 9; } }

.block-slideshow__caption {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--space-7) var(--space-5) var(--space-7);
  color: #fff;
  background: linear-gradient(transparent, rgb(0 0 0 / 0.62));
}
.block-slideshow--hero .block-slideshow__caption { padding-inline: max(var(--space-4), (100% - var(--container)) / 2); }
.block-slideshow__title { margin: 0 0 var(--space-2); font-size: clamp(1.4rem, 3vw, 2.4rem); color: #fff; }
.block-slideshow__text { margin: 0 0 var(--space-4); max-width: 40rem; }

/* Splide draws the arrows and the dots (it labels and disables them
   itself); the theme's own look goes on its classes.

   The arrows need the z-index: Splide puts .splide__arrows before the
   track in the DOM and splide-core gives .splide__track `z-index: 0`,
   so without it the track paints over them and they are not just
   invisible but unclickable. */
.block-slideshow .splide__arrow {
  position: absolute;
  z-index: 2;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.9);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
  opacity: 1;
}
.block-slideshow .splide__arrow:hover:not(:disabled) { background: #fff; }
.block-slideshow .splide__arrow:disabled { opacity: 0.4; cursor: default; }
.block-slideshow .splide__arrow--prev { left: var(--space-3); }
.block-slideshow .splide__arrow--next { right: var(--space-3); }
.block-slideshow .splide__arrow svg { width: 22px; height: 22px; fill: currentColor; }
/* splide-core ships one arrow shape and no flip for it (that lives in
   Splide's full theme, which the theme does not use): without this both
   arrows point the same way. */
.block-slideshow .splide__arrow--prev svg { transform: scaleX(-1); }

/* Whether the dots show is «Κουκκίδες» in the block, not a guess: Splide
   hides its pagination with `.splide:not(.is-overflow)`, which outranks
   any plain selector here and can be false while the images are still
   loading. We only draw them when the block asked for them. */
.block-slideshow .splide__pagination {
  position: absolute;
  inset: auto 0 var(--space-3) 0;
  display: flex !important;
  justify-content: center;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}
.block-slideshow .splide__pagination__page {
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgb(255 255 255 / 0.55);
  cursor: pointer;
}
.block-slideshow .splide__pagination__page.is-active { background: #fff; transform: scale(1.2); }
.block-slideshow :is(.splide__arrow, .splide__pagination__page):focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Map (click to load, js/map.js) */
.block-map {
  position: relative;
  height: 420px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}
.block-map--small { height: 300px; }
.block-map--large { height: 560px; }
@media (max-width: 640px) {
  .block-map--medium, .block-map--large { height: 360px; }
}
.block-map__load {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-5);
  border: 0;
  background:
    linear-gradient(var(--color-border) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, var(--color-border) 1px, transparent 1px) 0 0 / 48px 48px,
    var(--color-surface);
  color: var(--color-text);
  font: inherit;
  cursor: pointer;
}
.block-map__load:disabled { cursor: progress; opacity: 0.7; }
.block-map__pin {
  width: 28px;
  height: 28px;
  border-radius: 50% 50% 50% 0;
  background: var(--color-accent);
  transform: rotate(-45deg);
  box-shadow: 0 2px 6px rgb(17 24 39 / 0.25);
}
.block-map__label {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
}
.block-map__load:hover .block-map__label,
.block-map__load:focus-visible .block-map__label { background: var(--color-accent-hover); }
.block-map__note { font-size: var(--fs-xs); color: var(--color-muted); }
.block-map__canvas { width: 100%; height: 100%; }
.block-map__popup { display: grid; gap: var(--space-1); font: inherit; color: #111827; }
.block-map__popup a { color: #1D4ED8; }

/* Video (click-to-play facade, js/video-embed.js) */
.video-embed-facade {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #000;
}
.video-embed-play {
  position: absolute;
  inset: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.video-embed-thumbnail { width: 100%; height: 100%; object-fit: cover; }
.video-embed-placeholder { width: 100%; height: 100%; background: linear-gradient(135deg, #1F2937, #111827); }
.video-embed-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 68px;
  height: 48px;
  transform: translate(-50%, -50%);
  border-radius: 12px;
  background: rgb(17 24 39 / 0.8);
  transition: background 0.15s;
}
.video-embed-play:hover .video-embed-play-icon { background: #DC2626; }
.video-embed-play-icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 10px 0 10px 17px;
  border-color: transparent transparent transparent #fff;
}
.video-embed-player:not(:empty) { position: absolute; inset: 0; }
.video-embed-player iframe { width: 100%; height: 100%; border: 0; }
.video-embed-caption { margin-top: var(--space-2); font-size: var(--fs-sm); color: var(--color-muted); }

/* «Ροή περιεχομένου»: an optional heading with «Δείτε όλα», then a layout. */
.block-entry-feed__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-bottom: var(--space-4); }
.block-entry-feed__title { margin: 0; }
.block-menu__title { margin: 0 0 var(--space-4); font-size: var(--fs-lg); }
.block-entry-feed__all { font-weight: 600; white-space: nowrap; }

.feed-list { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.feed-list__item { position: relative; display: grid; grid-template-columns: minmax(96px, 200px) 1fr; gap: var(--space-4); align-items: start; }
.feed-list__item:not(:has(.feed-list__media)) { grid-template-columns: 1fr; }
.feed-list__media { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); background: var(--color-surface); }
.feed-list__media img { width: 100%; height: 100%; object-fit: cover; }
.feed-list__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.feed-list__title { margin: 0; font-size: var(--fs-lg); line-height: 1.3; }
.feed-list__title a { color: var(--color-text); text-decoration: none; }
/* The whole row is the title's link. */
.feed-list__title a::after { content: ""; position: absolute; inset: 0; }
.feed-list__item:hover .feed-list__title a { color: var(--color-accent-text); }
.feed-list__item:has(a:focus-visible) { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--radius); }
.feed-list__title a:focus-visible { outline: none; }
.feed-list__intro { margin: 0; color: var(--color-muted); font-size: var(--fs-sm); }
@media (max-width: 480px) {
  .feed-list__item { grid-template-columns: 96px 1fr; gap: var(--space-3); }
  .feed-list__intro { display: none; }
}

.feed-compact { display: grid; margin: 0; padding: 0; list-style: none; }
.feed-compact__item { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 var(--space-3); padding-block: var(--space-2); border-bottom: 1px solid var(--color-border); }
.feed-compact__item:first-child { padding-top: 0; }
.feed-compact__item a { font-weight: 600; text-decoration: none; }
.feed-compact__item:has(.feed-compact__icon) { justify-content: flex-start; align-items: center; }
.feed-compact__icon, .feed-list__icon { flex: none; color: var(--color-accent-text); }
.feed-compact__item:has(.feed-compact__icon) time { margin-left: auto; }
.feed-compact__item a:hover { text-decoration: underline; }

/* Wide blocks may leave the reading column for the container width. */
.measure .block-gallery,
.measure .block-slideshow:not(.block-slideshow--hero),
.measure .block-entry-feed--cards {
  width: min(100vw - 2 * var(--edge), var(--container));
  margin-inline: calc(50% - min(50vw - var(--edge), var(--container) / 2));
}

/* ===================== 10. Forms ===================== */

.block-form { max-width: var(--measure); scroll-margin-top: calc(var(--header-height) + var(--space-4)); }
.block-form__fields { display: grid; gap: var(--space-5); }
/* «Πλάτος: μισή γραμμή»: two such fields share a row from 640px; everything else the whole row. */
.block-form__fields > * { grid-column: 1 / -1; }
@media (min-width: 640px) {
  .block-form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .block-form__fields > .form-row--half { grid-column: auto; }
}

.form-row { display: grid; gap: var(--space-2); }
.form-row > label:not(.choice), .block-form legend {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.required { margin-left: 2px; color: var(--color-error); }

.block-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  width: 100%;
  min-height: 44px;
  padding: 0.65rem 0.8rem;
  font: inherit;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.block-form :is(input, select, textarea):focus { outline: none; border-color: var(--color-accent-text); box-shadow: 0 0 0 3px rgb(37 99 235 / 0.2); }
.block-form :is(input, select, textarea)[aria-invalid="true"] { border-color: var(--color-error); }
.block-form :is(input, select, textarea)[aria-invalid="true"]:focus { box-shadow: 0 0 0 3px rgb(185 28 28 / 0.18); }
.block-form ::placeholder { color: #9CA3AF; }

.block-form select {
  appearance: none;
  padding-right: 2.5rem;
  background: var(--color-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234B5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center / 18px;
}
.block-form textarea { min-height: 140px; resize: vertical; }

.block-form fieldset { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.block-form legend { margin-bottom: var(--space-1); padding: 0; }

.choice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: var(--fs-base);
  cursor: pointer;
}
.choice input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 0.15rem 0 0;
  accent-color: var(--color-accent-text);
  cursor: pointer;
}
fieldset[aria-invalid="true"] .choice input,
.choice input[aria-invalid="true"] { outline: 2px solid var(--color-error); outline-offset: 1px; }
.choice input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }

.form-help { margin: 0; font-size: var(--fs-sm); color: var(--color-muted); }
.field-error { margin: 0; font-size: var(--fs-sm); font-weight: 500; color: var(--color-error); }

.form-status {
  margin: 0 0 var(--space-5);
  padding: var(--space-4);
  border: 1px solid;
  border-radius: var(--radius);
  font-weight: 500;
}
.form-status:focus { outline: var(--focus-ring); outline-offset: 2px; }
.form-status--success { color: var(--color-success); background: var(--color-success-bg); border-color: rgb(21 128 61 / 0.25); }
.form-status--error { color: var(--color-error); background: var(--color-error-bg); border-color: rgb(185 28 28 / 0.25); }

.block-form [data-form-submit] { justify-self: start; }
.block-form [data-form-submit][disabled] { opacity: 0.7; cursor: progress; }

/* ===================== 11. Cookie bar ===================== */

.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 150;
  padding-block: var(--space-4);
  background: var(--color-text);
  color: #fff;
  box-shadow: 0 -8px 24px rgb(17 24 39 / 0.15);
}
.consent[hidden] { display: none; }
.consent__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.consent__inner p { margin: 0; flex: 1 1 320px; font-size: var(--fs-sm); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consent .button--ghost { color: #fff; border-color: rgb(255 255 255 / 0.45); }
.consent .button--ghost:hover { background: rgb(255 255 255 / 0.1); color: #fff; }
@media (max-width: 480px) {
  .consent__actions { width: 100%; }
  .consent__actions .button { flex: 1 1 100%; }
}

/* ===================== 12. Utilities ===================== */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 44px;
  padding: 0.65em 1.25em;
  border: 1px solid var(--color-accent);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-contrast); }

.button--ghost { background: transparent; color: var(--color-text); border-color: var(--color-border-strong); }
.button--ghost:hover { background: var(--color-surface); color: var(--color-text); border-color: var(--color-border-strong); }

/* ===================== 13. Search, breadcrumbs, print ===================== */

.search-form { display: flex; gap: var(--space-2); max-width: 32rem; margin: 0 0 var(--space-5); }
.search-form__input {
  flex: 1; min-width: 0; min-height: 44px; padding: 0.55em 0.9em;
  font: inherit; color: var(--color-text); background: var(--color-bg, #fff);
  border: 1px solid var(--color-border-strong); border-radius: var(--radius);
}
.search-form__input:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.search-count { margin: 0 0 var(--space-4); font-weight: 600; }
.search-hint { color: var(--color-muted); }
.message-page .search-form { margin-inline: auto; }

/* 15px: readable, still quieter than the text (audit W26: it was 13.6px). */
.breadcrumbs { margin: var(--space-4) 0 var(--space-3); font-size: 0.9375rem; color: var(--color-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 0 0.5rem; list-style: none; margin: 0; padding: 0; }
/* The separator stays with the step before it, so a wrapped line never starts with one. */
.breadcrumbs li:not(:last-child)::after { content: "›"; margin-left: 0.5rem; color: var(--color-border-strong); }
.breadcrumbs li { min-width: 0; display: flex; align-items: center; }
.breadcrumbs [aria-current="page"] { padding-block: 0.4rem; }
.breadcrumbs a { color: inherit; text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding-block: 0.4rem; }
.breadcrumbs a:hover { color: var(--color-text); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); }

/* ===================== 14. The look ===================== */

/*
  A plain, neutral starting look: white page, dark text, one accent colour,
  ordinary rounded buttons, a light footer. Nothing here belongs to a brand —
  a client's look goes in public/site/site.css (docs/site-overrides.md).
*/

/* Type. */
h1, h2, h3, h4 { font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
h3, h4 { letter-spacing: -0.01em; line-height: 1.25; }
a { text-decoration-thickness: 1px; }
::selection { background: var(--color-accent-soft); color: var(--color-ink); }
main { --main-pad: clamp(2rem, 5vw, 4rem); }

/* Header. The blurred background is a layer behind the header, not the header itself: a
   backdrop-filter on the header would make it the containing block of the full-screen phone menu. */
.site-header { background: none; }
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: color-mix(in srgb, var(--color-bg) 92%, transparent);
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
}
.site-logo { font-size: 1.35rem; font-weight: 700; letter-spacing: -0.02em; }
[data-nav-mode="desktop"] .site-nav__list > .site-nav__item > .site-nav__row > a {
  padding: 0.55rem 0.85rem;
  border-radius: var(--radius);
  font-size: 0.95rem;
  font-weight: 500;
}
[data-nav-mode="desktop"] .site-nav__list > .site-nav__item[data-has-children] > .site-nav__row > a { padding-right: 0.35rem; }
[data-nav-mode="desktop"] .site-nav__submenu { padding: 6px; border-radius: var(--radius); background: var(--color-bg); }
[data-nav-mode="desktop"] .site-nav__submenu a { padding: 0.55rem 0.8rem; border-radius: calc(var(--radius) - 4px); }
/* A row too long for the header (a language with long words) first tries a
   tighter one — smaller gaps and text — before giving way to the burger (nav.js). */
[data-nav-mode="desktop"][data-nav-compact] .site-header__inner { gap: var(--space-4); }
[data-nav-mode="desktop"][data-nav-compact] .site-menu { gap: var(--space-2); }
[data-nav-mode="desktop"][data-nav-compact] .site-nav__list { gap: 0; }
[data-nav-mode="desktop"][data-nav-compact] .site-nav__list > .site-nav__item > .site-nav__row > a { padding-inline: 0.5rem; font-size: 0.875rem; }
[data-nav-mode="desktop"][data-nav-compact] .site-nav__list > .site-nav__item[data-has-children] > .site-nav__row > a { padding-right: 0.15rem; }

/* The phone menu: big rows. */
[data-nav-mode="mobile"] .site-nav a { min-height: 60px; font-size: 1.5rem; font-weight: 700; letter-spacing: -0.02em; }
[data-nav-mode="mobile"] .site-nav__submenu a { min-height: 46px; font-size: 1.05rem; font-weight: 500; letter-spacing: 0; }

/* Buttons. */
.button {
  min-height: 46px;
  padding: 0.75em 1.35em;
  border-color: var(--color-accent-text);
  border-radius: var(--radius);
  background: var(--color-accent);
  color: var(--color-accent-contrast);
  font-size: 0.95rem;
  font-weight: 600;
}
.button:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); color: var(--color-accent-contrast); }
.button--ghost { background: transparent; color: var(--color-ink); border-color: var(--color-border-strong); }
.button--ghost:hover { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-ink); }

/* Page headings. */
.page-header { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.page-header__eyebrow { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--color-accent-text); }
.page-header__intro { max-width: 46ch; font-size: var(--fs-lg); line-height: 1.5; color: var(--color-muted); }
.article-meta { border-bottom-color: var(--color-border); }
.main-image img { border-radius: var(--radius-lg); }

/* Reading text. */
.content a, .block-text a { color: var(--color-accent-text); }
.content a:hover, .block-text a:hover { color: var(--color-accent-text-hover); }
.content blockquote, .block-text blockquote { border-left: 3px solid var(--color-border-strong); font-style: normal; color: var(--color-ink); }
.content img, .block-text img, .block-image img { border-radius: var(--radius); }
.content th, .block-text th { background: var(--color-surface); }

/* Cards. */
.card { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.card__media { background: var(--color-surface); }
.card__placeholder { background: linear-gradient(135deg, var(--color-surface), var(--color-surface-2)); }
.card__body { padding: var(--space-4) var(--space-5) var(--space-5); gap: var(--space-2); }
.card__category { letter-spacing: 0.06em; }
.card__title { font-size: 1.25rem; font-weight: 600; }
.card__title a { color: var(--color-ink); }
.card:hover .card__title a { color: var(--color-accent-text); }
.card__intro { color: var(--color-muted); }
.card__more { font-weight: 600; }

/* Lists. */
.feed-list { gap: 0; }
.feed-list__item { padding-block: var(--space-5); border-top: 1px solid var(--color-border); }
.feed-list__item:last-child { border-bottom: 1px solid var(--color-border); }
.feed-list__media { border-radius: var(--radius); }
.feed-list__title { font-size: 1.25rem; font-weight: 600; }
.feed-list__title a { color: var(--color-ink); }
.feed-compact__item { border-bottom-color: var(--color-border); }

/* Pager, search, breadcrumbs. */
.pager__link { border-radius: var(--radius); border-color: var(--color-border-strong); font-weight: 500; }
.pager__link:hover { background: var(--color-surface); border-color: var(--color-ink); color: var(--color-ink); }
.search-form__input { border-radius: var(--radius); background: var(--color-bg); border-color: var(--color-border-strong); }
.breadcrumbs a:hover { color: var(--color-ink); }

/* Blocks. */
.block-cta { padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 3rem); background: var(--color-surface); border: 0; border-radius: var(--radius-lg); }
.block-cta h2 { font-size: var(--fs-h2); }
.block-quote::before { color: var(--color-accent-text); font-family: var(--font-body); font-weight: 700; }
.block-accordion { border-radius: var(--radius-lg); border-color: var(--color-border); background: var(--color-bg); }
.block-accordion__item summary:hover { background: var(--color-surface); }
.gallery-item { border-radius: var(--radius); }
.block-divider { border-top-color: var(--color-border); }

/* Forms. */
.block-form :is(input:not([type="checkbox"], [type="radio"]), select, textarea) {
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border-color: var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-bg);
}
.block-form :is(input, select, textarea):focus { border-color: var(--color-accent-text); box-shadow: 0 0 0 3px var(--color-accent-soft); }
.block-form ::placeholder { color: var(--color-muted); opacity: 0.8; }
.form-status { border-radius: var(--radius); }

/* Cookie bar: a bar along the bottom. */
.consent { background: var(--color-bg); color: var(--color-text); border-top: 1px solid var(--color-border); box-shadow: 0 -8px 24px rgb(0 0 0 / 0.08); }
.consent a { color: var(--color-accent-text); }

/* Footer: a light band. */
.site-footer { margin-top: var(--space-8); background: var(--color-surface); border-top: 1px solid var(--color-border); color: var(--color-muted); }
.site-footer__inner { gap: var(--space-6); padding-block: clamp(2.5rem, 5vw, 4rem); }
.site-footer a { color: var(--color-text); }
.site-footer a:hover { color: var(--color-accent-text); text-decoration: underline; }
.site-footer__bottom { border-top-color: var(--color-border); padding-block: var(--space-5); font-size: 0.9rem; }
.site-footer .site-nav--columns > .site-nav__list > .site-nav__item > .site-nav__row > :is(a, .site-nav__heading) { color: var(--color-ink); font-weight: 600; }
.site-footer .search-form { align-self: flex-start; width: 100%; max-width: 28rem; margin: 0; }

/* Message pages (404, maintenance). */
.message-page h1 { font-size: var(--fs-h1); }

/* Printed: the page itself, in black on white, with the addresses of its links. */
@media print {
  *, *::before, *::after { background: transparent !important; color: #000 !important; box-shadow: none !important; text-shadow: none !important; }
  body { font-size: 12pt; line-height: 1.45; }
  .skip-link, .site-header, .site-footer__inner, .consent, .search-form, .breadcrumbs, .pswp,
  .block-map__load, .block-slideshow__nav, .block-form, .block-video, .pagination, [data-site-header], [data-form] { display: none !important; }
  .container, .measure { max-width: none !important; padding: 0 !important; }
  a[href^="http"]:not([href*="#"]):after { content: " (" attr(href) ")"; font-size: 0.85em; word-break: break-all; }
  img { max-width: 100% !important; break-inside: avoid; }
  h1, h2, h3, h4 { break-after: avoid; }
  p, li, figure, blockquote { orphans: 3; widows: 3; }
}

/* Touch screens: links on their own line are big enough to hit (44px), without changing the desktop look. */
@media (pointer: coarse) {
  .site-logo { display: inline-flex; align-items: center; min-height: 44px; }
  .site-footer a { display: inline-block; padding-block: 0.65rem; }
  .site-footer__legal ul, .site-footer ul { gap: 0; }
  /* The contact lines keep their icon beside the text and their own spacing: the rules above would stack them and close the gaps. */
  .site-footer .site-contact a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 0.25rem; }
  .site-footer .site-contact a.site-contact__address { align-items: flex-start; padding-block: 0.6rem; }
  .site-footer .site-contact__details { gap: 0; }
  .site-footer .site-contact__socials { column-gap: var(--space-4); }
  .breadcrumbs a, .breadcrumbs [aria-current="page"] { padding-block: 0.65rem; }
}

/* The footer link that reopens the cookie choices. */
.site-footer__consent { background: none; border: 0; padding: 0; font: inherit; font-size: var(--fs-sm); color: inherit; text-decoration: underline; text-underline-offset: 2px; cursor: pointer; }
.site-footer__consent:hover { color: var(--color-text); }
@media (pointer: coarse) { .site-footer__consent { padding-block: 0.65rem; } }

/* «Κουμπιά κάτω δεξιά» (theme/partials/floating-buttons.blade.php): fixed in
   the corner, clear of a phone's home bar, under the cookie banner. Round with
   only an icon, a pill with words. --fb-bg / --fb-ink: the button's colours. */
.floating-buttons {
  position: fixed; z-index: 140;
  inset-inline-end: max(var(--space-4), env(safe-area-inset-right)); bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-3);
  pointer-events: none;
}
.floating-button {
  pointer-events: auto;
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 52px; padding: 0 1.25rem;
  border-radius: 999px;
  background: var(--fb-bg, var(--color-accent)); color: var(--fb-ink, var(--color-accent-contrast));
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 20px rgb(17 24 39 / 0.22);
  transition: transform 0.15s, box-shadow 0.15s;
}
.floating-button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgb(17 24 39 / 0.28); color: var(--fb-ink, var(--color-accent-contrast)); text-decoration: none; }
.floating-button:focus-visible { outline: 3px solid var(--color-text); outline-offset: 3px; }
.floating-button--round { width: 56px; height: 56px; padding: 0; justify-content: center; }
.floating-button--round .floating-button__icon { width: 28px; height: 28px; }
.floating-button__icon { flex: none; }
@media (max-width: 767.98px) {
  .floating-button--on-desktop { display: none; }
  .floating-button { min-height: 48px; padding: 0 1rem; }
  .floating-button--round { width: 52px; height: 52px; padding: 0; }
}
@media (min-width: 768px) { .floating-button--on-phone { display: none; } }
@media (prefers-reduced-motion: reduce) { .floating-button, .floating-button:hover { transition: none; transform: none; } }
@media print { .floating-buttons { display: none; } }
/* Room under the footer for the stack this screen shows (a button and its gap
   are about 68px), so its last links and «Ρυθμίσεις cookies» are never under
   a button. */
@media (max-width: 767.98px) {
  .site-footer:has(~ .floating-buttons[data-phone="1"]) { padding-bottom: 76px; }
  .site-footer:has(~ .floating-buttons[data-phone="2"]) { padding-bottom: 144px; }
  .site-footer:has(~ .floating-buttons[data-phone="3"]) { padding-bottom: 212px; }
  .site-footer:has(~ .floating-buttons[data-phone="4"]) { padding-bottom: 280px; }
}
@media (min-width: 768px) {
  .site-footer:has(~ .floating-buttons[data-desktop="1"]) { padding-bottom: 76px; }
  .site-footer:has(~ .floating-buttons[data-desktop="2"]) { padding-bottom: 144px; }
  .site-footer:has(~ .floating-buttons[data-desktop="3"]) { padding-bottom: 212px; }
  .site-footer:has(~ .floating-buttons[data-desktop="4"]) { padding-bottom: 280px; }
}
/* Beside the footer's content, not over it (theme/js/base.js): no room needed. */
.site-footer:has(~ .floating-buttons.floating-buttons--aside) { padding-bottom: 0; }
/* While the cookie banner is open the buttons step aside: half of them under
   it looks broken, and hidden ones must not be reached with the keyboard. */
body:has(.consent:not([hidden])) .floating-buttons { visibility: hidden; }

/* «Επεξεργασία» (theme/partials/edit-button.blade.php): only for the signed-in
   team, bottom left (the floating buttons hold the right), dark on any site. */
.site-edit {
  position: fixed; z-index: 140;
  inset-inline-start: max(var(--space-4), env(safe-area-inset-left)); bottom: max(var(--space-4), env(safe-area-inset-bottom));
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 40px; padding: 0 1rem;
  border-radius: 999px;
  background: #111827; color: #fff;
  font-weight: 600; font-size: var(--fs-sm); line-height: 1.2; text-decoration: none;
  box-shadow: 0 6px 20px rgb(17 24 39 / 0.22);
}
.site-edit:hover { background: #000; color: #fff; text-decoration: none; }
.site-edit:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.site-edit__icon { flex: none; }
@media print { .site-edit { display: none; } }

/* «Banner ΕΣΠΑ» (theme/partials/espa-banner.blade.php): the project's image, centred,
   at most the width of a usual banner. Under the header or before the footer. */
.site-espa { padding-block: var(--space-4); }
.site-espa .container { display: flex; justify-content: center; }
.site-espa__link { display: inline-block; line-height: 0; }
.site-espa__link:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 3px; }
.site-espa__img { display: block; width: auto; max-width: min(100%, 728px); height: auto; }

/* ===================== 15. Page rows, sections and their elements ===================== */

/*
  A page's blocks are rows (theme/blocks/section.blade.php, App\Theme\BlockRenderer):
  a single block in a .row of its width, or a .section with columns. Every
  setting is a class or a variable — restyle them in public/site/site.css.
*/
.rows { display: flow-root; }
.row { margin-block: var(--space-6); }
.row--column { width: min(100% - 2 * var(--edge), var(--measure)); margin-inline: auto; }
.row--wide { width: min(100% - 2 * var(--edge), var(--wide)); margin-inline: auto; }
.row--full { width: 100%; }
.row > .block { margin-block: 0; }

/* Section: its box, background and spacing. */
.section {
  --pt: var(--gap-m); --pb: var(--gap-m); --col-gap: clamp(1.5rem, 3.5vw, 3rem);
  position: relative;
  isolation: isolate;
  display: grid;
  padding-block: var(--pt) var(--pb);
}
.section--w-column { width: min(100% - 2 * var(--edge), var(--measure)); margin-inline: auto; }
.section--w-wide { width: min(100% - 2 * var(--edge), var(--wide)); margin-inline: auto; }
.section--w-full, .section--w-bleed { width: 100%; }
.section--w-full > .section__inner { width: min(100% - 2 * var(--edge), var(--wide)); margin-inline: auto; }
.section--w-bleed > .section__inner { width: 100%; }
/* A coloured band inside the page's width is a rounded panel. */
.section:is(.section--w-column, .section--w-wide):not(.section--bg-none) { border-radius: var(--radius-lg); padding-inline: var(--pad-inline, clamp(1.25rem, 4vw, 3.5rem)); }
.section:is(.section--w-column, .section--w-wide) > .section__bg { border-radius: inherit; }

/* Outside the background (margin), unlike the padding above: it parts a section from a neighbour of the same look. */
.section--mt-s { margin-top: var(--gap-s); } .section--mt-m { margin-top: var(--gap-m); } .section--mt-l { margin-top: var(--gap-l); } .section--mt-xl { margin-top: var(--gap-xl); }
.section--mb-s { margin-bottom: var(--gap-s); } .section--mb-m { margin-bottom: var(--gap-m); } .section--mb-l { margin-bottom: var(--gap-l); } .section--mb-xl { margin-bottom: var(--gap-xl); }
.section--pt-none { --pt: 0; } .section--pt-xs { --pt: var(--gap-xs); } .section--pt-s { --pt: var(--gap-s); }
.section--pt-l { --pt: var(--gap-l); } .section--pt-xl { --pt: var(--gap-xl); }
.section--pb-none { --pb: 0; } .section--pb-xs { --pb: var(--gap-xs); } .section--pb-s { --pb: var(--gap-s); }
.section--pb-l { --pb: var(--gap-l); } .section--pb-xl { --pb: var(--gap-xl); }

.section--bg-soft { background: var(--color-soft); }
.section--bg-brand { background: var(--color-brand); color: var(--color-brand-ink); }
.section--bg-dark { background: var(--color-dark); color: var(--color-dark-ink); }
.section--bg-image { color: #fff; background: var(--color-dark); }
.section--bg-slides { color: #fff; background: var(--color-dark); }
/* «Δικό μου χρώμα»: the colour, and light or dark content by its contrast. */
.section--bg-custom { background: var(--section-bg); }
.section--bg-custom.section--on-dark { color: #fff; }
.section--bg-custom.section--on-light { color: var(--color-ink); }
.section:is(.section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-slides, .section--on-dark) :is(h1, h2, h3, h4, .eyebrow, .el-card__title, .el-feature__title) { color: inherit; }
.section:is(.section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-slides, .section--on-dark) .button:not(.button--ghost) { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-ink); }
.section:is(.section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-slides, .section--on-dark) .button--ghost { color: inherit; border-color: currentColor; }
.section__bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
/* The background fills the band, whatever «Αναλογία εικόνας» the section
   carries for the pictures inside it: said through .section so it outweighs
   the .el--ratio-* rules below (§15), which are about those pictures. */
.section > .section__bg picture, .section > .section__bg img { width: 100%; height: 100%; aspect-ratio: auto; }
.section > .section__bg img { object-fit: cover; object-position: var(--focal, center); border-radius: 0; }
.section__bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--overlay, 0.4)); }

.section--h-medium { min-height: 50vh; min-height: 50svh; }
.section--h-large { min-height: 75vh; min-height: 75svh; }
.section--h-screen { min-height: calc(100vh - var(--header-height)); min-height: calc(100svh - var(--header-height)); }
.section--v-top > .section__inner { align-self: start; align-items: start; }
.section--v-center > .section__inner { align-self: center; align-items: center; }
.section--v-bottom > .section__inner { align-self: end; align-items: end; }
/* «Ίδιο ύψος»: every column as tall as the tallest — a photograph
   beside two texts, all ending on the same line. The grid already stretches
   its columns; what needs saying is that whatever sits in a column (an
   element's «Σχεδίαση» wrapper, a group, a card) takes that height
   too, or a background would stop where its own words stop. */
.section--v-stretch > .section__inner { align-self: stretch; align-items: stretch; }
.section--v-stretch .section__col { height: 100%; }
/* Only when the column holds ONE thing: a column of a heading and a text
   must keep them together at the top, not push them to the two ends. */
.section--v-stretch .section__col > :is(.el, .group, .block):only-child { height: 100%; }
.section--v-stretch .section__col > .el:only-child > :is(.group, .block) { height: 100%; }

/* A hero section starts right under the header. */
.hero > .section:first-child { margin-top: calc(-1 * var(--main-pad)); }

/* Columns: stacked on phones, side by side from 768px. */
.section__inner { display: grid; gap: var(--col-gap); grid-template-columns: minmax(0, 1fr); }
.section--gap-none { --col-gap: 0; }
.section--gap-small { --col-gap: 1rem; }
.section--gap-large { --col-gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 768px) {
  .section--cols-1-1 > .section__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section--cols-1-2 > .section__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .section--cols-2-1 > .section__inner { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .section--cols-1-1-1 > .section__inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .section--cols-1-1-1-1 > .section__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .section--cols-1-1-1-1 > .section__inner { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
  .section--phone-reverse > .section__inner { display: flex; flex-direction: column-reverse; }
  /* Each column the full width, whatever «Κάθετη στοίχιση» says: a centred
     flex column would shrink to its content, and a block laid out by its own
     width (a feed's row, «Πρώτο μεγάλο») has none of its own to give. */
  .section--phone-reverse > .section__inner > .section__col { width: 100%; }
}
.section__col { min-width: 0; }
.section__col:empty { display: none; }
/* Elements in a column: spaced by the column, not by their own margins. */
.section__col > *, .section__col > .el > .block { margin-block: 0; }
.section__col > * + * { margin-top: var(--space-5); }
.section__col > .el-heading + .block-text, .section__col > .el-heading + .el-buttons { margin-top: var(--space-4); }

/* «Ομάδα» (App\Blocks\Group): columns INSIDE a column — the same machinery
   as a section's, without the band (no height, no bleed). It stacks on a
   phone like everything else.

   It can carry a background of its own, which is how a column becomes a
   photograph with its words over it: the same colours a section offers and
   a real <img> behind the content, so the picture has its sizes and its
   focal point like any other. position: relative is what keeps that
   picture inside the group instead of behind the whole band. */
.group { display: grid; gap: var(--group-gap, var(--space-5)); grid-template-columns: minmax(0, 1fr); position: relative; }
.group--gap-none { --group-gap: 0; }
.group--gap-small { --group-gap: 1rem; }
.group--gap-normal { --group-gap: var(--space-5); }
.group--gap-large { --group-gap: clamp(2rem, 4vw, 3.5rem); }
.group--v-top { align-items: start; }
.group--v-center { align-items: center; }
.group--v-bottom { align-items: end; }
.group--v-stretch { align-items: stretch; }
.group--v-stretch > .group__col > :is(.el, .block):only-child { height: 100%; }
@media (min-width: 768px) {
  .group--cols-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .group--cols-1-2 { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .group--cols-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .group--cols-1-1-1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .group--cols-1-1-1-1 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .group--cols-1-1-1-1 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.group__col { min-width: 0; position: relative; }
/* The backgrounds, in a section's own words. A group with none is laid out
   by whatever is around it, exactly as it always was. */
.group--bg-soft { background: var(--color-soft); }
.group--bg-brand { background: var(--color-brand); color: var(--color-brand-ink); }
.group--bg-dark { background: var(--color-dark); color: var(--color-dark-ink); }
.group--bg-image { color: #fff; background: var(--color-dark); }
.group:is(.group--bg-soft, .group--bg-brand, .group--bg-dark, .group--bg-image) { border-radius: var(--radius); overflow: hidden; }
/* Words over a photograph or a colour take that colour with them. */
.group:is(.group--bg-brand, .group--bg-dark, .group--bg-image) :is(h1, h2, h3, h4, .eyebrow, .el-card__title, .el-card__text, .el-feature__title, .el-feature__text) { color: inherit; }
.group:is(.group--bg-brand, .group--bg-dark, .group--bg-image) .button:not(.button--ghost) { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-ink); }
.group:is(.group--bg-brand, .group--bg-dark, .group--bg-image) .button--ghost { color: inherit; border-color: currentColor; }
/* Room inside, so words never sit on the very edge of the picture. */
.group--pad-small { padding: var(--space-4); }
.group--pad-normal { padding: var(--space-5); }
.group--pad-large { padding: clamp(2rem, 4vw, 3.5rem); }
.group__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; border-radius: inherit; }
.group > .group__bg picture, .group > .group__bg img { width: 100%; height: 100%; aspect-ratio: auto; }
.group > .group__bg img { object-fit: cover; object-position: var(--focal, center); border-radius: 0; }
.group__bg::after { content: ""; position: absolute; inset: 0; background: rgb(0 0 0 / var(--overlay, 0.4)); }
.group__col:empty { display: none; }
/* Spaced by the group, as a section's column spaces its own. */
.group__col > *, .group__col > .el > .block { margin-block: 0; }
.group__col > * + * { margin-top: var(--space-4); }

/* Design settings of any element (App\Blocks\Design). */
.el--mt-none { margin-top: 0 !important; } .el--mt-xs { margin-top: var(--gap-xs) !important; } .el--mt-s { margin-top: var(--gap-s) !important; }
.el--mt-m { margin-top: var(--gap-m) !important; } .el--mt-l { margin-top: var(--gap-l) !important; } .el--mt-xl { margin-top: var(--gap-xl) !important; }
.el--mb-none { margin-bottom: 0 !important; } .el--mb-xs { margin-bottom: var(--gap-xs) !important; } .el--mb-s { margin-bottom: var(--gap-s) !important; }
.el--mb-m { margin-bottom: var(--gap-m) !important; } .el--mb-l { margin-bottom: var(--gap-l) !important; } .el--mb-xl { margin-bottom: var(--gap-xl) !important; }
.el--maxw-narrow { max-width: 32rem; } .el--maxw-text { max-width: var(--measure); } .el--maxw-wide { max-width: var(--wide); }
.el--align-left { text-align: left; }
.el--align-center { text-align: center; }
.el--align-right { text-align: right; }
.el--align-center:is(.el--maxw-narrow, .el--maxw-text, .el--maxw-wide) { margin-inline: auto; }
.el--align-right:is(.el--maxw-narrow, .el--maxw-text, .el--maxw-wide) { margin-left: auto; }
.el--align-center .el-buttons { justify-content: center; }
.el--align-right .el-buttons { justify-content: flex-end; }
.el--align-center .eyebrow { justify-content: center; }
/* «Αναλογία εικόνας». One class, and the shape itself in --ratio, so any
   pair of numbers works — 2:3, 4:5, 9:16 — not only the few written here.
   Each block's own default shape is written with :where() (see
   .el-card__media below), which has no specificity, so a ratio set here
   always wins — without !important and whatever order the rules end up in.
   --ratio inherits, so a ratio on a section reaches the images inside it.
   «Όπως είναι η εικόνα» (auto) is the way out of any crop: a vertical
   photo stays vertical, and it undoes the ratio of the section around it.
   What survives the crop is «Εστίαση εικόνας» on the block (--focal, this
   placement only), else the library's own focal point (--focal-media from
   <x-image>). */
.el--ratio img { aspect-ratio: var(--ratio, auto); }
/* Last, so «Όπως είναι η εικόνα» wins wherever both are in play. */
.el--ratio-auto img { aspect-ratio: auto; }
:is(.el--ratio, .el--ratio-auto) img {
  width: 100%;
  height: auto;
  object-fit: cover;
  object-position: var(--focal, var(--focal-media, center));
}
/* Γωνίες: only the two radius tokens are redefined here, so every image,
   card and panel inside follows — on one element, on a row or on a whole
   section (all three carry el--* design classes). */
/* «Κενό στα πλάγια»: side room for this element alone. What it is for —
   a section set to «Όλο το πλάτος (και το περιεχόμενο)» so a photo reaches
   the edge, while the text beside it keeps space around it. --pad-inline is
   set too, so the same setting also overrides a section's own side padding
   instead of losing a specificity fight with it. */
.el--pad-none { --pad-inline: 0; padding-inline: 0; }
.el--pad-xs { --pad-inline: var(--gap-xs); padding-inline: var(--gap-xs); }
.el--pad-s { --pad-inline: var(--gap-s); padding-inline: var(--gap-s); }
.el--pad-m { --pad-inline: var(--gap-m); padding-inline: var(--gap-m); }
.el--pad-l { --pad-inline: var(--gap-l); padding-inline: var(--gap-l); }
.el--pad-xl { --pad-inline: var(--gap-xl); padding-inline: var(--gap-xl); }

.el--corners-none { --radius: 0px; --radius-lg: 0px; }
.el--corners-s { --radius: 4px; --radius-lg: 6px; }
.el--corners-m { --radius: 8px; --radius-lg: 14px; }
.el--corners-l { --radius: 18px; --radius-lg: 28px; }
/* A nudge moves the element without moving its neighbours; phones keep the plain layout. */
@media (min-width: 900px) {
  .el--offset { position: relative; z-index: 2; translate: calc(var(--off-x, 0) * var(--offset-step)) calc(var(--off-y, 0) * var(--offset-step)); }
}
@media (max-width: 899.98px) { .el--show-desktop { display: none !important; } }
@media (min-width: 900px) { .el--show-phone { display: none !important; } }
/* Scroll animations (theme/js/base.js adds .is-in); never for people who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
  .js :is(.el--animate-fade, .el--animate-rise, .el--animate-zoom) { transition: opacity 0.7s ease, transform 0.7s ease; }
  .js :is(.el--animate-fade, .el--animate-rise, .el--animate-zoom):not(.is-in) { opacity: 0; }
  .js .el--animate-rise:not(.is-in) { transform: translateY(2rem); }
  .js .el--animate-zoom:not(.is-in) { transform: scale(0.94); }
}

/* Τίτλος */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.6em;
  margin: 0 0 var(--space-3);
  font-size: var(--fs-eyebrow); font-weight: 600; letter-spacing: var(--eyebrow-tracking); text-transform: uppercase;
  color: var(--color-accent-text);
}
.el-heading__title { margin: 0; line-height: 1.08; letter-spacing: -0.03em; text-wrap: balance; }
.el-heading__title--s { font-size: var(--fs-h4); letter-spacing: -0.01em; }
.el-heading__title--m { font-size: var(--fs-h3); }
.el-heading__title--l { font-size: var(--fs-h2); }
.el-heading__title--xl { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.04em; }
.el-heading__subtitle { margin: var(--space-4) 0 0; font-size: var(--fs-lg); line-height: 1.5; opacity: 0.85; }

/* Κουμπιά */
.el-buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; }
.el-buttons__link { font-weight: 600; color: inherit; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.el-buttons__link::after { content: " →"; }

/* Κάρτες */
.el-cards { --cols: 3; display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); }
.el-cards--cols-2 { --cols: 2; } .el-cards--cols-4 { --cols: 4; }
@media (min-width: 640px) { .el-cards { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .el-cards { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
@media (max-width: 639.98px) {
  .el-cards--phone-swipe { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--space-4); padding-bottom: var(--space-2); }
  .el-cards--phone-swipe > .el-card { flex: 0 0 82%; scroll-snap-align: start; }
}
.el-card { position: relative; display: flex; flex-direction: column; min-width: 0; }
.el-card__media img { width: 100%; object-fit: cover; object-position: var(--focal, var(--focal-media, center)); border-radius: var(--radius-lg); }
/* The default shape of a card's photo, in :where() so it carries no
   specificity: any «Αναλογία εικόνας» on the block beats it, including
   «Όπως είναι η εικόνα». Without a ratio, cards stay the even 4:3 grid. */
:where(.el-card__media) img { aspect-ratio: 4 / 3; }
.el-card__icon { margin: 0; color: var(--color-accent-text); line-height: 0; }
.el-cards--boxed .el-card__icon, .el-cards--overlay .el-card__icon { padding: var(--space-4) var(--space-4) 0; }
.el-card:has(.el-card__icon) .el-card__body { padding-top: var(--space-3); }
.el-card__body { padding-top: var(--space-4); }
.el-card__title { margin: 0; font-size: var(--fs-h3); line-height: 1.2; }
.el-card__link { color: inherit; text-decoration: none; }
.el-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.el-card:has(.el-card__link):hover .el-card__title { text-decoration: underline; text-underline-offset: 3px; }
.el-card__link:focus-visible { outline: none; }
.el-card:has(.el-card__link:focus-visible) { outline: var(--focus-ring); outline-offset: 4px; border-radius: var(--radius-lg); }
.el-card__text { margin-top: var(--space-3); color: var(--color-muted); }
.el-card__text > * { margin: 0; } .el-card__text > * + * { margin-top: 0.75em; }
.el-card__more { display: inline-block; margin-top: var(--space-4); font-weight: 600; border-bottom: 1px solid currentColor; }
.el-cards--boxed .el-card { background: var(--color-soft); border-radius: var(--radius-lg); overflow: hidden; }
.el-cards--boxed .el-card__media img { border-radius: 0; }
.el-cards--boxed .el-card__body { padding: var(--space-5); }
.el-cards--overlay .el-card { color: #fff; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-dark); min-height: 22rem; justify-content: flex-end; }
.el-cards--overlay .el-card__media { position: absolute; inset: 0; }
.el-cards--overlay .el-card__media picture, .el-cards--overlay .el-card__media img { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; }
.el-cards--overlay .el-card__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(0 0 0 / 0.75), rgb(0 0 0 / 0.05) 65%); }
.el-cards--overlay .el-card__body { position: relative; padding: var(--space-5); }
.el-cards--overlay :is(.el-card__title, .eyebrow, .el-card__text) { color: inherit; }

/* Λίστα με εικονίδια */
.el-features { --cols: 3; list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-6) var(--space-7); grid-template-columns: minmax(0, 1fr); }
.el-features--cols-1 { --cols: 1; } .el-features--cols-2 { --cols: 2; } .el-features--cols-4 { --cols: 4; }
@media (min-width: 640px) { .el-features { grid-template-columns: repeat(min(var(--cols), 2), minmax(0, 1fr)); } }
@media (min-width: 1024px) { .el-features { grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); } }
.el-feature { display: flex; gap: var(--space-4); align-items: flex-start; }
.el-feature__icon { flex: none; color: var(--color-accent-text); line-height: 0; }
.el-feature__title { margin: 0; font-size: var(--fs-base); font-weight: 600; line-height: 1.35; }
.el-feature__text { margin: var(--space-2) 0 0; color: var(--color-muted); font-size: var(--fs-sm); }
/* It holds rich text now (a link, a bold word, a second paragraph). */
.el-feature__text > :first-child { margin-top: 0; }
.el-feature__text > :last-child { margin-bottom: 0; }
.el-feature__text a { color: inherit; }
.el-features--boxed .el-feature { background: var(--color-soft); border-radius: var(--radius-lg); padding: var(--space-5); }
.el-features--compact { gap: var(--space-4) var(--space-6); }
.el-features--boxed { gap: var(--space-5) var(--space-5); }
.el-features--compact .el-feature { align-items: center; gap: var(--space-3); }
.el-features--compact .el-feature__title { font-weight: 500; font-size: var(--fs-sm); }
.section:is(.section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-slides, .section--on-dark) :is(.el-feature__icon, .el-feature__text, .el-card__text) { color: inherit; }
/* A box is its own light surface: on a coloured or dark section its words must not take the section's light colour (white on white). Beside a soft section it turns plain white, so it still shows. */
.section .el-features--boxed .el-feature, .group .el-features--boxed .el-feature { color: var(--color-text); }
.section:is(.section--bg-soft, .section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-video, .section--bg-slides, .section--bg-custom) .el-features--boxed .el-feature,
.group:is(.group--bg-soft, .group--bg-brand, .group--bg-dark, .group--bg-image) .el-features--boxed .el-feature { background: var(--color-bg); }
.section .el-features--boxed .el-feature :is(.el-feature__title, .el-feature__text), .group .el-features--boxed .el-feature :is(.el-feature__title, .el-feature__text) { color: var(--color-text); }
.section .el-features--boxed .el-feature__text, .group .el-features--boxed .el-feature__text { color: var(--color-muted); }
.section .el-features--boxed .el-feature__icon, .group .el-features--boxed .el-feature__icon { color: var(--color-accent-text); }
/* A white box on a light colour of one's own would vanish: it keeps an edge. */
.section--bg-custom.section--on-light .el-features--boxed .el-feature { border: 1px solid var(--color-border); }

/* Ενσωμάτωση */
.el-embed iframe { display: block; width: 100%; height: var(--embed-height, 600px); border: 0; border-radius: var(--radius); background: var(--color-surface); }
/* On a phone a frame never fills the screen: a swipe would pan the map instead of the page. */
@media (max-width: 640px) { .el-embed iframe { height: min(var(--embed-height, 600px), 70svh); } }

/* Στοιχεία επικοινωνίας */
.el-contact__heading { margin: 0 0 var(--space-4); font-size: var(--fs-lg); }
.el-contact__details { display: grid; gap: var(--space-2); font-style: normal; }
.el-contact__line { display: inline-flex; align-items: flex-start; gap: 0.5em; color: inherit; text-decoration: none; }
.el-contact__line svg { flex: none; margin-top: 0.2em; opacity: 0.7; }
a.el-contact__line:hover { text-decoration: underline; text-underline-offset: 2px; }
.el-contact__map { display: inline-block; margin-top: var(--space-4); font-weight: 600; color: inherit; }
.el-contact__socials { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.el-contact__socials a { color: inherit; }

/* The footer built from shared blocks (Blocks → Θέση στο site → Footer). */
.site-footer__area { color: inherit; }
.site-footer__area .section { color: inherit; }
.site-footer__area :is(h2, h3, .el-heading__title) { color: inherit; }
.site-footer__area .site-nav--list a, .site-footer__area .el-contact a { color: inherit; }

/* A video background (section «Βίντεο»): the photo underneath until it plays, a pause/play button. */
.section__bg--video .section__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, center); opacity: 0; transition: opacity 0.6s ease; }
.section.is-video-playing .section__video, .section__bg--video .section__video:not([poster]) { opacity: 1; }
.section__bg--video::after { z-index: 1; }
/* «Εναλλαγή εικόνων»: the photos stacked, one fading into the next (theme/js/base.js), the shading above them. */
.section__bg--slides::after { z-index: 1; }
.section__bg--slides .section__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.4s ease; }
.section__bg--slides .section__slide.is-active { opacity: 1; }
.section__bg--slides .section__slide picture, .section__bg--slides .section__slide img { width: 100%; height: 100%; aspect-ratio: auto; }
.section__bg--slides .section__slide img { object-fit: cover; object-position: var(--focal, center); border-radius: 0; }
.section--slides-zoom .section__slide.is-active img { animation: section-slide-zoom var(--slide-ms, 5000ms) ease-out both; }
@keyframes section-slide-zoom { from { transform: scale(1); } to { transform: scale(1.08); } }
/* Paused with its button (audit W25): the slow zoom stops too. */
.section__bg--slides.is-paused .section__slide img { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .section__bg--slides .section__slide { transition: none; }
  .section--slides-zoom .section__slide.is-active img { animation: none; }
}
.section--bg-video { color: #fff; background: var(--color-dark); }
.section--bg-video :is(h1, h2, h3, h4, .eyebrow) { color: inherit; }
.section--bg-video .button:not(.button--ghost) { background: var(--color-bg); border-color: var(--color-bg); color: var(--color-ink); }
.section--bg-video .button--ghost { color: inherit; border-color: currentColor; }
.section__video-toggle { position: absolute; z-index: 3; right: clamp(0.75rem, 2vw, 1.5rem); bottom: clamp(0.75rem, 2vw, 1.5rem); display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid rgb(255 255 255 / 0.5); border-radius: 50%; background: rgb(0 0 0 / 0.35); color: #fff; cursor: pointer; }
.section__video-toggle:hover { background: rgb(0 0 0 / 0.55); }
.section__video-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.section__video-toggle .section__video-icon--pause, .section__video-toggle.is-playing .section__video-icon--play { display: none; }
.section__video-toggle.is-playing .section__video-icon--pause { display: block; }

/* ---------------------------------------------------------------------------
   «Ροή περιεχομένου»: «Στυλ κάρτας» and the layouts that are not a plain
   grid (theme/blocks/entry-feed/*, theme/partials/article-card.blade.php).
   Last in the file: the cards' look above (§ cards, and its later restyle)
   is what these build on.
   --------------------------------------------------------------------------- */

/* «Στήλες» 5 and 6 for cards too (as 3 and 4 above: N on a wide screen). */
@media (min-width: 1024px) {
  .cards.cards--cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cards.cards--cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* «Στήλες σε tablet» / «Στήλες σε κινητό» (App\Theme\DeviceColumns): that
   screen's own number instead of the rule above (two, then one). */
@media (min-width: 640px) and (max-width: 1023.98px) {
  .cards.cards--tablet-1 { grid-template-columns: minmax(0, 1fr); }
  .cards.cards--tablet-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards.cards--tablet-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards.cards--tablet-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 639.98px) {
  .cards.cards--phone-1 { grid-template-columns: minmax(0, 1fr); }
  .cards.cards--phone-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Overlay: the words on the picture. The card keeps the picture's 4:3 and
   grows when its words need more; the picture is behind them (z-index -1
   inside the card's own stacking context, isolation) and always fills the
   card, never leaving a band of black under it. Nothing between the title's
   link and the card is positioned, so the link's ::after covers the whole
   card — picture included — as on every other card. The picture clips
   itself to the corners: a card that clipped (overflow: hidden) could not
   grow for a long title. In a row of the grid every card stretches to the
   tallest, as classic cards do. */
.card.card--overlay { isolation: isolate; aspect-ratio: 4 / 3; justify-content: flex-end; overflow: visible; border: 0; background: var(--color-dark, #111); color: #fff; }
/* Stretched with a set width: a stretched box with an aspect-ratio would
   otherwise widen to keep its ratio, past its column. */
.cards > .card--overlay { align-self: stretch; width: 100%; }
.card--overlay > .card__media { position: absolute; inset: 0; z-index: -1; aspect-ratio: auto; overflow: hidden; border-radius: inherit; }
.card--overlay .card__media img { transition: transform 0.4s; }
.card--overlay:hover .card__media img { transform: scale(1.04); }
/* The gradient reaches above the first line (the category), dark enough for
   white text on a light photo, and the text has a soft shadow besides. */
.card--overlay .card__body {
  padding: var(--space-7) var(--space-5) var(--space-5);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  background: linear-gradient(to top, rgb(0 0 0 / 0.86), rgb(0 0 0 / 0.72) 55%, rgb(0 0 0 / 0.6) 80%, rgb(0 0 0 / 0.25) 93%, transparent);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.55);
}
.card--overlay :is(.card__title a, .card__category, .card__meta, .card__date, .card__intro, .card__more) { color: #fff; }
.card--overlay :is(.card__meta, .card__date, .card__intro) { color: rgb(255 255 255 / 0.9); }
.card--overlay:hover .card__title a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .card--overlay:hover .card__media img { transform: none; } }

/* The row and the slideshow (theme/js/slideshow.js). --per is how many show
   on this screen (the view writes the computer's), for the arrows below. */
:is(.feed-slider, .feed-slideshow) { position: relative; container-type: inline-size; }
:is(.feed-slider, .feed-slideshow) .splide__list { margin: 0; padding: 0; list-style: none; }
/* A vertical swipe that starts on a card still scrolls the page (Splide sets no touch-action). */
:is(.feed-slider, .feed-slideshow) .splide__track { touch-action: pan-y; }
/* The track clips sideways (below): a card's focus ring goes inside it, so it shows whole at the row's ends. */
:is(.feed-slider, .feed-slideshow) .card:has(a:focus-visible) { outline-offset: -3px; }

/* «Σε σειρά που σύρεται». Before it mounts — or with JS off — a row that
   scrolls sideways, so every card is still there to reach. */
.feed-slider { --feed-gap: var(--space-5); --per-now: var(--per); }
@media (max-width: 1024px) { .feed-slider { --per-now: var(--per-tablet, min(2, var(--per))); } }
@media (max-width: 640px) { .feed-slider { --per-now: var(--per-phone, 1); } }
.feed-slider .splide__slide.card { height: auto; }
/* One at a time (slideshow.js adaptHeight): each slide its own height, the row follows the one in view. */
:is(.feed-slider, .feed-slideshow).is-adaptive .splide__slide { align-self: flex-start; }
:is(.feed-slider, .feed-slideshow).is-adaptive.is-adaptive-ready .splide__track { transition: height var(--adapt-speed, 0.4s) ease; }
@media (prefers-reduced-motion: reduce) { :is(.feed-slider, .feed-slideshow).is-adaptive .splide__track { transition: none; } }
.feed-slider:not(.is-ready) .splide__list { display: flex; gap: var(--feed-gap); overflow-x: auto; scroll-snap-type: x mandatory; }
.feed-slider:not(.is-ready) .splide__slide { flex: 0 0 min(320px, 85%); scroll-snap-align: start; }

/* «Ένα-ένα (slideshow)»: one item the width of the block, its picture wide
   (21:9 on a computer, 4:3 on a phone), cropped to the frame. Classic: the
   words under the picture; overlay: on it, larger. Before it mounts only
   the first shows — with JS off (no .js) all of them, one under the other. */
.js .feed-slideshow:not(.is-ready):not(.is-rendered) .splide__slide:not(:first-child) { display: none; }
/* With JS off, or a slideshow that could not mount (is-rendered, never is-ready): every item, one under the other. */
html:not(.js) .feed-slideshow .splide__list, .feed-slideshow.is-rendered:not(.is-ready) .splide__list { display: grid; gap: var(--space-5); }
.feed-slideshow__slide.card { border-radius: var(--radius-lg); }
.feed-slideshow__slide:not(.card--overlay) .card__media, .feed-slideshow__slide.card--overlay { aspect-ratio: 4 / 3; }
@media (min-width: 768px) { .feed-slideshow__slide:not(.card--overlay) .card__media, .feed-slideshow__slide.card--overlay { aspect-ratio: 21 / 9; } }
.feed-slideshow__slide.card--overlay .card__body { padding: clamp(2.5rem, 6vw, 5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3.5rem); }
.feed-slideshow__slide.card--overlay .card__body > * { max-width: 46rem; }
.feed-slideshow__slide.card--overlay .card__title { font-size: clamp(1.5rem, 3.2vw, 2.5rem); line-height: 1.15; }
.feed-slideshow__slide.card--overlay .card__intro { font-size: var(--fs-base); -webkit-line-clamp: 2; }
.feed-slideshow__slide.card:not(.card--overlay) .card__title { font-size: clamp(1.25rem, 2.4vw, 1.75rem); }

/* The arrows sit on the middle of the pictures, not of the whole block
   (dots and the words below would pull them down): a card's picture is 4:3
   of its width, a slideshow's 21:9 (4:3 on a phone), and an overlay's
   picture is the whole slide. */
:is(.feed-slider, .feed-slideshow) .splide__arrow {
  position: absolute; z-index: 2; transform: translateY(-50%);
  top: calc((100cqi - (var(--per-now, 1) - 1) * var(--feed-gap, 0px)) / var(--per-now, 1) * 3 / 8);
  width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--color-text);
  cursor: pointer; box-shadow: 0 2px 8px rgb(0 0 0 / 0.2);
}
@media (max-width: 640px) { .feed-slider .splide__arrow { top: calc((100cqi - 3rem) * 3 / 8); } }
.feed-slideshow .splide__arrow { top: calc(100cqi * 3 / 8); }
@media (min-width: 768px) { .feed-slideshow .splide__arrow { top: calc(100cqi * 9 / 42); } }
.feed-slideshow--overlay .splide__arrow, :is(.feed-slider, .feed-slideshow):not(:has(.card__media)) .splide__arrow { top: 50%; }
:is(.feed-slider, .feed-slideshow) .splide__arrow:disabled { opacity: 0.35; cursor: default; }
:is(.feed-slider, .feed-slideshow) .splide__arrow--prev { left: var(--space-2); }
:is(.feed-slider, .feed-slideshow) .splide__arrow--next { right: var(--space-2); }
:is(.feed-slider, .feed-slideshow) .splide__arrow svg { width: 20px; height: 20px; fill: currentColor; }
:is(.feed-slider, .feed-slideshow) .splide__arrow--prev svg { transform: scaleX(-1); }
/* A phone: smaller arrows, and the overlay's words kept clear of them. */
@media (max-width: 640px) {
  :is(.feed-slider, .feed-slideshow) .splide__arrow { width: 36px; height: 36px; }
  .feed-slideshow__slide.card--overlay .card__body { padding-inline: 3.25rem; }
}

/* The dots, under the row. !important: splide-core hides them with
   .splide:not(.is-overflow), which can be false while the pictures load
   (the gallery's and the slideshow block's dots say the same). */
:is(.feed-slider, .feed-slideshow) .splide__pagination { position: relative; display: flex !important; gap: var(--space-2); justify-content: center; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
:is(.feed-slider, .feed-slideshow) .splide__pagination__page { width: 10px; height: 10px; padding: 0; border: 0; border-radius: 50%; background: var(--color-border); cursor: pointer; transition: transform 0.15s, background 0.15s; }
:is(.feed-slider, .feed-slideshow) .splide__pagination__page.is-active { background: var(--color-accent); transform: scale(1.25); }
/* An overlay slideshow's words sit at the bottom: its dots go on the picture, at the top. */
.feed-slideshow--overlay .splide__pagination { position: absolute; top: var(--space-4); left: 0; right: 0; z-index: 2; margin: 0; }
.feed-slideshow--overlay .splide__pagination__page { background: rgb(255 255 255 / 0.55); }
.feed-slideshow--overlay .splide__pagination__page.is-active { background: #fff; }
:is(.feed-slider, .feed-slideshow, .block-slideshow) :is(.splide__arrow, .splide__pagination__page, .splide__toggle):focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

/* The pause button of a row that moves by itself (Splide swaps its icon and label). */
.feed-slider__toggle {
  position: absolute; z-index: 3; top: var(--space-3); right: var(--space-3);
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  border: 0; border-radius: 50%; background: rgb(0 0 0 / 0.55); color: #fff; cursor: pointer;
}
:is(.feed-slider, .feed-slideshow, .block-slideshow):not(.is-ready) .feed-slider__toggle { display: none; }
.feed-slider__toggle .splide__toggle__pause { display: none; }
.feed-slider__toggle.is-active .splide__toggle__pause { display: block; }
.feed-slider__toggle.is-active .splide__toggle__play { display: none; }

/* «Πρώτο μεγάλο»: the first card two columns wide and two rows tall, two
   cards beside it, the rest in threes below (six — the feed's default —
   fill it exactly); above the others where there is less room; all one
   under the other on a phone. By the room the list has (.feed-featured is
   the container), not the screen's: a category page, a feed block and a
   narrow column all work. With only one or two cards the first is simply
   the whole width. The first card's picture grows to fill its height. */
.feed-featured { container-type: inline-size; }
.cards.cards--featured { grid-template-columns: minmax(0, 1fr); }
.cards--featured > .card--lead .card__media { aspect-ratio: 16 / 10; }
.cards--featured > .card--lead.card--overlay { aspect-ratio: 16 / 10; }
.cards--featured > .card--lead.card--overlay .card__media { aspect-ratio: auto; }
.cards--featured > .card--lead .card__title { font-size: clamp(1.4rem, 4cqi, 2rem); line-height: 1.2; }
@container (min-width: 560px) {
  .cards.cards--featured { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cards--featured > .card--lead { grid-column: 1 / -1; }
  /* The others go two by two: an odd one out at the end takes the row. */
  .cards--featured > .card:nth-child(even):last-child { grid-column: 1 / -1; }
}
@container (min-width: 900px) {
  .cards.cards--featured { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards--featured:has(> :nth-child(3)) > .card--lead { grid-column: span 2; grid-row: span 2; }
  .cards--featured:has(> :nth-child(3)) > .card--lead:not(.card--overlay) .card__media { flex: 1 1 auto; aspect-ratio: auto; min-height: 16rem; }
  .cards--featured:has(> :nth-child(3)) > .card--lead.card--overlay { aspect-ratio: auto; }
  /* After the first and its two, threes: a last row of one takes the whole
     row, of two the second is two wide — no row with a gap at its end. A
     second card with nothing after it stays the whole width under the first. */
  .cards--featured > .card:nth-child(even):last-child { grid-column: auto; }
  .cards--featured > .card:nth-child(3n+1):last-child:not(.card--lead) { grid-column: 1 / -1; }
  .cards--featured > .card:nth-child(3n+2):last-child:not(:nth-child(2)) { grid-column: span 2; }
  .cards--featured > .card:nth-child(2):last-child { grid-column: 1 / -1; }
}

/* In a page's or an article's text column, the new layouts leave it for the
   container's width, as cards do (§ "Wide blocks"). */
.measure :is(.block-entry-feed--slider, .block-entry-feed--slideshow, .block-entry-feed--featured) {
  width: min(100vw - 2 * var(--edge), var(--container));
  margin-inline: calc(50% - min(50vw - var(--edge), var(--container) / 2));
}

/* «Κριτικές» (theme/blocks/reviews, App\Blocks\Reviews). Card: its own light
   box, readable on any section background (photo, video, dark). Plain and
   with quote marks: the section's text colour, so they read on a dark one
   too. In a row the dots, the pause button and the arrows share one line
   under the reviews, never on their words. */
.el-reviews { --review-gap: var(--space-5); display: grid; gap: var(--space-5); }
.el-reviews__summary { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.9rem; font-size: var(--fs-sm); }
.el-reviews__average { font-size: 1.75rem; font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.el-reviews__summary .el-review__stars svg { width: 20px; height: 20px; }
.el-reviews__count { font-weight: 600; }
.el-reviews__all { font-weight: 600; color: inherit; text-decoration: underline; text-underline-offset: 3px; }

.el-reviews__grid { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--review-gap); grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); }
@media (max-width: 1024px) { .el-reviews__grid { grid-template-columns: repeat(var(--cols-tablet, min(2, var(--cols, 3))), minmax(0, 1fr)); } }
@media (max-width: 640px) { .el-reviews__grid { grid-template-columns: repeat(var(--cols-phone, 1), minmax(0, 1fr)); } }

.el-review { display: flex; list-style: none; }
.el-review__body { position: relative; display: flex; flex-direction: column; gap: var(--space-3); width: 100%; margin: 0; }
.el-reviews--card .el-review__body {
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  color: var(--color-text);
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 28px rgb(0 0 0 / 0.07);
}
.el-review__mark { height: 1.4rem; font: 700 3.5rem/0.75 Georgia, "Times New Roman", serif; color: var(--color-accent-text); }
:is(.section:is(.section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-video, .section--bg-slides, .section--on-dark), .group:is(.group--bg-brand, .group--bg-dark, .group--bg-image)) .el-reviews:not(.el-reviews--card) .el-review__mark { color: inherit; opacity: 0.6; }

.el-review__stars { display: inline-flex; gap: 2px; color: #F5A524; }
.el-review__star { fill: currentColor; opacity: 0.28; }
.el-review__star--on { opacity: 1; }

.el-review__text { margin: 0; font-size: calc(var(--fs-base) * 0.89); line-height: 1.6; overflow-wrap: anywhere; }
.el-review__text p { margin: 0; }
/* Cut to «Μέγιστο ύψος κειμένου»; «Περισσότερα» opens it whole (base.js) — so only with JS, or nothing would open it. */
.js .el-review__text[data-review-text] { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: var(--lines, 6); line-clamp: var(--lines, 6); overflow: hidden; }
.js .el-review__text[data-review-text].is-open { display: block; -webkit-line-clamp: unset; line-clamp: unset; overflow: visible; }
.el-review__more { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-size: var(--fs-sm); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.el-review__more:focus-visible { outline: 2px solid var(--color-accent-text); outline-offset: 2px; }

.el-review__by { display: flex; align-items: center; gap: var(--space-3); margin-top: auto; padding-top: var(--space-2); }
.el-review__photo { flex: none; width: 44px; height: 44px; overflow: hidden; border-radius: 50%; }
.el-review__photo img { width: 100%; height: 100%; object-fit: cover; }
.el-review__who { display: grid; min-width: 0; }
.el-review__name { font-weight: 700; overflow-wrap: anywhere; }
.el-review__detail { font-size: var(--fs-xs); opacity: 0.72; }
.el-review__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-3); }
.el-review__source { display: inline-flex; flex: none; align-items: center; gap: 0.35rem; margin-left: auto; font-size: var(--fs-xs); font-weight: 600; white-space: nowrap; opacity: 0.78; }

/* «Ένα-ένα»: one review, larger and centred. */
.el-reviews--slideshow .el-review__body { align-items: center; max-width: 46rem; margin-inline: auto; text-align: center; }
.el-reviews--slideshow .el-review__text { font-size: clamp(1.05rem, 0.6vw + 0.85rem, 1.25rem); line-height: 1.55; }
.el-reviews--slideshow .el-review__more { align-self: center; }
.el-reviews--slideshow .el-review__head { justify-content: center; }
.el-reviews--slideshow .el-review__by { justify-content: center; margin-top: var(--space-3); }
.el-reviews--slideshow .el-review__source { margin-left: 0; }

/* A row: the slides as tall as the tallest; under them one line of dots, pause and arrows. */
.el-reviews__slider { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-2); }
.el-reviews__slider .splide__track { flex: 0 0 100%; order: 0; }
.el-reviews__slider .splide__slide { display: flex; height: auto; }
.el-reviews__slider .splide__pagination { flex: 1 1 auto; order: 1; justify-content: flex-start; margin: 0; }
.el-reviews__slider .feed-slider__toggle { position: static; order: 2; margin-left: auto; }
.el-reviews__slider .splide__arrows { display: flex; order: 3; gap: var(--space-2); }
.el-reviews__slider .splide__arrow { position: static; transform: none; top: auto; }
/* One at a time: dots, pause and arrows centred under it. */
.el-reviews--slideshow .el-reviews__slider { justify-content: center; }
.el-reviews--slideshow .el-reviews__slider .splide__pagination { flex: 0 1 auto; justify-content: center; }
.el-reviews--slideshow .el-reviews__slider .feed-slider__toggle { margin-left: 0; }
/* The dots in the text's colour, so they show on a dark section or a photo too. */
.el-reviews__slider .splide__pagination__page { background: currentColor; opacity: 0.3; }
.el-reviews__slider .splide__pagination__page.is-active { background: var(--color-accent); opacity: 1; }
:is(.section:is(.section--bg-brand, .section--bg-dark, .section--bg-image, .section--bg-video, .section--bg-slides, .section--on-dark), .group:is(.group--bg-brand, .group--bg-dark, .group--bg-image)) .el-reviews__slider .splide__pagination__page.is-active { background: currentColor; }
/* On a page's text column (not in a section), the grid and the row take the container's width, as cards do; one at a time stays at reading width. */
.measure .el-reviews:is(.el-reviews--grid, .el-reviews--slider) {
  width: min(100vw - 2 * var(--edge), var(--container));
  margin-inline: calc(50% - min(50vw - var(--edge), var(--container) / 2));
}

/* An item's facts under its title (theme.partials.entry-attributes): «50 m² · 4 άτομα · …». */
.entry-facts { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0 0 var(--space-6); padding: var(--space-4) 0; border-block: 1px solid var(--color-border); list-style: none; }
.entry-facts__item { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-sm); font-weight: 600; }
.entry-facts__icon { flex: none; color: var(--color-accent-text); }
/* A card's chosen facts (theme.partials.card-facts): a small icon row. On an overlay card they take its light text. */
.card-facts { display: flex; flex-wrap: wrap; gap: 0.25rem 0.9rem; margin: 0; padding: 0; list-style: none; font-size: var(--fs-xs); font-weight: 600; }
.card-facts__item { display: inline-flex; align-items: center; gap: 0.35rem; }
.card-facts__icon { flex: none; color: var(--color-accent-text); }
.card--overlay .card-facts__icon, .card--overlay .card-facts { color: inherit; }
.feed-compact__item .card-facts { flex-basis: 100%; }

/* A card in a chosen shape (App\Theme\CardShape: a feed's «Αναλογία εικόνας», else its
   «Εικόνα» size's): the box is the shape the server cropped to, on every screen and in
   every layout, so the picture is never cropped twice. It beats each layout's own
   ratio (cards 4:3, the slideshow's 21:9, «Πρώτο μεγάλο»'s 16:10) on purpose. */
.card.card--shaped:not(.card--overlay) > .card__media { aspect-ratio: var(--card-ratio) !important; flex: none !important; min-height: 0 !important; }
.card.card--shaped.card--overlay { aspect-ratio: var(--card-ratio) !important; }
.feed-list__item.card--shaped > .feed-list__media { aspect-ratio: var(--card-ratio) !important; }

/* reCAPTCHA v3: Google's floating badge would sit on the floating buttons; each form says
   instead what Google asks for (components/form-captcha). */
.grecaptcha-badge { visibility: hidden; }
.form-captcha__notice { margin: 0; font-size: 0.8rem; color: var(--color-muted); }
.form-captcha__notice a { color: inherit; text-decoration: underline; }

/* The footer's last row: © and the legal links on the left, «Υπογραφή κατασκευαστή» on the
   right (theme.partials.footer-credit); on phones one under the other, the credit last. */
.site-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-5); }
.site-footer__fine { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); }
.site-footer__fine > p { margin: 0; }
.site-footer__credit { margin-inline-start: auto; }
.site-footer__credit a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; opacity: 0.85; transition: opacity 0.15s; }
.site-footer__credit a:hover { opacity: 1; text-decoration: none; }
.site-footer__credit-logo { display: block; width: auto; height: 28px; max-width: 160px; object-fit: contain; }
/* imonline's wordmark (SVG): the footer's text colour, its own sage dot. */
.site-footer__credit-mark { display: block; width: auto; height: 22px; }
.site-footer__credit-logo--dark, .site-footer--dark .site-footer__credit-logo--light { display: none; }
.site-footer--dark .site-footer__credit-logo--dark { display: block; }
.site-footer__credit-text { font-size: 0.85rem; }
@media (max-width: 639.98px) {
  .site-footer__bottom { flex-direction: column; align-items: flex-start; }
  .site-footer__credit { margin-inline-start: 0; }
}

/* The forms' date picker (flatpickr): the theme's font, colours and corners. */
.flatpickr-calendar { font-family: inherit; border-radius: var(--radius); box-shadow: 0 12px 32px rgb(17 24 39 / 0.16); border: 1px solid var(--color-border); }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-months .flatpickr-month, .flatpickr-current-month { color: var(--color-text); fill: var(--color-text); font-weight: 600; }
.flatpickr-weekday { color: var(--color-muted); font-weight: 600; }
.flatpickr-day { border-radius: 999px; color: var(--color-text); }
.flatpickr-day:hover, .flatpickr-day:focus { background: var(--color-surface); border-color: var(--color-surface); }
.flatpickr-day.today { border-color: var(--color-accent-text); }
.flatpickr-day.selected, .flatpickr-day.selected:hover, .flatpickr-day.selected:focus { background: var(--color-accent); border-color: var(--color-accent-text); color: var(--color-accent-contrast, #fff); }
.flatpickr-day.flatpickr-disabled, .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--color-muted); opacity: 0.5; }
.flatpickr-months .flatpickr-prev-month:hover svg, .flatpickr-months .flatpickr-next-month:hover svg { fill: var(--color-accent); }

/* The last row reads as one line: ©, the legal links, «Ρυθμίσεις cookies» (and the credit when
   it moves in beside them, theme/js/base.js) at one size and colour, a «·» between them — drawn by
   CSS, so on phones (where the touch rule above closes the gaps) they never run together. */
.site-footer__fine, .site-footer__fine a, .site-footer__fine .site-footer__consent { font-size: var(--fs-sm); color: var(--color-muted); }
.site-footer__fine a:hover, .site-footer__fine .site-footer__consent:hover { color: var(--color-text); }
.site-footer__fine .site-footer__consent { text-decoration: none; }
.site-footer__fine, .site-footer__fine .site-footer__legal ul { column-gap: 0; row-gap: var(--space-1); }
/* The theme's font draws © small and raised: a plain one, at the size of the words. */
.site-footer__copy { font-family: Arial, Helvetica, sans-serif; }
.site-footer__legal li::before, .site-footer__fine > .site-footer__consent::before, .site-footer__bottom--inline .site-footer__credit::before {
  content: "·"; display: inline-block; margin-inline: 0.6em; color: var(--color-muted);
}
.site-footer__bottom--inline { justify-content: flex-start; column-gap: 0; }
.site-footer__bottom--inline .site-footer__credit { margin-inline-start: 0; display: flex; align-items: center; }
.site-footer__credit-text { font-size: var(--fs-sm); color: var(--color-muted); }
/* Phones: ©, the links and the credit each start a line — a dot only between links, never at a line's start. */
@media (max-width: 639.98px) {
  .site-footer__fine { flex-direction: column; align-items: flex-start; }
  .site-footer__legal li:first-child::before, .site-footer__bottom--inline .site-footer__credit::before { content: none; }
}

/* A carousel hides the slides beside it, so it clips sideways — and only sideways: a card's hover
   (a site's zoom, shadow or decoration) shows whole above and below. splide-core clips every way
   (overflow: hidden), which stays where a browser can't clip one way only. A row of cards, whose
   gap is wider, also shows 12px past its ends; the others' slides touch, so not a pixel more. */
@supports (overflow: clip) {
  :is(.feed-slider, .feed-slideshow, .gallery-grid--slider, .el-reviews__slider) .splide__track { overflow-x: clip; overflow-y: visible; }
  .feed-slider .splide__track { overflow-clip-margin: 12px; }
}

/* Text wrapping: no lone word on a text's last line. Paragraphs, subtitles and intros of any length
   avoid an orphan («pretty»; «balance» gives up past six lines); headings balance their lines.
   theme/js/base.js also ties each text's last two words, for browsers without «pretty». */
:is(p, li, .el-card__text, .card__intro, .el-heading__subtitle, .page-header__intro) { text-wrap: pretty; }
:is(h1, h2, h3, h4, .el-heading__title, .card__title, .el-card__title) { text-wrap: balance; }

/* Cards with the words on the photo, side by side: every card keeps the same room for its words,
   so the category, the title and the text start on the same lines across the row whatever their
   length (a feed's title up to three lines and a three-line intro; a «Κάρτες» text two lines).
   Stacked on a phone, each card stands alone. */
@media (min-width: 768px) {
  .cards .card--overlay .card__title { min-height: calc(3 * 1.3em); min-height: 3lh; }
  .cards .card--overlay .card__intro {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    min-height: calc(3 * 1.6em);
    min-height: 3lh;
  }
  .el-cards--overlay .el-card__text { min-height: calc(2 * 1.6em); min-height: 2lh; }
}

/* A category's results filtered in place (theme/js/category-filters.js): dimmed and not clickable
   while the next ones load, then the new ones fade in. Less motion: an instant swap. */
.category-results { transition: opacity 0.2s ease; }
.category-results.is-loading { opacity: 0.45; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .category-results.is-arriving { animation: category-results-in 0.4s cubic-bezier(0.16, 1, 0.3, 1); }
  @keyframes category-results-in { from { opacity: 0; transform: translateY(0.5rem); } }
}