/* Home page — elevated */

/* ---- Cinematic hero ------------------------------------------------- */
.hero {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 88vh;
	min-height: 88svh;
	overflow: hidden;
	overflow-x: clip;
	isolation: isolate;
	color: #fff;
	/* No-image fallback gradient — the two brand primaries into deep petrol */
	background: linear-gradient(150deg, var(--zgb-green) 0%, var(--zgb-blue) 60%, var(--zgb-bg-deep) 120%);
}
.hero__media { position: absolute; inset: 0; z-index: -2; }
.hero__media-inner {
	position: absolute; inset: -2%;
	background-size: cover; background-position: center;
	transform: scale(1.1) translate3d(0, var(--py, 0), 0);
	will-change: transform;
	animation: zgbKenBurns 22s var(--zgb-ease-settle) infinite alternate;
}
.hero--image .hero__media::after {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: var(--zgb-vignette), var(--zgb-grade);
}
.hero__inner {
	position: relative;
	max-width: 680px;
	text-align: left;
	padding-block: clamp(4rem, 10vh, 7rem);
}
.zgb-kicker--hero { color: var(--zgb-green-soft); }
.hero__title {
	color: #fff;
	font-weight: 700;
	font-size: var(--zgb-fs-display);
	line-height: var(--zgb-lh-tight);
	letter-spacing: var(--zgb-tracking-tight);
	text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
	margin-bottom: var(--zgb-space-4);
}
.hero__title em { color: var(--zgb-green-soft); }
.hero__subtitle { color: rgba(255, 255, 255, .95); margin-bottom: var(--zgb-space-6); }
.hero__actions { display: flex; gap: var(--zgb-space-3); flex-wrap: wrap; }

/* Hero entrance fires on LOAD via CSS (no JS gate) so the LCP headline paints
   immediately and never depends on the scroll observer. */
.hero__inner > * { animation: zgbHeroIn var(--zgb-dur-slow) var(--zgb-ease-out) both; }
.hero__inner > :nth-child(1) { animation-delay: .05s; }
.hero__inner > :nth-child(2) { animation-delay: .15s; }
.hero__inner > :nth-child(3) { animation-delay: .25s; }
.hero__inner > :nth-child(4) { animation-delay: .35s; }
@keyframes zgbHeroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__inner > * { animation: none; } }

.hero__cue {
	position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%);
	width: 26px; height: 42px; border: 2px solid rgba(247, 240, 230, .6);
	border-radius: var(--zgb-radius-pill); z-index: 1;
}
.hero__cue span {
	position: absolute; left: 50%; top: 8px; width: 3px; height: 7px;
	margin-left: -1.5px; background: var(--zgb-cream); border-radius: 2px;
	animation: zgbBob 1.8s ease-in-out infinite;
}

@keyframes zgbKenBurns {
	from { transform: scale(1.1) translate3d(0, var(--py, 0), 0); }
	to   { transform: scale(1.16) translate3d(-1.5%, calc(var(--py, 0) - 1%), 0); }
}
@keyframes zgbBob { 0%,100% { transform: translateY(0); opacity: 1; } 50% { transform: translateY(10px); opacity: .4; } }

