/* ==========================================================================
   Case Study — Una Carne Por Favor
   ========================================================================== */

.cs-page {
	--cs-sticky-top: calc(var(--header-height) + 1.5rem);
	overflow: visible;
}

/* Breadcrumbs */
.cs-breadcrumbs {
	padding-block: var(--space-5) 0;
	border-bottom: 1px solid var(--color-border);
}

.cs-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-2);
	margin: 0;
	padding: 0 0 var(--space-4);
	list-style: none;
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text-secondary);
}

.cs-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
}

.cs-breadcrumbs__link {
	color: var(--color-accent);
	text-decoration: none;
	transition: opacity var(--transition-fast);
}

.cs-breadcrumbs__link:hover {
	opacity: 0.85;
}

.cs-breadcrumbs__sep {
	color: var(--color-text-secondary);
	opacity: 0.7;
}

.cs-breadcrumbs__current {
	color: var(--color-text);
}

/* Hero — padding/spacing in hero-conversion.css */
.cs-hero {
	border-bottom: 1px solid var(--color-border);
}

.cs-hero__meta {
	font-size: var(--text-sm);
	line-height: 1.6;
	max-width: 36rem;
	margin-bottom: var(--space-6);
}

.cs-hero__title {
	font-size: var(--text-3xl);
	font-weight: 600;
	letter-spacing: -0.03em;
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.cs-hero__headline {
	font-size: var(--text-4xl);
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.04em;
}

.cs-subsection {
	margin-top: var(--space-10);
	max-width: 42rem;
}

.cs-subsection__title {
	margin-bottom: var(--space-4);
}

.cs-hero .portfolio-categories {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	list-style: none;
	margin: 0 0 var(--hero-gap-md) 0;
	padding: 0;
}

.cs-hero .portfolio-category-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.85rem;
	font-size: var(--text-xs);
	font-weight: 500;
	line-height: 1.4;
	color: var(--color-accent);
	background: var(--color-accent-muted);
	border: 1px solid var(--color-accent-border);
	border-radius: 999px;
}

.cs-hero__sub {
	font-size: clamp(0.95rem, 1.6vw, 1.05rem);
	line-height: 1.6;
	max-width: 42rem;
}

.cs-details-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	padding: var(--space-8);
	background: var(--color-card);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	margin-bottom: var(--space-10);
}

.cs-details-grid__item dt {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-2);
}

.cs-details-grid__item dd {
	font-size: var(--text-sm);
	line-height: 1.5;
	color: var(--color-text);
}

.cs-details-grid__item--wide {
	grid-column: 1 / -1;
}

.cs-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

/* Hero screenshot band */
.cs-showcase {
	padding-block: var(--space-6) var(--space-10);
	border-bottom: 1px solid var(--color-border);
}

.cs-showcase__media,
.cs-showcase .cs-media {
	aspect-ratio: 16 / 10;
	min-height: 0;
}

.cs-showcase .cs-media__label {
	display: none;
}

@media (min-width: 40rem) {
	.cs-details-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.cs-details-grid__item--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 64rem) {
	.cs-hero__headline {
		font-size: var(--text-5xl);
	}

	.cs-details-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Layout + sticky sidebar */
.cs-layout,
.case-study-layout {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
	padding-bottom: var(--space-section-lg);
	overflow: visible;
	align-items: stretch;
}

.case-study-layout__sidebar {
	order: -1;
	overflow: visible;
	min-width: 0;
}

.cs-sidebar,
.case-study-sidebar {
	position: static;
	width: 100%;
	overflow: visible;
}

.cs-sidebar__inner {
	padding: var(--space-6);
}

.cs-content,
.case-study-content {
	min-width: 0;
	overflow: visible;
}

/* Prevent layout ancestors from breaking sticky */
.site-main:has(.cs-page),
.cs-page,
.cs-hero,
.cs-layout,
.case-study-layout {
	overflow: visible;
}

/* Tablet+ — sidebar column left */
@media (min-width: 48rem) {
	.cs-layout,
	.case-study-layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--space-10);
	}

	.case-study-layout__sidebar {
		order: 0;
		align-self: stretch;
	}

	.cs-sidebar,
	.case-study-sidebar {
		position: sticky;
		top: var(--cs-sticky-top);
		align-self: start;
		z-index: 2;
	}
}

