/* ========================================
   AEGLI — RESPONSIVE CSS
   Breakpoints: 1200px | 900px | 768px | 480px
======================================== */

/* ================================================
   HEADER — mobile fixes
================================================ */
@media (max-width: 768px) {

  /* Κρύβουμε το booking button από το κέντρο
     (accessible μέσω hamburger menu) */
  .header-center {
    display: none;
  }

  /* Μειώνουμε το gap στα δεξιά actions */
  .header-actions {
    gap: 24px;
  }

  /* Menu links μικρότερα */
  .menu-content a {
    font-size: clamp(36px, 10vw, 60px);
    line-height: 1.2;
  }

  .submenu li a {
    font-size: clamp(24px, 7vw, 40px);
  }
}

/* ================================================
   1200px — Large tablet / small laptop
================================================ */
@media (max-width: 1200px) {

  /* Hotel images */
  .image-exterior { margin-top: 200px; margin-right: 40px; }
  .image-interior { margin-right: 40px; }
  .hotel-branding { position: static; } /* sticky logo is a desktop-only effect */
  .hotel-cta { right: 60px; }

  /* Business lounge */
  .business-grid { gap: 60px; }

  /* Footer */
  .footer-col { padding-left: 40px; padding-right: 40px; }

  /* Hive capacity table */
  .hive-capacity { padding: 80px 60px; }
}

/* ================================================
   900px — Tablet landscape
================================================ */
@media (max-width: 900px) {

  /* Hotel section */
  .hotel-intro { margin-bottom: 60px; }
  .hotel-branding { margin-top: 60px; margin-bottom: 60px; }
  .hotel-branding img { height: 180px; }
  .hotel-text-row { grid-template-columns: 1fr; }
  .hotel-text { grid-column: 1 / 2; }
  .hotel-text h2 { white-space: normal; }
  .hotel-images { grid-template-columns: 1fr; }
  .hotel-images .image { max-width: 100%; }
  .image-exterior { margin-top: 40px; margin-right: 0; }
  .image-interior { margin-bottom: 40px; margin-right: 0; }
  .hotel-images-row { margin-top: 60px; margin-bottom: 40px; }
  .hotel-cta { position: static; text-align: center; margin-top: 40px; }

  /* Hive section */
  .aegli-hive { padding: 60px 0; }
  .aegli-section.aegli-hive .hotel-text-row { grid-template-columns: 1fr; }
  .hotel-text-hive { grid-column: 1 / 2; }
  .hotel-text-hive h2 { margin-bottom: 10px; }

  /* Business lounge */
  .business-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 40px; }
  .business-subtitle { margin-bottom: 40px; }

  /* Editorial */
  .section-editorial .container { padding: 80px var(--content-gutter) 80px; }
  .editorial-row--top { margin-bottom: 60px; }
  .editorial-title { font-size: clamp(60px, 4.2vw, 80px); margin-top: 0; margin-bottom: 24px; }
  .editorial-subtitle { margin-top: 0; margin-bottom: 0; }
  .editorial-row--middle { grid-template-columns: 1fr; gap: 40px; }
  .editorial-col--text { padding-top: 0; }
  .editorial-col--image { order: -1; }
  .editorial-btn-wrap { padding-top: 20px; text-align: left; }
  .editorial-row--bottom { margin-top: 60px; }

  /* STAY WITH A VIEW — mobile */
  .section-stay-view { padding-top: 60px; padding-bottom: 60px; }
  .section-stay-view .titles-container { display: block; padding-bottom: 40px; }
  .section-stay-view .editorial-title { grid-column: auto; padding-left: 0; text-align: left; }
  .section-stay-view .editorial-subtitle { grid-column: auto; padding-left: 0; text-align: left; }
  .section-stay-view .editorial-col--text { padding-top: 0; }
  .section-stay-view .editorial-btn-wrap { padding-top: 20px; text-align: left; }
  .section-stay-view .right-col-wrapper { padding-left: 0; padding-bottom: 0; }

  /* Experience */
  .experience-row--header { margin-bottom: 60px; }
  .experience-row--images { grid-template-columns: 1fr; margin-top: 40px; margin-bottom: 40px; }
  .experience-col--large img, .experience-col--small img { width: 100%; }
  .experience-col--small { padding-top: 0; }   /* το desktop offset (Figma +258) δεν ισχύει σε 1 στήλη */

  /* ── TITLE SIZES: proportional mobile scaling ─────────
     Rule: desktop is the max — mobile stays big (≥65%)
     Large  80px desktop → min 52px  (13vw fluid)
     Medium 64px desktop → min 44px  (11vw fluid)
     XL    120px desktop → min 72px  (18vw fluid)
  ─────────────────────────────────────────────────── */

  /* Large Didot/Aeion titles (80px desktop) */
  .hotel-text h2,
  .hotel-text-hive h2,
  .business-title,
  .landmark-title,
  .gallery-cta__heading,
  .delights-title,
  .meeting-delights-title,
  .form-title,
  .hive-title-main,
  .hive-title-2,
  .hive-sip-stay__title,
  .hive-gym__title {
    font-size: clamp(52px, 13vw, 80px);
    line-height: 1.05;
  }

  /* Medium TikTok Sans titles (64px desktop) */
  .inner-hero-title,
  .experience-title,
  .landmark-subtitle,
  .rooms-title,
  .room-title,
  .room-hero__title,
  .breakfastp-title,
  .meeting-title,
  .gallery-title,
  .contact-title,
  .service-title,
  .faq-title {
    font-size: clamp(32px, 9vw, 64px);
    line-height: 1.1;
  }

  /* Room description */
  .room-description { margin-bottom: 60px; }

  /* Timeline year (120px desktop) */
  .tl-entry-year { font-size: clamp(72px, 18vw, 120px); }

  /* Timeline */
  .tl-entry { grid-template-columns: 1fr; height: auto; position: relative; }
  .tl-entry-img { height: 55vw; min-height: 260px; }
  .tl-entry-content { height: auto; padding: 50px 30px; }
  .tl-entry:last-child .tl-entry-img,
  .tl-entry:last-child .tl-entry-content { padding-top: 50px; }   /* το desktop max(90px, 50vh-…) δεν έχει νόημα σε 1 στήλη */

  /* Rooms */
  .room-item { grid-template-columns: 1fr; gap: 30px; }
  .room-features__inner { grid-template-columns: 1fr; gap: 40px; padding-right: 0; }
  .room-features__content { padding-top: 0; }
  .room-gallery__row--double { grid-template-columns: 1fr; margin-bottom: 40px; }
  .room-gallery__col--right { margin-top: 0; }
  .room-gallery__row--reversed { padding: 40px 0 60px; }
  .room-gallery__row--reversed .room-gallery__col--left { margin-top: 0; }
  .room-gallery__row--reversed .room-gallery__col--right { margin-top: 0; }
  .room-gallery-nav { gap: 40px; padding: 100px 0; }

  /* Contact */
  .contact-info-grid { grid-template-columns: 1fr; gap: 40px; }
  .contact-form-grid { grid-template-columns: 1fr; gap: 30px; }
  .form-row { grid-template-columns: 1fr; gap: 20px; }
  .contact-text { margin-top: 20px; }
  .contact-directions { margin-top: 40px; }
  .form-title { margin-bottom: 30px; }
  .form-row { margin-bottom: 20px; }
  .contact-image img { width: 100%; max-width: 100%; }
  .contact-image { padding-left: 0; }   /* το desktop inset (Figma x1068) δεν ισχύει σε 1 στήλη */

  /* Gallery */
  .gallery-grid { grid-template-columns: 1fr; }

  /* Hive events */
  .hive-events-details__grid { grid-template-columns: 1fr; gap: 40px; }
  .hive-events-details__left ul { padding: 40px var(--content-gutter); }
  .hive-events-form__wrapper { grid-template-columns: 1fr; }

  /* Hive capacity */
  .hive-capacity { padding: 60px 20px; overflow-x: auto; }
  .hive-capacity__row { min-width: 600px; }

  /* Main footer — stack address + social at ≤900px */
  .footer-info { flex-direction: column; gap: 12px; }
  .footer-social { align-items: flex-start; }
  .footer-nav { gap: 20px; }

  /* Hotel inner footer — reduce logo + tighten margins at ≤900px */
  .footer-top--centered { padding-left: 40px; padding-right: 40px; }
  .footer-logo--main { width: clamp(120px, 14vw, 180px); }
  .ftc-left  { margin-top: 40px; }
  .ftc-right { margin-top: 40px; }
}

