/**
 * Cases/Misconduct Component Styles
 * Neo-brutalist case cards for misconduct documentation
 */

:root {
	--cases-black: #0a0a0a;
	--cases-cream: #f5f2e8;
	--cases-white: #ffffff;
	--cases-red: #ff3b3b;
	--cases-red-dark: #cc0000;
	--cases-yellow: #ffe135;
	--cases-blue: #2b4cff;

	/* Fluid shadows */
	--cases-shadow-sm: clamp(3px, 0.8vw, 4px) clamp(3px, 0.8vw, 4px) 0 var(--cases-black);
	--cases-shadow-md: clamp(4px, 1vw, 6px) clamp(4px, 1vw, 6px) 0 var(--cases-black);
	--cases-shadow-lg: clamp(6px, 1.5vw, 8px) clamp(6px, 1.5vw, 8px) 0 var(--cases-black);
	--cases-shadow-xl: clamp(8px, 2vw, 12px) clamp(8px, 2vw, 12px) 0 var(--cases-black);

	/* Fluid borders */
	--cases-border-width: clamp(2px, 0.5vw, 3px);
	--cases-border: var(--cases-border-width) solid var(--cases-black);
	--cases-border-thick: clamp(3px, 0.6vw, 4px) solid var(--cases-black);
	--cases-border-chunky: clamp(4px, 0.8vw, 5px) solid var(--cases-black);

	/* Fluid spacing */
	--cases-space-2xs: clamp(0.25rem, 1vw, 0.5rem);
	--cases-space-xs: clamp(0.5rem, 2vw, 0.75rem);
	--cases-space-sm: clamp(0.75rem, 2.5vw, 1rem);
	--cases-space-md: clamp(1rem, 3vw, 1.5rem);
	--cases-space-lg: clamp(1.25rem, 4vw, 2rem);
	--cases-space-xl: clamp(1.5rem, 5vw, 3rem);
	--cases-space-2xl: clamp(2rem, 6vw, 4rem);
}

/* Reset */
.cases-section *,
.cases-section *::before,
.cases-section *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* Section */
.cases-section {
	font-family: 'Darker Grotesque', sans-serif;
	background-color: var(--cases-black);
	background-image:
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 50px,
			rgba(255,59,59,0.03) 50px,
			rgba(255,59,59,0.03) 100px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 50px,
			rgba(255,59,59,0.03) 50px,
			rgba(255,59,59,0.03) 100px
		);
	padding: var(--cases-space-2xl) var(--cases-space-md);
	position: relative;
	overflow: hidden;
	min-height: 100svh;
}

/* Decorative Elements */
.cases-decor {
	position: absolute;
	pointer-events: none;
	z-index: 0;
}

.cases-decor-warning {
	font-size: clamp(3rem, 12vw, 8rem);
	color: var(--cases-red);
	opacity: 0.12;
	top: 5%;
	right: 3%;
	transform: rotate(15deg);
	text-shadow: 3px 3px 0 var(--cases-black);
}

.cases-decor-x {
	font-size: clamp(2rem, 8vw, 6rem);
	font-weight: 900;
	color: var(--cases-yellow);
	opacity: 0.15;
	bottom: 8%;
	left: 2%;
	animation: casesPulseX 3s ease-in-out infinite;
}

.cases-decor-stripe {
	width: clamp(50px, 12vw, 150px);
	height: clamp(10px, 2vw, 15px);
	background: repeating-linear-gradient(
		-45deg,
		var(--cases-yellow),
		var(--cases-yellow) 8px,
		var(--cases-black) 8px,
		var(--cases-black) 16px
	);
	border: 2px solid var(--cases-black);
	top: 18%;
	left: -15px;
	transform: rotate(-5deg);
}

