/* ==========================================================================
   Egittosì — Homepage sections (WS-F)
   intro · experiences · destinations · why · cruises · deposit · gallery ·
   reviews · platforms · whatsapp · contact.  Mobile-first; breakpoints
   480 / 768 / 1024 / 1280 / 1440. Tokens only.
   ========================================================================== */

/* ---- Shared ------------------------------------------------------------ */

.home-intro__title,
.home-why__title,
.home-reviews__title,
.home-contact__title {
	margin: 0;
	color: var(--c-heading);
	font-family: var(--font-display);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	letter-spacing: var(--tracking-display);
	text-wrap: balance;
}

.home-intro__title em,
.home-why__title em,
.home-reviews__title em,
.home-contact__title em {
	color: var(--c-gold-600);
	font-style: italic;
}

.home-experiences__head,
.home-destinations__head,
.home-cruises__head,
.home-gallery__head {
	margin-block-end: clamp(var(--space-6), 1rem + 3vw, var(--space-8));
}

/* Horizontal, scroll-snapped rail on small screens (sections switch to grids). */
.home-rail {
	display: flex;
	gap: var(--space-4);
	margin: 0 calc(var(--gutter) * -1);
	padding: 0 var(--gutter) var(--space-4);
	list-style: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scroll-padding-inline: var(--gutter);
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}

.home-rail::-webkit-scrollbar {
	display: none;
}

.home-rail__item {
	flex: 0 0 min(84%, 23rem);
	min-inline-size: 0;
	scroll-snap-align: start;
}

/* Swipe hint + progress (added by home.js only when a rail overflows). */
.home-rail-hint {
	display: flex;
	align-items: center;
	gap: var(--space-4);
	margin-block-start: var(--space-3);
	color: var(--c-text-muted);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
	transition: opacity var(--dur-ui) var(--ease-out);
}

.home-rail-hint[hidden] {
	display: none;
}

.home-rail-hint__bar {
	position: relative;
	flex: 1 1 auto;
	max-inline-size: 8rem;
	block-size: 1px;
	overflow: hidden;
	background: var(--c-border-strong);
}

.home-rail-hint__fill {
	position: absolute;
	inset: 0;
	background: var(--c-gold-500);
	transform: scaleX(var(--rail-progress, 0.2));
	transform-origin: 0 50%;
	transition: transform var(--dur-micro) linear;
}

.section--navy .home-rail-hint {
	color: var(--c-nile-300);
}

.section--navy .home-rail-hint__bar {
	background: var(--c-nile-700);
}

/* ---- 02 Introduction --------------------------------------------------- */

.home-intro__inner {
	display: grid;
	gap: var(--space-7);
}

.home-intro__eyebrow {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-end: var(--space-5);
}

.home-intro__title {
	max-inline-size: 13ch;
	font-size: var(--fs-display);
	line-height: var(--lh-tight);
}

.home-intro__text {
	max-inline-size: 38rem;
	margin: 0;
	color: var(--c-text-soft);
}

.home-intro__pillars {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: var(--space-7) 0 0;
	padding: 0;
	list-style: none;
	border-block: 1px solid var(--c-border);
}

.home-intro__pillar + .home-intro__pillar {
	border-inline-start: 1px solid var(--c-border);
}

.home-intro__pillar-link {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-2);
	padding: var(--space-5) var(--space-2);
	color: var(--c-heading);
	text-align: center;
	text-decoration: none;
}

a.home-intro__pillar-link:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: -4px;
}

.home-intro__pillar-icon {
	display: inline-flex;
	color: var(--c-gold-600);
	transition: transform var(--dur-ui) var(--ease-out);
}

.home-intro__pillar-icon svg {
	inline-size: 32px;
	block-size: 32px;
}

.home-intro__pillar-label {
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-style: italic;
	font-weight: var(--fw-medium);
	line-height: 1;
	transition: color var(--dur-ui) var(--ease-out);
}

.home-intro__more {
	margin: var(--space-6) 0 0;
}

@media (hover: hover) and (pointer: fine) {
	a.home-intro__pillar-link:hover .home-intro__pillar-icon {
		transform: translateY(-4px);
	}

	a.home-intro__pillar-link:hover .home-intro__pillar-label {
		color: var(--c-nile-600);
	}
}

/* At all widths the introduction reads as one column — a short title directly above its
   text keeps no dead air below the heading. A generous max-width keeps long lines readable
   on large screens without splitting into two uneven columns. */
@media (min-width: 1024px) {
	.home-intro__inner {
		max-inline-size: 52rem;
	}

	.home-intro__title {
		max-inline-size: 20ch;
	}
}

/* ---- 03 Featured experiences ------------------------------------------- */

.home-intro + .home-experiences {
	padding-block-start: var(--space-4);
}

