/* ==========================================================================
   SEO Case Study — single-case_study.php
   Premium agency-style portfolio detail page. Reuses sitewide tokens
   (--sap-*), .sap-container, .sap-section, .sap-eyebrow, .sap-section-title,
   .sap-btn and .sap-cta from main.css — this file only adds the
   case-study-specific components below.
   ========================================================================== */

/* ---- 1. Hero ---- */
.sap-case-hero {
	position: relative;
	padding: calc(var(--sap-header-height) + 3.5rem) 0 4.5rem;
	background: var(--sap-dark);
	color: var(--sap-white);
	overflow: hidden;
}

.sap-case-hero__inner {
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	gap: 3.5rem;
	align-items: center;
}

.sap-case-hero .sap-breadcrumbs__inner li,
.sap-case-hero .sap-breadcrumbs__inner a {
	color: rgba(254, 254, 254, .6);
}

.sap-case-hero__title {
	font-size: clamp(2.2rem, 3.6vw, 3.4rem);
	line-height: 1.1;
	color: var(--sap-white);
	margin: .75rem 0 1rem;
	max-width: 16ch;
}

.sap-case-hero__text {
	font-size: 1.1rem;
	color: rgba(254, 254, 254, .72);
	max-width: 46ch;
	margin-bottom: 2rem;
}

.sap-case-hero__meta {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.1rem 2rem;
	padding: 1.5rem 0;
	margin: 0 0 1.5rem;
	border-top: 1px solid rgba(254, 254, 254, .12);
	border-bottom: 1px solid rgba(254, 254, 254, .12);
}

.sap-case-hero__meta dt {
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: rgba(254, 254, 254, .48);
	margin-bottom: .3rem;
}

.sap-case-hero__meta dd {
	margin: 0;
	font-family: var(--sap-font-heading);
	font-weight: 600;
	font-size: 1rem;
	color: var(--sap-white);
}

.sap-case-hero__site-link {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	font-size: .95rem;
	font-weight: 600;
	color: var(--sap-accent);
	text-decoration: none;
}
.sap-case-hero__site-link svg { width: 16px; height: 16px; }
.sap-case-hero__site-link:hover { text-decoration: underline; }

.sap-case-hero__visual { position: relative; }

.sap-case-hero__frame-glow {
	position: absolute;
	inset: -10%;
	background: radial-gradient(circle at 60% 40%, var(--sap-primary) 0%, transparent 65%);
	opacity: .28;
	filter: blur(40px);
	z-index: 0;
}

.sap-case-hero__frame {
	position: relative;
	z-index: 1;
	border-radius: var(--sap-radius-lg);
	overflow: hidden;
	border: 1px solid rgba(254, 254, 254, .14);
	box-shadow: var(--sap-shadow-lg);
	aspect-ratio: 4 / 3;
	background: var(--sap-dark-2);
}

.sap-case-hero__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.sap-case-hero__frame-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	color: rgba(254, 254, 254, .25);
}
.sap-case-hero__frame-placeholder svg { width: 64px; height: 64px; }

/* ---- 2. The Challenge ---- */
.sap-case-challenge__layout {
	display: grid;
	grid-template-columns: .85fr 1.15fr;
	gap: 3.5rem;
	align-items: start;
}

.sap-case-challenge__text {
	color: var(--sap-muted);
	font-size: 1.05rem;
	max-width: 42ch;
}

.sap-case-challenge__points {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.sap-case-challenge__point {
	padding: 1.5rem;
	border: 1px solid var(--sap-border);
	border-radius: var(--sap-radius-md);
	background: var(--sap-white);
}

.sap-case-challenge__point-num {
	display: block;
	font-family: var(--sap-font-heading);
	font-weight: 700;
	font-size: 1.1rem;
	color: var(--sap-primary);
	margin-bottom: .6rem;
}

.sap-case-challenge__point p { margin: 0; color: var(--sap-text); font-size: .98rem; }

/* ---- 3. What We Worked On (timeline) ---- */
.sap-case-strategy { background: var(--sap-bg-tint); }

.sap-case-strategy__timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 1.5rem;
	position: relative;
}

.sap-case-strategy__timeline::before {
	content: "";
	position: absolute;
	top: 22px;
	left: 6%;
	right: 6%;
	height: 1px;
	background: var(--sap-border);
	z-index: 0;
}

.sap-case-strategy__step { position: relative; z-index: 1; }

.sap-case-strategy__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: var(--sap-dark);
	color: var(--sap-white);
	font-family: var(--sap-font-heading);
	font-weight: 700;
	font-size: .95rem;
	margin-bottom: 1rem;
}

.sap-case-strategy__step h3 {
	font-size: 1.05rem;
	margin: 0 0 .5rem;
}

.sap-case-strategy__step p {
	font-size: .9rem;
	color: var(--sap-muted);
	margin: 0;
}

/* ---- 4. Before / After table ---- */
.sap-case-compare__table {
	border: 1px solid var(--sap-border);
	border-radius: var(--sap-radius-md);
	overflow: hidden;
}

.sap-case-compare__row {
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr;
	align-items: center;
}

.sap-case-compare__row:not(:last-child) { border-bottom: 1px solid var(--sap-border); }

.sap-case-compare__row > span {
	padding: 1.1rem 1.5rem;
}

.sap-case-compare__row--head {
	background: var(--sap-dark);
	color: rgba(254, 254, 254, .7);
	font-size: .72rem;
	text-transform: uppercase;
	letter-spacing: .08em;
	font-weight: 600;
}

