/* =========================================================
   Pizza Sonic Express — hero board

   Layout is a fixed-proportion "board": every element is placed
   in % of the board, every type size in cqw, so the composition
   scales as one piece. The pizzas are the client's supplied
   artwork used whole, as a single transparent layer on top.

   Type: Anton for latin text and numerals, Manrope for greek.
   (Poppins was requested for greek but Google Fonts ships no
   greek subset for it — Manrope is the closest that does.)
   ========================================================= */

:root{
  --cream:      #f4ebda;
  --rule:       #e2d9c9;
  --frame:      #b3a892;
  --red:        #e02b17;
  --red-ink:    #c11f0e;
  --yellow:     #f0bb00;
  --beige:      #eddec6;
  --ink:        #241207;
  --white:      #fffdf8;

  --mascot-w: clamp(442px, 35.1vw, 624px);

  --latin: "Anton", Impact, "Arial Narrow", sans-serif;
  --greek: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Γραμματοσειρά τίτλων για ΕΛΛΗΝΙΚΟ κείμενο. Η Anton δεν έχει ελληνικές
     γλυφές (Google Fonts: μόνο vietnamese/latin-ext/latin subsets), οπότε
     ελληνικοί τίτλοι σε var(--latin) έπεφταν σιωπηλά στη 2η γραμματοσειρά
     της στοίβας.

     ΙΣΤΟΡΙΚΟ / ΓΙΑΤΙ ΑΛΛΑΞΕ (2026-08-29, παρατήρηση πελάτη «στο κινητό
     βλέπω άλλη γραμματοσειρά από ό,τι στο desktop»):

     Μέχρι τώρα η στοίβα ήταν `Impact, "Roboto Condensed", "Arial Narrow",
     sans-serif` — ΟΛΕΣ γραμματοσειρές ΣΥΣΤΗΜΑΤΟΣ, καμία δεν κατέβαινε από
     τα Google Fonts. Άρα η τελική εμφάνιση εξαρτιόταν από το τι έχει
     εγκατεστημένο η κάθε συσκευή:
       Windows / macOS → Impact          (πολύ βαριά, στενή, «αφίσας»)
       Android         → Roboto Condensed (στενή αλλά πολύ πιο ελαφριά)
       iPhone / iPad   → κανένα από τα 3 — έπεφτε στο γενικό sans-serif,
                         δηλαδή Helvetica: ούτε στενή, ούτε βαριά.
     Αυτή ήταν ακριβώς η διαφορά που είδε ο πελάτης, και αφορούσε κάθε
     τίτλο, κουμπί και label του site.

     Η λύση είναι η Roboto Condensed ως πραγματικό webfont (έχει ελληνικό
     subset), δηλωμένη ΠΡΩΤΗ: κατεβαίνει από τα Google Fonts, οπότε
     αποδίδεται ίδια σε Windows, macOS, iOS και Android. Η Impact μένει
     πίσω της μόνο ως δίχτυ ασφαλείας αν αποτύχει το κατέβασμα.

     ΠΡΟΣΟΧΗ: φορτώνουμε βάρη 700 και 800 (βλ. <link> στα .html). Κάθε
     κανόνας που χρησιμοποιεί var(--display) ΠΡΕΠΕΙ να δηλώνει και
     font-weight — αλλιώς παίρνει το προεπιλεγμένο 400, που δεν το
     φορτώνουμε καν και βγαίνει αδύναμο δίπλα στη βαριά Impact που
     αντικατέστησε. */
  --display: "Roboto Condensed", Impact, "Arial Narrow", sans-serif;
}

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

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

body{
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--greek);
}

.hero{
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  position: relative;
}

/* Decorative backdrop layer, separate from .hero's real content, so it
   never affects the board's nav / pizzas / buttons / footnote — while
   still painting above the mascot's negative z-index. Hard-edged: hero
   stays fully opaque (no mascot peek-through) for its entire duration.
   The reveal fade now lives at the top of #about instead — see below. */
.hero::before{
  content: "";
  position: absolute; top: 0; right: 0; bottom: 0; left: 0;
  background: var(--cream);
  pointer-events: none;
}

.skip-link{
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: var(--cream);
  padding: .6rem 1rem; font-family: var(--greek); font-size: .85rem; z-index: 99;
}
.skip-link:focus{ left: .5rem; top: .5rem; }


/* ---------------------------------------------------------
   The board
   --------------------------------------------------------- */
.board{
  --sy: 0;                       /* hero scroll progress, 0 … 1, set by js */
  position: relative;
  width: min(1440px, 100%, calc((100vh - 3rem) * 1.806));
  aspect-ratio: 1983 / 1098;
  container-type: size;
  border: 1px solid var(--frame);
  overflow: hidden;
  isolation: isolate;
}

/* one shared rule drives the whole parallax; --d is the layer's depth.
   Everything drifts upward as the hero scrolls away — the nearer the layer,
   the further it travels, so the pizzas leave first. */
.parallax{
  transform: translate3d(0, calc(var(--sy) * var(--d, 3) * -.42cqw), 0);
}

/* ---------- hairline grid: the only layer that stays put ---------- */
.rule{ position: absolute; background: var(--rule); }
.rule--h1{ left: 0;      right: 0;  top: 13.75%; height: 1px; }
.rule--h2{ left: 56.63%; right: 0;  top: 46.72%; height: 1px; }
.rule--h3{ left: 25.26%; right: 0;  top: 71.58%; height: 1px; }
.rule--v1{ left: 25.26%; top: 13.75%; bottom: 0; width: 1px; }
.rule--v2{ left: 56.63%; top: 13.75%; bottom: 0; width: 1px; }
.rule--v3{ left: 81.09%; top: 13.75%; height: 32.97%; width: 1px; }
.rule--v4{ left: 91.98%; top: 71.58%; bottom: 0; width: 1px; }

/* ---------------------------------------------------------
   Header
   --------------------------------------------------------- */
.brand{
  position: absolute; left: 4.2%; top: 1.4%; width: 6.8%; z-index: 4; --d: 3;
  display: block; line-height: 0;
}
.brand img{ width: 100%; height: auto; }

/* gap 8cqw αμετάβλητο παρότι το nav πέρασε από 3 σε 4 στοιχεία («Προσφορές»)
   και δύο labels έγιναν ελληνικά, άρα μακρύτερα — και είναι ήδη ακριβώς το
   ισοδύναμο των 7.2rem του .site-header__links στο μέγιστο board. Τα cqw
   κλιμακώνονται με το board, που κρατά σταθερό aspect ratio, άρα τα ποσοστά
   ισχύουν σε κάθε desktop πλάτος — σε αντίθεση με τα vw, βλ. .nav a παρακάτω. */
