/**
 * BRO Electrical — shared styles for the four individual project
 * case-study pages (page-loft-conversion-leeds.php,
 * page-kitchen-extension-wakefield.php,
 * page-house-renovation-rewire-yeadon.php,
 * page-bungalow-conversion-boston-spa.php), including the photo
 * carousel component (behaviour in assets/js/carousel.js).
 */

.bro-cs-page section {
	padding: var(--bro-section-spacing) 0;
}

/* Defensive: a long single word in a heading (found during mobile QA on
   the final CTA of one case study) should break rather than overflow. */
.bro-cs-page h1,
.bro-cs-page h2 {
	overflow-wrap: break-word;
}

/* ---- Hero ---- */

.bro-cs-hero {
	background: var(--bro-charcoal);
}

.bro-cs-hero__inner {
	max-width: 50rem;
}

.bro-cs-hero__inner h1 {
	font-size: var(--bro-text-hero);
	font-weight: 800;
	line-height: 1.05;
	letter-spacing: -0.01em;
	color: var(--bro-white);
	margin: 1rem 0 1.5rem;
}

.bro-cs-hero__lead {
	font-size: var(--bro-text-lg);
	font-weight: 600;
	line-height: 1.55;
	color: var(--bro-white);
	max-width: 52ch;
	margin: 0 0 1.5rem;
}

.bro-cs-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem 2.75rem;
	margin: 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bro-border-on-dark);
}

.bro-cs-meta dt {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-muted-on-dark);
	margin: 0 0 0.35rem;
}

.bro-cs-meta dd {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 700;
	color: var(--bro-white);
	margin: 0;
}

/* ---- Gallery (carousel) section ---- */

.bro-cs-gallery {
	background: var(--bro-offwhite);
}

/* ---- Carousel component ----
   Two "fit" modes, set via the data-carousel-fit attribute on the root
   (see assets/js/carousel.js):

   - "dynamic" (individual case-study pages): the viewport box hugs the
     ACTIVE photo's own aspect ratio — tall/narrow for a portrait photo,
     wide for a landscape one — computed in JS from that photo's width/
     height attributes and applied as inline width/height, which this
     CSS then transitions smoothly. Bounded by --bro-cs-stage-min-h /
     --bro-cs-stage-max-h below. object-fit stays "contain" as a pure
     safety net for rounding only — since the box ratio is calculated
     FROM the photo's own ratio, there is no visible letterboxing.
   - "cover" (main Projects hub tiles): a fixed aspect-ratio box, photo
     cropped to fill it — see the --tile modifier further down.
*/

.bro-cs-carousel {
	position: relative;
}

.bro-cs-carousel__viewport {
	--bro-cs-stage-min-h: 300px;
	--bro-cs-stage-max-h: 620px;
	position: relative;
	overflow: hidden;
	border-radius: var(--bro-radius-sm);
	background: var(--bro-offwhite);
	margin: 0 auto;
	/* Sensible pre-JS / no-JS fallback: a plain responsive box, no
	   dependency on the dynamic sizing script having run yet. */
	width: 100%;
	height: clamp(var(--bro-cs-stage-min-h), 52vw, var(--bro-cs-stage-max-h));
	transition: width 450ms var(--bro-ease), height 450ms var(--bro-ease);
}

@media (max-width: 900px) {
	.bro-cs-carousel__viewport {
		--bro-cs-stage-max-h: 520px;
	}
}

@media (max-width: 640px) {
	.bro-cs-carousel__viewport {
		--bro-cs-stage-min-h: 260px;
		--bro-cs-stage-max-h: 420px;
	}
}

.bro-cs-carousel__track {
	display: flex;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
	transition: transform 650ms var(--bro-ease);
	will-change: transform;
}

.bro-cs-carousel__slide {
	flex: 0 0 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.bro-cs-carousel__slide img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	display: block;
}

/* Arrows live INSIDE the viewport (not the outer wrapper) so they always
   sit at the edges of the actual photo stage, even when that stage is
   narrower than the section for a portrait photo — never floating out
   in empty space beside a narrow stage. */

