/* =========================================================
   Tours listing page (page-tours.php) — hero block only.
   Calendar / testimonials / CTA-social reuse main.css + trip.css.
   ========================================================= */

.page-tours .tours-hero {
	/* Horizontal gutter comes from the inner .container — don't add it here too,
	   or the H1 would be indented twice and misalign with the calendar below. */
	padding-block: 80px 0;
	background: var(--color-bg);
}

.page-tours .tours-hero__inner {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.page-tours .tours-hero__title {
	font-family: var(--font-display);
	font-size: 66px;          /* matches .trip-calendar__title (Figma Desktop/H2) */
	font-weight: 400;
	line-height: 1.12;
	color: var(--color-text-dark);
	margin: 0;
}

.page-tours .tours-hero__lead {
	max-width: 820px;
	color: var(--color-text);
	font-size: 19px;
	line-height: 1.6;
}

.page-tours .tours-hero__lead p {
	margin: 0 0 0.75em;
}

.page-tours .tours-hero__lead p:last-child {
	margin-bottom: 0;
}

/* The calendar section already carries 100px top padding, so the hero only
   needs a little breathing room above the calendar header below it. */
.page-tours .trip-calendar {
	padding-top: 56px;
}

/* ── SEO description (below the calendar) ───────────────── */
/* Shares the .container box, so it left-aligns with the H1 and calendar. */
.page-tours .tours-seo {
	padding-block: 8px 72px;
	background: var(--color-bg);
}

.page-tours .tours-seo__inner {
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.7;
}

.page-tours .tours-seo__inner p {
	max-width: 95ch;       /* comfortable measure; stays left-aligned */
	margin: 0 0 1em;
}

.page-tours .tours-seo__inner p:last-child {
	margin-bottom: 0;
}

/* ── Tablet ─────────────────────────────────────────────── */
@media (max-width: 744px) {
	.page-tours .tours-hero {
		padding-top: 56px;
	}
	.page-tours .tours-hero__title {
		font-size: 44px;
	}
	.page-tours .tours-hero__lead {
		font-size: 17px;
	}
}

/* ── Mobile ─────────────────────────────────────────────── */
@media (max-width: 480px) {
	.page-tours .tours-hero__title {
		font-size: 34px;
	}
}