.nav{
  position: absolute; left: 29.25%; top: 0; height: 13.75%; z-index: 4; --d: 3;
  display: flex; align-items: center; gap: 8cqw;
}
/* var(--display) και όχι var(--latin): δύο από τα τέσσερα labels είναι
   πλέον ελληνικά («Προσφορές», «Επικοινωνία», «Καλέστε μας») και η Anton
   δεν έχει ελληνικές γλυφές — θα έπεφταν σιωπηλά σε άλλη γραμματοσειρά και
   το nav θα είχε δύο διαφορετικές όψεις μέσα στην ίδια σειρά. Ίδιο
   σκεπτικό με τους ελληνικούς τίτλους του site. */
/* ΤΥΠΟΓΡΑΦΙΑ ΤΑΥΤΙΣΜΕΝΗ ΜΕ ΤΟ .site-header__links (2026-08-29, αίτημα πελάτη
   «το μενού πλοήγησης στην αρχική είναι πολύ μεγάλο, κάν' το όπως στις άλλες
   σελίδες»). Το site-header μετράει σε rem/vw· εδώ ΔΕΝ γίνεται να αντιγραφούν
   αυτούσιες αυτές οι μονάδες, γιατί το board συρρικνώνεται με το ΥΨΟΣ του
   παραθύρου ενώ τα rem/vw δεν το ξέρουν: μετρημένο σε παράθυρο 1900×650 το nav
   έφτανε στο 91.87% του board και έπεφτε πάνω στο .claim (88.20%). Οπότε οι
   ίδιες τελικές διαστάσεις, εκφρασμένες σε cqw ώστε να κλιμακώνονται με το
   board — ισοδυναμίες υπολογισμένες στο μέγιστο πλάτος board (1440px):

     site-header            εδώ            στα 1440px
     font-size: 1rem     → 1.11cqw      = 16.0px
     gap: 7.2rem         → 8cqw         = 115.2px   (ήταν ήδη ίδιο)
     letter-spacing .06em→ .06em        (em, ακολουθεί το font-size από μόνο του)
     padding-bottom .3rem→ .33cqw       = 4.75px */
.nav a{
  font-family: var(--display); font-weight: 700; font-size: 1.11cqw;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  padding-bottom: .33cqw; border-bottom: 1px solid transparent;
  transition: color .18s ease, border-color .18s ease;
}
.nav a:hover, .nav a:focus-visible{ color: var(--red); border-bottom-color: var(--red); }

/* Κρυμμένο σε κάθε πλάτος εκτός από το mobile breakpoint — βλ. το @media
   (max-width: 768px) στο τέλος του hero. Ίδιες τιμές με το
   .site-header__toggle των υποσελίδων. */
.nav-toggle{
  display: none;
  background: none; border: none; padding: .4rem .6rem;
  font-size: 1.6rem; line-height: 1; color: var(--ink); cursor: pointer;
}

.claim{
  position: absolute; left: 88.20%; top: 3.2%; margin: 0; z-index: 4; --d: 3;
  font-family: var(--latin); font-size: 1.18cqw;
  letter-spacing: .045em; text-transform: uppercase; line-height: 1.5;
}

/* ---------------------------------------------------------
   Left column
   --------------------------------------------------------- */
/* Το offer badge αντικαθιστά το παλιό .eyebrow στη ίδια θέση της σύνθεσης.
   Γεωμετρία μετρημένη από το mockup (E:\Downloads\32.png, 6400x3619, board
   στο 249.5,174 / 5897.5x3267): κουτί 4.04%,16.95% - 17.35%x25.13%, ακτίνα
   124px = 2.10cqw. Το gradient ξεκινά ακριβώς στο var(--red) (#e02b17,
   δειγματοληπτημένο) και σβήνει γραμμικά σε διαφανές στο κάτω άκρο — γι'
   αυτό το κουτί είναι τόσο ψηλό: το ορατό "χρωματιστό" μέρος είναι μόνο το
   πάνω τρίτο, το υπόλοιπο περνά κάτω από το "32". */
.offer-badge{
  position: absolute; left: 4.04%; top: 16.95%; margin: 0;
  width: 17.35%; height: 25.13%; z-index: 2; --d: 3;
  display: flex; flex-direction: column; align-items: center;
  padding: 1.75cqw 1cqw 0;
  border-radius: 2.10cqw;
  background: linear-gradient(180deg, var(--red) 0%, transparent 100%);
  color: var(--white); font-family: var(--greek); line-height: 1;
}
.offer-badge__label{
  font-size: 1.47cqw; font-weight: 800;
  letter-spacing: .02em; text-transform: uppercase;
}
/* Η γραμματοσειρά του mockup είναι ψηλότερη ΚΑΙ στενότερη από τη Manrope
   (μετρημένο: ίδιο συνολικό πλάτος στα 2.15cqw, αλλά ύψος κεφαλαίων 3.06%
   έναντι 2.63%). Δεν ταιριάζουν και τα δύο — 2.32cqw είναι ο συμβιβασμός
   που πλησιάζει το οπτικό μέγεθος χωρίς να ακουμπήσει τη δεξιά άκρη.
   nowrap: αλλιώς σπάει σε "7,99€ /" + "Pizza". */
.offer-badge__price{
  margin-top: -.17cqw;
  font-size: 2.32cqw; font-weight: 800; letter-spacing: .01em;
  white-space: nowrap;
}

.display{
  position: absolute; left: 0; top: 32.35%; margin: 0; width: 26%; z-index: 3; --d: 6;
  font-family: var(--latin); text-transform: uppercase; line-height: .82;
}
.display__num, .display__word{ display: block; width: fit-content; transform-origin: 0 50%; }
.display__num{
  font-size: 22.25cqw; color: var(--ink);
  transform: translateX(1.70cqw) scaleX(1.005);
}
.display__word{
  /* sits ON the 32 — the reference overlaps them by 4.6% of the board height */
  position: relative; z-index: 1;
  font-size: 6.69cqw; color: var(--red);
  transform: translateX(4.10cqw) scaleX(1.012);
  margin-top: -.29em;
}

.lede{
  position: absolute; left: 1.55%; top: 74.30%; margin: 0; width: 25%; z-index: 3; --d: 3;
  font-family: var(--greek); font-weight: 500; font-size: 1.41cqw;
  line-height: 1.32; color: var(--ink);
}

/* Desktop: ένα μόνο περιγραμμένο pill ("Προσφορές"). Το τηλέφωνο ΔΕΝ ζει εδώ
   στο desktop — ένα tel: link είναι πρακτικά άχρηστο σε επιτραπέζιο, και
   υπάρχει ήδη στο .nav. Στο mobile επανεμφανίζεται (βλ. media query), όπου
   το πάτημα για κλήση είναι ο πιο χρήσιμος στόχος της σελίδας.
   Ο απαλός λευκός φωτοστέφανος αναπαράγει το ελαφρύ "σήκωμα" του φόντου
   γύρω από το κουμπί στο mockup (μετρημένο #f8f4e9 έναντι #f4ebda). */