.home-experiences__feature {
	margin-block-end: clamp(var(--space-8), 2rem + 5vw, var(--space-10));
}

.home-experiences__list {
	margin-block: 0;
}

.home-experiences__cta {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(var(--space-7), 1.5rem + 3vw, var(--space-9));
}

@media (min-width: 1024px) {
	.home-experiences__list {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: var(--space-7) var(--gutter);
		align-items: start;
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.home-experiences__list--count-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		inline-size: 67%;
		margin-inline-start: auto;
	}

	.home-experiences__list--count-1 {
		grid-template-columns: minmax(0, 1fr);
		inline-size: 33%;
		margin-inline-start: auto;
	}

	/* Asymmetric rhythm: the second card sits lower, the third halfway. */
	.home-experiences__item:nth-child(2) {
		margin-block-start: var(--space-9);
	}

	.home-experiences__item:nth-child(3) {
		margin-block-start: var(--space-6);
	}
}

/* ---- 04 Destinations --------------------------------------------------- */

.home-destinations__grid {
	margin-block: 0;
}

.home-destinations__grid .card-dest__media {
	aspect-ratio: 4 / 5;
}

.home-destinations__grid .card-dest,
.home-destinations__grid .card-dest__zoom,
.home-destinations__grid .card-dest__img {
	block-size: 100%;
}

.home-destinations__grid .card-dest__img {
	object-fit: cover;
}

.home-destinations__grid .home-rail__item {
	flex-basis: min(80%, 21rem);
}

@media (min-width: 768px) {
	.home-destinations__grid {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-5);
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}

	.home-destinations__item--1 {
		grid-column: 1 / -1;
	}

	.home-destinations__item--1 .card-dest__media {
		aspect-ratio: 16 / 9;
	}
}

@media (min-width: 1024px) {
	.home-destinations__grid.is-simple {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.home-destinations__grid.is-simple .home-destinations__item--1 {
		grid-column: span 2;
	}

	.home-destinations__grid.is-simple .home-destinations__item--1 .card-dest__media {
		aspect-ratio: auto;
		block-size: 100%;
	}

	/* Editorial mosaic: five image cards on a 12-column grid, stepping down like stairs. */
	.home-destinations__grid.is-mosaic {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		grid-auto-rows: clamp(3rem, 4vw, 4.5rem);
		gap: var(--space-5);
	}

	.home-destinations__grid.is-mosaic .card-dest__media {
		aspect-ratio: auto;
		block-size: 100%;
	}

	.is-mosaic .home-destinations__item--1 {
		grid-column: 1 / 8;
		grid-row: 1 / 8;
	}

	.is-mosaic .home-destinations__item--2 {
		grid-column: 8 / 13;
		grid-row: 2 / 9;
	}

	.is-mosaic .home-destinations__item--3 {
		grid-column: 1 / 5;
		grid-row: 8 / 15;
	}

	.is-mosaic .home-destinations__item--4 {
		grid-column: 5 / 9;
		grid-row: 9 / 16;
	}

	.is-mosaic .home-destinations__item--packages {
		grid-column: 9 / 13;
		grid-row: 10 / 16;
	}
}

/* ---- 05 Why travel with us --------------------------------------------- */

.home-why__inner {
	display: grid;
	gap: var(--space-7);
}

.home-why__eyebrow {
	margin-block-end: var(--space-4);
}

.home-why__title {
	max-inline-size: 12ch;
	font-size: var(--fs-h1);
}

.home-why__text {
	max-inline-size: 30rem;
	margin: var(--space-5) 0 0;
	color: var(--c-text-soft);
}

.home-why__progress {
	display: none;
}

.home-why__cta {
	margin: var(--space-6) 0 0;
}

.home-why__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-block-end: 1px solid var(--c-gold-300);
}

.home-why__item {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	gap: var(--space-2) var(--space-4);
	padding-block: var(--space-6);
	border-block-start: 1px solid var(--c-gold-300);
}

.home-why__num {
	grid-row: 1 / span 2;
	padding-block-start: 0.35rem;
	color: var(--c-gold-600);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-style: italic;
	line-height: 1;
	font-variant-numeric: lining-nums tabular-nums;
	transition: color var(--dur-ui) var(--ease-out);
}

.home-why__icon {
	display: inline-flex;
	color: var(--c-gold-600);
}

.home-why__icon svg {
	inline-size: 36px;
	block-size: 36px;
}

.home-why__body {
	grid-column: 2;
}

.home-why__item-title {
	margin: 0;
	color: var(--c-heading);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2.375rem);
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
	transition: color var(--dur-ui) var(--ease-out);
}

.home-why__item-text {
	max-inline-size: 44ch;
	margin: var(--space-2) 0 0;
	color: var(--c-text-soft);
}

