/*
 * Copyright © WebbyTroops Technologies. All rights reserved.
 *
 * Detail page layout for /casestudies/{identifier}, on both paths: the virtual-post
 * fallback and the configured Elementor detail page. Built on the --wt-cs-* token
 * layer in wt-cs-base.css, which is why the template's root carries wt-cs-scope.
 *
 * The block is .wt-cs-case, not .wt-cs-detail: the router already puts "wt-cs-detail"
 * on <body>, so a bare .wt-cs-detail rule would match the body as well as our div.
 *
 * Three groups of rules below look redundant and are not -- the wpautop compensation,
 * the list styling and the overflow guards. Each is commented with what breaks
 * without it. The first of those breaks ONLY on the live route, never in a builder
 * preview, so deleting it passes review.
 */

/* ---------------------------------------------------------------- tokens */

.wt-cs-case {
	--wt-cs-accent: #3d2fd6;
	--wt-cs-lavender: #eceaff;
	--wt-cs-line: #e6e5f2;
	--wt-cs-ink: #14142b;
	--wt-cs-gray: #5b5b72;
	--wt-cs-tint: #eceaff;

	--wt-cs-hero-from: #f4f3ff;
	--wt-cs-hero-via: #eceaff;
	--wt-cs-hero-to: #fff;

	--wt-cs-radius-tile: 14px;
	--wt-cs-radius-media: 16px;
	--wt-cs-radius-chip: 10px;

	--wt-cs-shadow-card: 0 18px 44px rgb(17 24 39 / 12%);

	--wt-cs-color-heading: var(--wt-cs-ink);
	--wt-cs-color-text: var(--wt-cs-gray);
	--wt-cs-color-border: var(--wt-cs-line);
	--wt-cs-color-accent: var(--wt-cs-accent);

	color: var(--wt-cs-color-text);

}

/* --------------------------------------------------- flush to the header */

body.wt-cs-detail {
	--wt-cs-bleed: 100vw;
}

/*
 * The theme pads .ct-container-full and Elementor pads its container, which
 * together push the gradient band ~146px below the header. Zeroed on this route
 * only, via the body class the router already sets.
 */
body.wt-cs-detail .ct-container-full,
body.wt-cs-detail .ct-container {
	padding-top: 0;
}

body.wt-cs-detail .elementor > .e-con:first-child,
body.wt-cs-detail .elementor > .e-con:first-child > .e-con-inner,
body.wt-cs-detail .elementor > .e-con:first-child .elementor-widget:first-child {
	padding-top: 0;
	margin-top: 0;
}

body.wt-cs-detail .entry-content,
body.wt-cs-detail article > .entry-content {
	margin-top: 0;
}

/* ------------------------------------------------------------------ hero */

/*
 * Full-bleed out of the theme container. 50vw against 100% rather than the container
 * variable means it does not care which Blocksy width setting the page uses, and
 * margin-inline (not left/right) keeps it RTL-correct.
 */
.wt-cs-case__hero {
	position: relative;
	width: var(--wt-cs-bleed, 100vw);
	max-width: var(--wt-cs-bleed, 100vw);
	margin-inline: calc(50% - var(--wt-cs-bleed, 100vw) / 2);
	background-image: linear-gradient(160deg, var(--wt-cs-hero-from) 0%, var(--wt-cs-hero-via) 55%, var(--wt-cs-hero-to) 100%);

	/*
	 * The band is a fixed light gradient, so its text cannot follow the theme's
	 * heading/text tokens -- on a dark palette they resolve near-white on pastel.
	 * Redefining the tokens here rather than overriding each property means the
	 * chips, pill and icons inside all correct themselves.
	 */
	--wt-cs-color-heading: var(--wt-cs-ink);
	--wt-cs-color-text: var(--wt-cs-gray);
	--wt-cs-color-base: #fff;
	--wt-cs-color-border: var(--wt-cs-line);
	--wt-cs-color-accent: var(--wt-cs-accent);
}

