/* ============================================================================
   HOME — layout + components.
   No raw hex, no magic numbers: every value resolves through tokens.css.
   Reference canvas is 1672×941; each clamp() maximum is that literal
   measurement, so the page is pixel-accurate at 1672 and fluid below it.
   ========================================================================= */

/* ---------- reset ------------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100dvh;
  font-family: var(--font-sans);
  font-size: var(--text-meta);
  line-height: var(--leading-normal);
  color: var(--color-fg);
  background:
    linear-gradient(152deg,
      var(--color-bg-tint) 0%,
      var(--color-bg) 26%,
      #FFFFFF 58%);
  background-attachment: fixed;
}

h1, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; }

/* ---------- accessibility utilities ------------------------------------- */

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  z-index: var(--z-skiplink);
  top: var(--space-3);
  left: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--color-primary);
  color: var(--color-on-primary);
  font-weight: var(--weight-semi);
  text-decoration: none;
  transform: translateY(-200%);
}
.skip-link:focus-visible { transform: none; }

/* One focus treatment everywhere. The white halo keeps the ring visible
   where an element sits over the photograph. */
:where(a, button, [tabindex]):focus-visible {
  outline: var(--focus-width) solid var(--color-focus);
  outline-offset: var(--focus-offset);
  box-shadow: var(--focus-halo);
  border-radius: var(--radius-sm);
}
/* <main> takes focus after the skip link but must not draw a ring. */
#main:focus { outline: none; }

/* ---------- icons ------------------------------------------------------- */

.icon {
  flex: none;
  width: var(--icon-md);
  height: var(--icon-md);
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon--sm { width: var(--icon-sm); height: var(--icon-sm); }
.icon--lg { width: var(--icon-lg); height: var(--icon-lg); stroke-width: 1.75; }

/* ---------- page shell -------------------------------------------------- */

.page {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-rows: auto 1fr auto auto;
  min-height: 100dvh;
  max-width: var(--page-max);
  margin-inline: auto;
}

/* ---------- hero photograph --------------------------------------------- */

.hero-media {
  position: fixed;
  inset: 0;
  z-index: var(--z-media);
  overflow: hidden;
  pointer-events: none;
  /* Fade out before the feature card so the card never sits on busy pixels. */
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--hero-floor), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 var(--hero-floor), transparent 100%);
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: right center;
  /* Wash the photo out under the headline. prefers-contrast: more swaps this
     token for a harder ramp that clears the text column entirely. */
  -webkit-mask-image: var(--hero-mask);
          mask-image: var(--hero-mask);
}

/* Extra scrim used only where the layout stacks (see mobile block). */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #FFFFFF;
  opacity: var(--hero-scrim, 0);
}

/* ---------- masthead ---------------------------------------------------- */

.masthead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  /* The language control sits closer to the edge than the content gutter,
     matching the reference. */
  padding: var(--header-pad-y) var(--lang-inset) 0 var(--gutter);
}

.brand {
  display: flex;
  align-items: center;
  gap: clamp(var(--space-2), 0.72vw, var(--space-3));
  color: var(--color-primary);
  text-decoration: none;
}

.brand__crest {
  height: var(--crest-height);
  width: auto;
}

.brand__text { display: flex; flex-direction: column; align-items: stretch; }

.brand__name {
  font-size: var(--text-brand);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.brand__rule {
  height: 1px;
  margin-block: clamp(4px, 0.42vw, 7px) clamp(3px, 0.36vw, 6px);
  background: currentColor;
  opacity: 0.32;
}

.brand__tagline {
  /* One step below the brand name so the two read as a hierarchy. */
  font-size: var(--text-lang);
  font-weight: var(--weight-regular);
  line-height: var(--leading-snug);
  white-space: nowrap;
}

/* ---------- language switcher ------------------------------------------- */

.lang { position: relative; flex: none; }

.lang__trigger {
  display: inline-flex;
  align-items: center;
  gap: clamp(var(--space-2), 0.84vw, var(--space-3));
  min-height: var(--tap-min);   /* 44px — the WCAG floor, nothing more */
  padding-inline: clamp(var(--space-3), 1.55vw, var(--space-6));
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  color: var(--color-primary);
  font-size: var(--text-lang);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  cursor: pointer;
  transition: box-shadow var(--duration-fast) var(--ease-out),
              background-color var(--duration-fast) var(--ease-out);
}
.lang__trigger:hover { box-shadow: var(--shadow-md); }
.lang__trigger:active { background: var(--color-bg); }

.lang__caret {
  transition: transform var(--duration-base) var(--ease-out);
}
.lang__trigger[aria-expanded="true"] .lang__caret { transform: rotate(180deg); }

.lang__menu {
  position: absolute;
  z-index: var(--z-popover);
  top: calc(100% + var(--space-2));
  right: 0;
  min-width: 100%;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-md);
}
/* ponytail: no enter animation. Keeping the real `hidden` attribute keeps the
   menu out of the a11y tree when closed, which matters more than a fade.
   The caret rotation already gives motion feedback. */
