/* ============================================================
   Homepage section components — Swiss Holiday Co
   Class names mirror the Figma node names (section__hero-home, nav-desktop…)
   ============================================================ */

/* ---------- Top navigation (overlays the hero) ------------- */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 10;
  background: rgba(255,255,255,.10);   /* v8 frosted bar */
  backdrop-filter: blur(2px);
}
.site-header > .container { padding-block: 12px; }
.nav-desktop__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 88px;   /* v8 logo height; bar = 88 + 12*2 = 112 */
}
.nav-desktop__list {
  display: flex;
  align-items: center;
  gap: var(--space-8);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-desktop__list a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 13px;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: var(--fw-medium);
  color: var(--text-inverse);
  text-shadow: 0 1px 3px rgba(0,0,0,.25);
}
.nav-desktop__list a:hover { opacity: .85; }
.nav-caret { width: 14px; height: auto; flex: 0 0 auto; opacity: .95; transition: transform .2s ease; }
.has-menu:hover .nav-caret, .has-menu:focus-within .nav-caret, .has-menu.is-open .nav-caret { transform: rotate(180deg); }
.nav-user { width: 20px; height: 20px; flex: 0 0 auto; }

/* ---------- Full-width mega-menu -------------------------- */
.has-menu > a { cursor: pointer; }
.nav-acc__body { display: none; }   /* mobile-only accordion clone; shown via ≤900 rules */
.nav-brochure { display: none; }    /* mobile-menu-only brochure card */
.mega-wrap {
  position: absolute; top: 100%; left: 0; right: 0; z-index: 40;
  padding: 0 var(--container-pad);
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  pointer-events: none;
}
#siteHeader.mega-open .mega-wrap { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
.mega__panel {
  width: 100%; max-width: calc(var(--container-max) - var(--container-pad) * 2);
  margin: 0 auto;
  display: flex; align-items: stretch;
  background: #fff; border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: 0 24px 48px rgba(0,20,40,.22);
  overflow: hidden;
}
/* Left promo panel */
.mega__feature { width: 300px; flex: 0 0 300px; background: var(--teal-50); padding: var(--space-32); display: flex; flex-direction: column; gap: var(--space-16); }
.mega__feature-img { border-radius: var(--radius-lg); overflow: hidden; }
.mega__feature-img img { width: 100%; height: 148px; object-fit: cover; display: block; }
.mega__feature-text strong { display: block; font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-semibold); color: #4d4d48; margin-bottom: var(--space-2); }
.mega__feature-text p { margin: 0; font-size: 16px; line-height: 24px; color: var(--neutral-500); }
.mega__actions { display: flex; flex-direction: column; gap: var(--space-8); margin-top: auto; }
.mega__btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 44px; background: var(--navy-500); color: #fff; border-radius: var(--radius-sm); font-family: var(--font-body); font-weight: var(--fw-medium); font-size: 16px; }
.mega__btn:hover { background: var(--navy-700); }
.mega__btn svg, .mega__btn-ic { width: 22px; height: 22px; flex: 0 0 auto; }
/* Center columns */
.mega__cols-area { flex: 1 1 auto; padding: var(--space-24) var(--space-32); min-width: 0; }
.mega__cols { display: none; gap: var(--space-32); }
.mega__cols.is-active { display: flex; }
.mega__col { flex: 1 1 0; min-width: 0; }
.mega__col-title { font-family: var(--font-body); font-size: 16px; font-weight: var(--fw-semibold); color: #4d4d48; margin: 0 0 var(--space-8); }
.mega__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.mega__col a { font-family: var(--font-body); font-size: 15px; line-height: 22px; font-weight: var(--fw-regular); color: var(--neutral-600); text-shadow: none; }
.mega__col a:hover { color: var(--teal-600); opacity: 1; }
.mega__viewall { font-weight: var(--fw-semibold); color: #4d4d48 !important; }
/* Right featured card */
.mega__card { flex: 0 0 200px; display: flex; flex-direction: column; gap: var(--space-8); padding: var(--space-24) var(--space-24) var(--space-24) 0; align-self: flex-start; }
.mega__card-img { width: 100%; height: 148px; object-fit: cover; border-radius: var(--radius-lg); }
.mega__card-title { font-family: var(--font-display); font-size: 17px; line-height: 1.3; font-weight: var(--fw-semibold); color: var(--navy-500); margin-top: var(--space-4); }
.mega__card-sub { font-size: 14px; line-height: 20px; color: var(--neutral-600); }
.mega__card-btn { margin-top: var(--space-4); display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8); height: 40px; background: var(--teal-500); color: #fff; border-radius: var(--radius-sm); font-size: 14px; font-weight: var(--fw-semibold); }
.mega__card-btn svg { width: 18px; height: 18px; }
.mega__card:hover .mega__card-btn { background: var(--teal-600); }

/* Brand logo — Richard's real SVG (logo-default light / logo-inverse dark) */
.brand__logo { height: 66px; width: auto; display: block; }
.brand__logo--footer { height: 72px; }
.brand__logo--default { display: none; }   /* hero uses inverse (white) to match nav links */

/* Brand lockup (legacy CSS recreation — retained for fallback) */
.brand { display: flex; align-items: center; gap: 12px; }
.brand__flag {
  width: 46px; height: 46px;
  background: var(--red-500);
  border-radius: 8px;
  position: relative;
  flex: 0 0 auto;
}
.brand__flag::before,
.brand__flag::after {
  content: ""; position: absolute; background: #fff; border-radius: 1px;
}
.brand__flag::before { width: 22px; height: 7px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.brand__flag::after  { width: 7px; height: 22px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.brand__word { line-height: 1; }
.brand__the    { font-family: var(--font-display); font-size: 13px; color: var(--navy-500); display: block; margin-bottom: 1px; }
.brand__swiss  { font-family: var(--font-display); font-size: 30px; font-weight: 600; color: var(--navy-500); display: block; letter-spacing: .2px; line-height: .95; }
.brand__co     { font-family: var(--font-display); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--navy-500); display: block; margin-top: 2px; }

.nav-desktop__right { display: flex; align-items: center; gap: var(--space-24); }

/* ---------- Hero ------------------------------------------- */
.section__hero-home {
  position: relative;
  height: var(--hero-height);
  overflow: hidden;
  isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 1s ease;
}
.hero__slide.is-active { opacity: 1; }
.section__overlay {
  position: absolute; inset: 0;
  background: var(--hero-scrim);
  z-index: 1;
}
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 88px;
  gap: var(--space-24);
}
.hero__title {
  color: var(--text-inverse);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  font-weight: var(--fw-medium);
  max-width: none;
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}
.hero__cta { align-self: flex-start; }

/* hero pagination dots — hidden in v8 (auto-rotate, no visible controls) */
.hero__dots { display: none; gap: 10px; position: relative; z-index: 2; }
.hero__dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(255,255,255,.5); border: 0; }
.hero__dot.is-active { background: #fff; width: 28px; }