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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  transition: background-color 0.9s cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* scroll background (Αρχική) — βλ. initScrollBg() */
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-weight: 400; /* Figma node 3:1180 — SemiExpanded Regular (62 χρήσεις vs 2 Light) */
  color: #000e1f;
  background: #ffffff;
}

/* Figma: the 64px page H1 titles use TikTok Sans 18pt Expanded (125%).
   Body stays SemiExpanded; the history hero (.inner-hero-title) and
   .landmark-subtitle stay SemiExpanded per Figma, so they are not listed. */
.experience-title,
.meeting-title,
.gallery-title,
.rooms-title,
.room-hero__title,
.contact-title,
.breakfastp-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma: 64px H1 */
}
/* Scroll background (Αρχική): η ομαλή μετάβαση γίνεται από CSS transition —
   το JS (initScrollBg) θέτει μόνο το χρώμα και το --page-bg. Με .bg-instant
   στο <html> (αρχική κατάσταση σε reload) τα transitions μηδενίζονται. */
html.bg-instant body,
html.bg-instant .hotel-text-row { transition: none !important; }

/* =========================
   TIKTOK SANS  —  self-hosted, ένα family / 7 cuts
   Ο browser διαλέγει αρχείο από weight + stretch. Κάθε αρχείο
   ΕΙΝΑΙ ήδη το σωστό optical size (18pt / 24pt), οπότε δεν
   χρειάζεται opsz axis.
========================= */
@font-face { font-family: 'TikTok Sans'; src: url('../fonts/TikTokSans-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap; }

@font-face { font-family: 'TikTok Sans 18pt SemiExpanded'; src: url('../fonts/TikTokSans_18pt_SemiExpanded-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'TikTok Sans 18pt SemiExpanded'; src: url('../fonts/TikTokSans_18pt_SemiExpanded-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'TikTok Sans 18pt SemiExpanded'; src: url('../fonts/TikTokSans_18pt_SemiExpanded-Medium.woff') format('woff');
  font-weight: 500; font-style: normal; font-display: swap; }

@font-face { font-family: 'TikTok Sans 18pt Expanded'; src: url('../fonts/TikTokSans_18pt_Expanded-Light.woff') format('woff');
  font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'TikTok Sans 18pt Expanded'; src: url('../fonts/TikTokSans_18pt_Expanded-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap; }

@font-face { font-family: 'TikTok Sans 24pt ExtraExpanded'; src: url('../fonts/TikTokSans_24pt_ExtraExpanded-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap; }

/* =========================
   THEANO DIDOT  —  η γραμματοσειρά της Figma (101/144 ελληνικά)
   Αντικαθιστά το Linotype Didot που είχε 2/144.
   Διατίθεται μόνο σε Regular.
========================= */
@font-face { font-family: 'Theano Didot'; src: url('../fonts/TheanoDidot-Regular.woff') format('woff');
  font-weight: 400; font-style: normal; font-display: swap; }

/* =========================
   THEANO DIDOT — display τίτλοι
   Figma: 0.5px περίγραμμα σε LIGHT GRAY. Λεπταίνει οπτικά τις
   βαριές κάθετες του Didot. Ισχύει στους τίτλους (weight 400),
   ΟΧΙ στα κουμπιά .outline-btn-b / .contact-btn (weight 500,
   18-24px) όπου θα αλλοίωνε αισθητά το μικρό έντονο κείμενο.
========================= */
.hotel-text h2,
.editorial-title,
.breakfast-bg-title span,
.business-title,
.landmark-title,
.tl-entry-year,
.gallery-cta__heading,
.delights-title,
.meeting-delights-title,
.form-title {
  color: #000e1f;
  -webkit-text-stroke-width: 0.5px;
  -webkit-text-stroke-color: #f0f0f0;
}
/* Navy sections (gallery CTA, marquee πρωινού στο /aegli-hotel/): το stroke
   παίρνει το χρώμα του ΦΟΝΤΟΥ (#000e1f) ώστε να λεπταίνει το Didot όπως το
   #f0f0f0 στα ανοιχτά sections, αντί να δίνει ανοιχτό περίγραμμα. Μόνο αυτά. */
.gallery-cta__heading,
.breakfast-bg-title span {
  -webkit-text-stroke-color: #000e1f;
}
/* =========================
   AEION MONO
========================= */
@font-face {
  font-family: 'Aeion Mono';
  src:     
    url('../fonts/AeionMono-SemiLight.woff2') format('woff2'),
    url('../fonts/AeionMono-SemiLight.woff') format('woff');
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeion Mono';
  src:
    url('../fonts/AeionMono-Regular.woff2') format('woff2'),
    url('../fonts/AeionMono-Regular.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Aeion Mono';
  src:
    url('../fonts/AeionMono-SemiBold.woff2') format('woff2'),
    url('../fonts/AeionMono-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

.pd{
  padding-bottom: 10px;
}

/* VARIABLES */
:root {
  --color-dark: #000e1f;
  --color-gray: #a9a9a9;
  --header-height: 72px;
  --content-gutter: 20px;

  /* ── ANIMATION SYSTEM TOKENS ──
     One ease + one duration scale for the whole site.
     JS (GSAP) mirrors these: power2.out / 0.95s text / 1.4s images. */
  --anim-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94); /* ≈ power2.out */
  --anim-fast: 0.45s;   /* hovers, micro-interactions */
  --anim-base: 0.95s;   /* text reveals */
}

/* ── REDUCED MOTION — calm everything down ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
  .marquee-left,
  .marquee-right {
    animation: none !important;
  }
}
/*----------IMAGE CLIP PATH-------------*/
.image-reveal {
  overflow: hidden;
}

.image-reveal img {
  width: 100%;
  height: auto;
  display: block;
}
/* ---------TEXT REVEAL BASE----------  */
.reveal-title,
.reveal-text {
  overflow: hidden;
}

/* Το overflow:hidden (για το reveal) έκοβε τα ψηλά γράμματα:
   Aeion Mono @80px θέλει 96px φυσικό ύψος γραμμής, το box ήταν 80px.
   padding + αρνητικό margin = χώρος για τα ascenders, μηδενική
   επίπτωση στο layout. */
.reveal-title {
  padding-top: 0.22em;
  margin-top: -0.22em;
}

/* Words wrapper (generated via JS) */
.reveal-word {
  display: inline-block;
  white-space: nowrap;
}
/*----------HERO SECTION-------------*/
.hero {
  height: 100vh;
  overflow: hidden;
  padding-top: var(--header-height);
  background: #ffffff;
  display: flex;
  align-items: center;
}

.hero-inner {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding: 43px var(--content-gutter) 42px;
  display: flex;
  justify-content: center;
  position: relative;
}

.hero-media {
  max-width: 691px;
  width: 100%;
  height: calc(100vh - var(--header-height) - 43px - 42px);
  overflow: hidden;
}

.hero-media img,
.hero-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* το wrapper έχει σταθερό ύψος (100vh - header) — χωρίς cover το βίντεο παραμορφωνόταν */
  display: block;
}
/* Figma: 20px Light, mid-left of hero (y≈600/949) */
.hero-scroll {
  position: absolute;
  left: 20px;
  top: 57%;
  transform: translateY(-50%);
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #000e1f;
}
/*----------AEGLI HOTEL SECTION-------------*/
.aegli-hotel-section {
  background: #f0f0f0;
  padding: 18px 0 76px; /* Figma: button/image bottom y3783 → section end y3859 */
}

.section-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}
.hotel-intro {
  width: 100%;
  margin-bottom: 246px; /* Figma: intro bottom y1119 → logo top y1365 */
}

.hotel-intro p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  text-transform: uppercase;
  font-weight: 300;
  margin: 0; /* το default 1em (36px) margin του <p> πρόσθετε 36px πάνω και κάτω από το Figma κενό */
}
/* Sticky brand logo: scrolls up to the viewport middle, pins there for the
   rest of the section, and leaves with it (Figma start y1365 / end y3307) */
.hotel-branding {
  text-align: center;
  margin-top: 0;
  margin-bottom: 139px; /* Figma: logo bottom y1615 → title y1759 = 144, μείον το 0.22em (18px) padding του .reveal-title, +13 μετρημένα στον Chrome */
  position: sticky;
  top: calc(50vh - 125px); /* logo ~250px tall → centred */
  z-index: 2;
  pointer-events: none; /* never block clicks on content scrolling beneath */
}

.hotel-branding img {
  height: 250px;
  width: auto;
}
.hotel-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.hotel-text {
  grid-column: 1 / 2;
}
.hotel-text h2 {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 100%;
  font-weight: 400;
  margin-bottom: 21px; /* Figma: title bottom y1839 → subtitle y1860 */
  white-space: nowrap;
  text-transform: uppercase;
}

.hotel-text p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  font-weight: 400;
  max-width: 932px;
  text-transform: uppercase;
  margin: 0;
}
.hotel-images-row {
  margin-top: 198px; /* Figma: subtitle bottom y1960 → δεξιά φωτό y2158 */
  position: relative;
  margin-bottom: 0; /* bottom gap is section padding (76px) so the bg color covers it */
}

.hotel-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  justify-items: end;
}
.hotel-images .image {
  max-width: 706px;
}

.hotel-images img {
  width: 100%;
  height: auto;
  display: block;
}

.image-exterior {
  margin-top: 659px; /* Figma stagger: y2817 − y2158 */
  margin-right: 116px;
}

.image-interior {
  margin-bottom: 160px;
  margin-right: 109px;
}
.hotel-cta {
  position: absolute;
  right: 290px;
  bottom: 0px;
  text-align: center;
  line-height: 0;   /* αλλιώς το inline-block <a> δίνει κουτί 47px σε κουμπί 42px */
}
/* CTA buttons — Figma: 344×42, radius 1px, 24px text, 5% tracking */
.outline-btn-b{
  display: inline-block;
  box-sizing: border-box;
  min-width: 344px;
  padding: 7px 16px; /* 26px line + 14 + 2 border = 42px (Figma) */
  border: 1px solid #000e1f;
  border-radius: 1px;
  font-family: 'Theano Didot';
  font-size: clamp(18px, 1.26vw, 24px);
  line-height: 26px;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  color: #000e1f;
  font-weight: 500;
}
.outline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 344px;
  min-height: 42px; /* Figma 344×42 — min ώστε να μην κοπεί το κείμενο αν τυλίξει σε στενές οθόνες */
  /* Aeion Mono: ascender 800 = cap-height, descender 200 (upm 1000). Τα κεφαλαία
     κάθονται ~0.12em πάνω από το οπτικό κέντρο — το padding-top το αντισταθμίζει.
     ΟΧΙ text-box-trim: δεν εφαρμόζεται σε flex containers (μόνο block/inline). */
  padding: 0.24em 16px 0; /* μετρημένο στον Chrome: ±0.3px σε 18px και 24px */
  border: 1px solid #000e1f;
  border-radius: 1px;
  font-size: clamp(18px, 1.26vw, 24px);
  line-height: 1; /* flex κεντράρισμα — το Aeion Mono έχει άλλα vertical metrics από το Didot */
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  color: #000e1f;
  font-family: 'Aeion Mono';
  font-weight: 500;
}

.aegli-hive {
  background: #d0beb0; /* Figma #D0BEB0 */
  padding: 344px 0 76px; /* Figma: top y3859 → logo y4203, image bottom y6621 → end y6697. Οριζόντιο gutter δίνει το .section-inner */
}

/* Hive images row sits 148px under the subtitle (Figma y4848 → y4996) */
.aegli-hive .hotel-images-row {
  margin-top: 148px;
}

.hotel-text-hive {
  grid-column: 1 / 2;
}

.hotel-text-hive h2 {
  font-family: 'Aeion Mono';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 100%;
  font-weight: 300;
  margin-bottom: 23px; /* Figma: line-height 50 σε 80px font, subtitle 63px κάτω από το οπτικό κέντρο του τίτλου */
}

.hotel-text-hive p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  font-weight: 400;
  max-width: 932px;
  text-transform: uppercase;
  margin: 0;
}
/* -------FOOTER SECTION -------*/
.aegli-footer {
  background: #000e1f;
  color: #ffffff;
  padding: 0;
  position: relative;
}
.hive-footer {
  background: #000e1f;
  color: #ffffff;
  padding: 60px 0 40px;
  position: relative;
}
.footer-inner {
  max-width: 1920px;
  margin: 0 auto;
  padding: 0 var(--content-gutter);
}

/* ══════════════════════════════════════════════════════════
   FOOTER — Main Homepage (Figma node 1-5, frame 1903×566px)
   ▸ footer-top  : 333px (padding-top 101px / padding-bottom 77px)
   ▸ footer-nav  : padding 58px top/bottom
   ▸ footer-bottom: padding 33px top / 40px bottom
══════════════════════════════════════════════════════════ */

/* ── Two-column brand section ── */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* height comes from col padding + content */
}

/* ── Individual brand column ── */
.footer-col {
  position: relative;
  padding-top: 101px;    /* logo starts at y=101 in Figma */
  padding-bottom: 77px;  /* 333 - 256 (address bottom) */
  padding-left: clamp(20px, 5.7vw, 109px);   /* logo indent from col edge */
  padding-right: clamp(20px, 5.7vw, 109px);
}

/* Vertical divider — right border on Hotel col only (Figma: solid white 1px) */
.footer-col--hotel {
  border-right: 1px solid #ffffff;
}

/* ── Logo + brand-body flex row ── */
.footer-col-inner {
  display: flex;
  align-items: flex-start;
  gap: 40px; /* logo-right (199) to name-left (239) = 40px */
}

/* Logos — 57px height per Figma (hotel: 70×57, hive: 66×57) */
.footer-logo {
  height: 57px;
  width: auto;
  flex-shrink: 0;
  display: block;
}

/* Brand name + address/social column */
.footer-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Brand name — margin-top pushes it down so bottom aligns with 57px logo */
.footer-col h4 {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 400;
  letter-spacing: normal;   /* Figma 3:88: χωρίς tracking */
  color: #ffffff;
  margin: 31px 0 8px; /* top=57-26=31px (bottom-aligns with logo); bottom=8px gap to address */
  padding: 0;
  line-height: 1.3;
}

.footer-col h4 a {
  color: #ffffff;
  text-decoration: none;
}

/* Address paragraph — Figma: Regular 400, solid white */
.footer-col p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-weight: 400;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: clamp(22px, 1.58vw, 30px);
  color: #ffffff;
  margin: 0;
  padding: 0;
}

