/* Our Story and Quality pages. Shares bands, CTA and certificates with the homepage styles. */

.gp-story-page > *,
.gp-story-page .wp-block-post-content > * {
	margin-block: 0;
}

.gp-page-sections > * + * {
	margin-top: 0;
}

/* ---------- Page hero: graded photo, floating photo layer in perspective ---------- */

.gp-ph {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: clamp(26rem, 70svh, 42rem);
	background: var(--wp--preset--color--ink);
}

.gp-ph__bg {
	position: absolute;
	inset: -6% 0;
	z-index: -1;
}

.gp-ph__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: saturate(0.75);
	translate: 0 var(--gp-shift, 0);
}

.gp-ph__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgb(21 22 58 / 0.94) 0%, rgb(21 22 58 / 0.78) 50%, rgb(36 37 106 / 0.5) 100%),
		linear-gradient(0deg, rgb(21 22 58 / 0.85), transparent 40%);
}

.gp-ph__inner {
	position: relative;
	z-index: 3;
	display: grid;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: center;
	padding-block: clamp(3rem, 2rem + 5vw, 6rem);
}

@media (min-width: 64em) {
	.gp-ph__inner {
		grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	}
}

.gp-ph__copy > * {
	margin-block: 0;
}

.gp-ph__title {
	font-size: clamp(2.5rem, 1.6rem + 3.8vw, 4.75rem);
	line-height: 1.02;
	letter-spacing: -0.02em;
}

.gp-ph__lead {
	margin-top: 1.25rem !important;
	max-width: 40rem;
	font-size: var(--wp--preset--font-size--lead);
	line-height: 1.6;
	color: rgb(255 255 255 / 0.86);
}

.gp-ph__stage {
	perspective: 1600px;
	justify-self: end;
	width: min(100%, 34rem);
}

.gp-ph__layer {
	position: relative;
	margin: 0;
	transform: rotateY(calc(-8deg + var(--gp-ry, 0deg))) rotateX(calc(2deg + var(--gp-rx, 0deg)));
	transition: transform var(--wp--custom--motion--slow) var(--wp--custom--motion--ease);
}

.gp-ph__layer img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: 0 50px 90px -40px rgb(0 0 0 / 0.8), 0 0 0 1px rgb(255 255 255 / 0.14);
}

.gp-ph__layer figcaption,
.gp-split__photo figcaption,
.gp-why__photo figcaption {
	position: absolute;
	left: 0.75rem;
	bottom: 0.75rem;
	margin: 0;
	padding: 0.3rem 0.6rem;
	border-radius: var(--wp--custom--radius--small);
	background: rgb(21 22 58 / 0.78);
	backdrop-filter: blur(6px);
	color: var(--wp--preset--color--white);
	font-size: 0.8125rem;
}

@media (max-width: 63.99em) {
	.gp-ph__stage {
		display: none;
	}
}

@media (prefers-reduced-motion: no-preference) {
	body:not(.gp-motion-off) .gp-ph__copy > * {
		animation: gp-rise 800ms var(--wp--custom--motion--ease) both;
	}

	body:not(.gp-motion-off) .gp-ph__copy > :nth-child(2) {
		animation-delay: 140ms;
	}

	body:not(.gp-motion-off) .gp-ph__layer {
		animation: gp-settle 1100ms var(--wp--custom--motion--ease) both;
	}
}

/* ---------- Text + photo band ---------- */

.gp-split__grid {
	display: grid;
	gap: var(--wp--preset--spacing--60) var(--wp--preset--spacing--70);
	align-items: center;
}

@media (min-width: 60em) {
	.gp-split__grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}

.gp-split__copy > * {
	margin-block: 0;
}

.gp-split__copy > * + * {
	margin-top: 1rem;
}

.gp-split__copy p {
	color: var(--wp--preset--color--steel);
}

.gp-split__copy p:first-of-type {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--wp--preset--color--text);
}

