/* Case study and blog post pages (single-case_studies.php, single-resources.php). */

/* Wide photo in the hero: landscape project shots and post images. */
.oms-hero__photos--wide .oms-hero__photo {
	aspect-ratio: 4 / 3;
}

@media (min-width: 1024px) {
	.oms-hero__photos--wide {
		width: min(520px, 40vw);
	}
}

/* Case study hero: the stat leads, in a light step of the lead service colour. */
.case-hero__stat {
	margin: 4px 0 6px;
	font-family: var(--font-head);
	font-size: clamp(3rem, 2rem + 4vw, 5.5rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.03em;
	color: color-mix(in srgb, var(--swatch, var(--amber)) 70%, #fff);
}

.case-hero__pills {
	margin-top: 22px;
}

.oms-hero--case .oms-hero__photo::after {
	background: var(--swatch, var(--amber));
}

/* At a glance: three facts across, each under a swatch strand. */
.case-glance {
	padding-block: clamp(48px, 6vw, 80px);
}

.glance {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(24px, 3vw, 48px);
}

.glance__item {
	display: grid;
	align-content: start;
	gap: 12px;
	padding-top: 22px;
	border-top: 6px solid var(--oms-colour-one, var(--amber));
}

.glance__item:nth-child(2) { border-top-color: var(--oms-colour-two, var(--amber)); }
.glance__item:nth-child(3) { border-top-color: var(--swatch, var(--oms-colour-three)); }

.glance dt {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-text);
}

.glance dd {
	margin: 0;
}

.glance__value {
	font-family: var(--font-head);
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	font-weight: 700;
	color: var(--heading);
}

.glance__services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.glance__services a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--heading);
	font-weight: 500;
	text-decoration: none;
}

.glance__services a::before {
	content: '';
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--swatch, var(--amber));
}

.glance__services a:hover {
	border-color: var(--swatch, var(--amber));
}

.glance__stat {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(2rem, 1.5rem + 1.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1;
	letter-spacing: -.02em;
	color: color-mix(in srgb, var(--swatch, var(--amber)) 55%, var(--ink));
}

.glance__desc {
	display: block;
	margin-top: 8px;
}

/* Long-form copy: capped for reading, left on the shared edge. */
.prose--article {
	max-width: 760px;
	font-size: 1.125rem;
	line-height: 1.75;
}

.prose--article h2 {
	margin-top: 1.6em;
	font-size: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);
}

.prose--article h3 {
	margin-top: 1.4em;
}

.prose--article img {
	border-radius: var(--radius-lg);
}

.prose--article blockquote {
	padding-left: 24px;
	border-left: 4px solid var(--amber);
	font-family: var(--font-head);
	font-size: 1.375rem;
	font-weight: 700;
	color: var(--heading);
}

.case-video__frame {
	overflow: hidden;
	border-radius: var(--radius-lg);
	background: var(--ink);
}

.case-video__frame video,
.case-video__frame iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
}

/* Blog post: article and a sidebar. */
.post-hero__title {
	font-size: clamp(2.5rem, 1.5rem + 3vw, 4.25rem);
}

.post-hero__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 18px 0 8px;
	font-size: .9375rem;
	color: var(--on-dark-muted);
}

.post-body__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
	gap: clamp(40px, 6vw, 96px);
	align-items: start;
}

/* The sidebar scrolls with the page (Andy's call): no sticky. */
.post-body__aside {
	display: grid;
	gap: 24px;
}

.post-aside__label {
	margin: 0 0 12px;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber-text);
}

.post-aside__label + * + .post-aside__label {
	margin-top: 28px;
}

.post-share,
.post-topics {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
}

.post-share a,
.post-topics a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	border: 1px solid var(--line);
	border-radius: 999px;
	color: var(--heading);
	font-weight: 500;
	text-decoration: none;
}

.post-share a:hover,
.post-topics a:hover {
	border-color: var(--amber);
}

.post-promo {
	position: relative;
	display: grid;
	gap: 12px;
	padding: 28px;
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: var(--on-dark-muted);
}

.post-promo__strand {
	display: flex;
	gap: 5px;
	margin-bottom: 6px;
}

.post-promo__strand i {
	width: 28px;
	height: 5px;
	border-radius: 5px;
	background: var(--oms-colour-one);
}

.post-promo__strand i:nth-child(2) { background: var(--oms-colour-two); width: 20px; }
.post-promo__strand i:nth-child(3) { background: var(--oms-colour-three); width: 36px; }
.post-promo__strand i:nth-child(4) { background: var(--oms-colour-four); width: 14px; }
.post-promo__strand i:nth-child(5) { background: var(--oms-colour-five); width: 24px; }

.post-promo__title {
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.post-promo .btn {
	margin-top: 8px;
}

@media (max-width: 1023px) {
	.post-body__grid { grid-template-columns: minmax(0, 1fr); }
	.glance { grid-template-columns: minmax(0, 1fr); }
}

/* Vacancy pages */
.vacancy-facts--hero li {
	border-color: var(--line-dark);
	color: #fff;
}

.vacancy-hero__closing {
	margin-top: 14px;
	color: var(--on-dark-muted);
}

.vacancy-glance {
	display: grid;
	gap: 14px;
	margin: 6px 0 8px;
}

.vacancy-glance dt {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--amber);
}

.vacancy-glance dd {
	margin: 2px 0 0;
	color: #fff;
}

/* At a glance inside the case study's main column: three across, then stacked. */
.case-body .glance {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.case-body .case-story,
.case-body .case-video__frame {
	margin-top: clamp(40px, 5vw, 64px);
}

/* Sidebar contact form */
.side-enquiry {
	display: grid;
	gap: 12px;
	padding: 28px;
	border-radius: var(--radius-lg);
	background: var(--ink);
	color: var(--on-dark-muted);
}

.side-enquiry__title {
	font-family: var(--font-head);
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.15;
	color: #fff;
}

.side-enquiry__text {
	font-size: .9375rem;
}

.form-card--side {
	margin-top: 6px;
	padding: 22px;
	box-shadow: none;
	border-top: 0;
}

.form-card--side .gform_wrapper.gform_wrapper .gform_fields {
	row-gap: 14px;
}

.form-card--side .gform_wrapper.gform_wrapper textarea {
	min-height: 110px;
	height: 110px;
}

.form-card--side .gform_wrapper.gform_wrapper .gform_footer {
	margin-top: 16px;
}

.side-enquiry__tel {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 6px;
	color: #fff;
	font-weight: 600;
	text-decoration: none;
}

.side-enquiry__tel .icon-chip {
	width: 40px;
	height: 40px;
}

.side-enquiry__tel .icon-chip svg {
	width: 20px;
	height: 20px;
}

.side-enquiry__tel-label {
	display: block;
	font-size: .8125rem;
	font-weight: 400;
	color: var(--on-dark-muted);
}

@media (max-width: 1023px) {
	.case-body .glance { grid-template-columns: minmax(0, 1fr); }
}

/* Post images often carry text, so in the post hero they keep their own shape. */
.oms-hero__photos--natural .oms-hero__photo {
	aspect-ratio: auto;
}

.oms-hero__photos--natural .oms-hero__photo img {
	position: static;
	height: auto;
}