/**
 * Sectors — landing page and single sector.
 *
 * Remember: html root font-size is 10px on this site, so 1rem = 10px.
 *
 * Deliberately shares the case-study visual language — same brand rule under
 * the heading, same grey panel, same card grid, same 18/23/300 body copy — so
 * moving between a sector and a case study does not feel like two sites.
 *
 *   brand yellow  #f6c445   ink #212121   rules/panels #ebebeb / #f4f4f4
 */

.makers-sector,
.makers-sectors {
	--sec-brand: #f6c445;
	--sec-ink: #212121;
	--sec-muted: #5a5a5a;
	--sec-rule: #ebebeb;
	/* A darkened brand gold for text. The brand #f6c445 is only 1.48:1 on the
	   panel — invisible as a link colour — so hover uses this instead, measured
	   at 4.60:1 and clear of the 4.5 AA floor. */
	--sec-brand-ink: #886b00;
	--sec-panel: #f4f4f4;
	--sec-gap: 3.5rem;

	/* Matches `.wpb_text_column p` in style.css, which is what every other
	   content page on this site uses. Set here rather than inherited so a
	   sector page reads identically to a normal page. */
	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;
}

/* ------------------------------------------------ clear the footer

   Total floats the content column on singular templates, and this site's legacy
   stylesheet clears the footer one template at a time — .single-post,
   .single-casestudies, .blog and .search-results each carry a `clear: both` on
   #footer-bottom-inner. Any NEW singular template has to join that list.

   Without it the footer lands beside the float. #footer-bottom-inner's inner
   row is display:flex, and a flex container establishes a block formatting
   context, so rather than overlapping the float the way a plain block would it
   shrinks to whatever space is left — about 45px. That is what squeezed the
   copyright line into one word per line. */
.single-sectors #footer-bottom-inner {
	clear: both;
}

/* ================================================== landing page */

/* Total gives SINGLES their white card by styling #single-blocks — which is why
   the single-sector template carries that id and needs nothing here. A Page
   rendered by a custom template has no equivalent, so without this the landing
   page sits straight on the dark body texture. Padding matches Total's own
   #single-blocks (40px 60px) so it lines up with every other content page.
   Same fix, same reason, as the Knowledge Hub archive. */
.makers-sectors {
	background: #fff;
	padding: 4rem 6rem 6rem;
	margin-bottom: 6rem;
}

.makers-sectors__intro {
	max-width: 82ch;
	margin: 0 0 var(--sec-gap);
}

.makers-sectors__intro p {
	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;
	margin: 0 0 2rem;
}

.makers-sectors__intro > *:last-child {
	margin-bottom: 0;
}

.makers-sectors__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2.4rem;
	margin: 0 0 6rem;
}

.makers-sectors__card {
	display: block;
	text-decoration: none;
	color: inherit;
	background: #fff;
	border: 1px solid var(--sec-rule);
	transition: border-color .15s ease, transform .15s ease;
}

.makers-sectors__card:hover,
.makers-sectors__card:focus-visible {
	border-color: var(--sec-brand);
	text-decoration: none;
	transform: translateY(-2px);
}

.makers-sectors__card-media {
	display: block;
}

/* One ratio across the row so eight different source photos still line up. */
.makers-sectors__card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.makers-sectors__card-body {
	display: block;
	padding: 1.6rem 1.8rem 2rem;
}

.makers-sectors__card-name {
	display: block;
	font-weight: 700;
	font-size: 1.8rem;
	line-height: 1.3;
	color: var(--sec-ink);
	transition: color .3s ease;
}

.makers-sectors__card-text {
	display: block;
	margin-top: .8rem;
	font-size: 1.5rem;
	line-height: 2rem;
	color: var(--sec-muted);
}

/* Same gentle fade as the case-study cards. The card itself also lifts and its
   border picks up the brand colour, so this only has to be a whisper. */
.makers-sectors__card:hover .makers-sectors__card-name,
.makers-sectors__card:focus-visible .makers-sectors__card-name {
	color: var(--sec-muted);
}

/* ================================================== single sector */

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

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

.makers-sector__standfirst {
	margin: .8rem 0 0;
	font-size: 1.8rem;
	line-height: 2.4rem;
	font-weight: 300;
	color: var(--sec-muted);
}

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

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

.makers-sector__intro-text p,
.makers-sector__intro-text li {
	font-size: 1.8rem;
	line-height: 2.3rem;
	font-weight: 300;
	color: #000;
}

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

.makers-sector__image {
	margin: 0;
}

.makers-sector__image-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ---------------------------------------------- the two panels

   Below the intro, not beside it: a sector's copy is one short paragraph and an
   image plus a panel is about twice as tall, which left a screen-deep void next
   to the text when they were stacked in the right-hand column. */

.makers-sector__band {
	display: grid;
	gap: var(--sec-gap);
	align-items: start;
	margin: 0 0 var(--sec-gap);
}

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

.makers-sector__panel {
	padding: 2.6rem 3rem;
	background: var(--sec-panel);
	height: 100%;
}

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

.makers-sector__pointlist {
	margin: 0;
	padding: 0 0 0 1.8rem;
}

.makers-sector__pointlist li {
	margin: 0 0 .8rem;
	font-size: 1.7rem;
	line-height: 2.2rem;
	font-weight: 300;
}

.makers-sector__pointlist li:last-child {
	margin-bottom: 0;
}