/* ================================================
   768px — Tablet portrait / large mobile
================================================ */
@media (max-width: 768px) {

  /* HERO */
  .hero { align-items: flex-start; }
  .hero-inner { padding: 20px var(--content-gutter); }
  .hero-media { height: calc(100vh - var(--header-height) - 40px); }

  /* HOTEL SECTION */
  .hotel-intro { margin-bottom: 30px; }
  .hotel-branding { margin-top: 40px; margin-bottom: 40px; }
  .hotel-branding img { height: 160px; }
  .hotel-text h2 {
    font-family: 'Theano Didot';
    font-size: clamp(52px, 13vw, 80px);
    line-height: 1.05;
    font-weight: 400;
    margin-bottom: 16px;
    white-space: normal;
  }
  .hotel-text p { max-width: 100%; }

  /* EDITORIAL */
  .editorial-text { margin-bottom: 30px; }

  /* BUSINESS LOUNGE */
  .business-lounge { padding: 80px 0; }

  /* HIVE SECTION */
  .aegli-hive { padding: 60px 0; }

  /* BREAKFAST SECTION */
  .aegli-breakfast { padding: 80px var(--content-gutter); }
  .breakfast-content { margin-top: 60px; }
  .breakfast-gallery__row--top { grid-template-columns: 1fr; margin-bottom: 40px; }
  .gallery-col--right,
  .breakfast-gallery .gallery-col--right { margin-bottom: 0; }
  .gallery-single,
  .breakfast-gallery .gallery-single { padding-left: 0; }

  /* MEETING */
  .meeting-gallery__row--top { grid-template-columns: 1fr; margin-bottom: 40px; }

  /* LANDMARK */
  .landmark-header { margin-bottom: 80px; }
  .landmark-title { margin-bottom: 40px; }

  /* ROOM PREV/NEXT NAV — keep horizontal, shrink thumb + labels */
  .room-gallery-nav { padding: 60px 16px; gap: 16px; }
  .room-gallery-item { flex: 1; min-width: 0; }
  .room-gallery-image { width: 100%; height: 180px; }
  .room-nav-link { font-size: 14px; gap: 6px; }
  .room-nav-link img { width: 36px; }

  /* FOOTER — stack columns, remove vertical divider */
  .footer-top { grid-template-columns: 1fr; }
  .footer-col {
    padding-left: 0;
    padding-right: 0;
    padding-top: 60px;
    padding-bottom: 60px;
  }
  .footer-col--hotel {
    border-right: none;
    border-bottom: 1px solid #ffffff;
  }
  .footer-col-inner { gap: 24px; }
  .footer-info { flex-direction: column; gap: 12px; }
  .footer-social { align-items: flex-start; }
  .footer-top-btn { top: 20px; right: 0; }
  .footer-nav { gap: 16px; padding: 40px 0; }
  .footer-nav a { font-size: clamp(12px, 3.5vw, 16px); }
  .footer-bottom { flex-direction: column; gap: 12px; padding: 24px 0 32px; text-align: center; }
  .footer-credit { text-align: center; }
  .footer-copy.right { text-align: center; }
  .footer-copy.center p { padding: 0 2px; }

  /* HOTEL INNER PAGES FOOTER — stack columns at ≤768px */
  .footer-top--centered {
    flex-direction: column;
    align-items: center;
    padding-top: 60px;
    padding-bottom: 40px;
    gap: 40px;
  }
  .ftc-left  { flex: none; margin-top: 0; text-align: center; }
  .ftc-right { flex: none; margin-top: 0; justify-content: center; }
  .ftc-right .footer-social { align-items: center; }
  .ftc-left p { text-align: center; }

  /* SERVICE DIRECTORY */
  .service-directory { padding: 80px var(--content-gutter); }

  /* FAQ */
  .faq-section { padding: 80px var(--content-gutter) 0; }
  .faq-last-subtitle { padding: 80px 0; }

  /* HIVE GYM */
  .hive-gym__content { padding: 40px var(--content-gutter) 80px; }

  /* HIVE SIP & STAY */
  .hive-sip-stay { padding: 80px var(--content-gutter) 100px; }
  .hive-sip-stay__image { margin-bottom: 80px; }
}