.bro-cs-carousel__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: var(--bro-charcoal);
	color: var(--bro-white);
	border: none;
	border-radius: var(--bro-radius-sm);
	cursor: pointer;
	transition: background-color var(--bro-transition-base), transform var(--bro-transition-fast);
}

.bro-cs-carousel__arrow svg {
	width: 20px;
	height: 20px;
}

.bro-cs-carousel__arrow--prev {
	left: 0.75rem;
}

.bro-cs-carousel__arrow--next {
	right: 0.75rem;
}

@media (hover: hover) and (pointer: fine) {
	.bro-cs-carousel__arrow:hover {
		background: var(--bro-orange-burnt);
	}
}

.bro-cs-carousel__arrow:active {
	transform: translateY(-50%) scale(0.94);
}

.bro-cs-carousel__dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 0.6rem;
	margin-top: 1.25rem;
}

.bro-cs-carousel__dot {
	width: 9px;
	height: 9px;
	padding: 0;
	border-radius: 50%;
	border: none;
	background: var(--bro-border-on-light);
	cursor: pointer;
	transition: background-color var(--bro-transition-base), transform var(--bro-transition-fast);
}

.bro-cs-carousel__dot.is-active {
	background: var(--bro-orange);
	transform: scale(1.15);
}

@media (hover: hover) and (pointer: fine) {
	.bro-cs-carousel__dot:hover {
		background: var(--bro-orange-burnt);
	}
}

@media (max-width: 640px) {
	.bro-cs-carousel__arrow {
		width: 38px;
		height: 38px;
	}

	.bro-cs-carousel__arrow svg {
		width: 16px;
		height: 16px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.bro-cs-carousel__track,
	.bro-cs-carousel__viewport {
		transition: none;
	}
}

/* ---- "cover" fit mode — main Projects hub tiles only ----
   A fixed aspect-ratio stage matching the tile's original single-photo
   treatment; the active photo is cropped (not letterboxed) to fill it,
   exactly like a normal editorial feature photo. No dynamic resizing —
   carousel.js skips the stage-sizing logic entirely for these. */

.bro-cs-carousel--tile .bro-cs-carousel__viewport {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	transition: none;
}

.bro-cs-carousel--tile .bro-cs-carousel__slide img {
	width: 100%;
	height: 100%;
	max-width: none;
	max-height: none;
	object-fit: cover;
}

.bro-cs-carousel--tile .bro-cs-carousel__arrow {
	width: 36px;
	height: 36px;
}

.bro-cs-carousel--tile .bro-cs-carousel__arrow svg {
	width: 16px;
	height: 16px;
}

.bro-cs-carousel--tile .bro-cs-carousel__dots {
	position: absolute;
	bottom: 0.85rem;
	left: 0;
	right: 0;
	margin-top: 0;
}

.bro-cs-carousel--tile .bro-cs-carousel__dot {
	background: rgba(255, 255, 255, 0.55);
}

.bro-cs-carousel--tile .bro-cs-carousel__dot.is-active {
	background: var(--bro-orange);
}

/* ---- Numbered content sections (01-05) ---- */

.bro-cs-section--light {
	background: var(--bro-offwhite);
}

.bro-cs-section--white {
	background: var(--bro-white);
}

.bro-cs-section--dark {
	background: var(--bro-charcoal);
}

.bro-cs-section__inner {
	max-width: 46rem;
}

.bro-cs-section--dark .bro-cs-section__inner h2 {
	color: var(--bro-white);
}

.bro-cs-section__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--bro-text-on-light);
	margin: 1rem 0 1.5rem;
}

.bro-cs-section__inner p {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-light);
	max-width: 58ch;
	margin: 0 0 1.25rem;
}

.bro-cs-section--dark .bro-cs-section__inner p {
	color: var(--bro-text-muted-on-dark);
}

.bro-cs-section__inner p:last-child {
	margin-bottom: 0;
}

.bro-cs-section__inner p a {
	color: inherit;
	text-decoration-color: var(--bro-orange);
	text-underline-offset: 0.2em;
}

.bro-cs-section--dark .bro-cs-section__inner p a {
	color: var(--bro-white);
}