.sap-case-compare__label {
	font-family: var(--sap-font-heading);
	font-weight: 600;
	color: var(--sap-text);
}

.sap-case-compare__before { color: var(--sap-muted); }

.sap-case-compare__after {
	color: var(--sap-success);
	font-weight: 700;
	font-family: var(--sap-font-heading);
}

/* ---- 5. Results ---- */
.sap-case-results { background: var(--sap-dark); color: var(--sap-white); }
.sap-case-results .sap-eyebrow { color: var(--sap-accent); }
.sap-case-results .sap-section-title { color: var(--sap-white); }

.sap-case-results__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
}

.sap-case-results__card {
	padding: 2rem 1.5rem;
	border-radius: var(--sap-radius-md);
	border: 1px solid rgba(254, 254, 254, .12);
	background: rgba(254, 254, 254, .03);
	text-align: center;
}

.sap-case-results__value {
	display: block;
	font-family: var(--sap-font-heading);
	font-weight: 800;
	font-size: 2.1rem;
	color: var(--sap-primary);
	margin-bottom: .4rem;
}

.sap-case-results__label {
	display: block;
	font-size: .88rem;
	color: rgba(254, 254, 254, .65);
}

/* ---- 6. Search Visibility (chart placeholder) ---- */
.sap-case-visibility__panel {
	border: 1px solid var(--sap-border);
	border-radius: var(--sap-radius-lg);
	padding: 2rem;
	background: var(--sap-white);
}

.sap-case-visibility__labels {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-bottom: 1.5rem;
}

.sap-case-visibility__labels span {
	padding: .4rem .9rem;
	border-radius: var(--sap-radius-pill);
	background: var(--sap-bg-tint);
	font-size: .82rem;
	font-weight: 600;
	color: var(--sap-muted);
}

.sap-case-visibility__chart {
	position: relative;
	border-radius: var(--sap-radius-md);
	background: var(--sap-bg-tint);
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.sap-case-visibility__chart svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	color: var(--sap-muted);
}

.sap-case-visibility__note {
	position: relative;
	z-index: 1;
	max-width: 34ch;
	text-align: center;
	font-size: .92rem;
	color: var(--sap-muted);
	margin: 0;
	padding: 1rem 1.5rem;
	background: var(--sap-white);
	border-radius: var(--sap-radius-sm);
	border: 1px dashed var(--sap-border);
}

/* ---- 7. Local SEO Focus ---- */
.sap-case-local { background: var(--sap-bg-tint); }

.sap-case-local__inner {
	max-width: 760px;
}

.sap-case-local__text {
	color: var(--sap-muted);
	font-size: 1.05rem;
}

.sap-case-local__services {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	margin-top: 1.5rem;
}

.sap-case-local__tag {
	padding: .5rem 1.1rem;
	border-radius: var(--sap-radius-pill);
	background: var(--sap-white);
	border: 1px solid var(--sap-border);
	font-size: .88rem;
	font-weight: 600;
	color: var(--sap-text);
}

/* ---- 8. Project Highlights ---- */
.sap-case-highlights__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.sap-case-highlights__item {
	display: flex;
	align-items: flex-start;
	gap: .9rem;
	padding: 1.25rem 1.5rem;
	border-radius: var(--sap-radius-md);
	background: var(--sap-bg-tint);
}

.sap-case-highlights__icon {
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--sap-primary);
	color: #fff;
}
.sap-case-highlights__icon svg { width: 16px; height: 16px; }

.sap-case-highlights__item p { margin: 0; color: var(--sap-text); font-weight: 500; }

/* ---- 9. Testimonial ---- */
.sap-case-testimonial__inner {
	max-width: 780px;
	text-align: center;
}

.sap-case-testimonial__quote-mark {
	display: inline-flex;
	color: var(--sap-primary);
	opacity: .5;
	margin-bottom: 1.5rem;
}
.sap-case-testimonial__quote-mark svg { width: 40px; height: 30px; }

.sap-case-testimonial blockquote {
	margin: 0 0 1.75rem;
	font-family: var(--sap-font-heading);
	font-size: clamp(1.3rem, 2.2vw, 1.7rem);
	line-height: 1.5;
	color: var(--sap-text);
	font-weight: 500;
}

.sap-case-testimonial__name {
	margin: 0;
	font-weight: 700;
	color: var(--sap-text);
}

.sap-case-testimonial__role {
	margin: 0;
	color: var(--sap-muted);
	font-size: .9rem;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
	.sap-case-hero__inner { grid-template-columns: 1fr; gap: 2.5rem; }
	.sap-case-hero__visual { order: -1; }
	.sap-case-challenge__layout { grid-template-columns: 1fr; }
	.sap-case-strategy__timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sap-case-strategy__timeline::before { display: none; }
	.sap-case-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sap-case-highlights__grid { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
	.sap-case-hero__meta { grid-template-columns: 1fr 1fr; }
	.sap-case-challenge__points { grid-template-columns: 1fr; }
	.sap-case-strategy__timeline { grid-template-columns: 1fr 1fr; }
	.sap-case-compare__row { grid-template-columns: 1.2fr .9fr .9fr; }
	.sap-case-compare__row > span { padding: .9rem 1rem; font-size: .9rem; }
	.sap-case-results__grid { grid-template-columns: 1fr; }
}