.cta{
  position: absolute; left: 3.54%; top: 79.92%; width: 18.62%; height: 8.05%;
  z-index: 3; --d: 3;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 253, 248, .55);
  border: .20cqw solid var(--red-ink);
  border-radius: 999px;
  box-shadow: 0 0 3cqw 1.5cqw rgba(255, 253, 248, .55);
  transition: transform .18s ease;
}
.cta:hover, .cta:focus-within{ transform: scale(1.03); }
.cta__offers, .cta__call{
  position: relative; z-index: 1; white-space: nowrap;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--display); font-weight: 800; font-size: 2.52cqw;
  text-transform: uppercase; letter-spacing: .01em; text-decoration: none;
}
.cta__offers{ width: 100%; height: 100%; color: var(--red-ink); }
.cta__call{ display: none; }
.cta__offers:focus-visible{ outline: 2px solid var(--ink); outline-offset: .35cqw; }

.footnote{
  position: absolute; left: 1.55%; top: 90.08%; margin: 0; width: 23%; z-index: 3; --d: 3;
  font-family: var(--greek); font-weight: 500; font-size: 1.256cqw;
  line-height: 1.32; color: var(--ink);
}

/* ---------------------------------------------------------
   Story block — κάθεται στη μεσαία στήλη, στον χώρο που
   άδειασε το κουτί πίτσας. Ζει ανάμεσα στους οδηγούς
   .rule--v1 (25.26%) και .rule--v2 (56.63%).
   --------------------------------------------------------- */
.story{
  position: absolute; left: 27.6%; top: 17.6%; width: 26%;
  z-index: 3; --d: 4;
}
/* Ήταν «Since-1994» σε Anton. Ο πελάτης δεν θέλει να αναφέρεται η χρονολογία,
   μόνο «32 χρόνια εμπειρίας» — ελληνικό κείμενο, άρα var(--display)
   αντί για var(--latin) (η Anton δεν έχει ελληνικές γλυφές). Δύο γραμμές με
   ρητό <br>, οπότε χρειάζεται και line-height: η προεπιλογή θα άνοιγε τις
   γραμμές πολύ σε ένα display μέγεθος. */
.story__since{
  margin: 0 0 1.6cqw; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 2.55cqw; line-height: .96;
  letter-spacing: .01em; text-transform: uppercase; color: var(--red);
}
.story__lede{
  margin: 0 0 .9cqw;
  font-family: var(--greek); font-weight: 500; font-size: 1.12cqw;
  line-height: 1.55; color: var(--ink);
}
.story__lede:last-of-type{ margin-bottom: 1.9cqw; }
.story__pills{
  display: grid; grid-template-columns: 1fr 1fr; gap: .7cqw;
  margin: 0; padding: 0; list-style: none;
}
.story__pills li{
  display: flex; align-items: center; justify-content: center;
  min-height: 2.45cqw; padding: .55cqw .7cqw;
  border: .11cqw solid var(--frame); border-radius: 999px;
  background: rgba(255, 253, 248, .55);
  font-family: var(--greek); font-weight: 600; font-size: .95cqw;
  line-height: 1.2; text-align: center; color: var(--ink);
}

/* Εδώ ζούσαν οι κανόνες .pick — τα ονόματα των πέντε πιάτων, τοποθετημένα
   απόλυτα πάνω στο board και μισοκρυμμένα πίσω από τη φωτογραφία. Ο πελάτης
   τα κατάργησε (2026-08-29): συγκρούονταν οπτικά με τις εικόνες. Το hero
   δείχνει πλέον μόνο τις φωτογραφίες, χωρίς λεζάντες, σε desktop και mobile.
   Αν χρειαστεί ποτέ να επιστρέψουν, οι μετρημένες θέσεις τους βρίσκονται στο
   ιστορικό του git (commit e91c6fd). */


/* ---------------------------------------------------------
   The pizzas — the supplied artwork, whole, as the front layer.
   Sized so the 2048x1158 canvas lines up with the board frame
   (the frame sits at 32,30 / 1983x1098 inside that canvas).
   --------------------------------------------------------- */