.lang__menu[hidden] { display: none; }

.lang__option {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  min-height: var(--tap-min);
  padding: var(--space-2) var(--space-4) var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--color-fg-muted);
  font-size: var(--text-meta);
  font-weight: var(--weight-medium);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-out);
}
.lang__option:hover { background: var(--color-hover-wash); }

/* Selection is carried by the tick AND by weight/colour, never colour alone. */
.lang__tick { opacity: 0; }
.lang__option[aria-checked="true"] {
  color: var(--color-primary);
  font-weight: var(--weight-semi);
}
.lang__option[aria-checked="true"] .lang__tick { opacity: 1; }

/* ---------- hero -------------------------------------------------------- */

.hero {
  display: grid;
  align-content: center;
  justify-items: start;
  padding-inline: var(--gutter);
  /* Asymmetric on purpose: align-content centres the block, and the extra
     top padding biases it down to the reference's optical position. */
  padding-block: clamp(var(--space-6), 2.8vw, var(--space-9))
                 clamp(var(--space-5), 2.3vw, 2.375rem);
}

.hero__title {
  /* Wide enough that "Εικονική Περιήγηση" (519px at the display size) stays
     on one line — 14ch capped at 518 and split it into three. text-wrap:
     balance picks the break from here, so headlines wrap where they read
     best rather than where the box happens to end. */
  max-width: min(18ch, 100%);
  font-size: var(--text-display);
  font-weight: var(--weight-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  color: var(--color-primary);
  text-wrap: balance;
}

.hero__rule {
  width: clamp(2.5rem, 3.9vw, 4.0625rem);   /* 40 → 65px */
  height: clamp(3px, 0.24vw, 4px);
  margin-block: clamp(var(--space-4), 1.38vw, 1.4375rem) 0;   /* 16 → 23px */
  border-radius: var(--radius-full);
  background: var(--color-primary);
}

.hero__lede {
  margin-block: clamp(var(--space-4), 2vw, var(--space-7)) 0;
  /* ~60 characters per line — the readable measure. 34ch was only ~45 and
     forced longer copy into a narrow column. */
  max-width: min(46ch, 100%);
  font-size: var(--text-lede);
  line-height: 1.45;
  color: var(--color-fg-muted);
  /* Honours a newline in the translation string, if one is used to force a
     break; otherwise the copy just re-flows inside the measure above. */
  white-space: pre-line;
  text-wrap: pretty;   /* no single-word last line */
}

/* ---------- button ------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-3), 2vw, var(--space-7));
  min-width: var(--cta-min-w);
  min-height: var(--cta-height);
  padding-inline: clamp(var(--space-6), 4.3vw, var(--space-10));
  border-radius: var(--radius-md);
  font-size: var(--text-cta);
  font-weight: var(--weight-semi);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-base) var(--ease-out),
              box-shadow var(--duration-base) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.btn--primary {
  margin-top: clamp(var(--space-5), 2.27vw, 2.375rem);   /* 24 → 38px */
  background: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-md);
  /* Gold clears 3:1 on navy; the default navy ring would not. */
  --color-focus: var(--color-focus-on-dark);
}
.btn--primary:hover { background: var(--color-primary-hover); box-shadow: var(--shadow-lg); }
/* Scale only — never width/height, which would reflow the hero. */
.btn--primary:active { transform: scale(0.985); }

/* ---------- feature bar ------------------------------------------------- */