.footer-col a,
.footer-col-left a {
  color: #ffffff;
  text-decoration: none;
}

/* ── Address (left) + Social (right) row ── */
.footer-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
}

/* Social links — right-aligned column */
.footer-social {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  flex-shrink: 0;
  gap: 8px;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(13px, 0.95vw, 18px);
  color: #ffffff;
}

.footer-social span {
  font-size: clamp(13px, 0.95vw, 18px);   /* Figma 3:28: ένα text node, ενιαίο μέγεθος */
  color: #ffffff;
}

.footer-social a {
  display: block;
  color: #ffffff;
  text-decoration: none;
}

/* ── Back-to-top arrow (Hive col only) — absolutely placed at y=53 ── */
.footer-top-btn {
  position: absolute;
  top: 53px;  /* Figma y=53 from frame top */
  right: clamp(20px, 5.7vw, 109px); /* mirrors padding-right */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  line-height: 1;
  z-index: 1;
}

.footer-top-btn img {
  display: block;
  height: 60px; /* Figma: 42×60px */
  width: 42px;
}

/* ── Horizontal dividers (no margin — sections own their padding) ── */
.footer-divider {
  height: 1px;
  background: #ffffff; /* Figma: solid white 1px */
  margin: 0;
}

/* ── Footer nav ── */
.footer-nav {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 33px;
  padding: 58px 0; /* Figma: nav at y=391, dividers at y=333/y=473 → 58px each side */
  flex-wrap: wrap;
}

.footer-nav a {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(13px, 1.05vw, 20px);
  font-weight: 400;
  color: #ffffff;
  text-decoration: none;
  white-space: nowrap;
}

/* ── Footer bottom row: credit | company | copyright ── */
.footer-bottom {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  display: flex;
  align-items: center;
  padding: 33px 0 40px; /* Figma: text at y=506, divider at y=473 → 33px; frame ends y=566 */
}

/* Design credit — RIGHT (swapped with copyright) */
.footer-credit {
  flex: 1;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(11px, 0.84vw, 16px);
  font-weight: 400;
  letter-spacing: normal;   /* Figma 3:88: χωρίς tracking */
  color: #ffffff;
  text-align: right;
}

.footer-credit a {
  color: #ffffff;
  text-decoration: none;
}

@media (hover: hover) {
  .footer-credit a:hover { text-decoration: underline; }
}

/* Shared copy styles */
.footer-copy {
  flex: 1;
  font-weight: 400;
}

/* Company info — centre */
.footer-copy.center {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  text-align: center;
  font-size: clamp(9px, 0.63vw, 12px);
  color: #ffffff;
  gap: 0 4px;
}

.footer-copy.center p {
  padding: 0 6px;
  white-space: nowrap;
  margin: 0;
}

/* Copyright — LEFT (swapped with design credit) */
.footer-copy.right {
  font-size: clamp(11px, 0.84vw, 16px);
  color: #ffffff;
  text-align: left;
}

/*----------AEGLI HOTEL PAGE-------------*/
.aegli-hero {
  background-color: #f0f0f0;
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

/* IMAGE WRAPPER */
.aegli-hero__media {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.aegli-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Overlay removed — updated Figma (183:2) shows the photo with no dark scrim */

/* CONTENT */
.aegli-hero__content {
  position: relative;
  z-index: 3;

  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  text-align: center;
  color: #ffffff;
}

.hero-logo {
  max-width: 405px;
  margin-bottom: 24px;
}

/*-----------HOTEL HISTORY SECTION--------------*/
.section-editorial {
  background-color: #f0f0f0;
  padding-top: 18px; /* Figma: section top y1021 → title y1039 */
}
.editorial-row--top {
  margin-bottom: 140px; /* Figma: titles end y1187 → image top y1327 */
}

.editorial-title {
  font-family: 'Theano Didot';
  font-weight: 400;
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 100%;        /* Figma 3:1177: leading-none */
  margin-top: 0;
  margin-bottom: 0;         /* ακυρώνει το default h2 margin (0.83em = 66px) */
  text-transform: uppercase;
}
.editorial-subtitle{
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-weight: 400; /* Figma: Regular 36/50 */
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  margin-top: 18px;
  text-transform: uppercase;
}
.editorial-row--middle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: 0; 
}
.editorial-col--text {
  padding-top: 140px; 
}

.editorial-text {
  margin-bottom: 60px;
  font-size: clamp(18px, 1.9vw, 36px);
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-weight: 300;
  line-height: clamp(22px, 2.1vw, 40px);
  text-transform: uppercase;
  max-width: 904px;
}
.editorial-btn-wrap {
  text-align: center;
  padding-top: 115px; /* + 60px text margin = 175px (Figma) */
}
/* Figma button style: TikTok Light 24px, 5% tracking, 42px tall */
.btn-outline{
  display: inline-block;
  box-sizing: border-box;
  padding: 5px 16px;
  border: 1px solid #000e1f;
  font-size: clamp(16px, 1.26vw, 24px);
  line-height: 30px;
  letter-spacing: 0.05em;
  text-decoration: none;
  color: #000e1f;
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-weight: 300;
}
.editorial-col--image {
  display: flex;
  justify-content: center;
  align-items: flex-end; /* κολλητά κάτω */
}

.editorial-col--image img {
  width: 710px;
  max-width: 100%;
  height: auto;
  display: block;
}
.editorial-row--bottom {
  display: flex;
  justify-content: center;
  margin-top: 0; 
}

.editorial-row--bottom img {
  width: 810px; 
  max-width: 100%;
  height: auto;
  display: block;
}

/*----------- STAY WITH A VIEW SPECIFIC -----------*/
.section-stay-view {
  padding-top: 360px; /* Figma: port image ends y2832 → title y3192 */
  padding-bottom: 180px;
}

/* Titles row: 2-col grid matching editorial-row--middle
   so h2 + subtitle sit directly above the body text column */
.section-stay-view .titles-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding-bottom: 140px; /* Figma: titles end y3340 → image top y3480 */
}

.section-stay-view .editorial-title {
  grid-column: 2;
  text-align: left;
  padding-left: 28px; /* Figma: x979 − column edge x951.5 */
  margin-top: 0;
  margin-bottom: 18px;
}

.section-stay-view .editorial-subtitle {
  grid-column: 2;
  text-align: left;
  padding-left: 28px;
  margin-top: 0;
  margin-bottom: 0;
  font-weight: 400;
  line-height: clamp(24px, 2.6vw, 50px); /* Figma 36/50 */
}

.section-stay-view .right-col-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Figma: text top-anchored 140px below image top */
  padding-left: 28px;
}

.section-stay-view .editorial-col--text {
  padding-top: 140px; /* Figma: image top y3480 → text y3620 */
  padding-left: 0;
}

.section-stay-view .editorial-btn-wrap {
  text-align: center; /* Figma: ΔΙΑΜΟΝΗ centred in the right column */
  padding-top: 115px; /* + 60px text margin = 175px (Figma) */
}


/* ========================================
   AEGLI BREAKFAST SECTION
======================================== */

.aegli-breakfast {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  position: relative;
  background: #000e1f;
  padding-top: 180px; /* Figma: section y5165 → image y5345 */
  padding-bottom: 180px;
  overflow: hidden;
  text-align: center;
  isolation: isolate;
}

/* ========================================
   BIG BACKGROUND TITLE
======================================== */

.breakfast-bg-title {
  position: absolute;
  top: 40%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  white-space: nowrap;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.breakfast-image {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}

.breakfast-bg-title span {
  display: block;
  font-family: 'Theano Didot', serif;
  font-size: clamp(48px, 7.3vw, 140px);
  font-weight: 400;
  line-height: 1;
  color: #ffffff;
  margin-right: 120px;
}
.marquee span {
  white-space: nowrap;
}


.marquee-left {
  animation: marqueeLeft 30s linear infinite;
}


.marquee-right {
  animation: marqueeRight 30s linear infinite;
  margin-top: 20px;
}

@keyframes marqueeLeft {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-50%);
  }
}

@keyframes marqueeRight {
  0% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0%);
  }
}
/* ========================================
   CENTER IMAGE
======================================== */

.breakfast-image img {
  width: 810px;
  object-fit: cover;
}

/* ========================================
   CONTENT
======================================== */

.breakfast-content {
  position: relative;
  z-index: 4;
  margin-top: 164px; /* Figma: image ends y6452 → title y6616 */
}

