/* ==========================================================================
   Egittosì — Front-page hero, Nile water canvas, transition and trip-search panel
   The headline lives in the empty sky: its lower bound is computed from the artwork
   geometry (--hero-l-* / --hero-p-* from inc/hero.php) with the same cover maths used by
   the <img> (object-fit: cover) and the WebGL effect, so text never covers the felucca,
   the temple or the sun.
   ========================================================================== */

.hero {
	/* Geometry — landscape artwork */
	--hero-h: max(100svh, 640px);
	--hero-iw: var(--hero-l-iw, 1502);
	--hero-ih: var(--hero-l-ih, 1047);
	--hero-fy: var(--hero-l-fy, 0.82);
	--hero-safe: var(--hero-l-safe, 700);
	--hero-pos: 50% calc(var(--hero-fy) * 100%);
	/* Displayed image height (cover) and the sky's lower bound in viewport px. */
	--hero-d: max(calc(100vw * var(--hero-ih) / var(--hero-iw)), var(--hero-h));
	--hero-safe-y: calc(var(--hero-d) * var(--hero-safe) / var(--hero-ih) - (var(--hero-d) - var(--hero-h)) * var(--hero-fy));
	position: relative;
	block-size: var(--hero-h);
	overflow: hidden;
	background-color: #f6dcb0;
	background-image: var(--hero-lqip, none);
	background-size: cover;
	background-position: var(--hero-pos);
	color: var(--c-nile-900);
	isolation: isolate;
}

@media (max-aspect-ratio: 4/5) {
	.hero {
		--hero-iw: var(--hero-p-iw, 900);
		--hero-ih: var(--hero-p-ih, 1731);
		--hero-fy: var(--hero-p-fy, 0.88);
		--hero-safe: var(--hero-p-safe, 1400);
		--hero-h: max(100svh, 600px);
	}
}

.hero__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	transform-origin: 50% 70%;
}

.hero__picture,
.hero__img,
.hero__canvas {
	position: absolute;
	inset: 0;
	inline-size: 100%;
	block-size: 100%;
}

.hero__img {
	object-fit: cover;
	object-position: var(--hero-pos);
}

.hero__canvas {
	opacity: 0;
	transition: opacity 900ms var(--ease-out);
	pointer-events: none;
}

.hero.is-water-ready .hero__canvas {
	opacity: 1;
}

/* A whisper of ivory at the top for the navy header and headline; nothing on the water. */
.hero__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(251, 248, 242, 0.42) 0%, rgba(251, 248, 242, 0.12) 38%, rgba(251, 248, 242, 0) 60%),
		radial-gradient(60% 45% at 50% 38%, rgba(251, 248, 242, 0.34), rgba(251, 248, 242, 0) 70%);
	pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Content (in the sky)
   ------------------------------------------------------------------------ */
.hero__stage {
	position: absolute;
	inset: 0 0 auto 0;
	display: flex;
	align-items: center;
	block-size: max(var(--hero-safe-y) - 1.5rem, 26rem);
	max-block-size: calc(var(--hero-h) - 7rem);
	padding-block-start: var(--header-h);
}

.hero__content {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	will-change: transform;
}

.hero__eyebrow {
	gap: var(--space-4);
	margin-block-end: clamp(1rem, 0.6rem + 1.2vh, 1.75rem);
	color: var(--c-gold-800);
	font-size: 0.75rem;
}

.hero__eyebrow-rule {
	display: inline-block;
	inline-size: 2.5rem;
	block-size: 1px;
	background: currentColor;
	transform-origin: right;
}

.hero__eyebrow::after {
	content: "";
	display: inline-block;
	inline-size: 2.5rem;
	block-size: 1px;
	background: currentColor;
	transform-origin: left;
}

.hero__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(2.6rem, min(6.4vw, 9.6vh), 6.75rem);
	font-weight: var(--fw-medium);
	line-height: 0.98;
	letter-spacing: var(--tracking-display);
	color: var(--c-nile-900);
	text-wrap: balance;
	text-shadow: 0 1px 24px rgba(251, 248, 242, 0.55);
}