/*
 * A LIST, NOT A ROW OF BUTTONS.
 *
 * These were white bordered chips, and the client's note (1 Sep) was that they
 * looked too much like buttons. She was right, and for a reason beyond taste:
 * the same page ends with "Other sectors we work in", which IS a row of
 * buttons because it is navigation. Two identical-looking rows doing different
 * jobs flattened the hierarchy — and worse, the chips gave every item the
 * affordance of a link when only some of them are linked.
 *
 * So: a plain multi-column list, hairline-separated, with a small brand-yellow
 * marker. It reads as "here is what we do here" rather than "press me", and it
 * leaves the button styling to the thing that actually navigates.
 *
 * Columns rather than one long list because most sectors carry six to eight
 * items — a single column left a lot of white space beside it.
 */
.makers-sector__servicelist {
	margin: 0;
	padding: 0;
	list-style: none;
	columns: 2;
	column-gap: 4rem;
}

.makers-sector__servicelist li {
	/* Stops an item being split down the middle across the column break. */
	break-inside: avoid;
	padding: .9rem 0 .9rem 1.8rem;
	border-bottom: 1px solid var(--sec-rule);
	font-size: 1.6rem;
	line-height: 1.4;
	position: relative;
}

/* The marker. A short yellow rule rather than a bullet — the same accent the
   headings use, so the list belongs to the page rather than to the browser. */
.makers-sector__servicelist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 1.55rem;
	width: .8rem;
	height: 2px;
	background: var(--sec-brand);
}

/*
 * Every item is plain text — see the template. There is deliberately no link
 * styling here any more: the list is a statement of what Makers do in this
 * sector, not a set of destinations, and the old mix of linked and unlinked
 * items was what the client asked us to fix.
 */
.makers-sector__servicelist li {
	color: var(--sec-ink);
}

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

.makers-sector__section-title {
	margin: 0 0 2.4rem;
	font-size: 2rem;
	font-weight: 400;
	color: var(--sec-ink);
}

.makers-sector__studies {
	margin: 0 0 var(--sec-gap);
}

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

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

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

.makers-sector__card-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.makers-sector__card-name {
	display: block;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sec-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-sector__card:hover .makers-sector__card-name,
.makers-sector__card:focus-visible .makers-sector__card-name {
	color: var(--sec-muted);
}

/* ---------------------------------------------- call to action */

.makers-sector__cta {
	margin: 0 0 var(--sec-gap);
	padding: 3rem;
	background: var(--sec-panel);
	border-left: 4px solid var(--sec-brand);
}

.makers-sector__cta-title {
	margin: 0 0 1rem;
	font-size: 2rem;
	font-weight: 400;
	color: var(--sec-ink);
}

.makers-sector__cta-text {
	margin: 0 0 2rem;
	max-width: 62ch;
	font-size: 1.7rem;
	line-height: 2.4rem;
	color: var(--sec-muted);
}

.makers-sector__cta-btn {
	display: inline-block;
	padding: 1.2rem 2.6rem;
	border: 2px solid var(--sec-ink);
	background: var(--sec-ink);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.makers-sector__cta-btn:hover,
.makers-sector__cta-btn:focus-visible {
	background: var(--sec-brand);
	border-color: var(--sec-brand);
	color: var(--sec-ink);
	text-decoration: none;
}

/* ---------------------------------------------- other sectors */

/* padding-bottom, not margin-bottom: a bottom margin here collapses straight
   through the article and Total's .site-content wrapper, so the list would sit
   flush against the footer — the same trap the case-study template hit. */
.makers-sector__others {
	margin: 0;
	padding: 4rem 0 6rem;
	border-top: 1px solid var(--sec-rule);
}

.makers-sector__otherlist {
	display: flex;
	flex-wrap: wrap;
	gap: .8rem 1.2rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.makers-sector__otherlist a {
	display: inline-block;
	padding: .8rem 1.6rem;
	border: 2px solid var(--sec-ink);
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sec-ink);
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.makers-sector__otherlist a:hover,
.makers-sector__otherlist a:focus-visible {
	background: var(--sec-ink);
	color: var(--sec-brand);
	text-decoration: none;
}

/* ================================================== narrower screens */

@media only screen and (max-width: 1199px) {
	.makers-sectors__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

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

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

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

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

	.makers-sector,
	.makers-sectors {
		--sec-gap: 2.4rem;
	}

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

	/* One column. Two columns inside a phone-width panel gave each item 128px,
	   which wrapped "Structural Refurbishment" onto three lines. */
	.makers-sector__servicelist {
		columns: 1;
	}

	/* One panel per row on a phone. */
	.makers-sector__band--2 {
		grid-template-columns: minmax(0, 1fr);
	}

	.makers-sector__panel {
		padding: 2rem;
	}

	/* The 60px side padding of the white card is too much on a phone. */
	.makers-sectors {
		padding: 2.4rem 2rem 3rem;
	}
}

/* ================================================== 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 —
   underlining on hover is only left on plain body copy. Our components are
   buttons and cards, so they follow the same convention.

   Scoped to the sector templates 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 different decision. */
.makers-sector a:hover,
.makers-sector a:focus,
.makers-sector a:focus-visible,
.makers-sectors a:hover,
.makers-sectors a:focus,
.makers-sectors a:focus-visible {
	text-decoration: none;
}