/**
 * Single case study — layout follows the printed PDF.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px.
 *
 * WHAT THIS MIRRORS (client asked for the printed layout to be kept)
 *
 *   project details (left)  +  main photo (right)
 *   opening text    (left)  +  two related photos stacked (right)
 *   repeated:  text, then a row of up to three photos
 *   strip:     services used / download / enquire
 *   related:   up to three hand-picked case studies
 *
 * The PDF's black background is deliberately NOT copied — the brief was to
 * follow the layout while keeping the site's own look.
 *
 *   brand yellow  #f6c445   ink #212121   rules/panels #ebebeb / #f4f4f4
 */

.makers-cs {
	--cs-brand: #f6c445;
	--cs-ink: #212121;
	--cs-muted: #5a5a5a;
	--cs-rule: #ebebeb;
	--cs-panel: #f4f4f4;
	--cs-gap: 3.5rem;

	/*
	 * MATCH THE SITE'S BODY COPY EXACTLY.
	 *
	 * Taken from the rule the rest of the site uses (style.css,
	 * `.wpb_text_column p`): 18px / 23px / weight 300 / #000. Earlier this only
	 * set the size and left weight, colour and leading to inherit, which read
	 * heavier and looser than every other page.
	 *
	 * Root font-size is 10px on this site, so 1.8rem = 18px and 2.3rem = 23px.
	 */
	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;
}

/* Total's #outer-wrap sets overflow:hidden, which silently disables
   position:sticky anywhere inside it. Relaxed only for converted studies so
   legacy WPBakery rows keep the clipping they depend on. */
body.makers-cs-converted #outer-wrap {
	overflow: visible;
	overflow-x: clip;
}

.makers-cs__header {
	border-bottom: 2px solid var(--cs-brand);
	padding-bottom: 1.2rem;
	margin: 0 0 var(--cs-gap);
}

.makers-cs__title {
	font-family: 'Lato', sans-serif;
	font-size: 2.4rem;      /* matches the existing case-study H1 */
	font-weight: 400;
	line-height: 1.5;
	color: var(--cs-ink);
	margin: 0;
}

/* ------------------------------------------------ project details + photo */

.makers-cs__intro {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 6fr);
	gap: var(--cs-gap);
	align-items: start;
	margin: 0 0 var(--cs-gap);
}

.makers-cs__factlist {
	margin: 0;
	padding: 0;
}

.makers-cs__fact {
	margin: 0 0 1.6rem;
}

/* The yellow label bar, straight from the PDF. */
.makers-cs__fact-label {
	display: block;
	margin: 0;
	padding: .7rem 1.4rem;
	background: var(--cs-brand);
	color: var(--cs-ink);
	font-weight: 700;
	font-size: 1.4rem;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.makers-cs__fact-value {
	margin: 0;
	padding: 1rem 1.4rem 0;
	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;
}

.makers-cs__mainimage {
	margin: 0;
}

.makers-cs__mainimage-img {
	display: block;
	width: 100%;
	height: auto;
	/*
	 * A landscape crop rather than letting portrait source photos run to full
	 * height — and a wider one than the 4:3 this started at.
	 *
	 * At 4:3 the hero stood about 120px taller than the project-details column
	 * beside it, which left the row looking bottom-heavy. 16:10 takes roughly
	 * 17% off the height and brings the two columns close to level.
	 *
	 * object-fit: cover means nothing is squashed — the crop tightens instead.
	 */
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

/* ------------------------------------------------ opening text + 2 photos */

.makers-cs__opening {
	display: grid;
	grid-template-columns: minmax(0, 6fr) minmax(0, 4fr);
	gap: var(--cs-gap);
	align-items: start;
	margin: 0 0 var(--cs-gap);
}

.makers-cs__opening-text > *:first-child { margin-top: 0; }
.makers-cs__opening-text > *:last-child  { margin-bottom: 0; }

.makers-cs__opening-images {
	display: grid;
	gap: 1.6rem;
}

/* ------------------------------------------------ content sections */

.makers-cs__section {
	margin: 0 0 var(--cs-gap);
}

.makers-cs__section-text {
	margin: 0 0 2rem;
}

.makers-cs__section-text > *:first-child { margin-top: 0; }
.makers-cs__section-text > *:last-child  { margin-bottom: 0; }

/* Editable copy, matching `.wpb_text_column p` elsewhere on the site so a case
   study reads identically to a normal content page. */
.makers-cs__opening-text p,
.makers-cs__section-text p,
.makers-cs__opening-text li,
.makers-cs__section-text li {
	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;
}

.makers-cs__opening-text p,
.makers-cs__section-text p {
	margin: 0 0 2rem;
}

/* A row of up to three photos, as on pages 2+ of the PDF. Sized by how many
   there actually are, so a row of two does not leave a gap. */
.makers-cs__row {
	display: grid;
	gap: 1.6rem;
}

.makers-cs__row--1 { grid-template-columns: minmax(0, 1fr); }
.makers-cs__row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.makers-cs__row--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* ------------------------------------------------ a photo + its label */

.makers-cs__photo {
	margin: 0;
}

.makers-cs__photo-link {
	display: block;
}

.makers-cs__photo-img {
	display: block;
	width: 100%;
	height: auto;
	/* Every photo in a row shares one crop so the row lines up, which is how
	   the PDF prints them. */
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* The yellow "Before" / "After" bar the PDF puts under a photo. Only appears
   when the image actually carries a stage — mid-works shots have none in the
   PDF either. */
.makers-cs__photo-label {
	margin: 0;
	padding: .6rem 1.2rem;
	background: var(--cs-brand);
	color: var(--cs-ink);
	font-size: 1.3rem;
	font-weight: 700;
}

/* ------------------------------------------------ services / pdf strip */

/* auto-fit rather than a fixed three columns: the strip carries three blocks on
   a study with no sector picked and four when there is one, and should not have
   to be edited again if another is ever added. */
.makers-cs__strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
	gap: var(--cs-gap);
	margin: 5rem 0 var(--cs-gap);
	padding: 3rem;
	background: var(--cs-panel);
}

.makers-cs__strip-title {
	margin: 0 0 1.2rem;
	font-size: 1.6rem;
	text-transform: uppercase;
	letter-spacing: .06em;
}

/*
 * Matches the services list on a sector page — hairline rows with a small brand
 * marker, no chips.
 *
 * These used to be white bordered chips, and so did the sector list. The sector
 * list has since become a plain list (the client's note, 1 Sep: the chips read
 * as buttons), which left the two pages showing the same information in two
 * different shapes. Same thing, same look.
 *
 * The one difference is deliberate and the client is happy with it: these stay
 * clickable, because a case study genuinely does lead somewhere useful, whereas
 * on a sector page only some services had a page and the resulting half-linked
 * list was what she asked us to fix.
 */
.makers-cs__servicelist {
	margin: 0;
	padding: 0;
	list-style: none;
}

.makers-cs__servicelist li {
	padding: .9rem 0 .9rem 1.8rem;
	border-bottom: 1px solid var(--cs-rule);
	font-size: 1.6rem;
	line-height: 1.4;
	position: relative;
}

/* A short brand rule rather than a bullet, same as the sector list. */
.makers-cs__servicelist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55rem;
	width: .8rem;
	height: 2px;
	background: var(--cs-brand);
}

/*
 * COLOUR MUST BE SET EXPLICITLY. Links here inherit the site's global link
 * colour, which is the brand yellow — about 1.7:1 against the grey panel, so
 * they were close to invisible and nowhere near the 4.5:1 normal text needs.
 * Ink clears 14:1 on this panel. That was the original reason for the white
 * chips; the chips have gone but the underlying problem has not.
 */
.makers-cs__servicelist a {
	color: var(--cs-ink);
	text-decoration: none;
	transition: color .2s ease;
}

/* Darkened brand gold, 4.60:1 on the panel — the brand itself is unreadable as
   text. Same value as the sector list uses. */
.makers-cs__servicelist a:hover,
.makers-cs__servicelist a:focus-visible {
	color: #886b00;
	text-decoration: none;
}

.makers-cs__pdf,
.makers-cs__enquire {
	display: inline-block;
	padding: 1rem 2rem;
	border: 2px solid var(--cs-ink);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--cs-ink);
	transition: background .15s ease, color .15s ease;
}