.cases-decor-stripe-2 {
	width: clamp(40px, 10vw, 120px);
	height: clamp(10px, 2vw, 15px);
	background: repeating-linear-gradient(
		45deg,
		var(--cases-red),
		var(--cases-red) 8px,
		var(--cases-black) 8px,
		var(--cases-black) 16px
	);
	border: 2px solid var(--cases-black);
	bottom: 12%;
	right: -10px;
	transform: rotate(5deg);
}

@keyframes casesPulseX {
	0%, 100% { transform: scale(1); opacity: 0.15; }
	50% { transform: scale(1.1); opacity: 0.25; }
}

/* Container */
.cases-container {
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}

/* Header */
.cases-header {
	text-align: center;
	margin-bottom: var(--cases-space-2xl);
}

.cases-eyebrow {
	font-family: 'Space Mono', monospace;
	font-size: clamp(0.55rem, 1.8vw, 0.8rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: clamp(0.1em, 0.5vw, 0.15em);
	color: var(--cases-black);
	background: var(--cases-red);
	display: inline-block;
	padding: clamp(0.25rem, 1vw, 0.5rem) clamp(0.75rem, 2.5vw, 1.5rem);
	border: var(--cases-border);
	box-shadow: var(--cases-shadow-sm);
	margin-bottom: var(--cases-space-md);
	transform: rotate(-2deg);
}

.cases-title {
	font-size: clamp(1.6rem, 8vw, 5rem);
	font-weight: 900;
	line-height: 0.95;
	color: var(--cases-cream);
	text-transform: uppercase;
	letter-spacing: -0.02em;
	margin-bottom: var(--cases-space-sm);
}

.cases-title-highlight {
	display: inline-block;
	background: var(--cases-yellow);
	color: var(--cases-black);
	padding: 0.02em 0.15em;
	transform: rotate(1deg);
	white-space: nowrap;
}

.cases-title-break {
	display: block;
}

.cases-subtitle {
	font-family: 'Space Mono', monospace;
	font-size: clamp(0.7rem, 2.5vw, 1.1rem);
	color: var(--cases-cream);
	opacity: 0.7;
	text-transform: uppercase;
	letter-spacing: clamp(0.05em, 0.3vw, 0.1em);
}

/* Cases Grid */
.cases-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--cases-space-xl);
	margin-bottom: var(--cases-space-2xl);
}

/* Case Card */
.case-card {
	background: var(--cases-cream);
	border: var(--cases-border-chunky);
	box-shadow: var(--cases-shadow-xl);
	position: relative;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	display: flex;
	flex-direction: column;
}

.case-card:nth-child(odd) {
	transform: rotate(-0.5deg);
}

.case-card:nth-child(even) {
	transform: rotate(0.5deg);
}

.case-card:hover {
	transform: rotate(0deg) translate(-5px, -5px) !important;
	box-shadow: clamp(12px, 3vw, 18px) clamp(12px, 3vw, 18px) 0 var(--cases-black);
	z-index: 10;
}

/* Card Header Strip */
.case-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: clamp(6px, 1.5vw, 10px);
	background: var(--cases-red);
}

.case-card:nth-child(even)::before {
	background: var(--cases-yellow);
}

/* Case Number Badge */
.case-number {
	position: absolute;
	top: clamp(-12px, -2vw, -15px);
	left: var(--cases-space-sm);
	width: clamp(40px, 10vw, 70px);
	height: clamp(40px, 10vw, 70px);
	background: var(--cases-black);
	color: var(--cases-yellow);
	border: var(--cases-border-thick);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: 'Darker Grotesque', sans-serif;
	font-size: clamp(1.2rem, 4vw, 2.2rem);
	font-weight: 900;
	box-shadow: var(--cases-shadow-sm);
	z-index: 5;
}

/* Card Content */
.case-content {
	padding: var(--cases-space-lg);
	padding-top: calc(var(--cases-space-lg) + clamp(15px, 3vw, 25px));
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: var(--cases-space-sm);
}