/* Desktop — wider sidebar track */
@media (min-width: 75rem) {
	.cs-layout,
	.case-study-layout {
		grid-template-columns: 280px minmax(0, 1fr);
		gap: var(--space-10);
	}
}

.cs-sidebar__label {
	font-size: var(--text-sm);
	font-weight: 600;
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.cs-sidebar__details {
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
	margin-bottom: var(--space-6);
}

.cs-sidebar__details dt {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-1);
}

.cs-sidebar__details dd {
	font-size: var(--text-xs);
	color: var(--color-text);
}

.cs-sidebar__nav {
	display: flex;
	flex-direction: column;
	gap: var(--space-1);
	margin-bottom: var(--space-6);
}

.cs-sidebar__nav a {
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	padding: var(--space-2) 0;
	border-bottom: 1px solid transparent;
	transition:
		color var(--transition-fast),
		border-color var(--transition-fast);
}

.cs-sidebar__nav a:hover {
	color: var(--color-accent);
	border-bottom-color: rgba(0, 209, 255, 0.2);
}

.cs-sidebar__cta {
	width: 100%;
	padding: 0.6rem 1rem;
	font-size: 0.6875rem;
}

/* Sections */
.cs-section {
	padding-block: var(--space-section);
	border-bottom: 1px solid var(--color-border);
}

.cs-section--alt {
	background: var(--color-card);
	margin-inline: calc(var(--container-pad) * -1);
	padding-inline: var(--container-pad);
}

@media (min-width: 64rem) {
	.cs-section--alt {
		margin-inline: 0;
		padding-inline: var(--space-10);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border);
	}
}

.cs-section__title {
	margin-bottom: var(--space-6);
}

.cs-section__lead {
	font-size: var(--text-lg);
	line-height: 1.75;
	margin-bottom: var(--space-6);
	max-width: 40rem;
}

.cs-subtitle {
	font-size: var(--text-sm);
	font-family: var(--font-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	margin: var(--space-8) 0 var(--space-4);
}

/* Split text + media */
.cs-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-10);
	align-items: start;
}

.cs-split__text p + p {
	margin-top: var(--space-4);
}

@media (min-width: 48rem) {
	.cs-split {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-12);
	}

	.cs-split--reverse .cs-split__text {
		order: 2;
	}

	.cs-split--reverse .cs-media {
		order: 1;
	}
}

/* Media placeholders */
.cs-media {
	position: relative;
	aspect-ratio: 16 / 10;
	min-height: 14rem;
	background: #111;
	border: 1px solid var(--color-border);
	border-radius: var(--radius-xl);
	display: flex;
	align-items: flex-end;
	padding: var(--space-6);
	overflow: hidden;
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);
}

.cs-media::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(145deg, rgba(255, 255, 255, 0.03) 0%, transparent 50%);
	pointer-events: none;
}

.cs-media--wide {
	aspect-ratio: 16 / 10;
	min-height: 12rem;
	margin-block: var(--space-8);
}

.cs-content > .cs-media + .cs-media,
.cs-content > .cs-media.reveal + .cs-media.reveal {
	margin-top: var(--space-8);
}

.cs-media--mobile {
	aspect-ratio: 9 / 16;
	max-width: min(100%, 20rem);
	min-height: 0;
	margin-block: var(--space-8);
	margin-inline: auto;
}

.cs-media--full-page {
	aspect-ratio: auto;
	min-height: 0;
	margin-block: var(--space-8);
	padding: 0;
	align-items: stretch;
	box-shadow:
		0 20px 56px rgba(0, 0, 0, 0.42),
		0 0 0 1px rgba(255, 255, 255, 0.04);
}

.cs-media__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}

.cs-media--has-image {
	padding: 0;
	align-items: stretch;
	background: #0a0a0a;
}

.cs-media--has-image::before {
	opacity: 0.35;
}

.cs-media--mobile.cs-media--has-image .cs-media__img,
.cs-media--full-page .cs-media__img {
	position: static;
	width: 100%;
	height: auto;
	object-fit: contain;
	display: block;
}