.breakfast-title {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  font-weight: 400; /* Figma: Regular 36/50 */
  line-height: clamp(24px, 2.6vw, 50px);
  color: #ffffff;
  text-align: start;
  text-transform: uppercase;
}

.breakfast-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  font-weight: 300;
  line-height: clamp(22px, 2.1vw, 40px);
  color: #ffffff;
  margin-bottom: 175px;
  text-align: start;
  text-transform: uppercase;
}

.breakfast-btn {
  display: inline-block;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 300;
  letter-spacing: 0.05em;
  padding: 5px 15px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  transition: background-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease);
}

.breakfast-btn:hover {
  background: #ffffff;
  color: #000e1f;
}

/* ==============================
   BUSINESS LOUNGE SECTION
================================ */

.business-lounge {
  padding: 180px 0;
}

.container {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
}

/* GRID */

.business-grid {
  display: grid;
  grid-template-columns: minmax(0, 904px) 1fr;  /* Figma: κείμενο 904 -> τελειώνει x924 */
  align-items: start;                           /* ήταν center: κόλλαγε τον τίτλο στην κορυφή της φωτό */
  gap: 144px;                                   /* 924 + 144 = x1068 = θέση εικόνας */
}

/* LEFT COLUMN */

.business-content {
  display: flex;
  flex-direction: column;
  padding-top: 110px;   /* Figma: τίτλος 110px κάτω από την κορυφή της εικόνας */
}

.business-title {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 100%;
  font-weight: 400;
  margin-bottom: -20px;
  text-transform: uppercase;
}

.business-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  margin-bottom: 280px;
  font-weight: 400;
  text-transform: uppercase;
}

.business-text {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  margin-bottom: 60px;
  text-transform: uppercase;
  max-width: 904px;
}

/* Button centered under text */

.business-button-wrapper {
  display: flex;
  justify-content: center;
  margin-top: 115px; /* + 60px text margin = 175px (Figma) */
}

/* RIGHT COLUMN */

.business-image {
  display: flex;
  justify-content: flex-start;   /* Figma: x1068, ίδιο με την εικόνα του κτηρίου */
}

.business-image img {
  width: 710px;
  max-width: 100%;
  height: auto;
  display: block;
}
/* ══════════════════════════════════════════════════════════
   FOOTER — Hotel inner pages (Figma node 2-2, "Footer Component AHV")
   Frame: 1903×566px — same as main footer
   ▸ Top section : 333px (padding-top 97px / padding-bottom 77px)
   ▸ Logo centred: 227×141px at x=838 (= frame centre 951.5)
   ▸ Address left : x=132 → 112px from content-left
   ▸ Social right : x=1686 → 109px from content-right
   ▸ Back-to-top  : position absolute top=54px right=109px (same as main)
   ▸ Nav / bottom : identical positions to main footer
══════════════════════════════════════════════════════════ */

/* Three-piece flex row: [address] [logo] [social] */
.footer-top--centered {
  display: flex;
  align-items: flex-start;
  position: relative;
  padding-top: 97px;               /* logo y=97 */
  padding-bottom: 77px;            /* 333 - address-bottom(256) = 77px */
  padding-left: clamp(20px, 5.88vw, 112px);  /* address x=132, gutter=20 → 112px */
  padding-right: clamp(20px, 5.7vw, 109px);  /* social right = 109px from content-right */
}

/* ── Left: hotel address ── */
.ftc-left {
  flex: 1;
  margin-top: 69px; /* address y=166 − logo-top y=97 = 69px */
}

.ftc-left p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-weight: 400; /* Figma: Regular, solid white */
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: clamp(22px, 1.58vw, 30px);
  color: #ffffff;
  margin: 0;
}

.ftc-left a {
  color: #ffffff;
  text-decoration: none;
}

/* ── Centre: large hotel logo ── */
.ftc-center {
  flex: 0 0 auto;
  /* flex:1 on both sides centres this automatically */
}

.footer-logo--main {
  display: block;
  width: clamp(140px, 11.93vw, 227px); /* 227/1903=11.93% */
  height: auto;
}

/* ── Right: social links ── */
.ftc-right {
  flex: 1;
  margin-top: 70px; /* social y=167 − logo-top y=97 = 70px */
  display: flex;
  justify-content: flex-end;
}

/*===========Hotel Aegli The Hotel ============*/
.inner-hero {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background-color: #f0f0f0;
}

/* IMAGE */
.inner-hero-media {
  position: absolute;
  inset: 0;
}

.inner-hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* CONTENT WRAPPER */
.inner-hero-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: flex-end;                 /* Figma 3:977: κείμενο χαμηλά, 375px από το κάτω άκρο του hero (949px) */
  padding-bottom: clamp(60px, 39.5vh, 375px);
}

/* TEXT BLOCK */
.inner-hero-text {
  padding-left: var(--content-gutter);
  color: #ffffff;
  text-align: left;
}

/* TITLE */
.inner-hero-title {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(28px, 3.4vw, 64px);
  letter-spacing: normal;              /* Figma 3:1015: χωρίς tracking */
  line-height: clamp(24px, 2.6vw, 50px);
  margin-bottom: 24px;
  font-weight: 400;
}

/* SUBTITLE */
.inner-hero-subtitle {
  margin: 0;                           /* το default margin του <p> (1em=36px) νίκαγε το κενό 24px του Figma */
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px); /* Figma: 36/50 Regular */
  font-weight: 400;
  letter-spacing: normal;              /* Figma 3:1014: χωρίς tracking */
}

/*========AEGLI EXPERIENCE========*/
.aegli-experience {
  background: #ffffff;
  padding: 80px 0 140px;   /* Figma: hero τέλος y1021 → τίτλος y1101 (80) · κείμενο τέλος → γκρι y3421 (140) */
  /* το εσωτερικό .container δίνει ήδη το gutter — αλλιώς διπλασιάζεται (x40 αντί x20) */
}


/* ------------------ */
/* ROW 1 */
/* ------------------ */

.experience-row--header {
  max-width: 1300px;   /* Figma: τίτλος 1273 / υπότιτλος 1299 */
  margin-bottom: 194px;   /* Figma: υπότιτλος τέλος y1416 → μεγάλη φωτό y1610 */
}

.experience-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma: Expanded */
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px); /* Figma: 64/70 */
  font-weight: 400;   /* Figma 3:1012: Regular */
  margin-bottom: 15px;    /* Figma: τίτλος τέλος y1241 → υπότιτλος y1256 */
  text-transform: uppercase;
}

.experience-subtitle {
  margin: 0;                           /* το default margin-top του <p> (36px) νίκαγε το κενό 15px του Figma */
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  max-width: 1300px;
  text-transform: uppercase;
}

/* ------------------ */
/* ROW 2 */
/* ------------------ */

.experience-row--images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  margin-bottom: 100px;   /* Figma: μεγάλη φωτό τέλος y2581 → κείμενο y2681 */
  margin-top: 0;
}

.experience-col {
  display: flex;
  justify-content: start;
}
.experience-col--small {
  align-items: start;
  padding-top: min(258px, 13.56vw);   /* Figma: μικρή φωτό y1868 = μεγάλη y1610 + 258 */
}
.experience-col--small img {
  width: 550px;
  max-width: 100%;
}

.experience-col--large {
  justify-content: flex-end;   /* Figma: φωτό x972-1883, κολλητά στο δεξί gutter */
}

.experience-col--large img {
  width: 910px;
  max-width: 100%;
}

/* ------------------ */
/* ROW 3 */
/* ------------------ */

.experience-row--text {
  max-width: 1300px;   /* Figma: 1299 */
}

.experience-row--text p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px); /* Figma: 26px Light */
  line-height: clamp(24px, 2.1vw, 40px); /* Figma: 40px */
  font-weight: 300;
  margin-bottom: 40px;
}

.experience-row--text p:last-child {
  margin-bottom: 0;
}

.landmark-section {
  background: #F0F0F0;
  padding: 100px 0 120px;   /* Figma: γκρι y3421 → τίτλος y3521 (100) · τελευταία φωτό τέλος y6476 → footer y6656 (180 = 60 padding entry + 120) */
}

.landmark-inner {
  padding: 0 var(--content-gutter);
}

/* ================= HEADER ================= */

.landmark-header {
  /* Figma: intro τέλος y3936 → 1η φωτό y4286 = 350px. Η φωτό (29.53vw ψηλή) κεντράρεται
     στο 100vh sticky entry, οπότε αφαιρούμε το κενό που δίνει το κεντράρισμα. */
  margin-bottom: max(60px, calc(350px - (100vh - 29.53vw) / 2));
}

.landmark-title {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 1;           /* Figma 3:1007: 80/80 — το "normal" της Theano Didot έδινε 142px κουτί */
  margin-bottom: 130px;     /* Figma: τίτλος τέλος y3601 → "Η ιστορία μας" y3731 */
  font-weight: 400;
  text-align: center;
  text-transform: uppercase;
  color: #000e1f;
}

.landmark-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(28px, 3.4vw, 64px);
  font-weight: 400;   /* Figma 3:1006: Regular */
  margin-bottom: 15px;    /* Figma: υπότιτλος τέλος y3801 → intro y3816 */
  line-height: clamp(30px, 3.6vw, 70px);
  text-align: start;
  text-transform: uppercase;
  color: #000e1f;
}

.landmark-intro {
  margin: 0 auto;
  font-size: clamp(18px, 1.9vw, 36px);
  font-weight: 300;
  letter-spacing: normal;   /* Figma 3:1005: χωρίς tracking (ίδιο style με τον υπότιτλο experience) */
  line-height: clamp(22px, 2.1vw, 40px);
  text-align: start;
  text-transform: uppercase;
  color: #000e1f;
}

/* ================= TIMELINE V2 ================= */

