/* ============================================================
   HOME SCROLL (demo) — η σημερινή αρχική, προσαρμοσμένη:
   1) brand links δεξιά/αριστερά από τη λωρίδα video στο hero
   2) sticky brand nav κάτω από το header (Hotel | Hive)
   3) μικρότερα κάθετα κενά ώστε το Hive να έρχεται νωρίτερα
   Φορτώνεται μόνο από το template home-scroll.php.
   ============================================================ */

/* ── 1. Hero brand links ───────────────────────────────────── */
.hero-brand {
  position: fixed;            /* μένει σταθερό όσο κυλά το hero */
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;                 /* πάνω από τα sections, κάτω από header/menu */
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Ποτέ πάνω στη λωρίδα video (691px, κεντραρισμένη): μισό πλάτος μείον μισή λωρίδα μείον 24px αέρα */
  max-width: min(380px, calc(50% - 345.5px - 24px));
  text-decoration: none;
  color: var(--color-dark);
  animation: hero-brand-in var(--anim-base) var(--anim-ease) 0.6s backwards; /* CSS αντί για GSAP fade-in: ορατά και χωρίς ticker */
  transition: opacity 0.6s var(--anim-ease), transform 0.6s var(--anim-ease);
}
/* Fade out μόλις το επόμενο section φτάσει στο ύψος τους (JS: body.hero-brands-hidden) */
body.hero-brands-hidden .hero-brand,
body.menu-open .hero-brand {
  opacity: 0;
  pointer-events: none;
  transform: translateY(calc(-50% - 20px));
}
@keyframes hero-brand-in {
  from { opacity: 0; transform: translateY(calc(-50% + 16px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}
.hero-brand--hotel { left: var(--content-gutter); align-items: flex-start; text-align: left; }
.hero-brand--hive  { right: var(--content-gutter); align-items: flex-end; text-align: right; }

.hero-brand__name {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-gray);
  transition: color var(--anim-fast) var(--anim-ease);
}
.hero-brand__title {
  font-size: clamp(28px, calc(2.6 * var(--vw)), 44px);
  line-height: 1.05;
  text-transform: uppercase;
}
.hero-brand__title--hotel { font-family: 'Theano Didot', serif; font-weight: 400; }
.hero-brand__title--hive  { font-family: 'Aeion Mono', monospace; font-weight: 300; }
.hero-brand__more {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: opacity var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease);
}
.hero-brand:hover .hero-brand__name { color: var(--color-dark); }
.hero-brand:hover .hero-brand__more { transform: translateY(3px); }

/* Thumbnail κτιρίου: μόνο στο κινητό (εκεί δεν υπάρχει hover) */
.hero-brand__thumb { display: none; }

/* Hover στα brand links → η λωρίδα δείχνει τη φωτό του κτιρίου (crossfade πάνω από το video) */
.home-scroll .hero-media { position: relative; }
.hero-media__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.7s var(--anim-ease);
  pointer-events: none;
}
.hero-brand--hotel:hover ~ .hero-media .hero-media__photo--hotel,
.hero-brand--hive:hover  ~ .hero-media .hero-media__photo--hive { opacity: 1; }

/* ── 2. Sticky brand nav ───────────────────────────────────── */
.brand-nav {
  position: fixed;
  top: var(--header-height);
  left: 0;
  right: 0;
  z-index: 900;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 36px;
  height: 60px;
  /* Glass bar */
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 8px 24px rgba(0, 14, 31, 0.08);
  pointer-events: none;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity var(--anim-fast) var(--anim-ease), transform var(--anim-fast) var(--anim-ease);
}
body.brand-nav-visible .brand-nav { opacity: 1; transform: none; pointer-events: auto; }
body.menu-open .brand-nav { opacity: 0; pointer-events: none; }

.brand-nav__link {
  font-family: 'TikTok Sans 18pt SemiExpanded', sans-serif;
  font-size: 18px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--color-gray);
  padding: 8px 0 6px;
  border-bottom: 1px solid transparent;
  transition: color var(--anim-fast) var(--anim-ease), border-color var(--anim-fast) var(--anim-ease);
}
.brand-nav__link:hover,
.brand-nav__link.is-active { color: var(--color-dark); border-bottom-color: var(--color-dark); }
.brand-nav__divider { width: 36px; height: 1px; background: var(--color-gray); }