.features {
  position: relative;
  z-index: var(--z-content);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  width: calc(100% - var(--gutter) * 2);
  max-width: var(--card-max);
  min-height: var(--card-height);
  margin-inline: auto;
  padding-block: var(--space-4);
  border-radius: var(--radius-xl);
  background: var(--color-surface);
  box-shadow: var(--shadow-lg);
}

.feature {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(var(--space-2), 1.2vw, var(--space-5));
  padding-inline: var(--space-3);
}

/* Hairline separators, drawn short and centred as in the reference. */
.feature + .feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: clamp(1.75rem, 3.1vw, 3.25rem);   /* 28 → 52px */
  background: var(--color-border);
}

.feature__icon {
  flex: none;                                /* labels wrap; the icon never squashes */
  width: var(--icon-lg);
  height: var(--icon-lg);
  color: var(--color-primary);
  stroke-width: 1.75;
}

.feature__label {
  font-size: var(--text-feature);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  color: var(--color-fg);
  text-wrap: balance;                        /* sentences, not one-word labels */
}


/* ---------- footer ------------------------------------------------------ */

.colophon {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4) var(--space-8);
  padding: clamp(var(--space-4), 1.45vw, 1.3125rem) var(--gutter)
           clamp(var(--space-4), 1.45vw, 1.3125rem);
  color: var(--color-fg-subtle);
  font-size: var(--text-meta);
}

.colophon__by {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.colophon__logo {
  height: clamp(1.25rem, 1.55vw, 1.625rem);     /* 20 → 26px */
  width: auto;
}

.colophon__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(var(--space-4), 2.4vw, var(--space-8));
}

.colophon__links li { position: relative; }

.colophon__links li + li::before {
  content: "";
  position: absolute;
  left: calc(clamp(var(--space-4), 2.4vw, var(--space-8)) / -2);
  top: 50%;
  translate: 0 -50%;
  width: 1px;
  height: 1.1em;
  background: var(--color-border);
}

.colophon__links a {
  display: inline-block;
  padding-block: var(--space-2);   /* pads the hit area to ~44px tall */
  color: inherit;
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
/* Underline on hover AND focus: never signal a link by colour alone. */
.colophon__links a:hover,
.colophon__links a:focus-visible {
  color: var(--color-primary);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}

/* ---------- responsive -------------------------------------------------- */

@media (max-width: 1180px) {
  :root {
    /* The headline occupies proportionally more width here, so it reaches
       into un-washed photo. A light scrim keeps its backdrop pale. */
    --hero-scrim: 0.34;
  }

  .features { grid-template-columns: repeat(2, 1fr); row-gap: var(--space-5); }
  /* Separator belongs between columns, not between rows. */
  .feature + .feature::before { display: none; }
  .feature:nth-child(even)::before { display: block; }
}

@media (max-width: 860px) {
  :root {
    /* Stacked layout: the photo becomes a background wash for the whole
       page, so it gets scrimmed instead of side-faded. */
    --hero-fade-start: 0%;
    --hero-fade-end: 0%;
    --hero-floor: 100%;
    --hero-scrim: 0.8;
  }

  .masthead {
    flex-wrap: wrap;
    gap: var(--space-4);
    padding-inline: var(--gutter);
  }

  .hero { padding-block: var(--space-9) var(--space-8); }
  .hero__lede { white-space: normal; }   /* let it reflow naturally */

  .btn { min-width: min(100%, 22rem); }

  .colophon { justify-content: flex-start; }
  /* Flex wrapping strands a separator at the start of each new line, and CSS
     cannot detect a wrap — so drop them and lean on the gap instead. */
  .colophon__links li + li::before { display: none; }
  .colophon__by { flex-basis: 100%; }
}

@media (max-width: 520px) {
  .brand__tagline { white-space: normal; }
  .btn { width: 100%; }
  .feature { flex-direction: column; gap: var(--space-2); text-align: center; }
}

/* Landscape phones: the one-screen layout has to be allowed to scroll. */
@media (max-height: 560px) {
  .page { min-height: 0; }
  .hero { padding-block: var(--space-8); }
}

/* ---------- reduced motion ---------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .btn--primary:active { transform: none; }
}