.pizzas{
  position: absolute; left: -1.61%; top: -2.73%; width: 103.28%; height: auto;
  z-index: 5; --d: 22; pointer-events: none; will-change: transform;
  /* Το συμπαγές μέρος του artwork τελειώνει στο 96.46% του καμβά και από κάτω
     μένει μόνο η απαλή σκιά, που φτάνει ως το 99.91%. Σβήνουμε αυτή την ουρά
     ακριβώς πάνω στη γραμμή του πλαισίου: το κάτω άκρο του board frame πέφτει
     στο (30+1098)/1158 = 97.41% του ύψους της εικόνας, γι' αυτό το transparent
     stop είναι στο 97.4%. Τίποτα δεν κόβεται με σκληρή ακμή και τίποτα δεν
     κρέμεται έξω από το board.

     Επαληθευμένο ξανά στο υλικό της 2026-08-29 (μεγαλύτερες κοτομπουκιές):
     τα solid/soft άκρα δεν μετακινήθηκαν, οπότε τα stops μένουν ως έχουν.
     Αν έρθει νέο composite, ξαναμέτρα τα με alpha-row scan πριν τα εμπιστευτείς. */
  -webkit-mask-image: linear-gradient(to bottom, #000 96.6%, transparent 97.4%);
          mask-image: linear-gradient(to bottom, #000 96.6%, transparent 97.4%);
}

/* ---------------------------------------------------------
   Entrance — uses `translate`, not `transform`, so it composes
   with the parallax instead of fighting it
   --------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .brand, .nav, .claim, .offer-badge, .display, .lede, .cta, .footnote,
  .story, .pizzas, .rule{
    animation: rise .55s cubic-bezier(.2,.7,.3,1) backwards;
  }
  .story { animation-delay: .44s; }
  .rule{ animation-name: fade; animation-duration: .8s; }
  .brand{ animation-delay: .05s; }
  .nav  { animation-delay: .10s; }
  .claim{ animation-delay: .18s; }
  .offer-badge { animation-delay: .20s; }
  .display { animation-delay: .24s; }
  .lede    { animation-delay: .32s; }
  .cta     { animation-delay: .36s; }
  .footnote{ animation-delay: .40s; }
  .pizzas  { animation-delay: .34s; animation-duration: .7s; }
}
@keyframes rise{ from{ opacity: 0; translate: 0 1.4rem; } }
@keyframes fade{ from{ opacity: 0; } }

/* =========================================================
   Narrow screens — the board unfolds into a column and the
   parallax is off (js only binds a fine pointer)
   ========================================================= */
@media (max-width: 1180px){
  .hero{ min-height: 0; padding: .75rem; align-items: flex-start; }

  /* two columns, so the nav and the Order Online button can share a row;
     everything else spans both */
  .board{
    width: 100%; aspect-ratio: auto; container-type: inline-size; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start;
    padding: 1.25rem 1.1rem 1.75rem;
  }

  /* not part of the phone layout at all */
  .rules, .claim, .pizzas{ display: none; }

  .board > *{
    position: static !important;
    top: auto !important; right: auto !important; bottom: auto !important; left: auto !important;
    width: auto !important; height: auto !important;
    transform: none !important;
    grid-column: 1 / -1;
  }
  .cta{ position: relative !important; }

  .brand{ grid-row: 1; width: 5.5rem !important; justify-self: start; }

  /* grid-column: 1/-1 (κληρονομημένο από .board > *): πριν μοιραζόταν τη
     σειρά με το .order στη στήλη 2, τώρα απλωμένο σε όλο το πλάτος.
     Στα ≤768px το ξαναπαίρνει το ☰ — βλ. το media query του hamburger. */
  .nav{
    grid-row: 2;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: .6rem 1.1rem;
    margin: 1rem 0 0;
  }
  .nav a{ font-size: 1rem; }

  /* Το badge γίνεται κεντραρισμένο κουτί στη θέση που είχε το παλιό eyebrow.
     Οι cqw τιμές του desktop (padding/radius/font-size) ακυρώνονται όλες εδώ:
     το .board αλλάζει σε container-type: inline-size, οπότε 1cqw = 1% του
     πλάτους της σελίδας και οι desktop τιμές θα ήταν τεράστιες. */
  .offer-badge{
    grid-row: 3; align-items: center; text-align: center;
    width: 100% !important; max-width: 20rem;
    margin: 1.1rem auto 0; padding: .95rem 1.25rem 2.4rem;
    border-radius: 1rem;
  }
  .offer-badge__label{ font-size: 1rem; }
  .offer-badge__price{ margin-top: .3rem; font-size: 1.85rem; }

  .display{ grid-row: 4; margin: .9rem 0 0; text-align: center; }
  .display__num, .display__word{
    margin-left: auto; margin-right: auto; transform-origin: 50% 50%;
  }
  /* sized against the board, not the viewport, so the ratio holds at every
     narrow width: 88cqw puts the "32" at ~87% of the content width. The cap
     stops it from turning into a full-screen numeral on a tablet — phones up
     to ~445px stay uncapped, wider screens hold at 21rem. */
  .display__num { font-size: min(88cqw, 21rem); transform: none; }
  .display__word{ font-size: min(35.5cqw, 8.47rem); transform: scaleX(.8); margin-top: -.16em; }

  .lede{
    grid-row: 5; font-size: .95rem; margin: 1.2rem auto 0;
    max-width: 34ch; text-align: center;
  }

  /* auto margins κεντράρουν το κουμπί μέσα στο grid area του, όπως τα
     .lede / .footnote γύρω του. Το width: 100% ακυρώνει το width: auto του
     `.board > *` — χωρίς αυτό, τα auto margins αλλάζουν το στοιχείο σε
     shrink-to-fit και η μπάρα μαζεύεται στο πλάτος των δύο λέξεων. */
  /* Στο mobile επιστρέφει το γεμάτο κόκκινο pill με τα ΔΥΟ κουμπιά: εδώ το
     tel: link είναι ο πιο χρήσιμος στόχος της σελίδας, σε αντίθεση με το
     desktop. Border/σκιά του desktop μηδενίζονται. */
  .cta{
    grid-row: 6; margin: 1.2rem auto 0; height: 3.4rem !important;
    width: 100% !important; max-width: 22rem;
    background: var(--red);
    border: 0; box-shadow: none;
  }
  .cta:hover, .cta:focus-within{ transform: none; }
  /* Ήταν σταθερό 1.5rem, όσο χρειαζόταν το αγγλικό «Call us». Με το ελληνικό
     «Καλέστε μας» (2026-08-29) το κείμενο μεγάλωσε και στα 375px έμεναν 8.5px
     συνολικού περιθωρίου μέσα στο λευκό pill, ενώ στα 320px (iPhone SE)
     έφτανε στο 0 και ακουμπούσε τις άκρες. Μετρημένο με το clamp:
       320px → 17.6px, 19.1px περιθώριο
       375px → 20.25px, 30.8px περιθώριο
       520px+ → 24px (το παλιό 1.5rem), 27.6px περιθώριο
     Δηλαδή μικραίνει μόνο εκεί που χρειάζεται· από τα ~445px και πάνω
     επιστρέφει ακριβώς στο μέγεθος που είχε. */
  .cta__offers, .cta__call{ font-size: clamp(1.1rem, 5.4vw, 1.5rem); }
  .cta__offers{ flex: 0 0 50%; width: auto; color: var(--white); }
  .cta__call{
    display: flex; flex: 1 1 auto; height: 78%; margin-right: .35rem;
    color: var(--red); background: var(--white); border-radius: 999px;
  }

  /* Τελευταίο μπλοκ του hero στο mobile. Οι cqw τιμές του desktop
     ακυρώνονται — εδώ 1cqw = 1% του πλάτους της σελίδας. */
  .story{
    grid-row: 7; margin: 2.75rem auto 0; max-width: 34ch; text-align: center;
  }

  /* Κρυμμένο στο mobile. Το footnote λέει «Γνώρισε μερικά από τα προϊόντα
     μας» και ήταν η εισαγωγή σε δύο πράγματα που δεν υπάρχουν πια εδώ: οι
     φωτογραφίες (.pizzas) κρύβονται σε αυτό το breakpoint ούτως ή άλλως,
     και η λίστα ονομάτων (.pick) καταργήθηκε από τον πελάτη. Χωρίς αυτά
     έδειχνε στο κενό. Στο desktop μένει — εκεί οι φωτογραφίες φαίνονται. */
  .footnote{ display: none; }

  .story__since{ margin-bottom: .8rem; font-size: 1.9rem; }
  .story__lede{ margin-bottom: 1.1rem; font-size: .95rem; }
  .story__pills{ gap: .5rem; }
  .story__pills li{
    min-height: 0; padding: .5rem .8rem;
    border-width: 1px; font-size: .8rem;
  }
}

@media (max-width: 1180px) and (min-width: 560px){
  .board{ padding: 2rem 1.75rem 2.5rem; }
  .lede{ font-size: 1.05rem; }
}

/* =========================================================
   Hamburger για το hero nav — ίδιο breakpoint (768px) και ίδια
   συμπεριφορά με το .site-header των υποσελίδων (απαίτηση πελάτη,
   2026-08-29: «θέλω να είναι drop down, ακριβώς όπως στις άλλες
   σελίδες»). Πάνω από 768px τίποτα εδώ δεν ισχύει και το nav μένει
   οριζόντια σειρά, ακριβώς όπως και εκεί.

   ΜΙΑ ΔΙΑΦΟΡΑ, ΣΚΟΠΙΜΗ: στις υποσελίδες το dropdown είναι overlay
   (`position: absolute`) γιατί το .site-header είναι fixed μπάρα και
   το φύλλο πρέπει να πέσει ΠΑΝΩ στο περιεχόμενο. Το hero nav δεν έχει
   fixed μπάρα — κυλάει μαζί με το board — οπότε εδώ ανοίγει inline και
   σπρώχνει το περιεχόμενο κάτω. Ένα overlay θα κοβόταν ούτως ή άλλως
   από το `overflow: hidden` του .board. Η λίστα που βλέπει ο χρήστης
   (κάθετη, αριστερά στοιχισμένη, gap 1rem, χωριστική γραμμή) είναι ίδια.
   ========================================================= */
@media (max-width: 768px){
  /* Το ☰ μπαίνει δίπλα στο λογότυπο: το .board είναι ήδη grid
     `minmax(0,1fr) auto` ακριβώς γι' αυτόν τον σκοπό, οπότε αρκεί να
     ακυρωθεί το `grid-column: 1 / -1` που κληρονομούν και τα δύο από
     το `.board > *`. */
  .brand{ grid-column: 1; }
  .nav-toggle{
    display: block;
    grid-row: 1; grid-column: 2;
    justify-self: end; align-self: center;
  }

  /* Κλειστό εξ ορισμού· δεν πιάνει καθόλου χώρο μέχρι να πατηθεί το ☰. */
  .nav{ display: none; }
  .nav.is-open{
    display: flex;
    flex-direction: column; flex-wrap: nowrap;
    align-items: flex-start; justify-content: flex-start;
    gap: 1rem;
    margin: 1.1rem 0 0; padding: 1.25rem 0 .25rem;
    border-top: 1px solid var(--rule);
  }
}

/* =========================================================
   Content sections — About / Reviews / Contact / Footer

   Κανονικό responsive CSS (rem, flex/grid), όχι το board/cqw
   σύστημα του hero — δεν υπάρχει reference εικόνα εδώ προς
   αναπαραγωγή pixel-perfect.
   ========================================================= */
.section{
  padding: 5rem 0;
}
.section .wrap{
  position: relative;
  /* 85rem (not the more typical ~64rem) because at >=1180px this also
     carries the mascot's own right-side gutter (up to ~42rem wide) —
     a narrower container would squeeze real content down to an
     uncomfortably thin column once that padding is subtracted. */
  max-width: 85rem;
  margin: 0 auto;
  padding: 0 1.5rem;
}
/* Κρατά ελεύθερο το δεξί gutter όπου ζει το sticky mascot, ώστε το
   περιεχόμενο να μην μπαίνει ποτέ από κάτω του. Ίδιο --mascot-w custom
   property με αυτό που ορίζει το πλάτος του .mascot-rail, ώστε τα δύο
   να μην μπορούν ποτέ να αποκλίνουν. Breakpoint 1181px (όχι 1180px)
   επίτηδες — συμπληρωματικό, όχι ίδιο, με το max-width:1180px του
   .mascot-rail παρακάτω, ώστε να μην υπάρχει πλάτος όπου το gutter
   δεσμεύεται ενώ το μασκότ είναι ήδη κρυμμένο. */
@media (min-width: 1181px){
  /* :has(.mascot-rail) — μόνο σελίδες που έχουν πράγματι το sticky mascot
     (μόνο index.html) πρέπει να κρατούν αυτό το gutter. Χωρίς αυτό το scope,
     ο επιλογέας `.section .wrap` ταίριαζε και στο menu.html/contact.html
     (το footer τους είναι επίσης `.section .wrap`), όπου δεν υπάρχει καθόλου
     `.mascot-rail` — έτσι το footer κρατούσε κενό ~610px gutter χωρίς λόγο,
     δείχνοντας στριμωγμένο αριστερά. */
  body:has(.mascot-rail) .section .wrap{ padding-right: calc(var(--mascot-w) + 3rem); }
}

.section__eyebrow{
  margin: 0 0 .75rem;
  font-family: var(--latin); font-size: .9rem;
  letter-spacing: .085em; text-transform: uppercase; color: var(--red);
}
/* var(--display) (βλ. :root). Οι τίτλοι εδώ είναι ελληνικοί,
   άρα η Anton του var(--latin) δεν θα τους απέδιδε ποτέ. Κανένα font-weight:
   το h2 παίρνει bold από το user-agent stylesheet — ίδια εμφάνιση με πριν. */
.section__title{
  margin: 0 0 1.25rem; max-width: 20ch;
  font-family: var(--display); font-weight: 800; text-transform: uppercase; line-height: .95;
  font-size: clamp(2rem, 1.2rem + 3vw, 3rem);
  color: var(--ink);
}

@media (max-width: 480px){
  .section{ padding: 3rem 0; }
  .section .wrap{ padding: 0 1.25rem; }
}

/* ---------- About ---------- */
/* Mascot reveal zone: opaque right at the hero/About seam, fading to
   fully transparent by 10rem down, so the mascot stays hidden at the
   boundary (matching hero's now-hard edge) and gradually reveals itself
   over the first stretch of scrolling into About. Positioned + z-index:
   auto, same trick as .hero::before, so it paints above the mascot's
   negative z-index layer. .section .wrap is also position: relative
   (see above) and comes later in the DOM, so it paints on top of this
   overlay within the same stacking bucket — the real "OUR STORY" copy
   stays fully visible above the fade.

   ΠΡΟΣΟΧΗ: η ζώνη αυτή ανήκει σε ΟΠΟΙΑ ενότητα κάθεται πρώτη κάτω από το
   hero — όχι στο #about ειδικά. Ο πελάτης αντάλλαξε (2026-08-14) τη σειρά
   Τεστ Ποιότητας / Έρευνας, οπότε ο επιλογέας έγινε κλάση: μετακίνησε την
   .section--mascot-reveal μαζί με όποια ενότητα ανέβει πρώτη, αλλιώς το
   μασκότ ξεπροβάλλει απότομα στη ραφή με το hero. */
.section--mascot-reveal{ position: relative; }
.section--mascot-reveal::before{
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 10rem;
  background: var(--cream);
  mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 100%);
  pointer-events: none;
}
.about__text{ max-width: 42rem; }
.about__lede{
  margin: 0 0 1rem;
  font-family: var(--greek); font-weight: 500; font-size: 1.05rem;
  line-height: 1.55; color: var(--ink);
}
.about__lede:last-child{ margin-bottom: 0; }

/* ---------- Our Dishes ----------
   Πλέγμα με τις πραγματικές φωτογραφίες πιάτων του πελάτη. Κρατάει τη
   γλώσσα των .review καρτών (var(--beige), radius .75rem) ώστε οι δύο
   ενότητες να διαβάζονται ως ένα σύστημα.

   ΠΡΟΣΟΧΗ στο πλάτος: το `.section .wrap` κρατά δεσμευμένο δεξί gutter
   ~var(--mascot-w) στα ≥1181px, οπότε η τρίτη στήλη ανοίγει αρκετά αργά
   (1500px) — αλλιώς οι κάρτες θα στρίμωχναν σε ~200px η καθεμία. */
.dishes__lede{
  margin: 0 0 2.25rem; max-width: 46rem;
  font-family: var(--greek); font-weight: 500; font-size: 1.05rem;
  line-height: 1.55; color: var(--ink);
}

.dishes__grid{
  margin: 0 0 2.5rem; padding: 0; list-style: none;
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 560px){
  .dishes__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1500px){
  .dishes__grid{ grid-template-columns: repeat(3, 1fr); }
}

.dish{ display: flex; }
.dish__link{
  display: flex; flex-direction: column; width: 100%;
  background: var(--beige); border-radius: .75rem; overflow: hidden;
  color: var(--ink); text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.dish__link:hover, .dish__link:focus-visible{
  transform: translateY(-.25rem);
  box-shadow: 0 .75rem 1.75rem rgba(36, 18, 7, .14);
}
.dish__link:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; }

.dish__photo{
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  object-fit: cover; background: var(--rule);
}

/* flex column + margin-top:auto στην τιμή ⇒ όλες οι τιμές κάθονται στο κάτω
   μέρος της κάρτας ακόμη κι όταν τα ονόματα πιάνουν διαφορετικό αριθμό
   γραμμών (π.χ. «Σπέσιαλ» vs «Club Sandwich Classic Jumbo»). */
.dish__body{
  display: flex; flex-direction: column; flex: 1;
  padding: 1.25rem 1.25rem 1.35rem;
}
.dish__name{
  font-family: var(--display); font-weight: 800; text-transform: uppercase;
  font-size: 1.35rem; line-height: 1.05; color: var(--ink);
}
.dish__ingredients{
  margin-top: .5rem;
  font-family: var(--greek); font-weight: 500; font-size: .9rem;
  line-height: 1.45; color: var(--ink); opacity: .78;
}
/* var(--display) και όχι var(--latin): η τιμή των ζυμαρικών γράφεται
   «από 9,00€» — με την Anton (καθόλου ελληνικές γλυφές) το «από» θα
   έπεφτε αλλού και τα ψηφία θα έμεναν Anton, δύο όψεις στην ίδια
   γραμμή. Με --display όλες οι τιμές έχουν την ίδια όψη. */
.dish__price{
  margin-top: auto; padding-top: .9rem;
  font-family: var(--display); font-weight: 800; font-size: 1.15rem; letter-spacing: .03em;
  color: var(--red-ink);
}

/* Δευτερεύουσα γραμμή κάτω από τα υλικά (extra χρέωση από τα φυλλάδια).
   Δεν παίρνει margin-top: auto — αυτό το κρατά η τιμή, ώστε να στοιχίζονται
   όλες οι τιμές στο κάτω μέρος ανεξάρτητα από το αν η κάρτα έχει extra. */
/* --red-ink και όχι --red: το --red (#e02b17) πάνω στο --beige της κάρτας
   δίνει 3.5:1, κάτω από το 4.5:1 που θέλει το AA για κείμενο αυτού του
   μεγέθους. Το --red-ink (#c11f0e) δίνει 4.5:1. Ίδιο και για την τιμή. */
.dish__extra{
  margin-top: .55rem;
  font-family: var(--greek); font-weight: 600; font-size: .82rem;
  line-height: 1.35; color: var(--red-ink);
}

/* Η εγγύηση του φυλλαδίου: μία δυνατή δήλωση, οπότε παίρνει το γεμάτο
   κόκκινο πλακίδιο αντί για ακόμη μια beige κάρτα — αλλιώς θα χανόταν
   ανάμεσα στις έξι από πάνω της. Τα δύο πενηντάρικα κάθονται δεξιά,
   γερμένα και μισοβγαλμένα έξω από το πλακίδιο, ώστε να διαβάζεται ως
   στιγμιότυπο και όχι ως ακόμη ένα εικονίδιο μέσα σε κουτί. */
.guarantee{
  position: relative; overflow: hidden;
  margin: 0 0 2.5rem; padding: 1.75rem 1.75rem 1.75rem;
  background: var(--red); color: var(--white); border-radius: .75rem;
  display: flex; align-items: center; gap: 1.5rem;
}
.guarantee__text{ flex: 1; min-width: 0; }
.guarantee__lede{
  margin: 0;
  font-family: var(--greek); font-weight: 500; font-size: 1.05rem;
  line-height: 1.5;
}
.guarantee__lede strong{ font-weight: 800; }
/* Λευκό, όχι --yellow: το κίτρινο πάνω στο κόκκινο δίνει 2.6:1 — μη
   αναγνώσιμο σε αυτό το μέγεθος. Το λευκό δίνει 4.65:1 και ξεχωρίζει από
   το κείμενο με μέγεθος/tracking/κεφαλαία αντί για χρώμα. --display γιατί
   το «Η ΕΓΓΥΗΣΗ ΜΑΣ» είναι ελληνικό. */
.guarantee__kicker{
  margin: 0 0 .5rem;
  font-family: var(--display); font-weight: 800; font-size: .85rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--white);
}
/* ΡΥΘΜΙΣΗ ΤΩΝ ΧΑΡΤΟΝΟΜΙΣΜΑΤΩΝ — άλλαξε ΜΟΝΟ τις 4 τιμές παρακάτω.
   Είναι σκόπιμα σε ένα σημείο, σε rem (1rem = 16px), ώστε να μη χρειάζεται
   να πειράξει κανείς τα margin/transform από κάτω.

     --cash-x     θετικό = δεξιά,  αρνητικό = αριστερά
     --cash-y     θετικό = κάτω,   αρνητικό = πάνω
     --cash-size  πλάτος της εικόνας
     --cash-tilt  κλίση (0deg = ίσια)

   Η μετακίνηση γίνεται με translate, όχι με margin: δεν πειράζει τη διάταξη
   του πλακιδίου, οπότε το κείμενο δίπλα δεν κουνιέται. Αν σπρώξεις πολύ,
   το overflow: hidden του .guarantee θα κόψει την εικόνα στην άκρη — αυτό
   είναι η ένδειξη ότι το παράκανες, όχι bug. */