.tl-v2 {
  /* full width — breaks out of landmark-inner gutter */
  margin-left: calc(-1 * var(--content-gutter));
  margin-right: calc(-1 * var(--content-gutter));
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* ── STICKY ENTRY ── */
.tl-entry {
  position: sticky;
  top: 0;
  height: 100vh;
  display: grid;
  grid-template-columns: 51.4% 48.6%;   /* Figma: κείμενο ξεκινά x979 (979/1903) */
  align-items: stretch;
  background: #F0F0F0;
}

/* image always left, content always right */

/* ── IMAGE COLUMN ── */
.tl-entry-img {
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
  padding: 40px 0;   /* οι οριζόντιες αποστάσεις είναι αναλογικές στο .tl-entry-media */
  will-change: transform;
}

.tl-entry-img img {
  /* width: 100%; */
  height: auto;
  max-height: 100%;
  object-fit: contain;
  display: block;
}

/* ── CONTENT COLUMN ── */
.tl-entry-content {
  height: 100vh;
  /* Figma: ο τίτλος ξεκινά στο ΙΔΙΟ y με την κορυφή της φωτογραφίας.
     Η φωτό είναι 47.5vw πλατιά με λόγο 904/562 -> ύψος 29.53vw,
     κεντραρισμένη σε 100vh, άρα η κορυφή της είναι στο 50vh - 14.765vw. */
  padding: max(80px, calc(50vh - 14.765vw)) 20px 80px 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Figma 3:977 — η χρονολογία είναι στην ΑΡΙΣΤΕΡΗ στήλη, πάνω από τη
   φωτογραφία και ελαφρώς επικαλύπτοντάς την:
   χρονολογία x348 y4216 248x139  |  φωτό x20 y4286 904x562 */
.tl-entry-media {
  position: relative;
  margin-left: 2.043%;   /* Figma: 20/979 -> φωτό ξεκινά x20 */
  width: 92.34%;         /* Figma: 904/979 -> τελειώνει x924, κενό 55 ως τον τίτλο */
}

.tl-entry-photo {
  display: block;
  width: 100%;
  height: auto;
}

.tl-entry-year img {
  display: block;
  width: 100%;
  height: auto;
}

.tl-entry-year {
  position: absolute;
  left: 36.3%;            /* Figma: (348-20)/904 */
  width: 27.4%;           /* Figma: 248/904 */
  top: -12.46%;           /* Figma: 70px πάνω από τη φωτό (70/562 — το % top μετράει ΥΨΟΣ) */
  bottom: auto;
  z-index: 2;
  line-height: 0;
  font-family: 'Theano Didot';
  font-size: clamp(72px, 7.15vw, 136px); /* Figma: 136px Didot */
  font-weight: 400;
  color: #000e1f;
  letter-spacing: 0.01em;
}

.tl-entry-label {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 2vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);   /* Figma: h40 */
  font-weight: 300;
  letter-spacing: normal;      /* Figma: χωρίς tracking */
  color: #000e1f;              /* Figma: πλήρες, όχι 50% */
  margin-bottom: 62px;         /* Figma: 4388 - (4286+40) */
}

.tl-rule {
  width: 40px;
  height: 1px;
  background: #000e1f;
  margin-bottom: 32px;
  transform-origin: left center;
}

.tl-entry-text p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  font-weight: 300;   /* Figma: Light */
  line-height: clamp(24px, 2.1vw, 40px);   /* Figma: 40px */
  margin: 0;          /* το default 1em πρόσθετε 26px στο κενό */
  color: #000e1f;
}
/* ========================================
   AEGLI HOTEL ROOMS PAGE
======================================== */
.rooms-hero {
  background: #000e1f;
  padding: 111px 0 85px; /* Figma: header 72 → title y183 · text ends y569 → divider y654 */
}

.rooms-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma 3:922: Expanded Regular */
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 168px; /* Figma: title ends y253 → subtitle y421 */
  text-transform: uppercase;
}

.rooms-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-size: clamp(18px, 1.9vw, 36px); /* Figma: 36/40 Light */
  line-height: clamp(24px, 2.1vw, 40px);
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.rooms-text {
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(18px, 1.6vw, 30px);
  color: #ffffff;
  max-width: 1299px; /* Figma width */
  margin-bottom: 0; /* bottom gap lives on the section padding (avoids margin collapse) */
  font-weight: 300;
}

.rooms-section {
  background: #000e1f;
  padding: 0 var(--content-gutter);
}

/* Room Layout — Figma: single solid white divider ABOVE each row */
.room-item {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: 48px; /* Figma: image ends x931 → text x979 */
  border-top: 1px solid #ffffff;
  padding: 49px 0;
}

/* Image — Figma: 911×539 */
.room-item__image img {
  width: 100%;
  max-width: 911px;
  height: auto;
  display: block;
}

/* Content */
.room-item__content {
  color: #ffffff;
  margin-top: 0; /* Figma: title top-aligns with image */
}

/* Ο τίτλος είναι link προς το δωμάτιο (desktop + mobile) — καμία οπτική
   αλλαγή στο κείμενο· μόνο cursor και ήπιο hover στο desktop */
.room-title-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.room-title-link .room-title {
  transition: opacity var(--anim-fast) var(--anim-ease);
}
@media (hover: hover) {
  .room-title-link:hover .room-title { opacity: 0.7; }
}

/* Title — Figma: 36/40 Light uppercase */
.room-title {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(28px, 1.9vw, 36px);
  line-height: clamp(32px, 2.1vw, 40px);
  font-weight: 300;
  margin: 0 0 18px;
  text-transform: uppercase;
}

/* Description */
.room-description {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(19px, 1.35vw, 26px);
  font-weight: 300;
  line-height: clamp(27px, 1.6vw, 30px);
  margin-bottom: 130px;
}

/* Button — Figma: 212×42, TikTok Light 24, 5% tracking */
.room-btn {
  display: inline-block;
  box-sizing: border-box;
  min-width: 212px;
  padding: 5px 16px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(16px, 1.26vw, 24px);
  line-height: 30px;
  letter-spacing: 0.05em;
  text-align: center;
  transition: background-color var(--anim-fast) var(--anim-ease), color var(--anim-fast) var(--anim-ease);
  font-weight: 300;
}

.room-btn:hover {
  background: #ffffff;
  color: #000e1f;
}

.gallery-cta {
  background: #000e1f;
  padding: 180px 0;
  text-align: center;
  position: relative;
}

.gallery-cta__inner {
  display: inline-block;
  text-decoration: none;
  color: #ffffff;
}

.gallery-cta__label {
  display: block;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.1vw, 40px);
  font-weight: 300;
  margin-bottom: 0; /* Figma: GALLERY sits flush under PHOTO */
  color: #a9a9a9; /* Figma #A9A9A9 */
  text-transform: uppercase;
}

.gallery-cta__heading {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  font-weight: 400;
  line-height: 100%;
  margin: 0;
  color: #a9a9a9; /* Figma #A9A9A9 */
  text-transform: uppercase;
}

.gallery-cta__arrow {
  margin-top: 60px;
}

.gallery-cta__arrow img {
  max-width: 135px;
  transition: transform 0.4s ease;
}

.gallery-cta__inner:hover .gallery-cta__arrow img {
  transform: translateY(10px);
}

/* ========================================
   AEGLI HOTEL SINGLE ROOM PAGE
======================================== */
.room-hero {
  background: #000e1f;
  color: #ffffff;
  /* Figma: τίτλος y183. Το .reveal-title προσθέτει 0.22em (14px) padding,
     άρα 169 + 14 = 183. */
  padding: 169px var(--content-gutter) 0; /* το κάτω κενό το δίνει το padding της περιγραφής (Figma: 1393 → 1484 = 91px) */
}
/* TITLE */
.room-hero__title-wrap {
  padding-bottom: 16px; /* Figma: title ends y253 → image y269 */
}

/* ── (SCROLL) πάνω στο cover — Figma 3:822 ──
   Κείμενο y965 μέσα σε cover y269..1249 -> 71% του ύψους, κεντραρισμένο. */
  .room-hero__image {
  position: relative;
}

.room-hero__scroll {
  /* Οριζόντια κεντραρισμένο, κάθετα στο 71% του cover όπως η Figma.
     Flex αντί για transform, ώστε να μην μπορεί να το μετακινήσει animation. */
  position: absolute;
  left: 0;
  right: 0;
  bottom: 26.3%;   /* Figma 3:822: κείμενο y965-991 σε cover y269-1249 → 258/980 από κάτω */
  display: flex;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.05vw, 20px);   /* Figma: 20px */
  line-height: 26px;
  font-weight: 300;                       /* Light */
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

.room-hero__title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma 3:823: Expanded Regular */
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  margin: 0;
  text-transform: uppercase;
}

/* IMAGE */
.room-hero__image img {
  width: 100%;
  height: auto;
  display: block;
}

/* DESCRIPTION */
.room-hero__description {
  padding: 54px 0 90px 0; /* Figma: cover τελειώνει y1249 → κείμενο y1303 · κείμενο τελειώνει y1393 → κάθετη φωτό y1484 */
  max-width: 1401px;
}

.room-hero__description p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(18px, 1.6vw, 30px);
  font-weight: 300;
  margin: 0;
}

.room-features {
  background: #000e1f;
  padding: 0 var(--content-gutter) 145px ;
}

.room-features__inner {
  /* Figma 3:796: κείμενο x20-924 (904) · κενό 151 · φωτό x1075-1781 (706) · δεξί κενό 102 */
  display: grid;
  grid-template-columns: minmax(0, 1fr) min(706px, 37.9vw);
  column-gap: clamp(40px, 7.9vw, 151px);
  padding-right: min(102px, 5.4vw);
  align-items: start;
}
.room-features__content{
  padding-top: 140px; /* Figma: image top y1552 → text y1692 */
}
/* LEFT SIDE — Figma 3:819: 904×240, TikTok SemiExpanded Light 26/40 */
.room-features__text p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(24px, 2.1vw, 40px);
  font-weight: 300;
  color: #ffffff;
  max-width: 904px;
  margin: 0;
}

.room-features__title {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 400;
  margin-bottom: 40px;
  color: #ffffff;
}

.room-features__list {
  list-style: none;
  padding-left: 10px;
  margin: 0;
}

.room-features__list li {
  position: relative;
  padding-left: 18px;
  margin-bottom: 0; /* Figma: continuous 26/40 rhythm */

  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(24px, 2.1vw, 40px); /* Figma: 26/40 */
  font-weight: 300;
  color: #ffffff;
}

/* Custom bullet */
.room-features__list li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: #ffffff;
}

/* RIGHT SIDE */
.room-features__image img {
  width: 100%;
  max-width: 706px; /* Figma 3:818: 706×966 */
  display: block;
}

.room-gallery {
  background: #000e1f;
  padding: 0 var(--content-gutter);
  display: flow-root;   /* το margin-bottom του τελευταίου row έμενε ΕΞΩ από την ενότητα (λευκή λωρίδα πριν το prev/next) */
}

/* ROW 1 */
.room-gallery__row--double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 41px; /* Figma: 931 → 972 */
  margin-bottom: 145px; /* Figma: row ends y3563 → single image y3708 */
}

/* Align first image left */
.room-gallery__col--left {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

/* Align second image right */
.room-gallery__col--right {
  display: flex;
  justify-content: flex-start;
  margin-top: 300px; /* Figma stagger: y2663 → y2963 */
}

.room-gallery__col img {
  width: 100%;
  max-width: 911px; /* Figma: 911×600 */
  display: block;
}

/* ROW 2 */
.room-gallery__row--single {
  display: flex;
  justify-content: center;
}

.room-gallery__row--single img {
  width: 100%;
  max-width: 1200px;
  display: block;
}

/* Reversed layout — Figma: right-shown image on top (y4653), left-shown +296 (y4949) */
.room-gallery__row--reversed {
  direction: rtl;
  margin-bottom: 0;
  padding: 145px 0 248px; /* Figma 3:796: single ends y4440 → y4585 · row ends y5488 → bg end y5736 */
}

.room-gallery__row--reversed .room-gallery__col {
  direction: ltr;
}

.room-gallery__row--reversed .room-gallery__col--left {
  margin-top: 0;
}

.room-gallery__row--reversed .room-gallery__col--right {
  margin-top: 296px;
}
/* ══════════════════════════════════════════════════════════
   ROOM PREV/NEXT NAV (updated Figma — component "PREV - NEXT ROOM AEGLI")
   Strip 1903×626 · #000E1F · padding 180px
   [← PREV]   [one centred 450×266 thumb]   [NEXT →]   gap 50px
══════════════════════════════════════════════════════════ */
.room-gallery-nav {
  background: #000e1f;
  padding: 180px 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 50px;
}

/* ── Central room thumbnail (link) ── */
.room-gallery-item {
  display: block;
  text-decoration: none;
  color: #ffffff;
  flex-shrink: 0;
}

.room-gallery-item:hover .room-gallery-image img {
  transform: scale(1.04);
}

.room-gallery-image {
  position: relative;
  width: 450px;          /* Figma: 449.58×266 */
  height: 266px;
  overflow: hidden;
}

.room-gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* ── PREV / NEXT label links — arrow 60×42 + 26/40 Light uppercase ── */
.room-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  text-decoration: none;
  color: #ffffff;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.35vw, 26px);
  line-height: clamp(28px, 2.1vw, 40px);
  font-weight: 300;
  text-transform: uppercase;
  transition: opacity 0.25s ease;
}