.home-why__item.is-current .home-why__num {
	color: var(--c-nile-700);
}

@media (min-width: 768px) {
	.home-why__item {
		grid-template-columns: 4.5rem minmax(0, 1fr) auto;
		align-items: start;
		padding-block: var(--space-7);
	}

	.home-why__num {
		grid-row: auto;
		font-size: 2.25rem;
	}

	.home-why__icon {
		grid-column: 3;
		grid-row: 1;
	}

	.home-why__body {
		grid-column: 2;
		grid-row: 1;
	}
}

@media (min-width: 1024px) {
	.home-why__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
	}

	.home-why__aside {
		grid-column: 1 / span 5;
	}

	.home-why__sticky {
		position: sticky;
		inset-block-start: calc(var(--header-h-compact) + var(--space-7));
	}

	.home-why__list {
		grid-column: 7 / span 6;
	}

	.js .home-why__progress {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		margin-block-start: var(--space-8);
	}

	.home-why__progress-count {
		display: inline-flex;
		align-items: baseline;
		gap: var(--space-1);
		color: var(--c-text-muted);
		font-family: var(--font-display);
		font-size: 1.625rem;
		font-variant-numeric: lining-nums tabular-nums;
	}

	.home-why__progress-count [data-why-current] {
		color: var(--c-heading);
	}

	.home-why__progress-line {
		position: relative;
		flex: 0 0 10rem;
		block-size: 1px;
		overflow: hidden;
		background: var(--c-border-strong);
	}

	.home-why__progress-fill {
		position: absolute;
		inset: 0;
		background: var(--c-gold-500);
		transform: scaleX(var(--why-progress, 0));
		transform-origin: 0 50%;
		transition: transform var(--dur-micro) linear;
	}
}

/* ---- 06 Nile cruises (navy chapter) ------------------------------------ */

.home-cruises {
	position: relative;
	overflow: hidden;
}

.home-cruises__water {
	position: absolute;
	inset-inline: 0;
	inset-block-end: 0;
	block-size: clamp(7.5rem, 16vw, 15rem);
	color: var(--c-gold-500);
	opacity: 0.28;
	pointer-events: none;
}

.home-cruises__water svg {
	display: block;
	inline-size: 100%;
	block-size: 100%;
	fill: none;
	stroke: currentColor;
	stroke-width: 1;
}

.home-cruises__water path {
	vector-effect: non-scaling-stroke;
}

.home-cruises__inner {
	position: relative;
	z-index: 1;
}

.home-cruises__layout {
	display: grid;
	gap: var(--space-8);
}

.home-cruises__list {
	margin-block: 0;
}

.home-cruises__cta {
	display: flex;
	justify-content: center;
	margin-block-start: clamp(var(--space-7), 1.5rem + 3vw, var(--space-9));
}

@media (min-width: 768px) {
	.home-cruises__list {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-7) var(--gutter);
		margin-inline: 0;
		padding: 0;
		overflow: visible;
	}
}

@media (min-width: 1024px) {
	.home-cruises__layout {
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		column-gap: var(--gutter);
		align-items: start;
	}

	.home-cruises__layout.is-single {
		grid-template-columns: minmax(0, 1fr);
	}

	.home-cruises__layout.is-single .card-cruise--feature {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		gap: var(--space-7);
		align-items: center;
	}

	/* Secondary cruises: slim horizontal entries beside the lead cruise. */
	.home-cruises__list {
		display: flex;
		flex-direction: column;
		gap: var(--space-7);
		padding-block-start: var(--space-9);
	}

	.home-cruises__list .card-cruise {
		display: grid;
		grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
		gap: var(--space-5);
		align-items: start;
	}

	.home-cruises__list .card-cruise__badge {
		display: none;
	}

	.home-cruises__list .card-cruise__title {
		font-size: 1.75rem;
	}

	.home-cruises__list .card-cruise__foot {
		padding-block-start: var(--space-3);
	}
}

/* ---- 07 Deposit · 10 Platforms · 11 WhatsApp (component wrappers) ------ */

.home-deposit,
.home-platforms,
.home-whatsapp {
	position: relative;
}

/* ---- 09 Guest reviews -------------------------------------------------- */

.home-reviews__inner {
	display: grid;
	gap: var(--space-7);
}

.home-reviews__title {
	max-inline-size: 11ch;
	margin-block-start: var(--space-4);
	font-size: var(--fs-h1);
}

.home-reviews__more {
	margin-block-start: var(--space-7);
}

.home-reviews__more-label {
	margin: 0 0 var(--space-3);
	color: var(--c-text-muted);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
}

.home-reviews__platforms,
.home-reviews__invite-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.home-reviews__platform {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding-block: var(--space-3);
	border-block-end: 1px solid var(--c-border);
	color: var(--c-heading);
	font-weight: var(--fw-medium);
	text-decoration: none;
	transition: color var(--dur-ui) var(--ease-out);
}