/* ---- Category teasers ---------------------------------------------- */
.cat-teasers__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--zgb-space-5); }
.cat-teaser {
	position: relative; display: flex; flex-direction: column; justify-content: flex-end;
	min-height: 180px; padding: var(--zgb-space-6);
	border-radius: var(--zgb-radius); background: #fff; border: 1px solid var(--zgb-line);
	box-shadow: var(--zgb-shadow-soft);
	transition: transform var(--zgb-dur-fast) var(--zgb-ease-out), box-shadow var(--zgb-dur-fast) var(--zgb-ease-out);
	overflow: hidden;
}
.cat-teaser::before {
	content: ""; position: absolute; inset: 0 auto 0 0; width: 4px;
	background: linear-gradient(var(--zgb-green), var(--zgb-blue));
	transform: scaleY(0); transform-origin: bottom; transition: transform var(--zgb-dur) var(--zgb-ease-out);
}
.cat-teaser:hover { transform: translateY(-6px); box-shadow: var(--zgb-shadow-warm); }
.cat-teaser:hover::before { transform: scaleY(1); }
.cat-teaser__name { font-family: var(--zgb-font-head); font-weight: 600; font-size: var(--zgb-fs-h3); color: var(--zgb-black); }
.cat-teaser__count { color: var(--zgb-muted); font-size: var(--zgb-fs-sm); }
.cat-teaser__arrow { position: absolute; top: var(--zgb-space-5); right: var(--zgb-space-5); color: var(--zgb-blue); font-size: 1.25rem; transition: transform var(--zgb-dur-fast) var(--zgb-ease-out); z-index: 2; }
.cat-teaser:hover .cat-teaser__arrow { transform: translate(4px, -4px); }

/* Image-backed teaser: photo + brand gradient veil for legible white text */
.cat-teaser--image {
	min-height: 260px;
	background-size: cover; background-position: center;
	border: 0;
}
.cat-teaser--image::after {
	content: ""; position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(14,50,58,.05) 0%, rgba(14,50,58,.78) 100%);
	transition: background var(--zgb-dur) var(--zgb-ease-out);
}
.cat-teaser--image:hover::after { background: linear-gradient(180deg, rgba(41,147,192,.25) 0%, rgba(14,50,58,.82) 100%); }
.cat-teaser--image .cat-teaser__body { position: relative; z-index: 2; }
.cat-teaser--image .cat-teaser__name { color: #fff; }
.cat-teaser--image .cat-teaser__count { color: rgba(255,255,255,.85); }
.cat-teaser--image .cat-teaser__arrow { color: #fff; }
.cat-teaser--image img { display: none; }

/* ---- Impressions mosaic -------------------------------------------- */
.impressions__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 180px;
	gap: var(--zgb-space-3);
}
.impressions__item {
	position: relative; display: block; overflow: hidden;
	border-radius: var(--zgb-radius-sm);
	box-shadow: var(--zgb-shadow-soft);
	cursor: zoom-in;
}
.impressions__item--feature { grid-column: span 2; grid-row: span 2; }
.impressions__img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--zgb-ease-settle); }
.impressions__item:hover .impressions__img { transform: scale(1.06); }
.impressions__item::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(14,50,58,.5));
	opacity: 0; transition: opacity var(--zgb-dur-fast);
}
.impressions__item:hover::after { opacity: 1; }
.impressions__zoom {
	position: absolute; bottom: 10px; right: 10px; z-index: 2;
	width: 34px; height: 34px; display: flex; align-items: center; justify-content: center;
	background: rgba(14,50,58,.55); color: #fff; border-radius: 50%; font-size: 1rem;
	opacity: 0; transform: scale(.8);
	transition: opacity var(--zgb-dur-fast) var(--zgb-ease-out), transform var(--zgb-dur-fast) var(--zgb-ease-out);
}
.impressions__item:hover .impressions__zoom { opacity: 1; transform: none; }

@media (max-width: 768px) {
	.impressions__grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.impressions__item--feature { grid-column: span 2; grid-row: span 1; }
}

/* ---- Section heads -------------------------------------------------- */
.section-head__link {
	font-family: var(--zgb-font-head); font-weight: 600; color: var(--zgb-blue-dark);
	white-space: nowrap;
}
.section-head__link span { display: inline-block; transition: transform var(--zgb-dur-fast) var(--zgb-ease-out); }
.section-head__link:hover span { transform: translateX(4px); }