.room-nav-link img {
  width: 60px; /* Figma: 60×42 */
  height: auto;
  display: block;
}

/* Right arrow = same SVG, horizontally flipped */
.room-nav-link--next img {
  transform: scaleX(-1);
}

.room-nav-link:hover {
  opacity: 0.6;
}

.room-nav-link--disabled {
  pointer-events: none;
  cursor: default;
  opacity: 0.4;
}
/* ========================================
   HOTEL AEGLI BREAKFAST PAGE  
======================================== */

.breakfast-hero {
  background: #ffffff;
  padding-top: var(--header-height);   /* Figma 3:747: η φωτό ξεκινά στο y72, κάτω από το λευκό header — όχι πίσω του */
  padding-bottom: 0;
}

/* Image */
.breakfast-hero__image img {
  width: 100%;
  height: auto; 
  object-fit: cover;
  display: block;
}

/* Content */
.breakfast-hero__content {
  padding: 0 var(--content-gutter);
}

/* Title — Figma: 64/70 Expanded uppercase, 18px above/below */
.breakfastp-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma: Expanded */
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  color: #000e1f;
  margin: calc(18px - 0.22em) 0 18px;   /* 18px κάτω από τη φωτό (Figma y1039) — το .reveal-title προσθέτει 0.22em padding-top που αντισταθμίζεται εδώ */
  text-transform: uppercase;
}

/* Subtitle — Figma: 36/40 Light uppercase */
.breakfastp-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  color: #000e1f;
  margin: 0;
  text-transform: uppercase;
}

/* Body text — Figma: 26/30 Light, w1427, 30px under subtitle */
.breakfastp-text {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(18px, 1.6vw, 30px);
  font-weight: 300;
  color: #000e1f;
  max-width: 1427px;
  margin: 30px 0 0;
}
/* ========================================
   BREAKFAST – MORNING DELIGHTS
======================================== */

.breakfast-delights {
  background: #ffffff;
  /* Το εσωτερικό .container δίνει το gutter — αλλιώς διπλασιάζεται (x40 αντί x20) */
  padding: 140px 0 135px;
}

/* IMAGE ROW */
.breakfast-delights__image {
  /* Figma 3:743: x497 πλάτος 950 -> ποσοστά της σελίδας.
     Ο wrapper αγκαλιάζει την εικόνα, ώστε το reveal να μη διατρέχει 477px κενού. */
  display: block;
  width: 49.92%;        /* 950/1903 */
  margin-left: 26.12%;  /* 497/1903 */
  margin-bottom: 132px;   /* Figma: φωτό τέλος y2227 → MORNING DELIGHTS y2359 */
}

.breakfast-delights__image img {
  display: block;
  width: 100%;
  height: auto;
}

.breakfast-delights__image img {
  width: 100%;
  max-width: 950px; /* Figma: Morning delights image 950×800 */
  height: auto;
  display: block;
}

/* TEXT ROW */
.breakfast-delights__content {
  text-align: start;
}

/* TITLE — Figma: Didot 80 uppercase */
.delights-title {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 100%;
  font-weight: 400;
  color: #000e1f;
  margin-bottom: 18px;
  text-transform: uppercase;
}

/* SUBTITLE — Figma: 36/50 Regular uppercase */
.delights-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  font-weight: 400;   /* Figma 3:741: Regular */
  max-width: 89.17%;  /* Figma: 1662/1865 (γονέας .container) — ίδιο σημείο αλλαγής γραμμής */
  color: #000e1f;
  margin: 0;              /* το default margin-bottom του <p> (36px) πρόσθετε κενό πριν το gallery (Figma: 135) */
  text-transform: uppercase;
}

.breakfast-hero__image {
  position: relative;
  /* Η φωτό γεμίζει το viewport κάτω από το σταθερό header (72px): κάτω άκρο = κάτω άκρο οθόνης */
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

.breakfast-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.breakfast-hero__scroll {
  /* Figma 3:748: (SCROLL) κεντραρισμένο οριζόντια, 56px πάνω από το κάτω άκρο της φωτό (y965 σε φωτό 72→1021) */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: clamp(20px, 2.94vw, 56px);   /* 56/1903 */
  z-index: 2;
  pointer-events: none;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 300;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

.breakfast-gallery {
  background: #ffffff;
  padding: 0 0 180px 0; /* Figma: last image ends y4768 → section end y4948 */
}

/* ------------------ */
/* ROW BASE */
/* ------------------ */

.breakfast-gallery__row {
  width: 100%;
  padding: 0 var(--content-gutter);
  margin: 0 auto;
}

/* =========================
   ROW 1 (2 COL)
========================= */

.breakfast-gallery__row--top {
  display: grid;
  /* Figma: το ζεύγος πιάνει x221→x1682, δηλαδή ΙΣΑ περιθώρια 221/221.
     Στήλες με ΡΗΤΟ πλάτος (787 και 674 επί 1863 = πλάτος σειράς χωρίς gutter) — με "auto"
     οι εικόνες (width:100%) κατέρρεαν σε 0 πλάτος. */
  grid-template-columns: 42.24% 36.18%;
  justify-content: center;
  margin-bottom: 213px; /* Figma: left image ends y4016 → bottom image y4229 */
}

.gallery-col {
  display: flex;
}

/* NOTE: scoped under .breakfast-gallery — the meeting page redefines the same
   generic .gallery-col classes later in this file and would override these */

/* Left image (787×525) → bottom aligned, flush against the right one */
.gallery-col--left {
  justify-content: flex-end;
  align-items: end;
}

/* Right image (674×1011 portrait) → top aligned */
.breakfast-gallery .gallery-col--right {
  align-items: flex-start;
  margin-bottom: 313px; /* Figma: left bottom y4016 − right bottom y3703 */
}

.gallery-col img {
  width: 100%;
  height: auto;
  display: block;
}

.breakfast-gallery .gallery-col--left img {
  max-width: 787px; /* Figma */
}

.breakfast-gallery .gallery-col--right img {
  max-width: 674px; /* Figma */
}

/* =========================
   ROW 2 (CENTER IMAGE)
========================= */

.breakfast-gallery__row--bottom {
  /* Figma: εικόνα x750 πλάτος 809 -> ποσοστά της ΣΕΛΙΔΑΣ.
     Χωρίς οριζόντιο padding, ώστε τα % να μετρούν στο πλήρες πλάτος.
     Το reveal κάθεται στο .gallery-single, ώστε το clip να διατρέχει
     ΜΟΝΟ την εικόνα — όχι 751px κενού πριν από αυτήν. */
  display: block;
  padding-left: 0;
  padding-right: 0;
}

/* Scoped to breakfast — υπερισχύει του γενικού .gallery-single παρακάτω */
.breakfast-gallery .gallery-single {
  width: 42.51%;        /* Figma: 809/1903 */
  margin-left: 39.41%;  /* Figma: 750/1903 */
  padding-left: 0;
}

.breakfast-gallery .gallery-single img {
  width: 100%;
  max-width: none;   /* το πλάτος το ορίζει ο wrapper (42.51%) */
  height: auto;
  display: block;
}
/* ========================================
   MEETING – ROOM 
======================================== */

.meeting-hero {
  background: #f0f0f0;
  padding-top: var(--header-height);   /* Figma 3:425: η φωτό ξεκινά στο y72, κάτω από το header */
  padding-bottom: 0;
}

/* Image */
.meeting-hero__image img {
  width: 100%;
  height: auto; 
  object-fit: cover;
  display: block;
}

/* Content */
.meeting-hero__content {
  padding: 0 var(--content-gutter);
}

/* Title */
.meeting-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma: Expanded */
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  color: #000e1f;
  margin: calc(18px - 0.22em) 0 15px;   /* Figma: φωτό τέλος y1021 → τίτλος y1039 (18, μείον το padding του .reveal-title) · τίτλος τέλος y1109 → υπότιτλος y1124 (15) */
  text-transform: uppercase;
}

/* Subtitle */
.meeting-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  color: #000e1f;
  margin: 0;              /* τα default margins του <p> (36px) χάλαγαν τα κενά 15 / 140 του Figma */
  text-transform: uppercase;
}
.meeting-delights {
  background: #f0f0f0;
  /* Το εσωτερικό .container δίνει το gutter — αλλιώς διπλασιάζεται (x40) */
  /* Figma: φωτό lounge τέλος y2184 → BUSINESS LOUNGE y2316 (132) · υπότιτλος τέλος y2464 → 1η φωτό gallery y2599 (135) */
  padding: 132px 0 135px;
}

/* IMAGE ROW */
/* ── ΑΙΘΟΥΣΑ: κείμενα αριστερά / εικόνα δεξιά (Figma 3:421,3:422,3:415) ──
   κείμενα x20→924 (904)  ·  κενό 30  ·  εικόνα x954→1904 (950×800)
   Τα κείμενα ξεκινούν 140px χαμηλότερα από την κορυφή της εικόνας. */
.meeting-lounge {
  background: #f0f0f0;   /* Figma 3:414: BACKGROUND COLOR GREY = LIGHT GRAY */
  padding-top: 140px;    /* Figma: υπότιτλος τελειώνει y1244, εικόνα y1384 */
}

.meeting-lounge__grid {
  display: grid;
  grid-template-columns: minmax(0, 904fr) minmax(0, 950fr);
  gap: 30px;
  padding-left: var(--content-gutter);   /* κείμενο στο x20 */
  /* χωρίς δεξί padding — η εικόνα φτάνει στο άκρο της σελίδας */
}

.meeting-lounge__text {
  padding-top: 140px;   /* Figma: intro y1524 − εικόνα y1384 */
}

.meeting-lounge__photo {
  overflow: hidden;
}

.meeting-lounge__photo img {
  display: block;
  width: 100%;
  height: auto;
}

.meeting-hero__image {
  position: relative;
  /* Όπως στο πρωινό: η φωτό γεμίζει το viewport κάτω από το header (72px) */
  height: calc(100vh - var(--header-height));
  overflow: hidden;
}

.meeting-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.meeting-hero__scroll {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;   /* Figma 3:426: 56px πάνω από το κάτω άκρο της φωτό */
  justify-content: center;
  padding-bottom: clamp(20px, 2.94vw, 56px);   /* 56/1903 */
  z-index: 2;
  pointer-events: none;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.05vw, 20px);
  font-weight: 300;
  text-transform: uppercase;
  color: #ffffff;
  white-space: nowrap;
}

/* Figma 3:422 / 3:415 — περιγραφή 26/30 και χαρακτηριστικά 31px */
.meeting-specs__intro {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(20px, 1.6vw, 30px);
  font-weight: 300;
  color: #000e1f;
  max-width: 904px;
  margin: 0 0 60px;
}

.meeting-specs__list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 904px;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.63vw, 31px);
  line-height: clamp(24px, 2.1vw, 40px);   /* Figma 3:415: 31/40 */
  font-weight: 300;
  color: #000e1f;
}

.meeting-delights__image {
  display: flex;
  justify-content: center;
  margin-bottom: 130px;
}

.meeting-delights__image img {
  width: 100%;
  max-width: 950px; /* Figma: Business Lounge image 950×800 */
  height: auto;
  display: block;
}

/* TEXT ROW */
.meeting-delights__content {
  text-align: start;
}