/* Case Tag */
.case-tag {
	display: inline-block;
	align-self: flex-start;
	font-family: 'Space Mono', monospace;
	font-size: clamp(0.5rem, 1.5vw, 0.7rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--cases-white);
	background: var(--cases-red);
	padding: clamp(0.15rem, 0.5vw, 0.3rem) clamp(0.4rem, 1.2vw, 0.8rem);
	border: var(--cases-border-width) solid var(--cases-black);
}

.case-card:nth-child(even) .case-tag {
	background: var(--cases-blue);
}

/* Case Title */
.case-title {
	font-size: clamp(1rem, 3.5vw, 1.7rem);
	font-weight: 900;
	line-height: 1.1;
	color: var(--cases-black);
	text-transform: uppercase;
}

/* Case Description */
.case-description {
	font-family: 'Space Mono', monospace;
	font-size: clamp(0.75rem, 2vw, 0.95rem);
	font-weight: 400;
	color: var(--cases-black);
	line-height: 1.55;
	flex: 1;
}

/* Case Meta */
.case-meta {
	display: flex;
	flex-wrap: wrap;
	gap: clamp(0.3rem, 1vw, 0.6rem);
	padding-bottom: var(--cases-space-sm);
	border-bottom: var(--cases-border-width) dashed var(--cases-black);
}

.case-meta-item {
	font-family: 'Space Mono', monospace;
	font-size: clamp(0.5rem, 1.4vw, 0.7rem);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--cases-black);
	background: var(--cases-cream);
	border: var(--cases-border-width) solid var(--cases-black);
	padding: clamp(0.1rem, 0.4vw, 0.25rem) clamp(0.3rem, 0.8vw, 0.5rem);
	white-space: nowrap;
}

/* Case Button */
.case-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: clamp(0.3rem, 1vw, 0.5rem);
	font-family: 'Darker Grotesque', sans-serif;
	font-size: clamp(0.9rem, 2.5vw, 1.2rem);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	text-decoration: none;
	color: var(--cases-black);
	background: var(--cases-yellow);
	padding: clamp(0.5rem, 1.5vw, 0.9rem) clamp(1rem, 3vw, 1.8rem);
	border: var(--cases-border-thick);
	box-shadow: var(--cases-shadow-md);
	transition: all 0.1s ease;
	align-self: flex-start;
	margin-top: auto;
}

.case-button:hover {
	transform: translate(-3px, -3px);
	box-shadow: clamp(6px, 1.5vw, 9px) clamp(6px, 1.5vw, 9px) 0 var(--cases-black);
	background: var(--cases-red);
	color: var(--cases-white);
}

.case-button:active {
	transform: translate(1px, 1px);
	box-shadow: var(--cases-shadow-sm);
}

.button-arrow {
	transition: transform 0.15s ease;
	display: flex;
	align-items: center;
	font-size: 1.1em;
}

.case-button:hover .button-arrow {
	transform: translateX(4px);
}

/* More Cases Banner */
.more-cases-banner {
	background: var(--cases-yellow);
	border: var(--cases-border-chunky);
	box-shadow: var(--cases-shadow-lg);
	padding: var(--cases-space-md) var(--cases-space-lg);
	transform: rotate(-0.5deg);
	position: relative;
}

.more-cases-banner::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 12px,
		rgba(0,0,0,0.03) 12px,
		rgba(0,0,0,0.03) 24px
	);
	pointer-events: none;
}

.banner-content {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--cases-space-sm);
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
}

.banner-icon {
	font-size: clamp(1.2rem, 4vw, 2rem);
	animation: casesShake 0.5s ease-in-out infinite;
	flex-shrink: 0;
}

@keyframes casesShake {
	0%, 100% { transform: rotate(-5deg); }
	50% { transform: rotate(5deg); }
}