.hero__title em {
	font-style: italic;
	color: var(--c-gold-700);
}

.hero__line {
	display: block;
	overflow: hidden;
	padding-block: 0.04em 0.1em;
	margin-block: -0.04em -0.1em;
}

.hero__line-inner {
	display: inline-block;
}

.hero__text {
	max-inline-size: 38rem;
	margin: clamp(1rem, 0.5rem + 1.6vh, 1.75rem) 0 0;
	font-size: clamp(1.0625rem, 0.95rem + 0.35vw, 1.25rem);
	line-height: 1.6;
	color: var(--c-ink-soft);
	text-wrap: pretty;
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--space-3) var(--space-4);
	margin-block-start: clamp(1.25rem, 0.75rem + 2vh, 2.25rem);
}

.hero__secondary {
	--btn-bg: rgba(251, 248, 242, 0.55);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
}

/* Scroll cue (desktop) */
.hero__scroll {
	position: absolute;
	/* Physical offsets: logical ones would follow the vertical writing mode. */
	left: var(--gutter);
	bottom: 24%;
	display: none;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	color: var(--c-nile-900);
	font-size: 0.6875rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	writing-mode: vertical-rl;
}

.hero__scroll:hover {
	color: var(--c-nile-700);
	text-decoration: none;
}

.hero__scroll-line {
	position: relative;
	inline-size: 1px;
	block-size: 3.5rem;
	background: rgba(11, 31, 58, 0.18);
	overflow: hidden;
}

.hero__scroll-line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-nile-900);
	transform: translateY(-100%);
}

.motion-ok .hero__scroll-line::after {
	animation: hero-scroll 2.6s var(--ease-in-out) infinite;
}

@keyframes hero-scroll {
	0% { transform: translateY(-100%); }
	55% { transform: translateY(0); }
	100% { transform: translateY(100%); }
}

@media (min-width: 1024px) and (min-height: 700px) {
	.hero__scroll {
		display: inline-flex;
	}
}

/* ---------------------------------------------------------------------------
   Mobile: content in the upper sky, compact
   ------------------------------------------------------------------------ */
@media (max-width: 767px) {
	.hero__stage {
		align-items: flex-start;
		padding-block-start: calc(var(--header-h) + clamp(1.5rem, 6vh, 3.5rem));
	}

	.hero__title {
		font-size: clamp(2.5rem, 11.2vw, 3.6rem);
	}

	.hero__eyebrow {
		font-size: 0.6875rem;
		letter-spacing: 0.2em;
	}

	.hero__eyebrow-rule,
	.hero__eyebrow::after {
		inline-size: 1.5rem;
	}

	.hero__actions {
		flex-direction: column;
		align-items: stretch;
		inline-size: 100%;
		max-inline-size: 20rem;
	}
}

/* ---------------------------------------------------------------------------
   Entrance (hero.js) — hidden only while html.hero-pending
   ------------------------------------------------------------------------ */
.hero-pending [data-hero-anim] {
	opacity: 0;
}

.hero-pending [data-hero-anim="line"] {
	opacity: 1;
	transform: translate3d(0, 110%, 0);
}

.hero-pending [data-hero-media] {
	transform: scale(1.06);
}

/* ---------------------------------------------------------------------------
   Transition into the page
   ------------------------------------------------------------------------ */
.hero-transition {
	position: absolute;
	inset: auto 0 -1px 0;
	z-index: 2;
	block-size: clamp(3rem, 7vw, 7.5rem);
	pointer-events: none;
}

.hero-transition__svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
}

.hero-transition__fill {
	fill: var(--c-ivory);
}

.hero-transition__line {
	stroke: var(--c-gold-500);
	stroke-width: 1;
	opacity: 0.8;
}

/* ---------------------------------------------------------------------------
   Trip-search panel
   ------------------------------------------------------------------------ */
.search-panel-wrap {
	position: relative;
	z-index: 5;
	margin-block-start: calc(clamp(3rem, 7vw, 7.5rem) * -0.55);
	background: linear-gradient(180deg, transparent 0, transparent 50%, var(--c-ivory) 50%);
}