/* Dotted decoration as a pseudo-element, so it costs no DOM. */
.wt-cs-case__hero::before {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	background-image: radial-gradient(circle, rgb(17 24 39 / 22%) 1.2px, transparent 1.2px);
	background-size: 11px 11px;
	-webkit-mask-image: radial-gradient(ellipse at 88% 22%, #000 0%, transparent 55%);
	mask-image: radial-gradient(ellipse at 88% 22%, #000 0%, transparent 55%);
}

/*
 * Re-establishes the container the band broke out of. Reading Blocksy's own width
 * variable with a literal fallback is the one place this stylesheet legitimately
 * reaches for a theme variable rather than a --wt-cs-* token.
 */
.wt-cs-case__hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-cs-space-md);
	align-items: center;
	width: min(var(--theme-container-width, min(100%, 90vw)), var(--theme-normal-container-max-width, 1290px));
	padding-block: 60px;
	margin-inline: auto;
}

.wt-cs-case .webbytroops-breadcrumbs {
  font-size: 12px;
	font-weight: 600;
	color: var(--nw-ink);
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	text-transform: uppercase;

	grid-column: 1 / -1;
}

.wt-cs-case__hero-text {
	min-width: 0;
}

.wt-cs-case__eyebrow {
	display: inline-flex;
	gap: var(--wt-cs-space-xs);
	align-items: center;
	margin: 0 0 var(--wt-cs-space-md);
	padding: 7px 15px;
	font-size: 13.5px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--wt-cs-color-heading);
	background-color: var(--wt-cs-color-base);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: 999px;
}

.wt-cs-case__eyebrow-dot {
	flex: none;
	width: 7px;
	height: 7px;
	background-color: var(--wt-cs-accent);
	border-radius: 50%;
}

.wt-cs-case__title {
	margin: 0 0 var(--wt-cs-space-md);
	font-size: clamp(34px, 4.4vw, 58px);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.025em;
	color: var(--wt-cs-color-heading);
	text-wrap: balance;
}

.wt-cs-case__lead {
	max-width: 35em;
	margin: 0 0 var(--wt-cs-space-md);
	font-size: 17px;
	line-height: 1.65;
	color: var(--wt-cs-color-text);
}

.wt-cs-case__chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-cs-space-sm);
}

.wt-cs-case__chip {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	padding: 10px 16px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wt-cs-color-heading);
	background-color: var(--wt-cs-color-base);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: var(--wt-cs-radius-chip);
}

.wt-cs-case__chip-icon {
	flex: none;
	color: var(--wt-cs-accent);
}

.wt-cs-case__hero-media {
	min-width: 0;
	margin: 0;
	overflow: hidden;
	background-color: #dde4f7;
	border-radius: var(--wt-cs-radius-media);
	box-shadow: var(--wt-cs-shadow-card);
}

/*
 * aspect-ratio on the image, not the figure: it reserves the box before the bytes
 * arrive, so the band does not resize when the hero loads.
 */
.wt-cs-case__hero-image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

/* ------------------------------------------------------------------ body */

/*
 * Everything below the band shares the hero-inner measure, so the two line up
 * whatever the surrounding wrapper is. Without this the body runs edge to edge
 * inside a full-width Elementor container while the hero content stays inset,
 * and the page reads as two different layouts stacked.
 *
 * min() not a bare max-width: in a *narrower* wrapper -- a boxed Elementor
 * container, or the block theme's constrained content -- the wrapper still wins.
 */
.wt-cs-case__body,
.wt-cs-case__gallery,
.wt-cs-case__footer {
	width: min(var(--theme-container-width, min(100%, 90vw)), var(--theme-normal-container-max-width, 1290px));
	margin-inline: auto;
}

.wt-cs-case__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-cs-space-lg);
	margin-block: var(--wt-cs-space-lg);
}

.wt-cs-case__main,
.wt-cs-case__aside {
	min-width: 0;
}

.wt-cs-case__section + .wt-cs-case__section {
	margin-top: var(--wt-cs-space-lg);
}

.wt-cs-case__section-title {
	margin: 0 0 var(--wt-cs-space-sm);
	font-size: clamp(24px, 2.6vw, 30px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--wt-cs-color-heading);
}