/* ================================================
   480px — Mobile
================================================ */
@media (max-width: 480px) {

  /* HERO */
  .hero-inner { padding: 10px var(--content-gutter); }
  .hero-media { height: calc(100vh - var(--header-height) - 20px); }

  /* HOTEL SECTION */
  .aegli-hotel-section { padding: 10px 0; }

  /* CTA buttons — drop the 344px min-width on narrow phones */
  .outline-btn,
  .outline-btn-b,
  .contact-btn {
    min-width: 0;
    width: 100%;
    max-width: 344px;
  }
  .hotel-branding img { height: 140px; }
  .hotel-branding { margin-top: 40px; margin-bottom: 40px; }
  .hotel-intro { margin-bottom: 30px; }

  /* HIVE SECTION */
  .aegli-hive { padding: 40px 0; }

  /* BUSINESS LOUNGE */
  .business-lounge { padding: 80px 0; }
  .business-subtitle { margin-bottom: 30px; }

  /* EXPERIENCE */
  .aegli-experience { padding: 60px var(--content-gutter); }
  .experience-row--header { margin-bottom: 60px; }

  /* BREAKFAST */
  .aegli-breakfast { padding: 60px var(--content-gutter); }
  .breakfast-content { margin-top: 60px; }
  .breakfast-subtitle { margin-bottom: 60px; }
  .breakfast-image img { width: 100%; }

  /* LANDMARK */
  .landmark-section { padding: 60px 0; }
  .tl-entry { margin-bottom: 50px; }

  /* ROOMS */
  .rooms-hero { padding: calc(var(--header-height) + 40px) 0 var(--content-gutter); }   /* ίδιο κενό από το header με τη gallery */
  .rooms-title { margin-bottom: 40px; }
  .room-hero { padding: 80px var(--content-gutter) 30px; }
  .room-hero__title { margin-bottom: 20px; }
  .room-hero__description { padding: 30px 0 40px; }
  .room-features { padding: 40px var(--content-gutter); }
  .room-gallery__row--double { margin-bottom: 20px; }
  .room-gallery__row--single { margin-bottom: 20px; }

  /* ROOM PREV/NEXT NAV — even smaller at 480px */
  .room-gallery-nav { padding: 40px 10px; gap: 10px; }
  .room-gallery-image { height: 130px; }
  .room-nav-link { font-size: 12px; gap: 4px; }
  .room-nav-link img { width: 26px; }

  /* CONTACT */
  .contact-hero { padding: calc(var(--header-height) + 40px) 0 30px; }   /* ίδιο κενό από το header με τη gallery */
  .contact-info-section { padding: 20px 0 40px; }
  .contact-form-section { padding: 20px 0 60px; }
  .contact-text { margin-top: 0; }
  .contact-directions { margin-top: 24px; }
  .form-title { margin-bottom: 20px; }
  .form-row { margin-bottom: 10px; }
  .contact-submit-col { gap: 20px; align-items: center; }

  /* GALLERY */
  .gallery-section { padding: calc(var(--header-height) + 40px) var(--content-gutter) 60px; }   /* ο τίτλος κρυβόταν κάτω από το σταθερό header (72px) */

  /* FOOTER */
  .footer-col { padding-top: 40px; padding-bottom: 40px; }
  .footer-nav { gap: 10px; padding: 30px 0; }
  .footer-divider { margin: 0; }

  /* HIVE SECTIONS */
  .hive-sip-stay { padding: 60px var(--content-gutter) 80px; }
  .hive-events-details { padding: 60px var(--content-gutter); }
  .hive-events-form { padding: 0 var(--content-gutter) 80px; }

  /* SERVICE */
  .service-directory { padding: 60px var(--content-gutter); }
  .service-letter { margin-bottom: 60px; }

  /* FAQ */
  .faq-section { padding: 60px var(--content-gutter) 0; }
}

/* ── 5 νέες σελίδες ── */
@media (max-width: 900px) {
  .career-grid { grid-template-columns: 1fr; gap: 40px; }
  .career-intro { margin-bottom: 80px; }
  .faq-subtitle { margin-bottom: 60px; }
  .faq-question { gap: 24px; padding: 26px 0; }
  .faq-answer__inner { padding-left: 49px; }
  .faq-section, .career-section, .legal-section { padding: 120px 0 90px; }
}

/* ════════════════════════════════════════════════
   RESPONSIVE AUDIT FIXES — μόνο tablet/mobile.
   Κανένας κανόνας εδώ δεν αγγίζει > 1024px.
════════════════════════════════════════════════ */

/* ΣΥΝΕΔΡΙΑ: το δίστηλο lounge (κείμενο|φωτό) στριμώχνεται κάτω από 900 */
@media (max-width: 900px) {
  .meeting-lounge__grid {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-right: var(--content-gutter);   /* στο desktop η φωτό ακουμπά το άκρο· εδώ όχι */
  }
  .meeting-lounge__text { padding-top: 0; }
  .meeting-lounge { padding-top: 22px; }   /* ίσο κενό πάνω/κάτω από το intro (60/60) */
}

/* Hamburger: 58×18 είναι πολύ μικρός στόχος αφής — επέκταση σε ~46px
   χωρίς καμία οπτική αλλαγή (το padding είναι αόρατο) */
@media (max-width: 1024px) {
  .menu-toggle {
    height: 18px;
    padding: 14px 0;
    box-sizing: content-box;
  }
}

/* Αρχική / ενότητα Hive: ο τίτλος ξεχείλιζε 8px στα ≤400 */
@media (max-width: 480px) {
  .hotel-text-hive h2 {
    white-space: normal;
    /* Μία λέξη στα 32px Aeion δεν χωρά στη στήλη (343px > 295) —
       στα στενά πλάτη το μέγεθος πρέπει να κλιμακώνεται με το viewport */
    font-size: clamp(20px, 7vw, 32px);
  }
}

/* Πολύ στενές οθόνες (≤400): το ελάχιστο 52px του hotel-text h2
   δεν χωρά μονολεκτικά (ELEGANCE @Theano Didot ≈ 310px σε 300 διαθέσιμα) */
@media (max-width: 400px) {
  .hotel-text h2 { font-size: clamp(32px, 13vw, 52px); }
}

/* Κινητά: το AEGLI wordmark (138×24) άφηνε μόλις 9px ως το ΕΛ/EN —
   μικραίνει ώστε το header να αναπνέει. Μόνο ≤480, το desktop ανέγγιχτο. */
@media (max-width: 480px) {
  .header-logo img { height: 17px; }          /* 138→~98px πλάτος */
  .lang-switch .divider { width: 24px; margin: 0 10px; }
}

/* Πολύ στενά (≤360): κέρδος χώρου στο header */
@media (max-width: 360px) {
  .header-actions { gap: 14px; }
  .lang-switch .divider { width: 16px; margin: 0 8px; }
}

/* Κινητά: το hero λογότυπο (403×250) γέμιζε την οθόνη ακουμπώντας τις
   άκρες — κλιμακώνεται με το viewport. Μόνο ≤600, το desktop ανέγγιχτο. */
@media (max-width: 600px) {
  .hero-logo {
    width: 60vw;
    max-width: 280px;
    height: auto;
  }
}

/* Ενιαία κλίμακα τίτλων σελίδων σε tablet/mobile (≤900):
   ένα clamp για όλους τους H1 — μεγαλύτερη παρουσία στα μεσαία πλάτη
   απ' ό,τι έδιναν τα desktop clamps (3.4vw), σφιχτότερο διάστιχο. */
@media (max-width: 900px) {
  .inner-hero-title,
  .experience-title,
  .landmark-subtitle,
  .rooms-title,
  .room-title,
  .room-hero__title,
  .breakfastp-title,
  .meeting-title,
  .gallery-title,
  .contact-title,
  .service-title,
  .faq-title {
    font-size: clamp(30px, 7vw, 64px);
    line-height: 1.1;
  }
}

/* Mobile: ο τίτλος VOLOS LANDMARK αριστερά */
@media (max-width: 768px) {
  .landmark-title { text-align: left; }
}