.cs-media--full-page .cs-media__scroll {
	max-height: min(72vh, 42rem);
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(0, 209, 255, 0.35) transparent;
	border-radius: inherit;
}

.cs-media--full-page .cs-media__scroll::-webkit-scrollbar {
	width: 6px;
}

.cs-media--full-page .cs-media__scroll::-webkit-scrollbar-thumb {
	background: rgba(0, 209, 255, 0.35);
	border-radius: 999px;
}

.cs-media--full-page .cs-media__scroll::after {
	content: "";
	display: block;
	position: sticky;
	bottom: 0;
	height: 3rem;
	margin-top: -3rem;
	background: linear-gradient(to bottom, transparent, rgba(9, 9, 9, 0.92));
	pointer-events: none;
}

.cs-media--full-page .cs-media__label {
	z-index: 2;
}

@media (min-width: 48rem) {
	.cs-split .cs-media--mobile {
		max-width: 100%;
	}
}

.cs-media__label {
	position: absolute;
	left: var(--space-4);
	bottom: var(--space-4);
	z-index: 1;
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--color-text-secondary);
	background: rgba(9, 9, 9, 0.78);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
	padding: 0.35rem 0.55rem;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

/* Cards grid */
.cs-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-4);
	margin-top: var(--space-10);
	list-style: none;
}

.cs-card {
	padding: var(--space-5) var(--space-6);
	font-size: var(--text-sm);
	line-height: 1.5;
}

@media (min-width: 40rem) {
	.cs-cards {
		grid-template-columns: repeat(2, 1fr);
	}

	.cs-cards--3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.cs-cards--4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.cs-cards--4 {
		grid-template-columns: repeat(4, 1fr);
	}
}

/* UX flow */
.cs-flow {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-4);
}

.cs-flow li {
	display: flex;
	align-items: baseline;
	gap: var(--space-4);
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	padding: var(--space-3) 0;
	border-bottom: 1px solid var(--color-border);
}

.cs-flow li span {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-text-secondary);
	flex-shrink: 0;
}

/* Lists */
.cs-list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	margin-top: var(--space-6);
}

.cs-list li {
	position: relative;
	padding-left: 1.25rem;
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.6;
}

.cs-list li::before {
	content: "•";
	position: absolute;
	left: 0;
	color: var(--color-text-secondary);
}

/* Tech stack large */
.tech-stack--lg {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-3);
	margin-top: var(--space-8);
}

.tech-stack--lg li {
	font-size: var(--text-sm);
	padding: var(--space-3) var(--space-4);
}

/* Related case studies — full-width row in the layout grid */
@media (min-width: 48rem) {
	.case-study-layout > .case-study-content,
	.case-study-layout > .cs-content {
		grid-column: 2;
	}

	.case-study-layout > .cs-related {
		grid-column: 1 / -1;
	}

	.case-study-layout__sidebar {
		grid-row: 1 / -1;
	}
}

.cs-related {
	padding-block: var(--space-12);
	border-bottom: none;
}

.cs-related.section--alt {
	background: var(--color-card);
	margin-inline: calc(var(--container-pad) * -1);
	padding-inline: var(--container-pad);
	border-block: none;
}

@media (min-width: 48rem) {
	.cs-related.section--alt {
		margin-inline: 0;
	}
}

@media (min-width: 64rem) {
	.cs-related.section--alt {
		padding-inline: var(--space-10);
		border-radius: var(--radius-xl);
		border: 1px solid var(--color-border);
	}
}

.cs-related .portfolio-card {
	border-radius: var(--radius-xl);
	overflow: hidden;
}

.cs-related__inner {
	max-width: var(--container-max);
	margin-inline: auto;
}

.cs-related__title {
	margin: 0 0 var(--space-8);
}

.portfolio-grid--related {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-8);
}

@media (min-width: 40rem) {
	.portfolio-grid--related {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--space-8);
	}
}