/* ----------------------------------------------- stored rich text (prose) */

/*
 * LOAD-BEARING. The router removes wpautop from the_content;
 * WT_CS_Formatter::rich_text() re-adds the <p> tags per field, but the theme's
 * block-gap rule (.is-layout-constrained > *) does not reach inside this plain div,
 * so nothing gives those paragraphs a margin.
 *
 * Without these, every paragraph and list in all five rich-text fields collapses into
 * one unbroken run -- and it still looks correct in an Elementor or block-editor
 * preview, because wpautop is not removed there. It breaks only on the live route.
 */
.wt-cs-case__prose > * {
	margin-block: 0 1em;
}

.wt-cs-case__prose > :last-child {
	margin-block-end: 0;
}

.wt-cs-case__prose {
	font-size: 16.5px;
	line-height: 1.75;

	/* A pasted URL with no spaces is one unbreakable word, and would widen the grid
	 * track past minmax(0, 1fr). */
	overflow-wrap: anywhere;
}

/*
 * LOAD-BEARING. Core's list styling is scoped to .wp-block-list and never reaches
 * raw TinyMCE HTML, while most themes reset ul to no padding and no marker. Without
 * these, bullets vanish and lists sit flush left, indistinguishable from paragraphs.
 */
.wt-cs-case__prose ul,
.wt-cs-case__prose ol {
	margin: 0 0 1em;
	padding-left: 1.5em;
}

.wt-cs-case__prose li {
	margin-bottom: 0.35em;
}

/*
 * LOAD-BEARING. Core only constrains img[class*="wp-image-"], so a classless <img>
 * pasted into the editor renders at intrinsic size. Rooted on .wt-cs-case rather
 * than .entry-content because inside Elementor the output sits in
 * .elementor-widget-container and there may be no .entry-content ancestor at all.
 * :where() keeps it at zero specificity so any theme rule still wins.
 */
:where(.wt-cs-case) :where(img) {
	max-width: 100%;
	height: auto;
}

.wt-cs-case__prose :is(img, pre) {
	max-width: 100%;
}

.wt-cs-case__prose pre {
	overflow-x: auto;
}

/* Wide stored tables scroll themselves rather than the page. */
.wt-cs-case__prose table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

/* ------------------------------------------------------------ stat tiles */

/*
 * Authored inside the Results editor as
 * <div class="wt-cs-stats"><div class="wt-cs-stat">...</div></div>.
 * Verified to survive wp_kses_post() and wpautop() unchanged. Unprefixed class names
 * because they are typed by hand into TinyMCE -- keep them short and memorable.
 */
.wt-cs-case__prose .wt-cs-stats {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-cs-space-sm);
	margin-block: var(--wt-cs-space-md);
}

.wt-cs-case__prose .wt-cs-stat {
	padding: 22px 20px;
	background-color: var(--wt-cs-tint);
	border: 1px solid var(--wt-cs-color-border);
	border-radius: var(--wt-cs-radius-tile);
}

/* Direct children so a stray <p> from wpautop does not pick up the number styling. */
.wt-cs-case__prose .wt-cs-stat__value {
	display: block;
	font-size: clamp(24px, 2.4vw, 34px);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.03em;
	color: var(--wt-cs-accent);

	/* The value is often two numbers and an arrow ("8.4s -> 3.1s"); without this the
	 * arrow wraps alone onto a second line in the four-up layout. */
	text-wrap: balance;
}

.wt-cs-case__prose .wt-cs-stat__label {
	display: block;
	margin-top: 9px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wt-cs-color-text);
}

/* ---------------------------------------------------------------- sidebar */

.wt-cs-case__aside {
	display: flex;
	flex-direction: column;
	gap: var(--wt-cs-space-sm);
}

.wt-cs-case__card-inner {
	padding: 24px;
	background-color: var(--wt-cs-lavender);
	border: 1px solid var(--wt-cs-line);
	border-radius: var(--wt-cs-radius-media);
}

.wt-cs-case__card-title {
	margin: 0 0 var(--wt-cs-space-md);
	font-size: 16px;
	font-weight: 800;
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wt-cs-color-heading);
}