/* TITLE */
.meeting-delights-title {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 100%;
  font-weight: 400;
  color: #000e1f;
  margin-bottom: 18px;
  text-transform: uppercase;
}

/* SUBTITLE */
.meeting-delights-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  font-weight: 400; /* Figma: Regular */
  color: #000e1f;
  max-width: 85.58%;   /* Figma 3:419: 1596/1865 */
  margin: 0;           /* Figma: τίτλος τέλος y2396 → υπότιτλος y2414 = 18 (το margin-bottom του τίτλου) */
  text-transform: uppercase;
}

.meeting-gallery {
  background: #f0f0f0;
  padding: 0 0 180px;   /* Figma: τελευταία φωτό τέλος y5399 → footer y5579 */
}

/* ------------------ */
/* ROW BASE */
/* ------------------ */

.meeting-gallery__row {
  width: 100%;
  padding: 0 var(--content-gutter);
  margin: 0 auto;
}

/* =========================
   ROW 1 (2 COL)
========================= */

.meeting-gallery__row--top {
  display: grid;
  /* Figma: ζεύγος x221→x1682, ίσα περιθώρια 221/221 */
  grid-template-columns: 42.24% 36.18%;   /* 787 και 674 επί 1863 (πλάτος σειράς χωρίς gutter) — με "auto" οι εικόνες κατέρρεαν σε 0 */
  justify-content: center;
  margin-bottom: 263px;   /* Figma: Β τελειώνει y3923, Γ y4186 */
}

.gallery-col {
  display: flex;
}

/* Left image → bottom aligned */
.gallery-col--left {
  justify-content: flex-end;
  align-items: end;
}

/* Right image → top aligned */
.gallery-col--right {
  align-items: flex-start;
  margin-bottom: 313px;   /* Figma: Α y2599 -> Β y3398 = 799 */
}

.meeting-gallery .gallery-col--left img {
  max-width: 787px;   /* Figma 3:417 */
}

.meeting-gallery .gallery-col--right img {
  max-width: 674px;   /* Figma 3:418 */
}

.gallery-col img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
}

/* =========================
   ROW 2 (CENTER IMAGE)
========================= */

.meeting-gallery__row--bottom {
  /* Figma 3:416: εικόνα x750 πλάτος 809 -> ποσοστά της ΣΕΛΙΔΑΣ.
     Χωρίς flex/padding, ώστε τα % να μετρούν στο πλήρες πλάτος και
     το reveal (στο .gallery-single) να διατρέχει μόνο την εικόνα. */
  display: block;
  padding-left: 0;
  padding-right: 0;
}

.gallery-single {
  width: 42.51%;        /* Figma: 809/1903 */
  margin-left: 39.41%;  /* Figma: 750/1903 */
  padding-left: 0; 
}

.gallery-single img {
  width: 100%;
  max-width: none;   /* το πλάτος το ορίζει ο wrapper (42.51%) */
  height: auto;
  display: block;
}

/*======GALLERY SECTION PAGE=======*/
.gallery-section {
  background: #000e1f;
  padding: 183px var(--content-gutter) 180px; /* Figma: τίτλος y183 · grid τελειώνει y6356 → ενότητα y6536 */
}

.gallery-title {
  color: #fff;
  margin-top: 0;   /* το default margin του h1 (0.67em) χάλαγε τη θέση */
  font-family: 'TikTok Sans 18pt Expanded',sans-serif;   /* Figma: Expanded */
  font-size: clamp(28px, 3.4vw, 64px);
  margin-bottom: 16px; /* Figma: title ends y253 → grid y269 */
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  text-transform: uppercase;
}

/* GRID — Figma: 911px columns, 41px gaps both axes */
.gallery-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 41px;
}

/* Column */
.gallery-col-page {
  display: flex;
  flex-direction: column;
  gap: 41px;
}

/* Images */
.gallery-col-page img {
  width: 100%;
  height: auto;
  display: block;
}

/*==============CONTACT PAGE=========*/
.contact-hero,
.contact-info-section,
.contact-form-section {
  background: #f0f0f0;
}
.contact-hero{
  /* Figma: τίτλος y183 (το fixed header δεν σπρώχνει το περιεχόμενο).
     Σε κοντές οθόνες (<949px) το κενό μικραίνει αναλογικά ώστε διεύθυνση και
     GET DIRECTIONS να χωρούν στο πρώτο screen — βλ. και initContactDirections() στο main.js */
  padding: clamp(96px, calc(30vh - 131px), 169px) 0 0;   /* 169 στα ≥1000px ύψος · 109 στα 800 · ελάχιστο 96 = header 72 + 24 ώστε ο τίτλος να μη μπαίνει κάτω από το header */
}
.contact-info-section{
  padding: clamp(24px, calc(28vh - 140px), 140px) 0 100px; /* Figma: subtitle ends y351 → photo y491 (140, μικραίνει σε κοντές οθόνες) · photo ends y1457 → GET IN TOUCH y1557 */
}
.contact-form-section{
  padding: 0 0 180px;
}
.contact-title {
  font-family: 'TikTok Sans 18pt Expanded',sans-serif;   /* Figma: Expanded */
  font-size: clamp(28px, 3.4vw, 64px);
  font-weight: 400;
  line-height: clamp(30px, 3.6vw, 70px);
  margin: 0 0 18px;
  text-transform: uppercase;
}

.contact-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  font-weight: 300;
  line-height: clamp(22px, 2.1vw, 40px);
  max-width: 1299px;
  text-transform: uppercase;
  margin: 0; /* default p margins would collapse out of the section → white strip */
}

.contact-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;              /* Figma: αριστερή στήλη x20→944 (το GET DIRECTIONS κεντράρεται στο x482) */
  align-items: start;
}

.contact-details {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.contact-text {
  font-size: clamp(22px, 2.2vw, 42px);
  font-weight: 300;
  line-height: clamp(28px, 3.1vw, 60px);
  margin-top: clamp(24px, calc(28vh - 140px), 140px); /* Figma: photo top y491 → address y631 (μικραίνει σε κοντές οθόνες) */
}
.contact-text p {
  margin: 0;           /* το default margin του <p> (42px) κατέβαζε τη διεύθυνση στο y671 */
}

.contact-directions {
  text-align: center;
  /* Figma: 175px (κουμπί y986). Το main.js (initContactDirections) ορίζει inline margin-top
     16px–175px ώστε το κουμπί να κάθεται ~24px πάνω από το κάτω άκρο της οθόνης στο άνοιγμα,
     χωρίς scroll, σε κάθε μέγεθος οθόνης. Το 60px είναι το fallback χωρίς JS. */
  margin-top: 60px;
}
.contact-text a {
  color: inherit;              /* το mailto έπαιρνε το μπλε/υπογράμμιση του browser */
  text-decoration: none;
}
@media (hover: hover) {
  .contact-text a:hover { text-decoration: underline; }
}


/* GET DIRECTIONS — ίδιο ακριβώς με το κουμπί της αρχικής (.outline-btn-b): 344×42, Didot Bold 24, 5% tracking */
.contact-btn {
  display: inline-block;
  box-sizing: border-box;
  min-width: 344px;
  border: 1px solid #000e1f;
  border-radius: 1px;
  padding: 7px 16px;   /* 26px line + 14 + 2 border = 42px */
  text-decoration: none;
  text-align: center;
  font-size: clamp(18px, 1.26vw, 24px);
  line-height: 26px;
  font-family: 'Theano Didot';
  font-weight: 500;
}
.contact-directions a{
  color: #000e1f;
  letter-spacing: 0.05em;
}
.contact-image {
  display: flex;
  justify-content: flex-start;
  padding-left: 11.8%;   /* Figma 3:325: φωτό στο x1068 (στήλη από x959, 109/924) */
}

.contact-image img {
  max-width: 706px; /* Figma: 706×966 */
  height: auto;
}

.contact-form-grid {
  display: grid;
  /* Figma: πεδία x20→931 (911) · κενό 137 · δεξιά στήλη x1068→1763 (695, ίδιο x με τη φωτό,
     βέλος/ΑΠΟΣΤΟΛΗ κεντραρισμένα στο x1415, reCAPTCHA αριστερά στο x1072) — ποσοστά επί 1863 */
  grid-template-columns: 48.9% 37.3%;
  column-gap: 7.35%;
  align-items: end;
}

.form-title {
  font-family: 'Theano Didot';
  font-size: clamp(32px, 4.2vw, 80px);
  font-weight: 400;   /* Figma 3:324: Regular — το <h2> έπαιρνε bold από τον browser */
  line-height: 1;     /* Figma: 80/80 — το "normal" της Theano Didot έδινε 124px κουτί */
  margin: 0 0 134px;  /* Figma: title ends y1637 → first label y1771 · χωρίς το default margin-top του <h2> */
  text-transform: uppercase;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 19px; /* Figma: field cols 446px, x466 → x485 */
  margin-bottom: 59px; /* Figma: line y1813 → next label y1872 */
}

/* Figma: labels 20px/40 Regular uppercase over 2px #000E1F underlines */
.contact-form input,
.contact-form textarea {
  border: none;
  border-bottom: 2px solid #000e1f;
  padding: 0 0 2px;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.05vw, 20px);
  line-height: 40px;
  background: transparent;
  font-weight: 400;
  color: #000e1f;
  text-transform: uppercase;
}

.contact-form ::placeholder {
  color: #000e1f;
  opacity: 1;
}

/* Figma: ΜΗΝΥΜΑ is a single underline row (y2020 label, y2062 line) */
.contact-form textarea {
  width: 100%;
  min-height: 42px;
  margin-top: 47px; /* + 59px row margin = 106px (Figma: line y1914 → label y2020) */
  resize: vertical;
}
.contact-submit-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.submit-arrow {
  background: none;
  border: none;
  margin-bottom: 50px; /* Figma: arrow ends y1897 → button y1947 */
  cursor: pointer;
}

/* ΑΠΟΣΤΟΛΗ — Figma: 212×42, TikTok Light 24, 5% tracking */
.submit-btn {
  box-sizing: border-box;
  min-width: 212px;
  border: 1px solid #000e1f;
  padding: 5px 16px;
  background: transparent;
  cursor: pointer;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.26vw, 24px);
  line-height: 30px;
  font-weight: 300;
  letter-spacing: 0.05em;
  color: #000e1f;
}

.recaptcha-text {
  font-size: 14px;
  line-height: 30px;
  font-weight: 400;
  text-align: left; /* Figma: left-aligned */
  max-width: 685px;
  margin-top: 50px;
  /* Figma: μία γραμμή 685px που τελειώνει y2069 (7px κάτω από τη γραμμή του ΜΗΝΥΜΑ y2062).
     Στον browser η γραμματοσειρά βγαίνει φαρδύτερη και σπάει σε 2 γραμμές (60px) — το κείμενο
     ξεκινά στο y2039 όπως στο Figma και απλώς προεξέχει 30px παραπάνω προς τα κάτω, μέσα στο
     κενό των 180px πριν το footer. Έτσι βέλος (y1855) και ΑΠΟΣΤΟΛΗ (y1947) μένουν στη θέση τους. */
  margin-bottom: -37px;
  align-self: flex-start;  /* αριστερή στοίχιση στην αρχή της στήλης (Figma x1072) */
}
/* ============== SERVICE ========*/

.service-directory {
  padding: 180px var(--content-gutter);
  background: #ffffff;
}

.service-directory .container {
  padding-left: 0;
  padding-right: 0;
  margin: 0;
  max-width: 1300px;
}

