/* =============================================================
   είμαι... — landing page
   Το layout είναι χτισμένο πάνω στον καμβά του design: 1128 × 2438.
   Κάθε μέγεθος γράφεται σε "design px" και πολλαπλασιάζεται με --u,
   οπότε όλη η σύνθεση κλιμακώνεται αναλογικά σε κάθε οθόνη.
   ============================================================= */

@font-face {
  font-family: "Dela Gothic One";
  src: url("fonts/DelaGothicOne-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Google Sans";
  src: url("fonts/GoogleSans-subset.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --paper: #efefef;   /* ανοιχτό background (πάνω μέρος) */
  --ink:   #303030;   /* σκούρο background (κάτω μέρος)  */
  --cream: #e7e0d2;   /* κύμα + κουμπί                    */

  --max-w: 750px;     /* πλάτος σύνθεσης σε μεγάλες οθόνες */
}

/* Σε χαμηλά viewport (laptop, landscape) περιορίζουμε και το πλάτος,
   ώστε η σύνθεση να χωράει πάντα ολόκληρη χωρίς scroll:
   1128 / 1800 = ο λόγος πλάτους προς το ελάχιστο ανεκτό ύψος. */
@supports (height: 100dvh) {
  :root { --max-w: min(750px, calc(100dvh * 1128 / 1800)); }
}

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

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

body {
  margin: 0;
  background: var(--ink);
  color: var(--ink);
  font-family: "Google Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ------------------------------------------------------------- */
/* καμβάς                                                        */
/* ------------------------------------------------------------- */

.page {
  --u: calc(min(100vw, var(--max-w)) / 1128);   /* 1 design px */

  width: min(100vw, var(--max-w));
  margin-inline: auto;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  position: relative;
}

/* Τα panels μεγαλώνουν αναλογικά με τον ελεύθερο χώρο τους
   (light: 477+62.4 = 539.4 · dark: 225+460 = 685). */
.panel {
  position: relative;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* ::before / ::after = ελαστικά κενά πάνω και κάτω από το περιεχόμενο */
.panel::before,
.panel::after {
  content: "";
  display: block;
  flex-basis: 0;
  flex-shrink: 0;
}

.panel--light          { background: var(--paper); flex-grow: 539.4; }
.panel--light::before  { flex-grow: 477; }
.panel--light::after   { flex-grow: 62.4; }

/* το padding-top αντισταθμίζει το -1px margin του κύματος */
.panel--dark           { background: var(--ink); flex-grow: 685; color: var(--paper); padding-top: 1px; }
.panel--dark::before   { flex-grow: 225; }
.panel--dark::after    { flex-grow: 460; }

/* ------------------------------------------------------------- */
/* διακοσμητικά σχέδια στις γωνίες                                */
/* ------------------------------------------------------------- */

.doodle {
  position: absolute;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
}

.doodle--top {
  top: 0;
  left: 0;
  width: calc(449.45 * var(--u));
  height: calc(199.79 * var(--u));
  background-image: url("assets/shape-top.svg");
}

.doodle--bottom {
  right: 0;
  bottom: 0;
  width: calc(652.86 * var(--u));
  height: calc(132.5 * var(--u));
  background-image: url("assets/shape-bottom.svg");
}

/* ------------------------------------------------------------- */
/* σειρά περιεχομένου (κείμενο + λογότυπο)                        */
/* ------------------------------------------------------------- */

.row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex: none;
  position: relative;
  z-index: 1;
}

.row--light {
  height: calc(480.6 * var(--u));   /* = το ύψος του μεγαλωμένου λογότυπου */
  gap: calc(78.7 * var(--u));
  padding-right: calc(2 * var(--u));
}

.row--dark {
  height: calc(383 * var(--u));
  gap: calc(85.7 * var(--u));
  padding-right: calc(6 * var(--u));
}

/* το margin-top ευθυγραμμίζει την κορυφή του κειμένου με το λογότυπο */
.venue--urban {
  width: calc(373.9 * var(--u));
  text-align: right;
  margin-top: calc(-7.3 * var(--u));
}

.venue--beach {
  width: calc(371 * var(--u));
  text-align: left;
  margin-top: calc(-10.3 * var(--u));
}

.venue__logo {
  display: block;
  flex: none;
  height: auto;
}

.venue__logo--urban { width: calc(448 * var(--u)); }   /* design: 407.3 — μεγαλωμένο ~10% */
.venue__logo--beach { width: calc(315.31 * var(--u)); }

/* ------------------------------------------------------------- */
/* τυπογραφία                                                     */
/* ------------------------------------------------------------- */

.venue__heading {
  margin: 0;
  font-weight: 400;
}

.venue__intro,
.venue__name,
.venue__place {
  display: block;
  line-height: 1;
  white-space: nowrap;
}

.venue__intro {
  font-family: "Dela Gothic One", "Google Sans", sans-serif;
  font-size: calc(66 * var(--u));
}

.venue__name {
  font-size: calc(67 * var(--u));
  font-weight: 700;
  margin-top: calc(21.2 * var(--u));
}

/* το Google Sans δεν έχει italic — ο browser το πλαγιάζει, όπως και στο design */
.venue__place {
  font-size: calc(55.4 * var(--u));
  font-weight: 400;
  font-style: italic;
  margin-top: calc(12.8 * var(--u));
}

/* ------------------------------------------------------------- */
/* κουμπί «go to menu»                                            */
/* ------------------------------------------------------------- */

.cta {
  display: inline-flex;
  align-items: center;
  gap: calc(33.1 * var(--u));
  margin-top: calc(var(--cta-gap) * var(--u));
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.venue--urban .cta { --cta-gap: 57.9; }
.venue--beach .cta { --cta-gap: 80.9; }

.cta__icon {
  flex: none;
  display: block;
  width: calc(90.37 * var(--u));
  transition: transform .25s ease;
}

.cta__icon svg {
  display: block;
  width: 100%;
  height: auto;
}

.cta__blob  { fill: var(--cream); }
.cta__arrow { fill: var(--ink); }

.cta__label {
  font-size: calc(45 * var(--u));
  font-weight: 700;
  line-height: 1;
  transform: translateY(calc(-3.1 * var(--u)));
}

.cta:hover .cta__icon,
.cta:focus-visible .cta__icon { transform: scale(1.08); }

.cta:active .cta__icon { transform: scale(.96); }

.cta:focus-visible {
  outline: calc(3 * var(--u)) solid currentColor;
  outline-offset: calc(8 * var(--u));
  border-radius: calc(12 * var(--u));
}

@media (prefers-reduced-motion: reduce) {
  .cta__icon { transition: none; }
  .cta:hover .cta__icon,
  .cta:focus-visible .cta__icon,
  .cta:active .cta__icon { transform: none; }
}

/* ------------------------------------------------------------- */
/* κύμα                                                           */
/* ------------------------------------------------------------- */

.wave {
  display: block;
  flex: none;
  width: 100%;
  height: auto;
  /* το σκούρο panel καλύπτει τη βάση του SVG, ώστε να μην μένει
     ανοιχτόχρωμη γραμμή 1px σε οθόνες με μη ακέραιο pixel ratio */
  margin-bottom: -1px;
}

.wave__paper { fill: var(--paper); }
.wave__cream { fill: var(--cream); }
.wave__ink   { fill: var(--ink); }