.guarantee{
  --cash-size: 12rem;
  --cash-x: 0rem;
  --cash-y: 0rem;
  --cash-tilt: -7deg;
}

/* ΧΩΡΙΣ αρνητικά πάνω/κάτω περιθώρια. Τα είχε (−1.25rem) για να μη φουσκώνει
   το ύψος του πλακιδίου, αλλά έτσι η εικόνα ήταν ψηλότερη από το διαθέσιμο
   ύψος και ακουμπούσε πάνω-κάτω στις άκρες: καμία τιμή --cash-y δεν μπορούσε
   να αφήσει κενό από πάνω χωρίς να κόψει από κάτω. Τώρα η εικόνα μετράει
   κανονικά στη διάταξη, το πλακίδιο ψηλώνει όσο χρειάζεται και το padding
   του (1.75rem) γίνεται πραγματικό κενό γύρω της.

   Η σκιά μπαίνει με filter (όχι box-shadow) γιατί η εικόνα έχει διαφάνεια:
   το box-shadow θα σχεδίαζε ορθογώνιο γύρω από το πλαίσιο της εικόνας, όχι
   γύρω από τα χαρτονομίσματα. */
.guarantee__cash{
  flex: 0 0 auto; width: var(--cash-size); height: auto;
  transform: translate(var(--cash-x), var(--cash-y)) rotate(var(--cash-tilt));
  filter: drop-shadow(0 .75rem 1rem rgba(36, 18, 7, .35));
}