/* ---- What/Where/When/Why ------------------------------------------- */
.w4__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--zgb-space-5); }
.w4__item {
	position: relative; text-align: left; padding: var(--zgb-space-6);
	background: #fff; border: 1px solid var(--zgb-line); border-radius: var(--zgb-radius);
	box-shadow: var(--zgb-shadow-soft);
	transition: transform var(--zgb-dur-fast) var(--zgb-ease-out), box-shadow var(--zgb-dur-fast) var(--zgb-ease-out);
}
.w4__item:hover { transform: translateY(-4px); box-shadow: var(--zgb-shadow-warm); }
.w4__num { display: block; font: 700 1.4rem/1 var(--zgb-font-head); color: var(--zgb-blue); font-variant-numeric: tabular-nums; margin-bottom: var(--zgb-space-3); }
.w4__icon { width: 44px; height: 44px; margin-bottom: var(--zgb-space-3); }
.w4__title { color: var(--zgb-wine); margin-bottom: var(--zgb-space-2); font-size: var(--zgb-fs-h3); }
.w4__text { color: var(--zgb-ink-soft); font-size: 0.98rem; }

.popular-tours__more { text-align: center; margin-top: var(--zgb-space-6); }

/* ---- Good company: press ("As seen in") + friends ------------------ */
.press__grid { display: flex; flex-wrap: wrap; gap: clamp(2rem, 6vw, 4.5rem); align-items: center; justify-content: center; }
.press__item img { max-height: 52px; width: auto; filter: grayscale(1); opacity: .6; transition: filter var(--zgb-dur-fast), opacity var(--zgb-dur-fast), transform var(--zgb-dur-fast); }
.press__item:hover img { filter: none; opacity: 1; transform: translateY(-2px); }

/* Divider + heading between the press strip and the friends row */
.friends-block { margin-top: var(--zgb-space-8); }
.friends-block--with-press { padding-top: var(--zgb-space-8); border-top: 1px solid color-mix(in srgb, var(--zgb-ink) 10%, transparent); }
.friends__heading {
	text-align: center; font-size: var(--zgb-fs-h3); color: var(--zgb-wine);
	margin-bottom: var(--zgb-space-6);
}
.friends__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--zgb-space-5); max-width: 760px; margin-inline: auto; }
.friends__item a {
	display: flex; flex-direction: column; gap: var(--zgb-space-3); align-items: center; text-align: center;
	color: var(--zgb-ink-soft); padding: var(--zgb-space-5); border-radius: var(--zgb-radius);
	background: #fff; box-shadow: var(--zgb-shadow-soft);
	transition: transform var(--zgb-dur-fast) var(--zgb-ease-out), box-shadow var(--zgb-dur-fast) var(--zgb-ease-out);
}
.friends__item a:hover { transform: translateY(-4px); box-shadow: var(--zgb-shadow-warm); }
.friends__item img { max-height: 60px; width: auto; }
.friends__blurb { font-size: var(--zgb-fs-sm); }

/* ---- CTA band (brand primaries) ------------------------------------ */
.home-cta { background: linear-gradient(135deg, var(--zgb-green), var(--zgb-blue)); color: #fff; text-align: center; }
.home-cta__inner { max-width: 720px; margin-inline: auto; }
.home-cta .zgb-kicker { color: rgba(255,255,255,.85); }
.home-cta__title { color: #fff; font-size: var(--zgb-fs-h2); margin-bottom: var(--zgb-space-3); }
.home-cta__lede { color: rgba(247, 240, 230, .9); font-size: var(--zgb-fs-lede); margin-bottom: var(--zgb-space-6); }
.home-cta__actions { display: flex; gap: var(--zgb-space-3); justify-content: center; flex-wrap: wrap; }

.zgb-anchor { display: block; position: relative; top: calc(-1 * var(--zgb-header-h)); visibility: hidden; }

@media (max-width: 768px) {
	.w4__grid { grid-template-columns: repeat(2, 1fr); }
	.hero { min-height: 72svh; }
}
@media (max-width: 480px) {
	.w4__grid { grid-template-columns: 1fr; }
}