/* Small Group Journeys: hero (v2, Figma 375:1892, mobile 404:1993).
 *
 * One split banner on navy deep (#123458): the copy on the left, starting on
 * the 1400px container edge, and the photo on the right at full height. The
 * live header stays absolute over it. From 900 to 1199px it is still split,
 * with the photo at 40%; below 900px the photo comes first (39:32) and fades
 * into the navy, with the copy under it. Built on the .ot-section scaffold;
 * port this file to astra-child with the section markup. */

.ot-section.g--sgj-hero {
	/* Navy deep, as the live itinerary sections (rgb(18, 52, 88)). */
	--sgj-hero-bg: #123458;
	display: grid;
	grid-template-columns: minmax(0, 1fr) 43.75%;
	background-color: var(--sgj-hero-bg);
	color: var(--ast-global-color-4);
}

/* The live theme pads the first section of every page by the header's height;
 * here the copy's own top padding clears the header. */
body .site-content .primary > section.ot-section.g--sgj-hero:first-child {
	padding-top: 0;
}

/* Photo column: full height, cover, with the design's overlays (a left fade
 * into the copy and a top fade under the menu). */
.g--sgj-hero__media {
	position: relative;
	grid-column: 2;
	grid-row: 1;
	overflow: hidden;
}

.g--sgj-hero__media picture,
.g--sgj-hero__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.g--sgj-hero__media img {
	object-fit: cover;
	object-position: 50% 50%;
}

.g--sgj-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, rgba(18, 52, 88, 0.6) 0%, rgba(18, 52, 88, 0) 22%),
		linear-gradient(90deg, #123458 0%, rgba(18, 52, 88, 0.55) 18%, rgba(18, 52, 88, 0) 45%);
	pointer-events: none;
}

/* Copy column: 196 / 100 / 120 at 1920, and the left edge on the container
 * (260 at 1920, 20px gutters from 1440 down). */
.ot-section.g--sgj-hero > .ot-section__container {
	grid-column: 1;
	grid-row: 1;
	justify-content: center;
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 196px 100px 120px max(20px, calc((100vw - 1400px) / 2));
}

.g--sgj-hero .ot-section__content {
	display: flex;
	flex-direction: column;
	gap: 24px;
	color: inherit;
}

.g--sgj-hero .ot-section__content > * {
	margin: 0;
}

/* Eyebrow: Hypatia 18/25.2, uppercase, gold. */
.ot-section.g--sgj-hero .ot-section__content p.ot-section__eyebrow {
	font-family: var(--heading-font-family);
	font-size: var(--h4-font-size);
	font-weight: 400;
	line-height: 1.4;
	text-transform: uppercase;
	color: var(--ast-global-color-0);
}

/* H1: Hypatia 64/76.8 (32/38.4 below 1366, the live h1 size), first line 400,
 * second 300. */
.g--sgj-hero .ot-section__content > h1 {
	color: inherit;
	line-height: 1.2;
}

/* Lead: Hypatia 400 24/31.2 (22/28.6 below 1366). */
.ot-section.g--sgj-hero .ot-section__content p.g--sgj-hero__lead {
	font-family: var(--heading-font-family);
	font-size: var(--h3-font-size);
	font-weight: 400;
	line-height: 1.3;
	color: inherit;
}

/* Body: Inter 300 16/28 (15/26.25), white 85%, at full column width (the live
 * g-- sections cap paragraphs at 600px). */
.ot-section.g--sgj-hero .ot-section__content p {
	max-width: none;
	color: rgba(255, 255, 255, 0.85);
}

/* Buttons 16px under the body (40 in all) and 24px apart. */
.ot-section.g--sgj-hero .ot-section__buttons {
	gap: 24px;
	margin-top: 40px;
}

.g--sgj-hero .ot-section__buttons .button + .button {
	margin-left: 0;
}

/* 900 to 1199: still split, the photo at 40%, copy padding 160 / 48 / 96 / 40. */
@media (min-width: 900px) and (max-width: 1199px) {
	.ot-section.g--sgj-hero {
		grid-template-columns: minmax(0, 1fr) 40%;
	}

	.ot-section.g--sgj-hero > .ot-section__container {
		padding: 160px 48px 96px 40px;
	}
}

/* Below 900: the photo first, full width at 39:32 under the header, fading
 * into the navy; the copy under it, left aligned, gap 18; buttons full width,
 * stacked 12 apart. */
@media (max-width: 899px) {
	.ot-section.g--sgj-hero {
		grid-template-columns: minmax(0, 1fr);
	}

	.g--sgj-hero__media {
		grid-column: 1;
		aspect-ratio: 39 / 32;
	}

	.g--sgj-hero__media::after {
		background: linear-gradient(180deg, rgba(18, 52, 88, 0.7) 0%, rgba(18, 52, 88, 0) 30%, rgba(18, 52, 88, 0.2) 70%, #123458 100%);
	}

	.ot-section.g--sgj-hero > .ot-section__container {
		grid-row: 2;
		padding: 8px 20px 56px;
	}

	.g--sgj-hero .ot-section__content {
		gap: 18px;
	}

	.ot-section.g--sgj-hero .ot-section__content p.g--sgj-hero__lead {
		font-weight: 300;
	}

	.ot-section.g--sgj-hero .ot-section__buttons {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		margin-top: 26px;
	}

	.g--sgj-hero .ot-section__buttons .button {
		width: 100%;
		text-align: center;
	}
}