.gp-split__photo,
.gp-why__photo {
	position: relative;
	margin: 0;
}

.gp-split__photo img,
.gp-why__photo img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--large);
	box-shadow: var(--wp--preset--shadow--lifted);
}

/* Offset metal plate behind the photo gives the band depth. */
.gp-split__photo::before {
	content: "";
	position: absolute;
	inset: 1.5rem -1.5rem -1.5rem 1.5rem;
	z-index: -1;
	border-radius: var(--wp--custom--radius--large);
	background: var(--wp--preset--gradient--metal);
	border: 1px solid var(--wp--preset--color--rule);
}

.gp-split {
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

/* ---------- Vision, mission, values: typography-led rows on a dark band ---------- */

.gp-vmv {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--wp--preset--color--ink);
}

.gp-vmv__bg {
	position: absolute;
	inset: -10% 0;
	z-index: -1;
	opacity: 0.22;
}

.gp-vmv__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.4);
	translate: 0 var(--gp-shift, 0);
}

.gp-vmv__title {
	margin: 0 0 var(--wp--preset--spacing--60);
	font-size: var(--wp--preset--font-size--heading-2);
}

.gp-vmv__rows {
	display: grid;
}

.gp-vmv__row {
	display: grid;
	gap: 0.5rem 3rem;
	padding-block: clamp(1.5rem, 3vw, 2.5rem);
	border-top: 1px solid rgb(255 255 255 / 0.16);
	position: relative;
}

.gp-vmv__row::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 3rem;
	height: 2px;
	background: var(--wp--preset--color--amber);
}

@media (min-width: 56em) {
	.gp-vmv__row {
		grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 2fr);
		align-items: baseline;
	}
}

.gp-vmv__row > * {
	margin: 0;
}

.gp-vmv__word {
	font-size: clamp(2.5rem, 1.5rem + 4vw, 5rem);
	font-weight: 700;
	font-stretch: 115%;
	line-height: 1;
	letter-spacing: -0.03em;
	color: transparent;
	-webkit-text-stroke: 1.5px rgb(255 255 255 / 0.85);
}

.gp-vmv__text {
	font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem);
	line-height: 1.55;
	color: rgb(255 255 255 / 0.9);
	max-width: 52ch;
}

/* ---------- Why General Petroleum ---------- */

.gp-why {
	background: var(--wp--preset--color--surface);
}

.gp-why__title {
	margin: 0 0 var(--wp--preset--spacing--60);
	max-width: 20ch;
}

.gp-why__item {
	display: grid;
	gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--70);
	align-items: center;
}

.gp-why__item + .gp-why__item {
	margin-top: var(--wp--preset--spacing--70);
}

@media (min-width: 60em) {
	.gp-why__item {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}

	.gp-why__item--flip .gp-why__photo {
		order: 2;
	}
}

.gp-why__copy > * {
	margin-block: 0;
}

.gp-why__copy > * + * {
	margin-top: 1rem;
}

.gp-why__copy h3 {
	font-size: var(--wp--preset--font-size--heading-3);
}

.gp-why__copy p {
	color: var(--wp--preset--color--steel);
}

/* ---------- Quality page bands ---------- */

.gp-quality__lead {
	max-width: 60ch;
	margin: 0 0 var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--steel);
	font-size: var(--wp--preset--font-size--lead);
}

.gp-certs-band h2 {
	margin-bottom: var(--wp--preset--spacing--50);
}

.gp-certs-band--quality-approvals {
	background: var(--wp--preset--color--surface);
}

.gp-certs-band--iso-management-system .gp-certs__list {
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.gp-certs-band--iso-management-system .gp-cert {
	padding: 2rem 1.75rem;
}

.gp-certs-band--iso-management-system .gp-cert__name {
	font-size: clamp(1.75rem, 1.3rem + 1.5vw, 2.4rem);
}