@media (max-width: 720px){
  .guarantee{
    flex-direction: column; align-items: flex-start; gap: .5rem;
    /* το κινητό έχει δικές του τιμές· άλλαξέ τες ξεχωριστά */
    --cash-size: 8.8rem;
    --cash-x: 0rem;
    --cash-y: 0rem;
  }
  .guarantee__cash{ align-self: flex-end; }
}

.dishes__cta{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2rem; border-radius: 999px;
  border: 2px solid var(--red); background: transparent; color: var(--red);
  font-family: var(--display); font-weight: 800; font-size: 1rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.dishes__cta:hover, .dishes__cta:focus-visible{
  background: var(--red); color: var(--white);
}

/* ---------- Survey ----------
   Τα ποσοστά των μπαρών γράφονται inline στο HTML (92.3 / 5.3 / 2.4) γιατί
   είναι δεδομένα, όχι στυλ: αν αλλάξουν τα νούμερα της έρευνας, αλλάζουν
   μαζί στο ίδιο σημείο με το κείμενο. */
.research__lede{
  margin: 0 0 2.25rem; max-width: 46rem;
  font-family: var(--greek); font-weight: 500; font-size: 1.05rem;
  line-height: 1.55; color: var(--ink);
}
.research__lede a{ color: var(--red-ink); text-decoration-thickness: 1px; text-underline-offset: .18em; }

.research__scores{
  margin: 0 0 2.5rem; padding: 1.75rem; list-style: none;
  background: var(--beige); border-radius: .75rem;
  display: grid; gap: 1rem;
}
.score{ display: flex; align-items: center; gap: 1rem; }
.score__grade{
  flex: 0 0 2.25rem; text-align: center;
  font-family: var(--display); font-weight: 800; font-size: 1.5rem; line-height: 1; color: var(--ink);
}
.score__track{
  flex: 1; height: 1.5rem; border-radius: 999px;
  background: var(--white); overflow: hidden;
}
.score__bar{
  display: block; height: 100%; border-radius: 999px; background: var(--red);
  /* min-width ώστε η μπάρα του «8» (2,4%) να παραμένει ορατή σε στενή οθόνη */
  min-width: .5rem;
}
.score__count{
  flex: 0 0 7.5rem; text-align: right;
  font-family: var(--greek); font-weight: 600; font-size: .95rem; color: var(--ink);
}

/* --display και όχι --latin: «Είπαν για εμάς» και τα ονόματα των
   πελατών είναι ελληνικά, η Anton δεν έχει ελληνικές γλυφές. Δηλωμένο, όχι
   σιωπηλό fallback. --red-ink για το AA πάνω στο --cream. */
.research__said{
  margin: 0 0 1rem;
  font-family: var(--display); font-weight: 800; font-size: .95rem;
  letter-spacing: .085em; text-transform: uppercase; color: var(--red-ink);
}
.research__quotes{
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: 1rem;
}
@media (min-width: 700px){
  .research__quotes{ grid-template-columns: repeat(2, 1fr); }
}
/* 1px, όσο ΚΑΘΕ γραμμή σε αυτό το stylesheet: οι .rule του hero, το
   .contact__row. Στα 3px που ήταν, η
   γραμμή σταματούσε να διαβάζεται ως τυπογραφικό σημάδι παραθέματος και
   γινόταν διακοσμητικό accent — το μόνο τέτοιου πάχους στη σελίδα. */
.research__quotes li{
  padding-left: 1rem; border-left: 1px solid var(--frame);
  font-family: var(--greek); font-weight: 500; font-size: 1rem; line-height: 1.5;
}
.research__quotes q{ quotes: "«" "»"; }
.research__quotes cite{
  display: block; margin-top: .35rem;
  font-family: var(--display); font-weight: 800; font-style: normal; font-size: .85rem;
  letter-spacing: .06em; text-transform: uppercase; color: var(--red-ink);
}

@media (max-width: 520px){
  .score{ flex-wrap: wrap; gap: .5rem 1rem; }
  .score__track{ order: 3; flex: 1 0 100%; }
  .score__count{ flex: 1; text-align: left; }
}


/* =========================================================
   Sticky mascot companion — fixed στη δεξιά άκρη. Δεν υπάρχει πλέον
   JS show/hide: το στοιχείο είναι πάντα στο DOM με opacity:1, αλλά
   κάθεται σε αρνητικό z-index, πίσω από το κανονικό ροή περιεχόμενο.
   Το .hero::before (όχι το ίδιο το .hero) έχει δικό του αδιαφανές,
   ΣΚΛΗΡΟ (χωρίς mask) background (var(--cream)) που ζωγραφίζεται πάνω
   από αυτό σε όλο το ύψος του hero — έτσι το μασκότ κρύβεται εντελώς
   και χωρίς κανένα peek-through καθ' όλη τη διάρκεια του hero, χωρίς
   animation ή timing race. Το reveal fade δεν ζει πια στο hero· ζει
   στο #about::before (βλ. "---------- About ----------" παραπάνω),
   ένα ξεχωριστό αδιαφανές layer 10rem ύψους κολλημένο στην κορυφή του
   #about, με mask-image που ξεκινά αδιαφανές στο seam και ξεθωριάζει
   ως το τέλος του — έτσι το μασκότ ξεκινά να αποκαλύπτεται μόνο αφού
   ο χρήστης έχει ήδη προσπεράσει το hero, ποτέ ενώ βλέπει ακόμα
   περιεχόμενο του hero. Τα sections μετά το #about (Reviews, Contact,
   Footer) ΔΕΝ παίρνουν δικό τους background — κληρονομούν το (διαφανές
   σε αυτό το επίπεδο stacking) background του body, ώστε το μασκότ να
   φαίνεται μέσα από το δεξί gutter τους όπως πριν.
   top: 50% κεντράρει το πλαίσιο (bounding box) του μασκότ κάθετα στο
   viewport, αλλά το ίδιο το asset έχει τον χαρακτήρα πιο ψηλά στο δικό
   του διάφανο κουτί (μετρημένο: αδιαφανή pixels από 0.7% ως 90.1% του
   ύψους, οπτικό κέντρο στο 45.4% — όχι στο 50%). Το translateY(-45.4%)
   αντί για -50% μετατοπίζει το πλαίσιο λίγο πιο κάτω ώστε να κεντράρεται
   οπτικά ο χαρακτήρας, όχι το άδειο πλαίσιο γύρω του.
   Κρύβεται κάτω από 1180px: ίδιο breakpoint με του hero board, όπου
   δεν υπάρχει πλέον ελεύθερο gutter να σταθεί.
   ========================================================= */
.mascot-rail{
  position: fixed; z-index: -1;
  right: 1.5rem; top: 50%;
  width: var(--mascot-w);
  opacity: 1; transform: translateY(-45.4%);
  pointer-events: none;
}
.mascot-rail img{ display: block; width: 100%; height: auto; }

@media (max-width: 1180px){
  .mascot-rail{ display: none; }
}

/* ---------- Reviews ---------- */
/* 2×2, όχι 3 στήλες: οι πραγματικές κριτικές Google είναι αρκετά μεγαλύτερες
   από τα παλιά placeholder αποσπάσματα, και πάνω από 1181px το δεξί gutter του
   mascot αφήνει ~700px στην ενότητα — τρεις στήλες εκεί έβγαζαν γραμμές ~20
   χαρακτήρων. Με 4 κριτικές σε 2 στήλες κάθε σειρά γεμίζει πάντα, σε κάθε
   πλάτος (καμία μονήρης κάρτα σε τελευταία σειρά). */
.reviews__grid{
  display: grid; gap: 1.5rem;
  grid-template-columns: 1fr;
}
@media (min-width: 700px){
  .reviews__grid{ grid-template-columns: repeat(2, 1fr); }
}
.review{
  padding: 1.75rem;
  background: var(--beige);
  border-radius: .75rem;
}
.review__stars{
  margin: 0 0 .75rem; color: var(--yellow); letter-spacing: .1em; font-size: 1.1rem;
}
.review__quote{
  margin: 0 0 1rem;
  font-family: var(--greek); font-weight: 500; font-size: 1rem; line-height: 1.5;
  color: var(--ink);
}
.review__name{
  margin: 0;
  font-family: var(--latin); font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red);
}