/* Electrical Details — feature list, reused across all four pages. */

.bro-cs-details__list {
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.25rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
	columns: 2;
	column-gap: 2.5rem;
}

.bro-cs-section--dark .bro-cs-details__list {
	border-top-color: var(--bro-border-on-dark);
}

.bro-cs-details__list li {
	position: relative;
	padding-left: 1.2rem;
	font-size: var(--bro-text-base);
	line-height: 1.55;
	color: var(--bro-text-on-light);
	margin-bottom: 0.75rem;
	break-inside: avoid;
}

.bro-cs-section--dark .bro-cs-details__list li {
	color: var(--bro-white);
}

.bro-cs-details__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.65em;
	width: 8px;
	height: 1px;
	background: var(--bro-orange);
}

@media (max-width: 560px) {
	.bro-cs-details__list {
		columns: 1;
	}
}

/* Builder/trade-partner callout — used within "Working With the Wider
   Project" for the two projects with a named partner. */

.bro-cs-partner {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 1.75rem 0 0;
	padding: 1rem 1.5rem;
	border: 1px solid var(--bro-border-on-dark);
	border-radius: var(--bro-radius-sm);
}

.bro-cs-section--light .bro-cs-partner,
.bro-cs-section--white .bro-cs-partner {
	border-color: var(--bro-border-on-light);
}

.bro-cs-partner__label {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-muted-on-dark);
}

.bro-cs-section--light .bro-cs-partner__label,
.bro-cs-section--white .bro-cs-partner__label {
	color: var(--bro-text-muted-on-light);
}

.bro-cs-partner__name {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-base);
	font-weight: 700;
	color: var(--bro-white);
}

.bro-cs-section--light .bro-cs-partner__name,
.bro-cs-section--white .bro-cs-partner__name {
	color: var(--bro-text-on-light);
}

/* Internal service links. */

.bro-cs-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 1.75rem 0 0;
	padding: 1.5rem 0 0;
	border-top: 1px solid var(--bro-border-on-light);
}

.bro-cs-section--dark .bro-cs-links {
	border-top-color: var(--bro-border-on-dark);
}

.bro-cs-links a {
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-sm);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-on-light);
	text-decoration: none;
	border-bottom: 1px solid var(--bro-border-on-light);
	padding-bottom: 0.2em;
	transition: color var(--bro-transition-base), border-color var(--bro-transition-base);
}

.bro-cs-section--dark .bro-cs-links a {
	color: var(--bro-white);
	border-bottom-color: var(--bro-border-on-dark);
}

.bro-cs-links a:hover,
.bro-cs-links a:focus-visible {
	color: var(--bro-orange);
	border-color: var(--bro-orange);
}

/* ---- Final CTA ---- */

.bro-cs-cta {
	background: var(--bro-charcoal);
	text-align: center;
}

.bro-cs-cta__inner {
	max-width: 40rem;
	margin: 0 auto;
}

.bro-cs-cta__inner h2 {
	font-size: var(--bro-text-h1);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.005em;
	text-transform: uppercase;
	color: var(--bro-white);
	margin: 1rem 0 1.5rem;
}

.bro-cs-cta__inner p {
	font-size: var(--bro-text-base);
	line-height: 1.65;
	color: var(--bro-text-muted-on-dark);
	margin: 0 0 2rem;
}

.bro-cs-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

@media (max-width: 480px) {
	.bro-cs-cta__actions .bro-btn {
		white-space: normal;
		text-align: center;
	}
}

/* ---- Back to Projects link, top of page body ---- */

.bro-cs-breadcrumb {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-family: var(--bro-font-display);
	font-size: var(--bro-text-xs);
	font-weight: 700;
	letter-spacing: var(--bro-tracking-label);
	text-transform: uppercase;
	color: var(--bro-text-muted-on-dark);
	text-decoration: none;
	margin-bottom: 1.5rem;
}

.bro-cs-breadcrumb:hover,
.bro-cs-breadcrumb:focus-visible {
	color: var(--bro-white);
}

.bro-cs-breadcrumb .bro-icon-arrow {
	transform: rotate(180deg);
}