.banner-text {
	font-family: 'Space Mono', monospace;
	font-size: clamp(0.65rem, 2.2vw, 1rem);
	font-weight: 700;
	color: var(--cases-black);
	text-transform: uppercase;
	letter-spacing: 0.03em;
	text-align: center;
	line-height: 1.4;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */

/* Large screens */
@media (min-width: 1200px) {
	.cases-container {
		max-width: 1200px;
	}
}

/* Medium-large tablets */
@media (max-width: 1024px) {
	.cases-grid {
		gap: var(--cases-space-lg);
	}

	.cases-decor-warning {
		font-size: 5rem;
		right: 2%;
	}
}

/* Tablets */
@media (max-width: 850px) {
	.cases-section {
		min-height: auto;
	}

	.cases-grid {
		grid-template-columns: 1fr;
		max-width: 550px;
		margin-left: auto;
		margin-right: auto;
	}

	.case-card:nth-child(odd),
	.case-card:nth-child(even) {
		transform: none;
	}

	.case-card:hover {
		transform: translate(-4px, -4px) !important;
	}

	.cases-decor-warning {
		font-size: 4rem;
		top: 2%;
		right: 2%;
		opacity: 0.08;
	}

	.cases-decor-stripe,
	.cases-decor-stripe-2 {
		display: none;
	}
}

/* Large phones */
@media (max-width: 650px) {
	.cases-section {
		padding: var(--cases-space-xl) var(--cases-space-sm);
	}

	.cases-grid {
		max-width: 100%;
		gap: var(--cases-space-xl);
	}

	.cases-header {
		margin-bottom: var(--cases-space-xl);
	}

	.cases-title-break {
		display: inline;
	}

	.cases-title-highlight {
		white-space: normal;
	}

	.case-button {
		width: 100%;
		justify-content: center;
	}

	.cases-decor-x {
		font-size: 2.5rem;
		bottom: 3%;
		left: 2%;
	}
}

/* Mobile */
@media (max-width: 480px) {
	.cases-section {
		padding: var(--cases-space-lg) var(--cases-space-xs);
	}

	.case-content {
		padding: var(--cases-space-md);
		padding-top: calc(var(--cases-space-md) + 20px);
		gap: var(--cases-space-xs);
	}

	.case-number {
		width: 42px;
		height: 42px;
		font-size: 1.3rem;
		top: -10px;
	}

	.case-meta {
		gap: 0.25rem;
	}

	.case-meta-item {
		font-size: 0.5rem;
		padding: 0.1rem 0.3rem;
	}

	.more-cases-banner {
		transform: none;
		padding: var(--cases-space-sm);
	}

	.banner-content {
		gap: var(--cases-space-xs);
	}

	.cases-decor-warning,
	.cases-decor-x {
		display: none;
	}
}

/* Very small screens */
@media (max-width: 360px) {
	.cases-section {
		padding: var(--cases-space-md) 0.4rem;
	}

	.case-card {
		border-width: 3px;
	}

	.case-card::before {
		height: 5px;
	}

	.case-content {
		padding: var(--cases-space-sm);
		padding-top: calc(var(--cases-space-sm) + 18px);
	}

	.case-number {
		width: 36px;
		height: 36px;
		font-size: 1.1rem;
		top: -8px;
		left: var(--cases-space-xs);
		border-width: 2px;
	}

	.cases-eyebrow {
		font-size: 0.5rem;
		padding: 0.2rem 0.6rem;
	}

	.cases-title {
		font-size: 1.5rem;
	}

	.cases-subtitle {
		font-size: 0.65rem;
	}

	.case-tag {
		font-size: 0.45rem;
		padding: 0.1rem 0.35rem;
	}

	.case-title {
		font-size: 0.95rem;
	}

	.case-description {
		font-size: 0.7rem;
		line-height: 1.5;
	}

	.case-meta-item {
		font-size: 0.45rem;
	}

	.case-button {
		font-size: 0.85rem;
		padding: 0.5rem 0.8rem;
		border-width: 3px;
	}

	.banner-text {
		font-size: 0.6rem;
	}

	.banner-icon:first-child {
		display: none;
	}
}

/* Extra small screens (watches, very old phones) */
@media (max-width: 300px) {
	.cases-section {
		padding: var(--cases-space-sm) 0.25rem;
	}

	.case-content {
		padding: 0.6rem;
		padding-top: 2rem;
	}

	.cases-title {
		font-size: 1.3rem;
	}

	.case-title {
		font-size: 0.85rem;
	}

	.case-description {
		font-size: 0.65rem;
	}

	.case-meta {
		display: none;
	}

	.more-cases-banner {
		padding: 0.5rem;
	}

	.banner-icon {
		display: none;
	}
}

/* Landscape phones */
@media (max-height: 500px) and (orientation: landscape) {
	.cases-section {
		min-height: auto;
		padding: var(--cases-space-md) var(--cases-space-lg);
	}

	.cases-grid {
		grid-template-columns: repeat(2, 1fr);
		max-width: 100%;
		gap: var(--cases-space-md);
	}

	.case-card:nth-child(odd),
	.case-card:nth-child(even) {
		transform: none;
	}

	.cases-decor-warning,
	.cases-decor-x,
	.cases-decor-stripe,
	.cases-decor-stripe-2 {
		display: none;
	}

	.cases-header {
		margin-bottom: var(--cases-space-md);
	}

	.case-content {
		padding: var(--cases-space-sm);
		padding-top: calc(var(--cases-space-sm) + 15px);
	}

	.case-button {
		width: auto;
		align-self: flex-start;
	}
}

/* Tall screens (extra long phones) */
@media (min-height: 800px) and (max-width: 500px) {
	.cases-section {
		padding-top: var(--cases-space-2xl);
		padding-bottom: var(--cases-space-2xl);
	}

	.cases-grid {
		gap: var(--cases-space-xl);
	}

	.cases-header {
		margin-bottom: var(--cases-space-xl);
	}
}

/* High DPI / Retina */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
	.case-card,
	.case-number,
	.case-button {
		border-width: max(2px, var(--cases-border-width));
	}
}