/* ════════════════════════════════════════════════
   ΠΡΩΙΝΟ-ΚΑΦΕ & ΣΥΝΕΔΡΙΑ σε mobile (≤768):
   τα desktop ποσοστά (Figma x/1903) δίνουν μικροσκοπικές
   εικόνες σε στενές οθόνες — εδώ όλα full-width, στοιβαγμένα.
════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Cover: το 2:1 γίνεται λωρίδα 188px — πιο ψηλό στο κινητό */
  .breakfast-hero__image,
  .meeting-hero__image {
    aspect-ratio: 4 / 3;
  }
  .breakfast-hero__image,
  .meeting-hero__image { height: auto; }   /* στο κινητό ισχύει το 4:3, όχι το 100vh */

  /* Κεντρική εικόνα delights: full width αντί για 50% */
  .breakfast-delights__image {
    width: calc(100% - 2 * var(--content-gutter));
    margin-left: var(--content-gutter);
    margin-bottom: 60px;
  }

  /* Τελευταία φωτογραφία: full width με gutter αντί για 42.5% */
  .breakfast-gallery .gallery-single,
  .meeting-gallery .gallery-single,
  .gallery-single {
    width: 100%;
    margin-left: 0;
    padding: 0 var(--content-gutter);
    box-sizing: border-box;
  }

  /* Ζεύγος: στοιβαγμένο με λογικό κενό */
  .breakfast-gallery__row--top,
  .meeting-gallery__row--top {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 60px;
  }
  .gallery-col--right { margin-bottom: 0; }

  /* Κενά ενοτήτων: 130-180px desktop → ανθρώπινα στο κινητό */
  .breakfast-delights { padding: 60px 0; }
  .breakfast-gallery { padding-bottom: 80px; }
  .meeting-delights { padding: 60px 0 40px; }
  .meeting-gallery { padding-bottom: 80px; }
}

/* Mobile: το (SCROLL) κρύβεται — σε οθόνη αφής δεν έχει νόημα */
@media (max-width: 768px) {
  .breakfast-hero__scroll,
  .meeting-hero__scroll,
  .room-hero__scroll {
    display: none;
  }
}

/* ΣΥΝΕΔΡΙΑ mobile: συμμάζεμα ροής */
@media (max-width: 768px) {
  /* ο τίτλος ακουμπούσε το κάτω άκρο του cover */
  .meeting-hero__content { margin-top: 24px; }

  /* το desktop -15px κολλούσε τον υπότιτλο στο BUSINESS LOUNGE,
     και το 85.58% τον στρίμωχνε στα 287px */
  .meeting-delights-subtitle {
    margin-top: 12px;
    max-width: 100%;
  }
}


/* ══════════════════════════════════════════════════════════════════
   MOBILE / TABLET TYPE & RHYTHM SYSTEM  (2026-09-14)
   Βάση: audit του the8project.com σε 375px —
     display 64/68 · H1 40/48 · H2 36/36 · H3 28/32 · body 18/24 ·
     ελάχιστο κείμενο 14px · gutter 20px · section padding 50–100px ·
     εσωτερικά block gaps 20–40px · κενό μεταξύ εικόνων 32px.
   Όλα τα rules ζουν ΜΟΝΟ μέσα σε ≤900 / ≤768 / ≤480.
   Το desktop (>900px) ΔΕΝ αγγίζεται από κανέναν κανόνα εδώ.
   Επειδή το block είναι τελευταίο στο αρχείο, κερδίζει τα προηγούμενα
   mobile rules ίδιας specificity (cascade order).
══════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   1. ΤΥΠΟΓΡΑΦΙΚΗ ΚΛΙΜΑΚΑ (≤900: tablet portrait + κινητά)
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --m-display: clamp(40px, 12vw, 60px);   /* Didot display: 45px @375 · 60px @≥500 */
    --m-h1:      clamp(32px, 9vw, 52px);    /* H1 σελίδων:    34px @375 · 52px @≥578 */
    --m-h3:      clamp(24px, 6.9vw, 30px);  /* τίτλοι καρτών: 26px @375 */
    --m-lead:    24px;                      /* υπότιτλοι / intro (uppercase) — 24px (ζητήθηκε 2026-09-14) */
    --m-body:    17px;                      /* κείμενο ανάγνωσης */
    --m-small:   14px;                      /* ελάχιστο επιτρεπτό μέγεθος */
  }

  /* Display τίτλοι (Theano Didot) — μία κλίμακα παντού */
  .hotel-text h2,
  .editorial-title,
  .business-title,
  .landmark-title,
  .gallery-cta__heading,
  .delights-title,
  .meeting-delights-title,
  .form-title,
  .hive-title-main,
  .hive-title-2,
  .hive-sip-stay__title,
  .hive-gym__title {
    font-size: var(--m-display);
    line-height: 1.05;
    white-space: normal;
  }

  /* Hive τίτλος (Aeion Mono — πολύ φαρδιά mono, η λέξη INDUSTRIAL ≈ 10.7em) */
  .hotel-text-hive h2 {
    font-size: clamp(20px, 7vw, 44px);
    line-height: 1.08;
    white-space: normal;
  }

  /* H1 σελίδων (TikTok Sans Expanded/SemiExpanded) */
  .inner-hero-title,
  .experience-title,
  .landmark-subtitle,
  .rooms-title,
  .room-hero__title,
  .breakfastp-title,
  .meeting-title,
  .gallery-title,
  .contact-title,
  .service-title,
  .faq-title,
  .career-title,
  .legal-title {
    font-size: var(--m-h1);
    line-height: 1.12;
  }

  /* Τίτλοι καρτών δωματίων (h3 στη λίστα) */
  .room-title {
    font-size: var(--m-h3);
    line-height: 1.15;
  }

  /* Υπότιτλοι / lead (uppercase) — 18px με άνετο διάστιχο (ήταν 18/22) */
  .hotel-intro p,
  .hotel-text p,
  .hotel-text-hive p,
  .editorial-subtitle,
  .editorial-text,
  .business-subtitle,
  .business-text,
  .breakfast-title,
  .breakfast-subtitle,
  .breakfastp-subtitle,
  .meeting-subtitle,
  .experience-subtitle,
  .landmark-intro,
  .rooms-subtitle,
  .delights-subtitle,
  .meeting-delights-subtitle,
  .contact-subtitle,
  .faq-subtitle,
  .career-intro,
  .inner-hero-subtitle,
  .gallery-cta__label,
  .tl-entry-label,
  .hive-sip-stay__subtitle,
  .hive-sip-stay__text,
  .hive-gym__subtitle,
  .hive-gym__middle p,
  .hive-history-text p {
    font-size: var(--m-lead);
    line-height: 1.3;
  }

  /* Κείμενο ανάγνωσης — 17px/1.5 (ήταν 16/18 σε πολλά σημεία: πολύ σφιχτό) */
  .experience-row--text p,
  .tl-entry-text p,
  .rooms-text,
  .room-description,
  .room-hero__description p,
  .room-features__text p,
  .room-features__list li,
  .breakfastp-text,
  .meeting-specs__intro,
  .meeting-specs__list li,
  .faq-answer p,
  .service-intro p,
  .service-item p,
  .service-item h3,
  .legal-body,
  .legal-body p,
  .events-paragraph,
  .hive-events-details__left li {
    font-size: var(--m-body);
    line-height: 1.5;
  }
  .legal-body,
  .legal-body p { line-height: 1.55; }

  .faq-question {
    font-size: 17px;
    line-height: 1.45;
  }
  .letter-title { font-size: 22px; line-height: 1.2; }

  /* Ελάχιστο 14px — footer, nav, βοηθητικά */
  .footer-col h4,
  .footer-col p,
  .ftc-left p,
  .ftc-left a { font-size: 15px; }
  .footer-col p,
  .ftc-left p { line-height: 1.5; }
  .footer-social,
  .footer-social span,
  .footer-social a,
  .footer-nav a,
  .room-nav-link,
  .recaptcha-text,
  .career-consent span,
  .career-upload__label,
  .career-upload__file,
  .career-upload__btn { font-size: var(--m-small); }
  .footer-credit,
  .footer-copy.right { font-size: 12px; }
  .footer-copy.center { font-size: 11px; }   /* ήταν 9px — δυσανάγνωστο σε κινητό */
  .recaptcha-text { line-height: 1.5; }
}