/* ======================
   TITLE
====================== */

.service-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;   /* Figma 3:33 */
  font-size: clamp(28px, 3.4vw, 64px);
  font-weight: 400;
  margin-bottom: 10px;
  line-height: clamp(30px, 3.6vw, 70px);
}

.service-intro {
  margin-bottom: 120px;
}

.service-intro p {
  font-weight: 300;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(18px, 1.6vw, 30px);
  margin-bottom: 20px;
}

.service-intro p.service-contact {
  margin-top: 70px;
  font-weight: 500;   /* Figma 3:31: Medium — specificity πάνω από το .service-intro p */
}

/* ======================
   LETTER BLOCK
====================== */

.service-letter {
  margin-bottom: 120px;
}

.letter-title {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(20px, 1.9vw, 36px);   /* Figma 3:30: Medium 36 */
  font-weight: 500;
  margin-bottom: 20px;
}

/* ======================
   ITEMS
====================== */

.service-item {
  margin-bottom: 20px;
}

.service-item h3 {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);   /* Figma 3:30: Medium 26/30 */
  font-weight: 500;
  line-height: clamp(18px, 1.6vw, 30px);
  margin-bottom: -15px;
}

.service-item p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);   /* Figma 3:30: Light 26/30 */
  line-height: clamp(18px, 1.6vw, 30px);
  font-weight: 300;
}
/*===================FAQ MAIN PAGE=============*/
/* (το παλιό ορφανό FAQ block αφαιρέθηκε — ζει πλέον στην ενότητα Figma 3:87) */
.faq-last-subtitle{
  padding: 180px 0;
  max-width: 600px;
}
/* ====================== AEGLI HIVE HOTEL  ====================== */

.hive-bg{
  background-color:#d0beb0 ;
}

.hive-title-main{
  font-family: 'Aeion Mono';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 95px;
  font-weight: lighter;
  text-transform: uppercase;
  padding: 10px 0 10px;
}

.hive-title-2{
  font-family: 'Aeion Mono';
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: 80px;
  font-weight: lighter;
  text-transform: uppercase;
  padding-right: 20px!important;
}

/* ================================
   HIVE – SIP & STAY SECTION
================================ */

.hive-sip-stay {
  background: #884b36;
  padding: 160px var(--content-gutter) 180px;
  text-align: center;
}

/* Image */
.hive-sip-stay__image {
  display: flex;
  justify-content: center;
  margin-bottom: 200px;
}

.hive-sip-stay__image img {
  width: 100%;
  max-width: 1200px;
  height: auto;
  display: block;
}

/* Content */
.hive-sip-stay__content {
  text-align: center;
}

/* Title */
.hive-sip-stay__title {
  font-family: "Aeion Mono", monospace;
  font-size: clamp(32px, 4.2vw, 80px);
  line-height: clamp(24px, 2.6vw, 50px);
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 10px;
  text-align: left!important;
  padding: 20px 0;
}

/* Subtitle */
.hive-sip-stay__subtitle {
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  color: #ffffff;
  margin-bottom: 20px;
  font-weight: 400;
  text-align: left!important;
}

/* Text */
.hive-sip-stay__text {
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  color: #ffffff;
  margin-bottom: 170px;
  text-align: left!important;
}

/* Button */
.hive-btn {
  display: inline-block;
  padding: 12px 40px;
  border: 1px solid #ffffff;
  color: #ffffff;
  text-decoration: none;
  font-size: clamp(14px, 1.25vw, 24px);
  font-weight: 300;
  letter-spacing: 0.08em;
  transition: all 0.3s ease;
}

.hive-btn:hover {
  background: #ffffff;
  color: #884b36;
}
.hive-gym {
  position: relative;
  width: 100%;
  min-height: 100vh;
  overflow: hidden;
  background-color: #000e1f;
}

/* Background image */
.hive-gym__bg {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.hive-gym__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  padding:20px var(--content-gutter);
}

/* Overlay content */
.hive-gym__content {
  position: relative;
  z-index: 2;
  min-height: 100vh;
  padding: 20px var(--content-gutter) 120px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

/* =======================
   TOP TEXT (left aligned)
======================= */

.hive-gym__title {
  font-family: 'Aeion Mono', monospace;
  font-size: clamp(32px, 4.2vw, 80px);
  font-weight: 400;
  color: #ffffff;
  margin-bottom: 20px;
}

.hive-gym__subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(24px, 2.6vw, 50px);
  font-weight: 400;
  color: #ffffff;
}

/* =======================
   MIDDLE TEXT (center-ish)
======================= */

.hive-gym__middle p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  color: #ffffff;
  margin-top: 100px;
}

/* =======================
   BUTTON (centered)
======================= */

.hive-gym__bottom {
  display: flex;
  justify-content: center;
}

.hive-btn {
  border: 1px solid #000000;
  color: #000000;
  padding: 4px 15px;
  text-decoration: none;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 1.25vw, 24px);
  letter-spacing: 0.08em;
  transition: 0.3s ease;
}

.hive-btn:hover {
  background: #ffffff;
  color: #000;
}


.hive-history-text {
  margin: 0 auto 180px auto;
}

.hive-history-text p {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  font-weight: 300;
  line-height: clamp(22px, 2.1vw, 40px);
  color: #1a1a1a;
  margin-bottom: 40px;
}

.hive-history-text p:last-child {
  margin-bottom: 0;
}

/* ======================
   ROW 2 – IMAGES
====================== */

.hive-history-images {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  margin: 0 auto;
}

.hive-history-img {
  display: flex;
  justify-content: center;
}

.hive-history-img img {
  width: 100%;
  max-width: 700px;
  height: auto;
  display: block;
  margin-bottom: 80px;
}

/* ====================== AEGLI HIVE HOTEL bar  ====================== */

.hive-bar-bg{
  background: #884b36;
}

.hive-bar-color{
  color: #ffffff!important;
}

.hive-ekd{
  background-color:#e7ded7 ;
}
/* ====================== AEGLI HIVE HOTEL EVENTS ====================== */
.hive-events-details {
  padding: 120px var(--content-gutter);
  background: #e7ded7;
}

.hive-events-details__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 120px;
  align-items: start;
}

/* LEFT */
.hive-events-details__left ul {
  padding: 140px var(--content-gutter);
  margin-left: 10px;
}

.hive-events-details__left li {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.6vw, 30px);
  line-height: clamp(22px, 2.1vw, 40px);
  margin-bottom: 12px;
}

/* RIGHT */
.hive-events-details__right {
  display: flex;
  justify-content: center;
}

.hive-events-details__right img {
  width: 100%;
  max-width: 700px;
  height: auto;
}

.hive-capacity {
  padding: 100px 190px;
  background: #e7ded7;
}

/* Each row is its own grid */
.hive-capacity__row {
  display: grid;
  grid-template-columns: 1.3fr repeat(6, 1fr);
  align-items: end;
}

/* THIS is the separator line */
.hive-capacity__row--numbers {
  border-top: 1px solid #000;
  margin-top: 10px;
}

.capacity-cell {
  padding: 20px;
  white-space: pre-line;
  font-size: 21px;
  line-height: 21px;
  font-weight: 400;

}

/* First column */
.capacity-cell--label {
  text-align: left;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

/* Icons */
.capacity-cell img {
  margin-bottom: 15px;
}
.capacity-cell--offset img {
  padding-bottom: 35px;
}
.capacity-small {
  font-size: 21px;
  margin-bottom: 10px;
}

.capacity-cell span {
  font-size: 21px;
  line-height: 30px;
  font-weight: 400;
}

.events-bg-color{
  background: #e7ded7;
}
.events-par-fix{
  margin-top:-300px;
}
.events-paragraph{
  font-size: clamp(16px, 1.35vw, 26px);
  max-width: 800px;
  line-height: clamp(18px, 1.6vw, 30px);
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-weight: 300;
  position: relative;
  top: 300px;
}

.hive-events-form {
  padding: 0px var(--content-gutter) 160px;
  background: #e7ded7;
}
.hive-events-form__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 140px;
}
.hive-events-form__left {
  max-width: 520px;
}
.events-form-title{
  font-weight: 400;
  font-family: 'TikTok Sans 18pt SemiExpanded',sans-serif;
  font-size: 21px;
  line-height: 31px;
  margin-bottom: 100px;
}
.events-form input,
.events-form select,
.events-form textarea {
  width: 100%;
  border: none;
  border-bottom: 1px solid #000;
  background: transparent;
  padding: 12px 0;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 16px;
}

.events-form textarea {
  min-height: 80px;
  resize: none;
}

.form-group {
  margin-bottom: 28px;
}

.form-checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 30px 0;
  font-size: 14px;
}

.form-submit {
  margin-top: 30px;
  padding: 10px 24px;
  border: 1px solid #000;
  background: transparent;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: 0.3s ease;
}

.form-submit:hover {
  background: #000;
  color: #fff;
}
/*=============GYM=========*/
.gym-bg{
  background: #000e1f;
}

.gym-color-par{
  color: #ffffff!important;
}

/* ═══════════════════════════════════════════════════════
   PREMIUM BUTTON HOVER — horizontal slide-fill animation
   All outline buttons: bg sweeps in from left on hover
═══════════════════════════════════════════════════════ */

/* Prepare all buttons for the pseudo-element */
.outline-btn-b,
.outline-btn,
.btn-outline,
.contact-btn,
.submit-btn,
.breakfast-btn,
.room-btn,
.hive-btn,
.booking-btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

/* ── Dark fill (buttons on light / transparent background) ── */
.outline-btn-b,
.outline-btn,
.btn-outline,
.contact-btn,
.submit-btn,
.hive-btn {
  transition: color var(--anim-fast) var(--anim-ease);
}

.outline-btn-b::before,
.outline-btn::before,
.btn-outline::before,
.contact-btn::before,
.submit-btn::before,
.hive-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #000e1f;
  transform: translateX(-100%);
  transition: transform var(--anim-fast) var(--anim-ease);
  z-index: -1;
}

@media (hover: hover) {
  .outline-btn-b:hover::before,
  .outline-btn:hover::before,
  .btn-outline:hover::before,
  .contact-btn:hover::before,
  .submit-btn:hover::before,
  .hive-btn:hover::before {
    transform: translateX(0);
  }

  .outline-btn-b:hover,
  .outline-btn:hover,
  .btn-outline:hover,
  .contact-btn:hover,
  .contact-directions a.contact-btn:hover {
    color: #ffffff;
  }

  .submit-btn:hover {
    background: transparent;
    color: #ffffff;
  }

  .hive-btn:hover {
    background: transparent;
    color: #ffffff;
  }
}

/* ── White fill (buttons on dark background) ── */
.breakfast-btn,
.room-btn {
  transition: color 0.45s ease;
}

.breakfast-btn::before,
.room-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  transform: translateX(-100%);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

@media (hover: hover) {
  .breakfast-btn:hover::before,
  .room-btn:hover::before {
    transform: translateX(0);
  }

  .breakfast-btn:hover,
  .room-btn:hover {
    background: transparent;
  }
}

/* ── Footer scroll-to-top arrow ── */
.footer-top-btn {
  transition: transform 0.35s ease, opacity 0.35s ease;
}