.wt-cs-case__block + .wt-cs-case__block {
	padding-top: var(--wt-cs-space-md);
	margin-top: var(--wt-cs-space-md);
	border-top: 1px solid var(--wt-cs-line);
}

.wt-cs-case__block-label {
	margin: 0 0 var(--wt-cs-space-xs);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wt-cs-color-text);
}

.wt-cs-case__block-value {
	margin: 0;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.5;
	color: var(--wt-cs-color-heading);
}

.wt-cs-case__prose--ticked ul {
	padding-left: 0;
	list-style: none;
}

.wt-cs-case__prose--ticked li {
	position: relative;
	padding-left: 24px;
	font-size: 14.5px;
	line-height: 1.55;
}

.wt-cs-case__prose--ticked li::before {
	position: absolute;
	top: 0.3em;
	left: 0;
	width: 15px;
	height: 15px;
	content: "";
	background-color: var(--wt-cs-accent);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5 5L20 6.5'/%3E%3C/svg%3E");
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: 15px 15px;
	mask-size: 15px 15px;
}

.wt-cs-case__tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wt-cs-space-xs);
}

.wt-cs-case__tag {
	padding: 7px 12px;
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--wt-cs-accent);
	background-color: #fff;
	border: 1px solid var(--wt-cs-line);
	border-radius: var(--wt-cs-radius-sm);
}

.wt-cs-case__visit {
	display: inline-flex;
	gap: var(--wt-cs-space-xs);
	align-items: center;
	font-size: 14.5px;
	font-weight: 700;
	color: var(--wt-cs-accent);
	text-decoration: none;
}

.wt-cs-case__visit:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wt-cs-case__visit-arrow {
	flex: none;
	transition: transform var(--wt-cs-transition);
}

.wt-cs-case__visit:hover .wt-cs-case__visit-arrow {
	transform: translateX(3px);
}

/* ---------------------------------------------------------------- gallery */

/* minmax(0, 1fr): 1fr floors at max-content, which blows the track out. */
.wt-cs-case__gallery {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--wt-cs-space-sm);
	margin-block: var(--wt-cs-space-lg);
}

.wt-cs-case__gallery-item {
	margin: 0;
	overflow: hidden;
	background-color: var(--wt-cs-color-surface);
	border-radius: var(--wt-cs-radius-tile);
}

.wt-cs-case__gallery-image {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
}

/* ----------------------------------------------------------------- footer */

.wt-cs-case__footer {
	padding-block: var(--wt-cs-space-md);
	border-top: 1px solid var(--wt-cs-color-border);
}

.wt-cs-case__back {
	display: inline-flex;
	gap: 9px;
	align-items: center;
	font-size: 15px;
	font-weight: 700;
	color: var(--wt-cs-accent);
	text-decoration: none;
}

.wt-cs-case__back:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wt-cs-case__back-arrow {
	flex: none;
	transition: transform var(--wt-cs-transition);
}

.wt-cs-case__back:hover .wt-cs-case__back-arrow {
	transform: translateX(-3px);
}

/* ------------------------------------------------------------ breakpoints */

/* Must stay in step with the sizes attributes in WT_CS_Detail_View. */

@media (min-width: 600px) {

	.wt-cs-case__gallery {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.wt-cs-case__prose .wt-cs-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* 1024px is the hero's stack point; get_hero_image()'s sizes hint says the same. */
@media (min-width: 1024px) {

	.wt-cs-case__hero-inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr);
	}

	.wt-cs-case__body {
		grid-template-columns: minmax(0, 1fr) minmax(0, 340px);
		align-items: start;
	}

	.wt-cs-case__aside {
		position: sticky;
		top: var(--wt-cs-sticky-top, 96px);
		align-self: start;
	}

	.wt-cs-case__prose .wt-cs-stats {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Masks are not painted in forced-colors mode, so the tick needs a solid fallback. */
@media (forced-colors: active) {

	.wt-cs-case__prose--ticked li::before {
		background-color: CanvasText;
	}
}