/* Πεδία φορμών ≥16px: κάτω από 16px το iOS Safari κάνει auto-zoom στο focus */
@media (max-width: 768px) {
  .contact-form input,
  .contact-form textarea,
  .events-form input,
  .events-form textarea {
    font-size: 16px;
  }
}

/* ─────────────────────────────────────────────
   2. ΚΑΤΑΚΟΡΥΦΟΣ ΡΥΘΜΟΣ (≤900)
   Κανόνας: section padding 48–64px · τίτλος→περιεχόμενο 12–16px ·
   κείμενο→κουμπί 28–32px · εικόνα↔εικόνα 24px · block↔block 40px.
   Τα desktop κενά (110–290px) ήταν σχεδιασμένα για ροή 1903px.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {

  /* ── ΑΡΧΙΚΗ ── */
  .hero-scroll { display: none; }                 /* όπως στις εσωτερικές: σε οθόνη αφής δεν έχει νόημα και πατούσε πάνω στο video */
  .aegli-hotel-section { padding: 24px 0 56px; }
  .hotel-intro { margin-bottom: 32px; }
  .hotel-branding { margin-top: 0; margin-bottom: 32px; }
  .hotel-text h2 { margin-bottom: 14px; }
  .hotel-text-hive h2 { margin-bottom: 12px; }
  .hotel-images-row,
  .aegli-section.aegli-hive .hotel-images-row { margin-top: 40px; margin-bottom: 0; }   /* το hive είχε 148px (desktop Figma) */
  .hotel-images { row-gap: 24px; }                /* οι δύο φωτό ακουμπούσαν (0px) */
  .image-exterior { margin-top: 0; }
  .image-interior { margin-bottom: 0; }
  .hotel-cta { margin-top: 32px; }
  .aegli-hive { padding: 56px 0; }

  /* ── AEGLI HOTEL (landing) ── */
  .section-editorial .container { padding: 40px var(--content-gutter) 40px; }
  .editorial-row--top { margin-bottom: 32px; }
  .editorial-title { margin-bottom: 12px; }
  .editorial-row--middle { gap: 32px; }
  .editorial-text { margin-bottom: 24px; }
  .editorial-btn-wrap { padding-top: 8px; }
  .editorial-row--bottom { margin-top: 40px; }
  .section-stay-view { padding-top: 16px; padding-bottom: 16px; }
  .section-stay-view .titles-container { padding-bottom: 32px; }
  .section-stay-view .editorial-btn-wrap { padding-top: 8px; }
  .section-stay-view .editorial-subtitle { line-height: 1.4; }
  .aegli-breakfast { padding: 48px var(--content-gutter); }
  .breakfast-content { margin-top: 40px; }
  .breakfast-subtitle { margin-bottom: 28px; }
  .business-lounge { padding: 56px 0; }
  .business-grid { gap: 32px; margin-top: 0; }
  .business-content { padding-top: 0; }           /* desktop: 110px κάτω από την κορυφή της εικόνας */
  .business-title { margin-bottom: 4px; }         /* desktop -20px: σε 45px τίτλο επικάλυπτε τον υπότιτλο */
  .business-subtitle { margin-bottom: 28px; }
  .business-text { margin-bottom: 28px; }
  .business-button-wrapper { margin-top: 0; }     /* desktop 115px + 60px = 175px κενό πριν το κουμπί */

  /* ── ΙΣΤΟΡΙΑ ── */
  .aegli-experience { padding: 48px var(--content-gutter) 64px; }
  .experience-row--header { margin-bottom: 40px; }
  .experience-title { margin-bottom: 12px; }
  .experience-row--images { margin: 32px 0; row-gap: 24px; }
  .experience-row--text p { margin-bottom: 20px; }
  .landmark-section { padding: 56px 0; }
  .landmark-header { margin-bottom: 40px; }
  .landmark-title { margin-bottom: 20px; }
  .landmark-subtitle { margin-bottom: 10px; }
  .tl-entry { margin-bottom: 32px; }
  .tl-entry-content { padding: 32px var(--content-gutter) 40px; }   /* ήταν 50px 30px· το .tl-entry είναι full-bleed, άρα το gutter μπαίνει εδώ */
  .tl-entry-media { margin-left: var(--content-gutter); width: calc(100% - 2 * var(--content-gutter)); }   /* η φωτό στο ίδιο gutter (ήταν 2% ≈ 8px) */
  .tl-entry-label { margin-bottom: 24px; }
  .tl-rule { margin-bottom: 20px; }

  /* ── ΔΙΑΜΟΝΗ (λίστα) ── */
  .rooms-title { margin-bottom: 20px; }
  .rooms-subtitle { margin-bottom: 12px; }
  .room-item { padding: 40px 0; gap: 20px; }
  .room-title { margin-bottom: 12px; }
  .room-description { margin-bottom: 28px; }
  .gallery-cta { padding: 96px 0; }
  .gallery-cta__arrow { margin-top: 40px; }

  /* ── ΔΩΜΑΤΙΟ ── */
  .room-hero { padding: calc(var(--header-height) + 40px) var(--content-gutter) 0; }   /* ο τίτλος καθόταν 8px κάτω από το σταθερό header */
  .room-hero__description { padding: 24px 0 32px; }
  .room-features { padding: 32px var(--content-gutter) 40px; }
  .room-features__inner { gap: 28px; }
  .room-features__title { margin-bottom: 20px; }
  .room-gallery__row--double { gap: 24px; margin-bottom: 24px; }
  .room-gallery__row--single { margin-bottom: 24px; }
  .room-gallery__row--reversed { padding: 24px 0 48px; }
  .room-gallery-nav { padding: 48px var(--content-gutter); gap: 16px; }

  /* ── ΠΡΩΙΝΟ-ΚΑΦΕ / ΣΥΝΕΔΡΙΑ ── */
  .breakfast-delights { padding: 48px 0; }
  .breakfast-delights__image { margin-bottom: 40px; }
  .delights-title,
  .meeting-delights-title { margin-bottom: 12px; }
  .breakfast-gallery,
  .meeting-gallery { padding-bottom: 64px; }
  .breakfast-gallery__row--top,
  .meeting-gallery__row--top { gap: 24px; margin-bottom: 24px; }
  .meeting-lounge { padding-top: 24px; }
  .meeting-lounge__grid { gap: 32px; }
  .meeting-specs__intro { margin: 0 0 20px; }
  .meeting-specs__list { margin: 0; }
  .meeting-delights { padding: 48px 0 32px; }

  /* ── GALLERY ── */
  .gallery-section { padding: calc(var(--header-height) + 40px) var(--content-gutter) 64px; }
  .gallery-title { margin-bottom: 24px; }
  .gallery-grid,
  .gallery-col-page { gap: 24px; }

  /* ── ΕΠΙΚΟΙΝΩΝΙΑ ── */
  .contact-info-section { padding: 24px 0 48px; }
  .contact-text { margin-top: 24px; }
  .contact-directions { margin-top: 24px; }
  .contact-form-section { padding: 0 0 64px; }
  .form-title { margin-bottom: 24px; }
  .form-row { gap: 12px; margin-bottom: 12px; }
  .contact-form textarea { margin-top: 12px; }
  .submit-arrow { margin-bottom: 0; }             /* το βέλος είναι κρυφό (img display:none) αλλά κρατούσε 50px */
  .contact-submit-col { gap: 16px; margin-top: 32px; }
  .recaptcha-text { margin-top: 16px; margin-bottom: 0; }

  /* ── FAQ / ΚΑΡΙΕΡΑ / ΝΟΜΙΚΑ / ΥΠΗΡΕΣΙΕΣ ── */
  .faq-section,
  .career-section,
  .legal-section { padding: calc(var(--header-height) + 40px) 0 64px; }
  .faq-subtitle { margin-bottom: 32px; }
  .faq-question { padding: 22px 0; gap: 20px; }
  .faq-answer__inner { padding: 0 0 24px 45px; }
  .faq-last-subtitle { padding: 48px 0; }
  .career-intro { margin-bottom: 40px; }
  .career-grid { gap: 32px; }
  .career-upload__control { margin-bottom: 24px; }
  .career-side .contact-submit-col { margin-top: 24px; }
  .service-directory { padding: calc(var(--header-height) + 40px) var(--content-gutter) 64px; }   /* ήταν 60px: ο τίτλος κρυβόταν πίσω από το header */
  .service-intro { margin-bottom: 40px; }
  .service-intro p.service-contact { margin-top: 24px; }
  .service-letter { margin-bottom: 40px; }
  .letter-title { margin-bottom: 12px; }
  .service-item { margin-bottom: 16px; }

  /* ── FOOTER ── */
  .footer-nav { gap: 12px 20px; padding: 28px 0; }
  .footer-bottom { padding: 20px 0 28px; gap: 8px; }
  .footer-copy.center { gap: 2px 8px; }
  .footer-copy.center p { padding: 0; }
}

