/* ==========================================================================
   Jom Jelajah Benua: homepage only (header over the film, story sections, motion)
   The hero film itself is styled in hero-journey.css.
   ========================================================================== */

/* Header floats over the film until the next section reaches it. */
.site-header--overlay {
	position: fixed;
	left: 0; right: 0;
	background: #fff; /* solid white so the full-colour logo stands out (Diba, 19 Oct 2026) */
	backdrop-filter: none;
	color: var(--ink); /* dark menu text on the white header */
	transition: background-color 0.4s, color 0.4s, box-shadow 0.4s;
}
.site-header--overlay.is-scrolled {
	background: rgba(255, 255, 255, 0.95);
	backdrop-filter: blur(14px);
}
.nav-open .site-header--overlay { color: var(--ink); }

/* Full-colour logo straight on the film, no backing (Lucian, 10 Oct 2026: no white logo, no white background). */

/* 2. About: continues the story from the film ---------------------------- */

.home-story { padding-block: clamp(72px, 9vw, 128px) var(--section); background: var(--paper); }
.home-story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
.home-story__title { margin: 0 0 24px; max-width: 16ch; font-size: clamp(2.3rem, 4.6vw, 3.9rem); line-height: 1.05; }
.home-story__body { max-width: 52ch; margin-bottom: 28px; font-size: clamp(1.08rem, 1.4vw, 1.22rem); color: var(--ink-soft); }
.home-story__body p { margin: 0 0 1em; }
/* Photo sits on a sunny offset block for a warm, playful edge. */
.home-story__media { position: relative; margin: 0; isolation: isolate; }
.home-story__media::before {
	content: "";
	position: absolute;
	z-index: -1;
	inset: clamp(18px, 2.4vw, 32px) clamp(-18px, -1.6vw, -10px) clamp(-18px, -1.6vw, -10px) clamp(18px, 2.4vw, 32px);
	border-radius: var(--radius-lg);
	background: linear-gradient(135deg, var(--sun) 0%, #ffd45c 55%, var(--lime) 130%);
}
.home-story__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow); }
/* Licence: a small, quiet tag on the photo (trust detail, not a headline). */
.home-story__tag {
	position: absolute;
	left: 16px;
	bottom: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px 6px 9px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	font-size: 0.74rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--ink-soft);
}
.home-story__tag .icon { width: 14px; height: 14px; color: var(--green-deep); }

/* The colourful value cards (.value-cards) moved to main.css: they are used on the About page now (21 Oct 2026). */

@media (max-width: 900px) {
	.home-story__grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
	.home-story__media::before { inset: 14px -8px -10px 14px; }
}

/* 3. Choose your region --------------------------------------------------- */

.home-regions { padding-block: var(--section); background: var(--soft); }
.region-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 20px); }
.region-card {
	position: relative;
	display: block;
	aspect-ratio: 3 / 4;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--blue);
	color: #fff;
	text-decoration: none;
	isolation: isolate;
}
.region-card__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.region-card::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgba(10, 18, 45, 0.82) 0%, rgba(10, 18, 45, 0.15) 55%, transparent 75%); }
.region-card:hover .region-card__img { transform: scale(1.06); }
.region-card__body { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 4px; padding: clamp(20px, 2vw, 28px); }
.region-card__count { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sun); }
.region-card__name { font-family: var(--font-display); font-size: clamp(1.8rem, 2.6vw, 2.4rem); font-weight: 600; line-height: 1.05; }
.region-card__names { padding-right: 56px; font-size: 0.9rem; color: rgba(255, 255, 255, 0.82); } /* clear of the arrow button */
.region-card__go { position: absolute; right: clamp(20px, 2vw, 28px); bottom: clamp(20px, 2vw, 28px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.92); color: var(--ink); transition: background-color 0.3s, transform 0.3s var(--ease); }
.region-card:hover .region-card__go { background: var(--sun); transform: translateX(4px); }
.home-regions__all { margin: clamp(28px, 4vw, 44px) 0 0; text-align: center; }

@media (max-width: 1000px) { .region-cards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) {
	.region-cards { grid-template-columns: 1fr; }
	.region-card { aspect-ratio: 16 / 11; }
}

/* 4. Latest promotions (portrait posters) --------------------------------- */