/* ---------- Contact ---------- */
.contact__list{ margin: 0 0 2rem; display: grid; gap: 1rem; }
.contact__row{
  display: flex; flex-wrap: wrap; gap: .25rem 1rem;
  border-top: 1px solid var(--rule); padding-top: .85rem;
}
.contact__row:first-child{ border-top: none; padding-top: 0; }
/* var(--display) — ελληνικά labels (ΩΡΕΣ, ΔΙΕΥΘΥΝΣΗ...), ίδιο σκεπτικό με το
   .section__title. font-weight ρητό — βλ. --display στο :root. */
.contact__row dt{
  flex: 0 0 12rem; margin: 0;
  font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red);
}
.contact__row dd{
  flex: 1 1 14rem; margin: 0;
  font-family: var(--greek); font-weight: 500; font-size: 1rem; line-height: 1.5;
  color: var(--ink);
}
.contact__row dd a{ color: var(--ink); text-decoration: none; }
.contact__row dd a:hover, .contact__row dd a:focus-visible{
  color: var(--red); text-decoration: underline;
}

.directions{
  display: inline-flex; align-items: center; justify-content: center;
  padding: .9rem 2rem; border-radius: 999px;
  background: var(--red); color: var(--white);
  font-family: var(--latin); font-size: 1rem; letter-spacing: .04em;
  text-transform: uppercase; text-decoration: none;
  transition: background .18s ease;
}
.directions:hover, .directions:focus-visible{ background: var(--red-ink); }