/* ─────────────────────────────────────────────
   3. ΚΙΝΗΤΑ ≤768 — footer, μικρότερα εσωτερικά κενά
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .footer-col { padding-top: 40px; padding-bottom: 40px; }
  .footer-top--centered { padding-top: 48px; padding-bottom: 32px; gap: 28px; }
  .footer-top-btn { top: 16px; }
  .gallery-cta { padding: 80px 0; }
}

/* ─────────────────────────────────────────────
   4. ΣΤΕΝΑ ΚΙΝΗΤΑ ≤480
   ───────────────────────────────────────────── */
@media (max-width: 480px) {
  .aegli-hotel-section { padding: 20px 0 48px; }
  .aegli-hive { padding: 48px 0; }
  .business-lounge { padding: 48px 0; }
  .landmark-section { padding: 48px 0; }
  .room-item { padding: 32px 0; }
  .room-gallery-nav { padding: 40px var(--content-gutter); gap: 12px; }
  .room-nav-link { font-size: 14px; }             /* ήταν 12px */
  .footer-nav { padding: 24px 0; }
}


/* ─────────────────────────────────────────────
   5. STICKY LOGO ΣΤΟ ΚΙΝΗΤΟ (≤900) — Αρχική: Hotel + Hive
   Όπως στο desktop (και όπως το «(8)» του the8project): το logo
   καρφώνεται στο κέντρο της οθόνης όσο περνούν οι εικόνες.
   Το ≤1200 rule το έκανε static· εδώ επανέρχεται.
   Η σειρά ΔΕΝ αλλάζει: intro → logo → τίτλος/υπότιτλος → εικόνες → κουμπί.
   • Το μπλοκ τίτλου/υπότιτλου έχει συμπαγές φόντο (χρώμα ενότητας) και
     z-index πάνω από το logo: καθώς ανεβαίνει «σκεπάζει» το καρφωμένο
     logo αντί να μπλέκονται τα γράμματα, και το logo ξαναφαίνεται όταν
     έρθουν οι εικόνες (που περνούν από κάτω του).
   • Το κουμπί μένει τελευταίο αλλά εκτός ροής (absolute στο κάτω μέρος
     της ενότητας, όπως στο desktop): έτσι το sticky τελειώνει με την
     τελευταία εικόνα και δεν πέφτει ποτέ πάνω στο CTA. (Το Safari
     αγνοεί τα margins του sticky ως όριο, οπότε margin-bottom δεν αρκεί.)
     Η ενότητα κρατά χώρο για το κουμπί με padding-bottom.
   • Οι εικόνες γίνονται 78% με εναλλαγή δεξιά/αριστερά και μικρή
     κατακόρυφη επικάλυψη (κολάζ του reference) ώστε το logo να κάθεται
     στο κενό τους και όχι πάνω σε ολόκληρη φωτογραφία.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .aegli-hotel-section,
  .aegli-hive {
    position: relative;
    padding-bottom: 138px;           /* 48px τέλος + 42px κουμπί + 48px κενό από την τελευταία εικόνα */
  }

  .hotel-branding {
    position: sticky;
    top: calc(50vh - 90px);          /* logo 180px → κέντρο οθόνης */
    z-index: 2;
    pointer-events: none;
    margin: 0 0 32px;
    text-align: center;
  }

  /* Τίτλος + υπότιτλος: συμπαγές μπλοκ που περνάει ΠΑΝΩ από το logo */
  .hotel-text-row {
    position: relative;
    z-index: 3;
    margin-bottom: 40px;
    padding: 8px 0;
  }
  .aegli-hotel-section .hotel-text-row { background: var(--page-bg, #f0f0f0); }   /* ακολουθεί το τρέχον χρώμα της σελίδας (scroll bg) */
  .aegli-hive .hotel-text-row { background: var(--page-bg, #d0beb0); }
  .hotel-text-row { transition: background-color 0.9s var(--anim-ease); }

  /* Εικόνες: το row δεν είναι πλέον positioned ώστε το absolute κουμπί
     να αγκυρώνεται στην ενότητα, όχι στο row */
  .hotel-images-row,
  .aegli-section.aegli-hive .hotel-images-row { position: static; margin: 0; }

  /* Κουμπί: τελευταίο, κάτω από τις εικόνες, εκτός ροής του sticky container */
  .hotel-cta {
    position: absolute;
    left: var(--content-gutter);
    right: var(--content-gutter);
    bottom: 48px;
    margin: 0;
    text-align: center;
    z-index: 3;
  }

  /* Κολάζ εικόνων: 78% πλάτος, εναλλάξ δεξιά/αριστερά, 32px επικάλυψη */
  .hotel-images { row-gap: 0; width: 100%; }
  .hotel-images .image { max-width: 100%; }
  .image-exterior { width: 78%; justify-self: end;   margin: 0; }
  .image-interior { width: 78%; justify-self: start; margin: -32px 0 0; }
}
@media (max-width: 768px) {
  .hotel-branding { top: calc(50vh - 80px); }   /* logo 160px */
}
@media (max-width: 480px) {
  .hotel-branding { top: calc(50vh - 70px); }   /* logo 140px */
  .aegli-hotel-section { padding-bottom: 130px; }   /* 40 + 42 + 48 */
  .aegli-hive { padding-bottom: 130px; }
}


/* ─────────────────────────────────────────────
   6. ΕΥΘΥΓΡΑΜΜΙΣΗ ΜΕ ΤΟ REFERENCE (the8project @375) — ≤900
   Μόνο μεγέθη, καμία αλλαγή σε font-family.
   • Υπότιτλοι (σύντομοι, 1–4 γραμμές): 18 → 22–24px / 1.3
     (reference H4 24/28 · H3 28/32). Οι ΜΑΚΡΙΕΣ uppercase παράγραφοι
     (editorial-text, business-text, breakfast-subtitle, landmark-intro,
     career-intro, hive κείμενα) μένουν 18px — στα 22px θα έδιναν
     4–5 λέξεις τη γραμμή με τη φαρδιά TikTok Sans.
   • H1 σελίδων: 34 → ~38px (reference hero H1 40/48).
   • Κουμπιά: 42 → 54px ύψος, auto πλάτος (reference 60px / auto).
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  :root {
    --m-h1:   clamp(30px, 9.6vw, 56px);    /* 36px @375 · 34.5px @360 · 30.7px @320 — η λέξη ΣΥΝΕΔΡΙΑΣΕΩΝ (12 χαρ. Expanded) δεν χωρά πάνω από ~36px στα 335px */
    --m-sub:  24px;                        /* ίδιο με --m-lead ώστε οι σύντομοι υπότιτλοι να μην είναι μικρότεροι από τις παραγράφους */
  }

  /* Υπότιτλοι / σύντομα statements */
  .hotel-intro p,
  .hotel-text p,
  .hotel-text-hive p,
  .editorial-subtitle,
  .business-subtitle,
  .breakfast-title,
  .breakfastp-subtitle,
  .meeting-subtitle,
  .experience-subtitle,
  .rooms-subtitle,
  .delights-subtitle,
  .meeting-delights-subtitle,
  .contact-subtitle,
  .faq-subtitle,
  .inner-hero-subtitle,
  .gallery-cta__label,
  .tl-entry-label,
  .hive-sip-stay__subtitle,
  .hive-gym__subtitle {
    font-size: var(--m-sub);
    line-height: 1.3;
  }

  /* Κουμπιά: 54px ύψος, auto πλάτος, οριζόντιο padding 28px */
  .outline-btn-b,
  .contact-btn {
    display: inline-block;
    width: auto;
    min-width: 0;
    max-width: none;
    padding: 13px 28px;          /* 26 line + 26 + 2 border = 54px */
  }
  .outline-btn {
    display: inline-flex;
    width: auto;
    min-width: 0;
    max-width: none;
    min-height: 54px;
    padding: 0.24em 28px 0;
  }
  .btn-outline,
  .room-btn,
  .submit-btn,
  .breakfast-btn,
  .hive-btn {
    display: inline-block;
    width: auto;
    min-width: 0;
    max-width: none;
    font-size: 16px;
    line-height: 30px;
    padding: 11px 28px;          /* 30 + 22 + 2 border = 54px */
  }
  /* Με auto πλάτος το κουμπί στοιχίζεται αριστερά, κάτω από το κείμενο (όπως στο reference) */
  .hotel-cta { text-align: left; }
}

/* ─────────────────────────────────────────────
   7. HERO VIDEO ΣΤΟ ΚΙΝΗΤΟ/TABLET (≤900) — full width
   Το video πιάνει όλο το πλάτος (χωρίς τα πλαϊνά 20px), κρατά κενό
   24px πάνω (κάτω από το header) και 24px κάτω, και το hero μένει
   ακριβώς 100vh. Με svh όπου υποστηρίζεται, ώστε στο iOS Safari το
   κάτω κενό να είναι ορατό και με ανοιχτή τη γραμμή διεύθυνσης.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .hero { height: 100vh; }
  .hero-inner { padding: 24px 0; }
  .hero-media {
    max-width: none;
    width: 100%;
    height: calc(100vh - var(--header-height) - 48px);
  }
  @supports (height: 100svh) {
    .hero { height: 100svh; }
    .hero-media { height: calc(100svh - var(--header-height) - 48px); }
  }
}

/* ─────────────────────────────────────────────
   8. TIMELINE ΙΣΤΟΡΙΑΣ (≤900): οι χρονολογίες κόβονταν
   Η χρονολογία (εικόνα Didot) κάθεται 12.46% ΠΑΝΩ από τη φωτό
   (Figma). Στο κινητό το .tl-entry-img είχε σταθερό ύψος (55vw,
   min 260px) + overflow:hidden, οπότε σε ψηλότερες φωτό (1938) η
   χρονολογία έβγαινε από το κουτί και κοβόταν. Τώρα το κουτί
   παίρνει το ύψος της φωτό, κρατά 56px πάνω για τη χρονολογία
   και δεν κόβει τίποτα.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-entry-img {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 56px 0 0;
    align-items: flex-start;
  }
  .tl-entry:last-child .tl-entry-img { padding-top: 56px; }   /* το παλιό last-child rule έδινε 50px */
  .tl-entry { overflow: visible; }
}