/* Anchor targets: να σταματά κάτω από header + brand nav */
.home-scroll .aegli-hotel-section,
.home-scroll .aegli-hive { scroll-margin-top: calc(var(--header-height) + 60px); }

/* ── 3. Σφίξιμο κάθετων κενών (τιμές Figma → demo) ───────── */
.home-scroll .hotel-intro            { margin-bottom: 96px; }   /* 246 */
.home-scroll .hotel-branding         { margin-bottom: 96px; }   /* 139 */
.home-scroll .hotel-images-row       { margin-top: 96px; }      /* 198 */
.home-scroll .image-exterior         { margin-top: 240px; }     /* 659 */
.home-scroll .image-interior         { margin-bottom: 96px; }   /* 160 */
.home-scroll .aegli-hotel-section    { padding-bottom: 96px; }  /* 76 — λίγο αέρας πριν το χρώμα αλλάξει */
.home-scroll .aegli-hive             { padding-top: 140px; }    /* 344 */
.home-scroll .aegli-hive .hotel-images-row { margin-top: 96px; }/* 148 */

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hero-brand__title { font-size: 24px; }
}

@media (max-width: 900px) {
  /* Στο κινητό τα brand links γίνονται δύο κουμπιά στο κάτω μέρος του hero, πάνω στο video */
  .hero-brand {
    top: auto;
    bottom: 32px;
    transform: none;
    animation-name: hero-brand-in-mobile;
    left: var(--content-gutter);
    max-width: none;
    width: calc(50% - var(--content-gutter) - 4px);
    height: 96px;             /* ίδιο ύψος και στα δύο, ανεξάρτητα από τις γραμμές του τίτλου */
    box-sizing: border-box;
    gap: 4px;
    padding: 12px 14px;
    /* Glass effect: μόνο blur + σκιά, χωρίς φόντο και περίγραμμα */
    background: transparent;
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    backdrop-filter: blur(14px) saturate(140%);
    box-shadow: 0 8px 24px rgba(0, 14, 31, 0.12);
    align-items: flex-start;
    text-align: left;
  }
  @keyframes hero-brand-in-mobile {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: none; }
  }
  .hero-brand--hive { align-items: flex-start; text-align: left; left: auto; right: var(--content-gutter); }
  /* Κινητό: thumbnail αριστερά, κείμενο δεξιά */
  .hero-brand {
    display: grid;
    grid-template-columns: 48px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
    align-content: center;
    padding: 10px 12px 10px 10px;
  }
  .hero-brand__thumb {
    display: block;
    grid-row: 1 / 4;
    width: 48px;
    height: 64px;
    object-fit: cover;
  }
  .hero-brand__name, .hero-brand__title, .hero-brand__more { grid-column: 2; }
  .hero-brand__more { justify-self: start; }
  body.hero-brands-hidden .hero-brand,
  body.menu-open .hero-brand { transform: translateY(16px); }
  .hero-brand__name { font-size: 10px; letter-spacing: 0.08em; white-space: nowrap; }
  .hero-brand__title { font-size: 13px; }
  .hero-brand__more { font-size: 10px; }

  .brand-nav { height: 48px; gap: 24px; }
  .brand-nav__link { font-size: 14px; }
  .home-scroll .aegli-hotel-section,
  .home-scroll .aegli-hive { scroll-margin-top: calc(var(--header-height) + 48px); }

  .home-scroll .hotel-intro      { margin-bottom: 32px; }
  .home-scroll .hotel-branding   { margin-bottom: 32px; }
  .home-scroll .hotel-images-row { margin-top: 40px; }
  .home-scroll .image-exterior   { margin-top: 40px; }
  .home-scroll .image-interior   { margin-bottom: 40px; }
  .home-scroll .aegli-hive       { padding-top: 60px; }
}

/* Κινητό: το sticky λογότυπο του Hive δεν πρέπει να «κολλά» κάτω από τον τίτλο που το καλύπτει.
   Κολλά ακριβώς κάτω από τη μπάρα Hotel | Hive, οπότε στην προσγείωση φαίνεται ολόκληρο. */
@media (max-width: 900px) {
  .home-scroll .aegli-hive .hotel-branding { top: calc(var(--header-height) + 60px + 28px); }
}