.search-panel {
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0;
	max-inline-size: 1180px;
	margin-inline: auto;
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: 0 30px 70px -40px rgba(11, 31, 58, 0.45), 0 2px 10px rgba(11, 31, 58, 0.05);
}

.search-panel::before {
	content: "";
	position: absolute;
	inset: 0 18% auto 18%;
	block-size: 1px;
	background: linear-gradient(90deg, transparent, var(--c-gold-500), transparent);
}

.search-panel__field {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.3rem;
	min-inline-size: 0;
	padding: 1rem 1.25rem;
	border-block-end: 1px solid var(--c-stone-200);
	transition: background-color var(--dur-ui) var(--ease-out);
}

.search-panel__field:nth-child(odd of .search-panel__field) {
	border-inline-end: 1px solid var(--c-stone-200);
}

.search-panel__field:focus-within {
	background: var(--c-nile-50);
}

.search-panel__field:focus-within .search-panel__label {
	color: var(--c-nile-600);
}

.search-panel__label {
	font-size: 0.6875rem;
	font-weight: var(--fw-medium);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--c-gold-700);
	transition: color var(--dur-ui) var(--ease-out);
}

.search-panel__control-wrap {
	position: relative;
	display: flex;
	align-items: center;
}

.search-panel__control {
	inline-size: 100%;
	min-block-size: 2.25rem;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--c-nile-900);
	font-family: var(--font-display);
	font-size: clamp(1.2rem, 1.05rem + 0.4vw, 1.45rem);
	font-weight: var(--fw-medium);
	line-height: 1.2;
	appearance: none;
	cursor: pointer;
}

select.search-panel__control {
	padding-inline-end: 1.5rem;
	text-overflow: ellipsis;
}

.search-panel__control:focus {
	outline: none;
}

.search-panel__field:focus-within {
	box-shadow: inset 0 -2px 0 var(--c-nile-500);
}

.search-panel__control--date::-webkit-calendar-picker-indicator {
	opacity: 0.55;
	cursor: pointer;
}

.search-panel__chevron {
	position: absolute;
	inset-inline-end: 0;
	color: var(--c-gold-600);
	pointer-events: none;
}

.search-panel__stepper {
	display: flex;
	align-items: center;
	gap: var(--space-2);
}

.search-panel__step {
	display: inline-flex;
	flex: none;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	border: 1px solid var(--c-stone-300);
	border-radius: 50%;
	color: var(--c-nile-900);
	background: var(--c-white);
	cursor: pointer;
	transition: border-color var(--dur-micro) var(--ease-out), background-color var(--dur-micro) var(--ease-out);
}

.search-panel__step:hover {
	border-color: var(--c-nile-700);
	background: var(--c-nile-50);
}

.search-panel__step[disabled] {
	opacity: 0.35;
	cursor: not-allowed;
}

.search-panel__control--number {
	inline-size: 2.5rem;
	flex: none;
	text-align: center;
	-moz-appearance: textfield;
	appearance: textfield;
	cursor: text;
}

.search-panel__control--number::-webkit-outer-spin-button,
.search-panel__control--number::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.search-panel__submit {
	grid-column: 1 / -1;
	display: flex;
	padding: 0.875rem;
}

.search-panel__button {
	inline-size: 100%;
	border-radius: var(--radius-sm);
}

@media (min-width: 1024px) {
	.search-panel {
		grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
		align-items: stretch;
	}

	.search-panel__field {
		padding: 1.35rem 1.6rem;
		border-block-end: 0;
		border-inline-end: 1px solid var(--c-stone-200);
	}

	.search-panel__submit {
		grid-column: auto;
		padding: 0.75rem;
	}

	.search-panel__button {
		block-size: 100%;
		padding-inline: 2rem;
	}
}

@media (max-width: 479px) {
	.search-panel__field {
		padding: 0.85rem 1rem;
	}
}

/* Entrance without GSAP: a short CSS transition when the gate is released. */
.hero-css-intro [data-hero-anim] {
	transition: opacity 900ms var(--ease-out), transform 1200ms var(--ease-out);
}

.hero-css-intro [data-hero-media] {
	transition: transform 1600ms var(--ease-out);
}