/**
 * Cases archive page styling. Preserved exactly from Blocksy Child's
 * functions.php (wp_head, is_post_type_archive/is_tax branch), moved from
 * an inline <style> block into a properly enqueued file.
 */
:root {
	--blc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--blc-ink: #131211;
	--blc-body: #3c3a35;
	--blc-paper-alt: #f3f1ec;
	--blc-line: #e4e1da;
	--blc-muted: #716d64;
	--blc-muted-2: #9b968b;
}

.blc-cases-intro, .blc-cases-featured {
	grid-column: 1 / -1;
	max-width: 1280px; margin-left: auto; margin-right: auto; width: 100%;
	padding-left: clamp(20px, 4vw, 64px); padding-right: clamp(20px, 4vw, 64px); box-sizing: border-box;
	font-family: var(--blc-font);
}
.blc-cases-intro { padding-top: 56px; padding-bottom: 8px; }
.blc-cases-intro h1 {
	font-size: clamp(40px, 7vw, 72px) !important; font-weight: 800 !important; letter-spacing: -0.03em !important;
	margin: 0 0 14px !important; color: var(--blc-ink) !important; font-family: var(--blc-font) !important;
}
.blc-cases-intro p { font-size: 17px; line-height: 1.6; color: var(--blc-muted); max-width: 52ch; margin: 0 0 28px; }

.blc-cases-filters { display: flex; gap: 10px; flex-wrap: wrap; }
.blc-cases-filter {
	font: inherit; font-size: 13px; letter-spacing: .03em;
	border: 1px solid var(--blc-line); background: #fff; color: var(--blc-muted);
	border-radius: 999px; padding: 8px 16px; cursor: pointer; transition: .18s ease;
}
.blc-cases-filter:hover { border-color: var(--blc-ink); color: var(--blc-ink); }
.blc-cases-filter.active { background: var(--blc-ink); border-color: var(--blc-ink); color: #fff; }

.blc-cases-featured { margin-top: 44px; }
.blc-cases-featured a {
	display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
	border-top: 1px solid var(--blc-line); border-bottom: 1px solid var(--blc-line);
	padding: clamp(28px, 4vw, 48px) 0; text-decoration: none; color: inherit;
}
.blc-cases-featured .blc-case-stage {
	max-height: 56vh; padding: 20px; background: var(--blc-paper-alt); border: 1px solid var(--blc-line);
	border-radius: 4px; display: flex; align-items: center; justify-content: center;
}
.blc-cases-featured .blc-case-stage-img { max-height: calc(56vh - 40px); aspect-ratio: 16/9; object-fit: contain; max-width: 100%; box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08), 0 4px 8px rgba(15, 15, 15, 0.11), 0 8px 16px rgba(15, 15, 15, 0.15); filter: brightness(0.80); }
.blc-cases-featured-eyebrow {
	font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--blc-muted-2); margin-bottom: 14px;
}
.blc-cases-featured h2 {
	font-size: clamp(28px, 3.6vw, 42px) !important; font-weight: 800 !important; letter-spacing: -0.02em !important;
	margin: 0 0 14px !important; color: var(--blc-ink) !important; font-family: var(--blc-font) !important;
}
.blc-cases-featured-dek { font-size: 15.5px; line-height: 1.6; color: var(--blc-muted); margin: 0 0 20px; max-width: 44ch; }
.blc-cases-featured .blc-case-tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 20px; }
.blc-cases-featured .blc-case-tag {
	font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--blc-muted);
	border: 1px solid var(--blc-line); border-radius: 999px; padding: 5px 12px;
}
.blc-cases-featured-view { font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; color: var(--blc-ink); }
.blc-cases-featured-view svg { transition: transform .2s ease; }
.blc-cases-featured a:hover .blc-cases-featured-view svg { transform: translateX(5px); }
@media (max-width: 860px) {
	.blc-cases-featured a { grid-template-columns: 1fr; }
	.blc-cases-featured .blc-case-stage { max-height: 46vh; }
	.blc-cases-featured .blc-case-stage-img { max-height: calc(46vh - 40px); }
}

.blc-product-review .ct-media-container {
	aspect-ratio: 16 / 9 !important;
	height: auto !important;
	background: var(--blc-paper-alt);
	display: flex; align-items: center; justify-content: center;
	overflow: hidden !important;
	box-shadow: 0 1px 2px rgba(15, 15, 15, 0.08), 0 4px 8px rgba(15, 15, 15, 0.11), 0 8px 16px rgba(15, 15, 15, 0.15) !important;
	border-radius: 3px !important;
}
.blc-product-review .ct-media-container img.wp-post-image {
	position: static !important; width: 100% !important; height: 100% !important; object-fit: contain !important;
	filter: brightness(0.80);
	border-radius: 0 !important;
}
.blc-product-review.entry-card { border-radius: 0 !important; }
.blc-product-review .entry-title {
	font-size: 17px !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
	margin: 16px 0 6px !important; font-family: var(--blc-font) !important; color: var(--blc-ink) !important;
}
.blc-product-review .entry-title a { color: inherit; text-decoration: none; position: relative; }
.blc-product-review .entry-title a::after {
	content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: var(--blc-ink);
	transform: scaleX(0); transform-origin: left; transition: transform .25s ease;
}
.blc-product-review .entry-title a:hover::after { transform: scaleX(1); }
.blc-product-review .entry-meta {
	font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--blc-muted-2);
	margin: 0; padding: 0; list-style: none; font-family: var(--blc-font);
}

/*
 * Desktop fallback for Blocksy's "zoom-out" card image hover. Blocksy
 * enlarges the image to scale(1.1) at rest unconditionally, but only returns
 * it to scale(1) on hover inside @media (hover: hover) -- which hybrid
 * touch laptops can report as false, leaving the image stuck at 1.1 with no
 * hover response. Same selector shape, values and transition as Blocksy's
 * own rules, keyed on viewport width instead of hover capability.
 */
@media (min-width: 1200px) {
	[data-hover="zoom-out"] > .blc-product-review .has-hover-effect img {
		transition: opacity .5s, transform .5s;
	}
	[data-hover="zoom-out"] > .blc-product-review:hover .has-hover-effect img {
		transform: scale(1);
	}
}
