/**
 * Landing Hero: entrance reveal + custom date/guest picker that opens Mews.
 * Namespaced (landing-hero / lh-).
 */

.landing-hero{
	--lh-dur: 0.9s;
	--lh-ease: cubic-bezier(.76,0,.24,1);   /* easeInOutQuart: smooth start, graceful settle */
	--lh-ground:#21160d;                     /* dark warm ground the photos emerge from */
	--lh-gold:#b79d60;
	--lh-field:#f6f5f3;
	position:relative;
	height:100vh;
	min-height:600px;
	width:100%;
	/* clip only the x-axis (contains the background reveal + the nowrap headline so
	   there's no horizontal scroll); leave y visible so the desktop date/guest
	   dropdowns can extend below the hero instead of being clipped by overflow:hidden.
	   The background cells (.lh-half) clip their own scaled images, so nothing leaks. */
	overflow-x:clip;
	overflow-y:visible;
	background:var(--lh-ground);
	color:#f6f5f3;
	font-family:'Jost',system-ui,sans-serif;
}
.landing-hero *{box-sizing:border-box}

/* ---------- BACKGROUND ---------- */
.landing-hero__bg{position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr}
.landing-hero__bg--full{grid-template-columns:1fr}

.lh-half{position:relative;overflow:hidden;background:var(--lh-ground)}   /* grid cells = the dark warm ground; the photo settles in over it */

.lh-half__img{
	position:absolute;inset:0;                /* photo doesn't slide; it settles out of a slight zoom while the mask wipes */
	background-size:cover;
	background-position:center center;
	will-change:clip-path,transform;
	clip-path:inset(0);
	transform:scale(1.08);
	transition:clip-path var(--lh-dur) var(--lh-ease), transform var(--lh-dur) var(--lh-ease);
}

/* start states: photo fully clipped (cell shows black); the clip wipes open to reveal the still photo.
   Locked: left reveals upward, right reveals downward. */
.lh-half--left  .lh-half__img{clip-path:inset(100% 0 0 0)}
.lh-half--right .lh-half__img{clip-path:inset(0 0 100% 0)}
.lh-half--full  .lh-half__img{clip-path:inset(100% 0 0 0)}

/* settled */
.landing-hero.is-revealed .lh-half__img{clip-path:inset(0);transform:scale(1)}
.landing-hero.is-revealed .lh-half--right .lh-half__img{transition-delay:.10s}   /* slight stagger between the two windows */

.landing-hero__scrim{
	position:absolute;inset:0;pointer-events:none;
	background:linear-gradient(0deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.20) 100%);
}

/* ---------- CONTENT ---------- */
.landing-hero__content{
	position:absolute;left:50%;top:50%;transform:translate(-50%,-46%);
	z-index:5;width:min(880px,92vw);text-align:center;
	display:flex;flex-direction:column;align-items:center;gap:20px;
}

/* brand lockup near the top of the hero (Figma 298:18 sits ~7% from the top); the
   global header is hidden at the top (see below) so the logo stands alone there.
   The shadow keeps the off-white mark legible over the brighter photos. */
.landing-hero__logo{
	position:absolute;left:50%;top:clamp(48px,7vh,80px);transform:translateX(-50%);
	z-index:5;width:clamp(180px,18vw,227px);height:auto;
	filter:drop-shadow(0 2px 14px rgba(0,0,0,.45));
}

/* Sv/Eng language toggle (Figma 298:36), top-right of the hero. The current
   language is the dimmed bordered pill; the other language is the bright link. */