/* ─────────────────────────────────────────────
   9. OVERLAY MENU ΑΡΧΙΚΗΣ (≤768): μικρότερα λογότυπα
   Τα Hotel/Hive λογότυπα έφταναν 170px ύψος (22vh) — πολύ μεγάλα
   στο κινητό. Τώρα ~105px στα 812px ύψος, με μικρότερο κενό.
   ───────────────────────────────────────────── */
@media (max-width: 768px) {
  .menu-content--logos > ul { gap: 56px; }
  .menu-logo { height: clamp(72px, 13vh, 110px); width: auto; }
}

/* ─────────────────────────────────────────────
   10. /aegli-hotel/ (≤900): οι μεγάλες uppercase παράγραφοι στα 24px
   (ζητήθηκε ρητά — editorial κείμενα, υπότιτλος πρωινού, business lounge)
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .editorial-text,
  .breakfast-subtitle,
  .business-text {
    font-size: 24px;
    line-height: 1.3;
  }
}

/* ─────────────────────────────────────────────
   11. /ksenodoxeio/ (≤900): οι uppercase παράγραφοι στα 24px
   (όπως στο /aegli-hotel/ — υπότιτλος εμπειρίας, εισαγωγή Volos Landmark)
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .experience-subtitle,
  .landmark-intro {
    font-size: 24px;
    line-height: 1.3;
  }
}

/* ─────────────────────────────────────────────
   12. ΕΠΙΚΟΙΝΩΝΙΑ (≤900): αριστερή στοίχιση κουμπιών
   GET DIRECTIONS και βέλος + ΑΠΟΣΤΟΛΗ ήταν κεντραρισμένα (desktop
   κεντράρισμα στη δεξιά στήλη). Στο κινητό όλα αριστερά, όπως το κείμενο.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .contact-directions { text-align: left; }
  .contact-submit-col { align-items: flex-start; }
  .submit-arrow { margin-left: 0; }
}

/* ─────────────────────────────────────────────
   13. /aegli-hotel/ ΠΡΩΙΝΟ (≤900): η κεντρική φωτό στο 70% (κεντραρισμένη)
   ώστε να φαίνεται το marquee κείμενο δεξιά-αριστερά της, όπως στο desktop.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .breakfast-image img { width: 70%; }
}

/* ─────────────────────────────────────────────
   14. /aegli-hotel/ ΠΡΩΙΝΟ (≤900): το marquee στα 2/3 του ύψους της φωτό
   Στο desktop το κείμενο κάθεται στο 40% του ΟΛΟΥ section. Στο κινητό
   το section είναι ψηλό (φωτό + κείμενο + κουμπί) και το 40% έπεφτε
   κάτω από τη φωτό. Το section γίνεται grid, φωτό και marquee μοιράζονται
   το 1ο κελί, και το marquee (absolute) παίρνει ως containing block το
   κελί της φωτό → top 56% = ίδια σχετική θέση με το desktop (μετρημένο),
   όποια κι αν είναι η αναλογία της εικόνας.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .aegli-breakfast {
    display: grid;
    grid-template-columns: 100%;
    grid-template-rows: auto auto;   /* ΡΗΤΕΣ γραμμές: αλλιώς για absolute παιδί το grid-row:1 φτάνει ως το τέλος του container */
  }
  .breakfast-image   { grid-row: 1 / 2; grid-column: 1 / 2; }
  .breakfast-content { grid-row: 2 / 3; grid-column: 1 / 2; }
  .breakfast-bg-title {
    grid-row: 1 / 2;
    grid-column: 1 / 2;
    position: absolute;
    top: 56%;                                  /* ίδια σχετική θέση με το desktop: κέντρο marquee στο 56% του ύψους της φωτό */
    left: calc(-1 * var(--content-gutter));   /* full-bleed παρά το gutter του section */
    width: 100vw;
    transform: translateY(-50%);
  }
}