.home-reviews__platform svg,
.home-reviews__invite-action svg {
	inline-size: 18px;
	block-size: 18px;
	color: var(--c-gold-600);
	transition: transform var(--dur-ui) var(--ease-out);
}

.home-reviews__invite {
	position: relative;
	padding-block-start: var(--space-7);
}

.home-reviews__invite-mark {
	position: absolute;
	inset-block-start: calc(var(--space-7) * -1);
	inset-inline-start: 0;
	color: var(--c-gold-300);
	font-family: var(--font-display);
	font-size: clamp(6rem, 4rem + 8vw, 10rem);
	line-height: 1;
	pointer-events: none;
}

.home-reviews__invite-text {
	position: relative;
	max-inline-size: 32ch;
	margin: 0 0 var(--space-7);
	color: var(--c-heading);
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.625rem);
	font-style: italic;
	line-height: var(--lh-snug);
}

.home-reviews__invite-link {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-2) var(--space-5);
	padding-block: var(--space-5);
	border-block-start: 1px solid var(--c-border);
	color: var(--c-heading);
	text-decoration: none;
}

.home-reviews__invite-list li:last-child .home-reviews__invite-link {
	border-block-end: 1px solid var(--c-border);
}

.home-reviews__invite-name {
	font-family: var(--font-display);
	font-size: clamp(1.75rem, 1.5rem + 1vw, 2.5rem);
	font-weight: var(--fw-medium);
	line-height: 1.1;
	transition: transform var(--dur-hover) var(--ease-out);
}

.home-reviews__invite-action {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--c-gold-700);
	font-size: var(--fs-button);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-button);
	text-transform: uppercase;
}

.home-reviews__platform:focus-visible,
.home-reviews__invite-link:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 4px;
}

@media (hover: hover) and (pointer: fine) {
	.home-reviews__platform:hover {
		color: var(--c-nile-600);
	}

	.home-reviews__platform:hover svg,
	.home-reviews__invite-link:hover .home-reviews__invite-action svg {
		transform: translate(3px, -3px);
	}

	.home-reviews__invite-link:hover .home-reviews__invite-name {
		transform: translateX(0.375rem);
	}
}

@media (min-width: 1024px) {
	.home-reviews__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
		align-items: start;
	}

	.home-reviews__head {
		grid-column: 1 / span 4;
	}

	.home-reviews__body {
		grid-column: 6 / span 7;
	}

	.home-reviews--invite .home-reviews__body {
		padding-block-start: var(--space-8);
	}
}

/* ---- 12 Contact -------------------------------------------------------- */

.home-contact__inner {
	display: grid;
	gap: var(--space-8);
}

.home-contact__title {
	max-inline-size: 12ch;
	margin-block-start: var(--space-4);
	font-size: var(--fs-h1);
}

.home-contact__text {
	max-inline-size: 34rem;
	margin: var(--space-5) 0 0;
	color: var(--c-text-soft);
}

.home-contact__plan {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: var(--space-4);
	margin-block-start: var(--space-7);
	padding: var(--space-5);
	border-block-start: 2px solid var(--c-gold-500);
	border-radius: var(--radius);
	background: var(--c-white);
	box-shadow: var(--shadow-sm);
}

.home-contact__plan-icon {
	display: inline-flex;
	color: var(--c-gold-600);
}

.home-contact__plan-icon svg {
	inline-size: 34px;
	block-size: 34px;
}

.home-contact__plan-title {
	margin: 0;
	color: var(--c-heading);
	font-family: var(--font-display);
	font-size: 1.75rem;
	font-weight: var(--fw-medium);
	line-height: var(--lh-heading);
}

.home-contact__plan-text {
	margin: var(--space-2) 0 0;
	color: var(--c-text-soft);
	font-size: var(--fs-small);
}

.home-contact__plan-note {
	margin: var(--space-3) 0 0;
	color: var(--c-gold-700);
	font-size: var(--fs-eyebrow);
	font-weight: var(--fw-medium);
	letter-spacing: var(--tracking-caps);
	text-transform: uppercase;
}

.home-contact__plan-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-4) var(--space-6);
	margin-block-start: var(--space-5);
}

@media (min-width: 480px) {
	.home-contact__plan {
		gap: var(--space-5);
		padding: var(--space-6);
	}
}

@media (min-width: 1024px) {
	.home-contact__inner {
		grid-template-columns: repeat(12, minmax(0, 1fr));
		column-gap: var(--gutter);
		align-items: center;
	}

	.home-contact__intro {
		grid-column: 1 / span 6;
	}

	.home-contact__block {
		grid-column: 8 / span 5;
	}
}