@media (min-width: 64rem) {
	.portfolio-grid--related {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.portfolio-grid--related:has(.portfolio-card:nth-child(2):last-child) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* Takeaway */
.cs-section--takeaway {
	border-bottom: none;
	padding-bottom: var(--space-section-lg);
}

.cs-takeaway {
	padding: var(--space-12);
	display: flex;
	flex-direction: column;
	gap: var(--space-6);
	max-width: 44rem;
}

.cs-takeaway__related {
	margin: 0;
	font-size: var(--text-sm);
}

.cs-takeaway__related a {
	color: var(--color-accent);
	font-weight: 500;
}

.cs-takeaway__related a:hover {
	opacity: 0.85;
}

.cs-takeaway .btn {
	align-self: flex-start;
	margin-top: var(--space-4);
}

@media (min-width: 48rem) {
	.cs-takeaway {
		padding: var(--space-16);
	}
}

/* ==========================================================================
   Platform case study — TourismDesk
   ========================================================================== */

.cs-page--platform {
	--cs-accent-muted: rgba(255, 255, 255, 0.02);
}

.cs-hero__title--platform {
	color: var(--color-text);
}

.cs-page--platform .badge {
	border-color: var(--color-border);
}

.cs-media--tech {
	background:
		linear-gradient(160deg, var(--cs-accent-muted) 0%, #0d0d0d 50%),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 23px,
			rgba(255, 255, 255, 0.02) 23px,
			rgba(255, 255, 255, 0.02) 24px
		),
		repeating-linear-gradient(
			90deg,
			transparent,
			transparent 23px,
			rgba(255, 255, 255, 0.02) 23px,
			rgba(255, 255, 255, 0.02) 24px
		);
}

.cs-page--platform .cs-list li::before {
	color: var(--color-accent);
}

.cs-card--tech {
	font-family: var(--font-mono);
	font-size: var(--text-sm);
}

.cs-cards--types .cs-card--tech {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	font-family: var(--font-sans);
	font-size: var(--text-base);
}

.cs-card__icon {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	color: var(--color-accent);
}

/* Architecture diagram */
.cs-diagram {
	margin-top: var(--space-10);
	padding: var(--space-8);
}

.cs-diagram__title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-text-secondary);
	margin-bottom: var(--space-6);
}

.cs-diagram__grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-3) var(--space-4);
	font-family: var(--font-mono);
	font-size: var(--text-sm);
	color: var(--color-text);
}

.cs-diagram__grid span:nth-child(even) {
	color: var(--color-accent);
	opacity: 0.6;
}

/* 3-column architecture */
.cs-arch-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-6);
	margin-top: var(--space-10);
}

.cs-arch-col {
	padding: var(--space-8);
}

.cs-arch-col__title {
	font-family: var(--font-mono);
	font-size: var(--text-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--color-accent);
	margin-bottom: var(--space-6);
	padding-bottom: var(--space-4);
	border-bottom: 1px solid var(--color-border);
}

.cs-arch-col__list {
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.cs-arch-col__list li {
	font-size: var(--text-sm);
	color: var(--color-text-secondary);
	line-height: 1.5;
	padding-left: 0.75rem;
	border-left: 2px solid var(--color-border);
	transition: border-color var(--transition-fast);
}

.cs-arch-col:hover .cs-arch-col__list li {
	border-left-color: var(--color-border-hover);
}

@media (min-width: 48rem) {
	.cs-arch-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Feature tags */
.cs-tags {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
	margin-top: var(--space-8);
	list-style: none;
}

.cs-tags li {
	font-family: var(--font-mono);
	font-size: 0.625rem;
	padding: 0.25rem 0.5rem;
	color: #a1a1aa;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 999px;
}

/* Outcome statement */
.cs-statement {
	margin-top: var(--space-10);
	padding: var(--space-8);
	border-left: 2px solid var(--color-border);
	background: rgba(255, 255, 255, 0.02);
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

.cs-statement p {
	font-size: var(--text-lg);
	line-height: 1.75;
}

/* Content / podcast platform — Your Future Biz */
.cs-page--content .cs-media--content {
	background: linear-gradient(165deg, rgba(255, 255, 255, 0.03) 0%, #0d0d0d 62%);
}

.cs-page--content .cs-list li::before {
	color: var(--color-text-secondary);
}