/* Σε στοίβα, το flex-basis των dt/dd σταματά να είναι πλάτος και γίνεται
   ΥΨΟΣ (main axis = κάθετος): το `flex: 1 1 14rem` του dd έδινε σε κάθε τιμή
   224px ύψος, δηλαδή τεράστια κενά ανάμεσα στις γραμμές του Find Us. Και τα
   δύο πρέπει να γυρίσουν σε basis: auto εδώ. */
@media (max-width: 480px){
  .contact__row{ flex-direction: column; gap: .25rem; }
  .contact__row dt{ flex-basis: auto; }
  .contact__row dd{ flex-basis: auto; }
}

/* ---------- Footer ---------- */
.section--footer{ padding-bottom: 2.5rem; }
.footer__wrap{
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(2, 1fr);
}
.footer__brand img{ width: 5.5rem; height: auto; opacity: .9; }
/* var(--display): "Ώρες"/"Επικοινωνία"/"Πληροφορίες" είναι ελληνικά.
   font-weight ρητό — βλ. --display στο :root.

   Ο επιλογέας είναι `.footer__col .footer__heading` (0,2,0) και ΟΧΙ σκέτο
   `.footer__heading` (0,1,0): το `.footer__col p` από κάτω είναι (0,1,1) και
   έρχεται αργότερα στο αρχείο, οπότε κέρδιζε — ο κανόνας ήταν νεκρός κώδικας
   και τα headings αποδίδονταν ταυτόσημα με τις απλές παραγράφους του footer
   (μετρημένο: Manrope 14.72px / ink και στα δύο· μόνο το text-transform
   επιβίωνε, γιατί το `.footer__col p` δεν το ορίζει). Ίδιο μοτίβο bug με το
   `.contact-hero p` vs `.section__eyebrow`. */
.footer__col .footer__heading{
  margin: 0 0 .75rem;
  font-family: var(--display); font-weight: 800; font-size: .8rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--red);
}
.footer__col p{
  margin: 0 0 .4rem;
  font-family: var(--greek); font-size: .92rem; line-height: 1.5; color: var(--ink);
}
.footer__col a{ color: var(--ink); text-decoration: none; }
.footer__col a:hover, .footer__col a:focus-visible{ color: var(--red); text-decoration: underline; }

.footer__legal{
  margin-top: 3rem; padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  display: flex; flex-direction: column; gap: .5rem;
}
/* copyright + credit στην ίδια γραμμή όσο χωρούν, αλλιώς αναδιπλώνονται */
.footer__legal-top{
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem 1.25rem;
}
.footer__copyright, .footer__credit{
  margin: 0;
  font-family: var(--greek); font-size: .8rem; color: var(--ink);
}
.footer__credit a{
  color: var(--ink);
  text-decoration: underline; text-underline-offset: .15em;
  transition: color .18s ease;
}
.footer__credit a:hover, .footer__credit a:focus-visible{ color: var(--red); }
.footer__disclaimer{
  margin: 0;
  font-family: var(--greek); font-size: .72rem; line-height: 1.5;
  color: var(--ink);
}

@media (min-width: 700px){
  .footer__wrap{ grid-template-columns: repeat(4, auto); }
}