/* ==========================================================================
   Giassaris — Base / Reset
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

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

body {
  font-family: var(--font-base);
  font-size: var(--fs-base);
  font-weight: var(--fw-book);
  line-height: var(--lh-base);
  letter-spacing: var(--ls-tight);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a { color: inherit; text-decoration: none; transition: color var(--t-fast); }
/* a:hover { color: var(--c-accent); } */

ul, ol { list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }

/* ---- Layout helpers ---- */
.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }

/* eyebrow / section label με vector icon + uppercase τίτλο (επαναλαμβανόμενο pattern) */
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: var(--fs-sm); font-weight: var(--fw-bold);
  letter-spacing: .08em; text-transform: uppercase;
}
.eyebrow svg, .eyebrow img { width: 30px; height: 20px; }

.text-muted { color: var(--c-text-muted); }
.text-accent { color: var(--c-accent); }

/* ---- Icon (monochrome SVG via CSS mask) ----
   Recolors with currentColor; size with font-size or width/height.
   Add one line per icon: .icon-NAME { --icon: url("../img/NAME.svg"); } */
.icon {
  display: inline-block;
  width: 10px; 
  height: 10px;
  flex: none;
  background-color: currentColor;
  -webkit-mask: var(--icon) no-repeat center / contain;
          mask: var(--icon) no-repeat center / contain;
}
.icon-angle-right { --icon: url("../img/angle-right.svg"); }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Visibility utilities ---- */
.hide-desktop { display: none; }

/* ==========================================================================
   Responsive spacing scale — gutter + section rhythm step down per breakpoint.
   Ordered largest→smallest max-width so the smallest matching tier wins.
   ========================================================================== */
/* Laptop */
@media (max-width: 1499px) {
  :root { --section-y: 52px; --section-y-tight: 32px; }
}
/* Tablet */
@media (max-width: 1023px) {
  .hide-mobile { display: none !important; }
  .hide-desktop { display: revert; }
  :root { --gutter: 32px; --section-y: 40px; --section-y-tight: 24px; }
  h1 { font-size: 34px; }
  h2 { font-size: 26px; }
}
/* Phone */
@media (max-width: 767px) {
  :root { --gutter: 16px; --section-y: 28px; --section-y-tight: 20px; }
}