/* Touch devices */
@media (hover: none) and (pointer: coarse) {
	.case-card {
		transform: none !important;
	}

	.case-card:active {
		transform: scale(0.98) !important;
		box-shadow: var(--cases-shadow-md);
	}

	.case-button:active {
		transform: scale(0.97);
		box-shadow: var(--cases-shadow-sm);
	}

	/* Larger touch targets */
	.case-button {
		min-height: 48px;
	}

	.case-meta-item {
		min-height: 32px;
		display: flex;
		align-items: center;
	}
}

/* Hover-capable devices */
@media (hover: hover) and (pointer: fine) {
	.case-card:hover {
		transform: rotate(0deg) translate(-5px, -5px) !important;
	}

	.case-button:hover {
		transform: translate(-3px, -3px);
	}
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.cases-decor-x,
	.banner-icon {
		animation: none;
	}

	.case-card,
	.case-button,
	.button-arrow {
		transition: none;
	}
}

/* Dark mode support (optional) */
@media (prefers-color-scheme: dark) {
	/* Already dark themed, no changes needed */
}

/* Print */
@media print {
	.cases-section {
		background: white;
		padding: 1rem;
		min-height: auto;
	}

	.cases-decor {
		display: none;
	}

	.case-card {
		box-shadow: none;
		border: 1px solid #000;
		break-inside: avoid;
		transform: none !important;
		page-break-inside: avoid;
	}

	.case-card::before {
		height: 3px;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.cases-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.case-number {
		box-shadow: none;
		border: 1px solid #000;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}

	.case-button {
		box-shadow: none;
		border: 1px solid #000;
	}

	.more-cases-banner {
		box-shadow: none;
		transform: none;
		border: 1px solid #000;
	}

	.cases-title,
	.cases-subtitle {
		color: #000;
	}
}