.makers-cs__pdf:hover,
.makers-cs__pdf:focus-visible,
.makers-cs__enquire:hover,
.makers-cs__enquire:focus-visible {
	background: var(--cs-ink);
	color: var(--cs-brand);
	text-decoration: none;
}

/* ------------------------------------------------ related case studies */

/* padding-bottom, not margin-bottom: a bottom margin here collapses straight
   through the article and Total's .site-content wrapper, so the related items
   sat flush against the footer. */
.makers-cs__related {
	margin: 0;
	padding: 4rem 0 6rem;
	border-top: 1px solid var(--cs-rule);
}

.makers-cs__related-title {
	margin: 0 0 2.4rem;
}

.makers-cs__related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--cs-gap);
}

.makers-cs__related-item {
	display: block;
	text-decoration: none;
	color: inherit;
}

.makers-cs__related-media {
	display: block;
	margin: 0 0 1.2rem;
}

/* Forced to a single ratio so three studies with different source photos still
   line up. */
.makers-cs__related-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.makers-cs__related-name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
	color: var(--cs-ink);
	/* Slow, so it reads as a soft response rather than a flicker. */
	transition: color .3s ease;
}

/* The hover cue is a gentle fade from near-black to grey. No underline and no
   rule beneath — both read as underlines. Nothing moves, so it stays quiet. */
.makers-cs__related-item:hover .makers-cs__related-name,
.makers-cs__related-item:focus-visible .makers-cs__related-name {
	color: var(--cs-muted);
}

/* ------------------------------------------------ narrower screens */

@media only screen and (max-width: 959px) {

	.makers-cs__intro,
	.makers-cs__opening {
		grid-template-columns: minmax(0, 1fr);
	}

	/* Photos that sat beside the text now sit under it, side by side, so they
	   stay close to the text they belong to rather than stacking into a long
	   column. */
	.makers-cs__opening-images {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.makers-cs__strip {
		grid-template-columns: minmax(0, 1fr);
		gap: 2.4rem;
	}

	.makers-cs__related-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media only screen and (max-width: 767px) {

	.makers-cs {
		--cs-gap: 2.4rem;
	}

	/* Three across is too small on a phone; two reads better and keeps the
	   row grouping intact. */
	.makers-cs__row--3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.makers-cs__related-grid {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ================================================== no hover underlines

   Total's base rule is `a:hover { text-decoration: underline }`, and the theme
   then cancels it for every button, card title, menu item and footer link —
   the underline is only left on plain body copy. Everything in this template is
   a button, a chip or a card, so it follows the same convention.

   Scoped to the case-study article rather than set globally: a site-wide change
   would also strip the underline from body-copy links on every legacy WPBakery
   page, which is a separate decision. */
.makers-cs a:hover,
.makers-cs a:focus,
.makers-cs a:focus-visible {
	text-decoration: none;
}