.landing-hero__lang{
	position:absolute;top:clamp(18px,2.4vh,24px);right:clamp(18px,2.5vw,24px);
	z-index:6;display:flex;align-items:center;gap:14px;
	text-shadow:0 1px 6px rgba(0,0,0,.45);
}
.landing-hero__lang-link{
	font-family:'Jost',sans-serif;font-weight:400;font-size:12px;line-height:1;
	color:#f6f5f3;text-decoration:none;
	background:none;border:0;padding:0;cursor:pointer;transition:opacity .2s ease;
}
.landing-hero__lang-link:not(.is-current):hover{opacity:.7}
.landing-hero__lang-link:focus-visible{outline:2px solid #f6f5f3 !important;outline-offset:3px;border-radius:2px}
.landing-hero__lang-link.is-current{
	opacity:.5;border:1px solid #f6f5f3;border-radius:24px;padding:2px 7px;cursor:default;
}

/* Hero "hide navigation" toggle: drop the theme header on pages that opt in.
   Default leaves the theme header untouched. */
body.ms-nav-hidden #site-header{display:none !important}

/* text reveal handled by SplitType + GSAP (see landing-hero.js) */
.landing-hero [data-text-split],
.landing-hero [data-fade-up]{opacity:0}                                          /* FOUC guard until the reveal runs */
.landing-hero [data-text-split] .word{display:inline-block;overflow:hidden;padding-bottom:.14em;margin-bottom:-.14em} /* mask for the per-letter slide-up */
.landing-hero [data-text-split] .char{display:inline-block;will-change:transform}

.landing-hero__eyebrow{font-size:15px;letter-spacing:.04em;color:rgba(255,255,255,.92)}

.landing-hero__headline{
	font-family:'Jost',sans-serif;font-weight:400;
	font-size:clamp(24px,2.5vw,32px);line-height:1.1;letter-spacing:-.03em;white-space:nowrap;   /* Figma 298:24 = Jost 32px / -0.03em */
}

/* ---------- SEARCH BAR ---------- */
.lh-search{
	position:relative;
	display:inline-flex;align-items:stretch;background:var(--lh-field);
	border-radius:100px;padding:0 0 0 32px;gap:24px;
	box-shadow:0 14px 40px rgba(0,0,0,.28);
	color:#2a190c;
	opacity:0;transform:translateY(14px);   /* revealed by GSAP as the final beat */
}
.lh-search__field{
	display:inline-flex;align-items:center;gap:8px;background:none;border:0;border-radius:100px;
	font:400 16px/1.6 'Jost',sans-serif;color:#2a190c;cursor:pointer;
	padding:0;white-space:nowrap;flex-shrink:0;
	transition:opacity .15s ease;
}
.lh-search__field:hover{opacity:.66}
.lh-search__field svg{height:15px;width:auto;flex-shrink:0;color:#2a190c}
.lh-search__val{display:inline-block;overflow:hidden;white-space:nowrap;text-align:left;line-height:1.6;transition:width .26s cubic-bezier(.22,1,.36,1)}
.lh-search__divider{width:1px;height:34px;align-self:center;background:rgba(42,25,12,.16);flex-shrink:0}
.lh-search__submit{
	align-self:stretch;display:inline-flex;align-items:center;justify-content:center;
	border:0;cursor:pointer;background:var(--lh-gold);color:#2a190c;
	font:400 16px/1.6 'Jost',sans-serif;padding:16px 32px 16px 24px;border-radius:0 100px 100px 0;
	transition:filter .2s ease;flex-shrink:0;white-space:nowrap;
}
.lh-search__submit:hover{filter:brightness(1.06)}

/* ---------- PICKER POPOVERS ---------- */
.lh-search__field[aria-expanded="true"]{opacity:1}
.lh-search__field[aria-expanded="true"] svg{color:var(--lh-gold)}
.lh-search__val[data-empty="true"]{color:#2a190c}

.lh-pop{
	--lh-gold:#b79d60;   /* travels with the sheet when it is portaled to <body> on phones */
	position:absolute;top:calc(100% + 12px);left:0;z-index:30;
	background:#fff;color:#2b2b2b;border-radius:16px;
	box-shadow:0 22px 55px rgba(0,0,0,.30);padding:16px;text-align:left;
	font:500 14px/1 'Jost',sans-serif;
	opacity:0;transform:translateY(-6px);pointer-events:none;
	transition:opacity .18s ease, transform .26s cubic-bezier(.76,0,.24,1);
}
.lh-pop.is-open{opacity:1;transform:none;pointer-events:auto}
.lh-pop__handle{display:none}   /* only shown as a drag grip on the phone bottom-sheet */

.lh-cal{width:300px}
.lh-cal__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.lh-cal__body{position:relative}   /* anchor for the month/year quick-jump overlay */
.lh-cal__title{display:inline-flex;align-items:center;gap:6px;border:0;background:none;cursor:pointer;padding:3px 8px;border-radius:8px;font-family:'Jost',sans-serif;font-size:21px;font-weight:600;color:#2b2b2b;text-transform:capitalize}
.lh-cal__title:hover{background:#f4f1ea}
.lh-cal__title-label{line-height:1}
.lh-cal__title-chev{width:13px;height:13px;opacity:.6;transition:transform .2s ease}
.lh-cal__title.is-open .lh-cal__title-chev{transform:rotate(180deg)}
/* while the quick-jump is open, hide the month arrows (you pick the month from the grid);
   visibility:hidden keeps the title centred so the head doesn't shift. The year arrows live
   in .lh-cal__body, so scoping to the head leaves them untouched. */
.lh-cal__head.is-jumping .lh-cal__nav{visibility:hidden}
.lh-cal__nav{width:32px;height:32px;border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;color:#2b2b2b}
.lh-cal__nav:hover{background:#f4f1ea}
.lh-cal__dow{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.lh-cal__dow span{text-align:center;font-size:11px;letter-spacing:.03em;color:#9a9486;padding:4px 0}
.lh-cal__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.lh-cal__day{aspect-ratio:1;display:flex;align-items:center;justify-content:center;border:0;background:none;cursor:pointer;border-radius:8px;font:500 13px/1 'Jost',sans-serif;color:#2b2b2b}
.lh-cal__day:hover:not(:disabled):not(.is-empty):not(.is-start):not(.is-end){background:#f0ead9}
.lh-cal__day:disabled{color:#d2cdbf;cursor:default}
.lh-cal__day.is-unavailable{color:#d2cdbf;text-decoration:line-through;cursor:default}   /* sold out for that night */
.lh-cal__day.is-empty{visibility:hidden;cursor:default}
.lh-cal__day.is-today{box-shadow:inset 0 0 0 1px var(--lh-gold)}
.lh-cal__day.in-range{background:#efe7d2;border-radius:0}
.lh-cal__day.is-start,.lh-cal__day.is-end{background:var(--lh-gold);color:#2b2b2b}
.lh-cal__day.is-start{border-radius:8px 0 0 8px}
.lh-cal__day.is-end{border-radius:0 8px 8px 0}
.lh-cal__day.is-start.is-end{border-radius:8px}

/* ---------- MONTH / YEAR QUICK-JUMP ----------
   Overlays the day grid (covers .lh-cal__body, leaving the head's title toggle
   tappable). Year stepper + a 3x4 month grid; bounded to current year .. +2. */
.lh-cal__jump{position:absolute;inset:0;z-index:5;background:#fff;display:flex;flex-direction:column;gap:8px;opacity:0;transform:translateY(-4px);pointer-events:none;transition:opacity .18s ease, transform .2s ease}
.lh-cal__jump.is-open{opacity:1;transform:none;pointer-events:auto}
.lh-cal__jump-year{display:flex;align-items:center;justify-content:space-between}
.lh-cal__jump-yearval{font-family:'Jost',sans-serif;font-size:19px;font-weight:600;color:#2b2b2b}
.lh-cal__jump-months{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:6px;flex:1}
.lh-cal__jump-mo{display:flex;align-items:center;justify-content:center;border:1px solid rgba(0,0,0,.12);background:#fff;border-radius:8px;cursor:pointer;font:500 13px/1 'Jost',sans-serif;color:#2b2b2b;text-transform:capitalize}
.lh-cal__jump-mo:hover:not(:disabled){background:#f0ead9}
.lh-cal__jump-mo:disabled{color:#d2cdbf;cursor:default}
.lh-cal__jump-mo.is-current{background:var(--lh-gold);color:#2b2b2b;border-color:transparent}

.lh-pop--guests{width:280px}   /* wider so the long "Barn (0-18 år)" / "Children (0-18 yrs)" label isn't cramped against the steppers */
.lh-stepper{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:10px 2px}
.lh-stepper + .lh-stepper{border-top:1px solid rgba(0,0,0,.08)}
.lh-stepper__label{font-weight:500;color:#2b2b2b}   /* 500 = the only loaded Inter weight besides 400; 600 would synth-bold (off vs the rest of the picker) */
.lh-stepper__ctrl{display:flex;align-items:center;gap:14px}
.lh-stepper__ctrl button{width:30px;height:30px;border:1px solid rgba(0,0,0,.2);background:#fff;border-radius:50%;cursor:pointer;font-size:17px;line-height:1;color:#2b2b2b}
.lh-stepper__ctrl button:hover{background:#f4f1ea}
.lh-stepper__ctrl span{min-width:18px;text-align:center;font-weight:500}   /* match: Inter 600 isn't loaded (would synth-bold) */

/* ---------- COMBINED PROGRESSIVE SHEET (phone-only panes) ----------
   The guest steppers + an in-sheet submit live inside .lh-pop--dates but are
   hidden everywhere by default; they only appear, one after the other, inside
   the phone bottom-sheet (see the max-width:600px block). */
.lh-sheet__pane{display:none}
.lh-sheet__submit{width:100%}

/* settle reset: kill transitions for one frame so the start-state snaps in */
.landing-hero.no-anim, .landing-hero.no-anim *{transition:none !important}

@media (max-width:760px){
	.landing-hero__bg{grid-template-columns:1fr;grid-template-rows:1fr 1fr}   /* stack the two cells */
	.landing-hero__bg--full{grid-template-rows:1fr}
	.landing-hero__headline{white-space:normal}                              /* let it wrap on small screens */
}

/* Phone layout. The search bar stacks into a full-width column (comfortable tap
   targets), and the date/guest popovers become bottom sheets. The hero is
   overflow:hidden and BOTH the content block and .lh-search carry transforms
   (centring + the GSAP reveal), each of which is a containing block that would
   clip/trap a position:fixed dropdown — so the JS PORTALS the open popover to
   <body> on phones (escaping every transformed/overflow ancestor), and the rules
   below render it as a viewport-pinned sheet that can't be clipped. The sheet
   markup may sit under <body>, so these target .lh-pop globally (not nested). */
@media (max-width:600px){
	.landing-hero__content{width:min(440px,92vw)}

	.lh-search{
		display:flex;flex-direction:column;align-items:stretch;
		width:100%;gap:6px;border-radius:20px;padding:8px;
	}
	.lh-search__field{width:100%;justify-content:flex-start;height:52px;padding:0 16px}
	.lh-search__divider{display:none}
	.lh-search__submit{width:100%;height:50px;align-self:auto;padding:0 26px;border-radius:100px}

	/* bottom-sheet popovers — pinned to the viewport, slide up from the bottom */
	.lh-pop{
		position:fixed !important;
		left:0 !important; right:0 !important; top:auto !important; bottom:0 !important;
		width:auto !important;
		max-height:82vh; max-height:82dvh; overflow-y:auto; overscroll-behavior:contain;
		border-radius:20px 20px 0 0;
		padding:6px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		transform:translateY(100%);
		box-shadow:0 -16px 50px rgba(0,0,0,.34);
		z-index:99999;
	}
	.lh-pop.is-open{transform:translateY(0)}
	/* real drag grip: a generous tap/drag zone with a visible pill */
	.lh-pop__handle{display:block;height:26px;margin:0 0 6px;cursor:grab;touch-action:none;position:relative}
	.lh-pop__handle::after{content:"";position:absolute;left:50%;top:10px;transform:translateX(-50%);width:42px;height:5px;border-radius:99px;background:rgba(0,0,0,.2)}
	/* crisp taps — no double-tap-zoom delay, no scroll-vs-tap ambiguity on the cells */
	.lh-cal__day,.lh-cal__nav,.lh-stepper__ctrl button,.lh-search__field,.lh-search__submit{touch-action:manipulation}
	.lh-cal,.lh-pop--guests{width:100%}
	/* dim backdrop behind the sheet — tap to dismiss */
	.lh-sheet-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.42);z-index:99998;opacity:0;pointer-events:none;transition:opacity .22s ease}
	.lh-sheet-backdrop.is-open{opacity:1;pointer-events:auto}

	/* combined progressive sheet: .lh-pop--dates is the single growing sheet.
	   The calendar shows first; the guest steppers reveal once a full range is
	   picked, then the in-sheet submit once an adult is set. Each pane animates
	   its grid row from 0fr to 1fr (exact content height, no magic numbers); the
	   bottom-pinned sheet grows upward and pushes the calendar up. The divider /
	   spacing sits on the pane CONTENT (inside the clipped inner), not on the grid
	   item — a bordered/padded grid item can't shrink to a true 0-height row.
	   box-sizing is restated because the sheet is portaled outside .landing-hero. */
	.lh-pop--dates,.lh-pop--dates *{box-sizing:border-box}   /* whole portaled shell: nav arrows, jump grid, panes */
	.lh-pop--dates.is-sheet .lh-sheet__pane{
		display:grid;grid-template-rows:0fr;opacity:0;transform:translateY(6px);
		transition:grid-template-rows .34s cubic-bezier(.22,1,.36,1), opacity .26s ease, transform .34s cubic-bezier(.22,1,.36,1);
	}
	.lh-pop--dates.is-sheet .lh-sheet__pane.is-shown{grid-template-rows:1fr;opacity:1;transform:none}
	.lh-pop--dates.is-sheet .lh-sheet__pane-inner{min-height:0;overflow:hidden}   /* clip while the row collapses to 0fr */
	.lh-pop--dates.lh-pop--noanim .lh-sheet__pane{transition:none}                /* set initial reveal state on open without animating */
	.lh-pop--dates.is-sheet .lh-sheet__pane--guests .lh-guests{margin-top:8px;padding-top:8px;border-top:1px solid rgba(0,0,0,.08)}
	.lh-pop--dates.is-sheet .lh-sheet__pane--submit .lh-sheet__submit{margin-top:10px}
	.lh-sheet__submit{height:50px}
}

/* honour reduced-motion: no clip/scale transition (JS also shows the hero settled) */
@media (prefers-reduced-motion: reduce){
	.lh-half__img{transition:none}
	.lh-search,.landing-hero [data-text-split],.landing-hero [data-fade-up]{transition:none}
	.lh-sheet__pane,.lh-cal__jump,.lh-cal__title-chev{transition:none}
}