@media (hover: hover) {
  .footer-top-btn:hover {
    transform: translateY(-6px);
    opacity: 0.65;
  }
}
/* ════════════════════════════════════════
   ΣΥΧΝΕΣ ΕΡΩΤΗΣΕΙΣ — Figma 3:87
   τίτλος y183 · υπότιτλος y271 · πρώτη γραμμή y484
   ερώτηση 30/40 SemiExp Light UPPER, cross 25×25, εσοχή 77
════════════════════════════════════════ */
.faq-section {
  background: #ffffff;
  padding: 169px 0 180px;   /* τίτλος y183 (το .reveal-title δίνει +14) */
}

.faq-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  color: #000e1f;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.faq-subtitle {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  color: #000e1f;
  margin: 0 0 133px;        /* Figma: υπότιτλος τελειώνει y351 → γραμμή y484 */
  text-transform: uppercase;
}

.faq-item {
  border-top: 1px solid #000e1f;
}

.faq-item:last-child {
  border-bottom: 1px solid #000e1f;
}

.faq-question {
  display: flex;
  align-items: flex-start;
  gap: 52px;                /* Figma: cross x20+25 → κείμενο x97 */
  width: 100%;
  padding: 45px 0;          /* Figma: γραμμή y484 → ερώτηση y529 */
  background: none;
  border: 0;
  text-align: left;
  cursor: pointer;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(17px, 1.58vw, 30px);
  line-height: clamp(24px, 2.1vw, 40px);
  font-weight: 300;
  color: #000e1f;
  text-transform: uppercase;
}

/* Το + από δύο γραμμές — γίνεται × όταν ανοίξει */
.faq-cross {
  position: relative;
  padding: 0;          /* γενικός κανόνας για spans έδινε padding-right 35px */
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  margin-top: clamp(0px, 0.4vw, 8px);
  transition: transform 0.35s var(--anim-ease, ease);
}
.faq-cross::before,
.faq-cross::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: #000e1f;
}
.faq-cross::before { transform: rotate(90deg); }

.faq-question[aria-expanded="true"] .faq-cross { transform: rotate(45deg); }

/* Accordion: το .faq-answer αλλάζει ύψος (0 → auto) με GSAP και κλιπάρει.
   Το padding ζει στο .faq-answer__inner ώστε να μετράει σωστά στο ύψος
   και η απάντηση να μην κολλάει στη γραμμή από κάτω. */
.faq-answer {
  height: 0;
  overflow: hidden;
}
.faq-answer__inner {
  padding: 0 0 45px 77px;   /* στοίχιση με το κείμενο της ερώτησης · 45px ως την επόμενη γραμμή */
}

.faq-answer p {
  margin: 0;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(16px, 1.35vw, 26px);
  line-height: clamp(24px, 2.1vw, 40px);
  font-weight: 300;
  color: #000e1f;
  max-width: 1400px;
}

/* ════════════════════════════════════════
   ΕΥΚΑΙΡΙΕΣ ΚΑΡΙΕΡΑΣ — Figma 3:47
════════════════════════════════════════ */
.career-section {
  background: #ffffff;
  padding: 169px 0 180px;
}

.career-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  color: #000e1f;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.career-intro {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(18px, 1.9vw, 36px);
  line-height: clamp(22px, 2.1vw, 40px);
  font-weight: 300;
  color: #000e1f;
  margin: 0 0 332px;        /* Figma: intro τελειώνει y391 → φόρμα y723 */
  text-transform: uppercase;
}

.career-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 45px;                /* Figma: πεδία ως x931 → δεξιά στήλη x976 */
  align-items: start;
}

.career-side {
  padding-top: 10px;        /* Figma: label y733 vs πεδία y723 */
}

.career-upload__label {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(14px, 0.95vw, 18px);
  font-weight: 300;
  color: #000e1f;
  margin: 0 0 30px;         /* Figma: label y733 → κουμπί y784 */
}

.career-upload__control {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  margin-bottom: 40px;      /* Figma: κουμπί τελειώνει y809 → συγκατάθεση y848 */
}

.career-upload__btn {
  padding: 3px 10px;
  border: 1px solid #000e1f;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 14px;
  font-weight: 300;
  color: #000e1f;
  white-space: nowrap;
}

.career-upload__file {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: #000e1f;
  opacity: 0.7;
}

.career-consent {
  display: flex;
  align-items: flex-start;
  gap: 19px;                /* Figma: checkbox x976+21 → κείμενο x1016 */
  margin-bottom: 21px;      /* Figma: y848 → y911 (ύψος 42) */
  cursor: pointer;
}

.career-consent input {
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: #000e1f;
}

.career-consent span {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(13px, 0.9vw, 17px);
  line-height: 1.25;
  font-weight: 300;
  color: #000e1f;
}

.career-side .contact-submit-col {
  margin-top: 60px;      /* Figma: συγκατάθεση y953 → ΑΠΟΣΤΟΛΗ y1095 */
  align-items: flex-start;   /* Figma 3:59: το ΑΠΟΣΤΟΛΗ στοιχίζεται αριστερά στη στήλη (x976) */
}

/* ════════════════════════════════════════
   ΝΟΜΙΚΕΣ ΣΕΛΙΔΕΣ — Figma 3:35 / 3:41
════════════════════════════════════════ */
.legal-section {
  background: #ffffff;
  padding: 169px 0 180px;
}

.legal-title {
  font-family: 'TikTok Sans 18pt Expanded', sans-serif;
  font-size: clamp(28px, 3.4vw, 64px);
  line-height: clamp(30px, 3.6vw, 70px);
  font-weight: 400;
  color: #000e1f;
  margin: 0 0 18px;
  text-transform: uppercase;
}

.legal-body {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 20px;
  line-height: 25px;
  font-weight: 300;
  color: #000e1f;
}

.legal-body p {
  margin: 0 0 1.2em;
}

.legal-body h2,
.legal-body h3,
.legal-body strong {
  font-weight: 400;
}

/* ── Timeline: ο ΤΕΛΕΥΤΑΙΟΣ σταθμός δεν χρειάζεται ολόκληρη οθόνη ──
   Τα 100vh + κάθετο κεντράρισμα άφηναν ~680px κενό ως το footer.
   Οι προηγούμενοι μένουν 100vh (το sticky εφέ δεν αλλάζει). */
.tl-entry:last-child {
  height: auto;
  align-items: start;
}

.tl-entry:last-child .tl-entry-img {
  height: auto;
  /* Ίδιο πάνω κενό με τα sticky entries (φωτό κεντραρισμένη σε 100vh), ώστε καθώς το
     τελευταίο entry γλιστράει πάνω από το προηγούμενο, η χρονολογία να μην κολλάει
     στη φωτό που καλύπτει. Ελάχιστο 90px = χώρος για τη χρονολογία (70px πάνω από τη φωτό). */
  padding: max(90px, calc(50vh - 14.765vw)) 0 60px;
}

.tl-entry:last-child .tl-entry-content {
  height: auto;
  padding-top: max(90px, calc(50vh - 14.765vw));   /* ο τίτλος στοιχισμένος με την κορυφή της φωτό, όπως στους άλλους */
  padding-bottom: 60px;
}

/* ════════════════════════════════════════════════════════
   CONTACT FORM 7 — φόρμες Επικοινωνίας / Καριέρας
   Το markup του Figma ζει ΜΕΣΑ στη φόρμα CF7. Ο wrapper .wpcf7 και το
   <form> γίνονται display:contents ώστε οι δύο στήλες να είναι απευθείας
   παιδιά του grid της σελίδας (.contact-form-grid / .career-grid).
════════════════════════════════════════════════════════ */
.contact-form-grid .wpcf7,
.contact-form-grid .wpcf7 form,
.career-grid .wpcf7,
.career-grid .wpcf7 form {
  display: contents;
}

/* Κάθε πεδίο τυλίγεται σε span.wpcf7-form-control-wrap — γίνεται block ώστε
   τα grid columns του .form-row και το width:100% να δουλεύουν όπως πριν */
.contact-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}
.contact-form .wpcf7-form-control-wrap input,
.contact-form .wpcf7-form-control-wrap textarea {
  width: 100%;
}
.contact-form .wpcf7-form-control-wrap textarea {
  height: 42px;             /* Figma: μία γραμμή με υπογράμμιση — το CF7 δίνει rows="10" */
  display: block;           /* ως inline-block άφηνε 5px baseline κενό κάτω από τη γραμμή */
}

/* Μηνύματα σφάλματος ανά πεδίο */
.wpcf7 .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #b91c1c;
  text-transform: none;
}

/* Γενικό μήνυμα (επιτυχία / σφάλμα) — πιάνει και τις δύο στήλες του grid.
   Με "body" μπροστά για να υπερισχύει του CSS του CF7, που φορτώνει μετά το theme. */
body .wpcf7 form .wpcf7-response-output {
  grid-column: 1 / -1;
  margin: 24px 0 0;
  padding: 0;
  border: 0;
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 14px;
  line-height: 1.5;
  color: #000e1f;
}
body .wpcf7 form.sent .wpcf7-response-output { color: #15803d; }
body .wpcf7 form.failed .wpcf7-response-output,
body .wpcf7 form.aborted .wpcf7-response-output,
body .wpcf7 form.invalid .wpcf7-response-output,
body .wpcf7 form.unaccepted .wpcf7-response-output,
body .wpcf7 form.spam .wpcf7-response-output { color: #b91c1c; }

.wpcf7 form.submitting .submit-btn,
.wpcf7 form.submitting .submit-arrow {
  opacity: 0.5;
  pointer-events: none;
}

/* Βέλος αποστολής: η εικόνα έρχεται από CSS, ώστε το markup της φόρμας
   (στη βάση) να μην κουβαλά URL του theme */
.submit-arrow {
  width: 60px;
  height: 42px;
  padding: 0;
  background: url(../img/aegli-hotel-contact/arrow-black.svg) no-repeat center / contain;
}
.submit-arrow img { display: none; }

/* CV upload: το πραγματικό input κρύβεται (όχι display:none, για να δουλεύει
   το validation) — το <label> ανοίγει τον διάλογο αρχείου */
.career-upload__control {
  position: relative;
  flex-wrap: wrap;
}
.career-upload__control .wpcf7-form-control-wrap { display: contents; }
.career-upload__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
}
.career-upload__control .wpcf7-not-valid-tip { flex-basis: 100%; }

/* Συγκαταθέσεις: το CF7 τυλίγει το checkbox σε
   span.wpcf7-form-control-wrap[data-name=consent-*] > .wpcf7-acceptance > .wpcf7-list-item > label > input + span
   (η επιλογή class: του tag πέφτει στο ίδιο το <input>, γι' αυτό στοχεύουμε τον wrapper) */
.wpcf7-form-control-wrap[data-name^="consent-"] {
  display: block;
  margin-bottom: 21px;      /* Figma: y848 → y911 (ύψος 42) */
}
.wpcf7-form-control-wrap[data-name^="consent-"] .wpcf7-list-item {
  display: block;
  margin: 0;
}
.wpcf7-form-control-wrap[data-name^="consent-"] label {
  display: flex;
  align-items: flex-start;
  gap: 19px;                /* Figma: checkbox x976+21 → κείμενο x1016 */
  cursor: pointer;
}
.wpcf7-form-control-wrap[data-name^="consent-"] input.career-consent {
  display: inline-block;    /* ακυρώνει το display:flex / margin του .career-consent που πέφτει στο input */
  flex: 0 0 21px;
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: #000e1f;
}
.wpcf7-form-control-wrap[data-name^="consent-"] .wpcf7-list-item-label {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: clamp(13px, 0.9vw, 17px);
  line-height: 1.25;
  font-weight: 300;
  color: #000e1f;
}