.home-promos { padding-block: var(--section); background: var(--paper); overflow: hidden; }
.home-promos__nav { display: flex; gap: 10px; }
.promo-arrow { display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: var(--green); color: #fff; cursor: pointer; transition: background-color 0.2s, opacity 0.2s; }
.promo-arrow:hover { background: var(--green-deep); }
.promo-arrow:disabled { opacity: 0.35; cursor: default; }
.promo-arrow:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.promo-arrow--prev .icon { transform: rotate(180deg); }
.promo-track {
	display: flex;
	gap: clamp(14px, 1.6vw, 20px);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 8px;
	scrollbar-width: none;
}
.promo-track::-webkit-scrollbar { display: none; }
.promo-card {
	position: relative;
	flex: 0 0 clamp(240px, 23vw, 290px);
	aspect-ratio: 4 / 5;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--soft);
	scroll-snap-align: start;
	text-decoration: none;
	box-shadow: var(--shadow-sm);
}
.promo-card__img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.promo-card:hover .promo-card__img { transform: scale(1.04); }
.promo-card__cta { position: absolute; left: 14px; right: 14px; bottom: 14px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.95); color: var(--ink); font-weight: 600; font-size: 0.92rem; opacity: 0; transform: translateY(8px); transition: opacity 0.3s, transform 0.3s var(--ease); }
.promo-card:hover .promo-card__cta, .promo-card:focus-visible .promo-card__cta { opacity: 1; transform: none; }
@media (hover: none) { .promo-card__cta { opacity: 1; transform: none; } }
.promo-card--empty {
	display: grid;
	place-content: center;
	justify-items: center;
	gap: 8px;
	border: 2px dashed rgba(43, 63, 153, 0.2);
	background: linear-gradient(160deg, var(--mist), var(--sun-soft));
	box-shadow: none;
	color: var(--blue);
	text-align: center;
	font-weight: 600;
}
.promo-card--empty .icon { width: 34px; height: 34px; opacity: 0.7; }
.promo-card--empty small { font-size: 0.78rem; font-weight: 500; color: var(--ink-mute); }
/* Up to 3 promotions (or the 3 reserved boxes): a neat 3-column row instead of the carousel. */
.promo-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.6vw, 22px); }
.promo-grid .promo-card { flex: none; width: 100%; }
@media (max-width: 760px) {
	.promo-grid { grid-template-columns: 1fr; max-width: 420px; margin-inline: auto; }
	.promo-grid .promo-card--reserved { aspect-ratio: 16 / 9; }
}

/* Photo strip inside the About section, between the text and the value cards: customer photos only,
   no text, no arrows, no background of its own. Swipe on phones; drag or scroll sideways with a mouse. */
.home-strip { margin-top: clamp(56px, 7vw, 96px); }
.home-strip + .container .home-values { margin-top: clamp(48px, 6vw, 80px); }
.home-strip__track {
	cursor: grab;
	display: flex;
	gap: clamp(12px, 1.4vw, 18px);
	padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	scroll-padding-inline: max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter)));
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
}
.home-strip__track::-webkit-scrollbar { display: none; }
.home-strip__item {
	position: relative;
	flex: 0 0 clamp(240px, 26vw, 340px);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border-radius: var(--radius);
	background: var(--soft);
	scroll-snap-align: start;
	cursor: zoom-in;
}
.home-strip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.home-strip__item:hover img { transform: scale(1.05); }
.home-strip__item:focus-visible { outline: 3px solid var(--sun); outline-offset: 3px; }
.home-strip__track.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.home-strip__track.is-dragging .home-strip__item { pointer-events: none; }
.home-strip__item img { -webkit-user-drag: none; user-select: none; }
@media (max-width: 640px) {
	.home-strip__item { flex-basis: 72vw; }
}

/* Featured packages in the promotions carousel (tick "Show on homepage" on a package). Same carousel, card style. */
.pkg-card {
	aspect-ratio: auto;
	display: flex;
	flex-direction: column;
	flex: 0 0 clamp(260px, 25vw, 310px);
	background: var(--paper);
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
	transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.pkg-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.pkg-card__media { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; background: var(--soft); }
.pkg-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.pkg-card:hover .pkg-card__media img { transform: scale(1.04); }
.pkg-card__dur { position: absolute; left: 12px; top: 12px; padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.94); font-size: 0.78rem; font-weight: 700; color: var(--ink); }
.pkg-card__body { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 18px 20px 20px; }
.pkg-card__country { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--green-deep); }
.pkg-card__name { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.15; color: var(--blue); }
.pkg-card__price { font-size: 0.95rem; font-weight: 600; color: var(--ink); }
.pkg-card__hl { display: grid; gap: 4px; margin-top: 4px; font-size: 0.88rem; color: var(--ink-soft); }
.pkg-card__hl > span { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pkg-card__hl > span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 9px; border-radius: 50%; background: var(--sun); vertical-align: middle; }
.pkg-card__cta { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 12px; font-size: 0.92rem; font-weight: 700; color: var(--blue); }
.pkg-card__cta .icon { width: 16px; height: 16px; transition: transform 0.3s var(--ease); }
.pkg-card:hover .pkg-card__cta .icon { transform: translateX(4px); }
@media (max-width: 640px) {
	.home-promos__nav { display: none; }
	.promo-track { margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-left: var(--gutter); }
	.promo-card { flex-basis: 72%; }
}

/* Reveal on scroll (only when JS runs) ---------------------------------- */

.js [data-reveal] {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
	transition-delay: var(--reveal-delay, 0s);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.js [data-reveal] { opacity: 1; transform: none; }
}

/* Posters in the plain row are shown whole, whatever their shape (e.g. the square School Holiday Specials). */
.promo-grid .promo-card:not(.promo-card--empty) { aspect-ratio: auto; background: #fff; }
.promo-grid .promo-card__img { height: auto; display: block; }