/* ─────────────────────────────────────────────
   15. /ksenodoxeio/ (≤900): ενιαίος ρυθμός αποστάσεων
   Μετρημένα πριν: τίτλος→υπότιτλος 28 · υπότιτλος→εικόνες 19 ·
   εικόνες→κείμενο 23 · κείμενο→Landmark 102 · Landmark τίτλος→υπότιτλος 52
   αλλά υπότιτλος→εισαγωγή -6 (επικάλυψη) · εισαγωγή→1η φωτό 96.
   Ρυθμός: τίτλος→υπότιτλος 16 · block→block 40 · section 48/48.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .aegli-experience { padding: 56px 0 48px; }   /* ΟΧΙ πλαϊνό padding: το gutter το δίνει ήδη ο εσωτερικός .container (20px) — αλλιώς διπλό gutter 40px */
  .experience-title { margin-bottom: 16px; }
  .experience-subtitle { margin: 0; }
  .experience-row--header { margin-bottom: 40px; }
  .experience-row--images { margin: 0 0 40px; }
  .experience-row--text p { margin-bottom: 20px; }
  .experience-row--text p:last-child { margin-bottom: 0; }

  .landmark-section { padding: 48px 0 32px; }
  .landmark-header { margin-bottom: 24px; }
  .landmark-title { margin-bottom: 16px; }
  .landmark-subtitle { margin: 0 0 16px; }
  .landmark-intro { margin: 0; }

  .tl-entry { margin-bottom: 16px; }
  .tl-entry-content { padding: 32px var(--content-gutter) 32px; }
  .tl-entry:last-child .tl-entry-content { padding-top: 32px; padding-bottom: 32px; }
}

/* ─────────────────────────────────────────────
   16. TIMELINE ΙΣΤΟΡΙΑΣ (≤900): ίδια λειτουργία με το desktop
   Κάθε entry καρφώνεται (sticky) σε ύψος οθόνης και το επόμενο το
   σκεπάζει με το scroll (z-index από το template), ενώ το JS
   (initTimelineReveal) κάνει το stagger reveal χρονολογίας/τίτλου/
   κειμένου και το ελαφρύ scale-down — τρέχει ήδη και στο κινητό.
   Μονόστηλη διάταξη: φωτό πάνω, κείμενο κάτω. Το ύψος είναι 100svh
   ώστε να μετρά η πραγματικά ορατή οθόνη στο iOS. Το κείμενο του
   timeline γίνεται 16px/1.45 για να χωρά και σε κοντές οθόνες· αν
   παρόλα αυτά περισσεύει, η στήλη κειμένου κάνει εσωτερικό scroll.
   ───────────────────────────────────────────── */
@media (max-width: 900px) {
  .tl-entry {
    position: sticky;
    top: 0;
    height: 100vh;
    min-height: 0;
    margin-bottom: 0;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
  }
  .tl-entry:last-child { height: 100vh; min-height: 0; }   /* το desktop last-child rule το άφηνε auto (610px) και δεν σκέπαζε πλήρως το προηγούμενο */
  @supports (height: 100svh) {
    .tl-entry,
    .tl-entry:last-child { height: 100svh; }
  }
  .tl-entry-img {
    height: auto;
    min-height: 0;
    overflow: visible;
    padding: 48px 0 0;
    align-items: flex-start;
  }
  .tl-entry:last-child .tl-entry-img { padding: 48px 0 0; }
  .tl-entry-content,
  .tl-entry:last-child .tl-entry-content {
    height: auto;
    min-height: 0;
    padding: 24px var(--content-gutter) 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .tl-entry-label { margin-bottom: 20px; }
  .tl-rule { margin-bottom: 16px; }
  .tl-entry-text p { font-size: 16px; line-height: 1.45; }
  .tl-entry-text p:last-child { margin-bottom: 0; }
  .landmark-section { padding-bottom: 0; }   /* το τελευταίο entry τελειώνει ακριβώς στο footer */
}

/* ── 17. Buttons ≤900: όλα αριστερά, όπως τα κείμενα (2026-09-15) ──
   Τα μόνα δύο που έμεναν κεντραρισμένα στο /aegli-hotel/:
   «ΠΡΩΙΝΟ & ΚΑΦΕΣ» (το .breakfast-content κληρονομεί text-align:center)
   και «ΣΥΝΕΔΡΙΑ» (.business-button-wrapper είναι flex με justify center). */
@media (max-width: 900px) {
  .breakfast-btn { display: block; width: max-content; max-width: 100%; margin-left: 0; margin-right: 0; }
  .business-button-wrapper { justify-content: flex-start; }
}