/* ════════════════════════════════════════════════
   V2 — BEHANDLING + BETTFEL polish + DEPTH
   ════════════════════════════════════════════════
   Scope: .gd-jq--v2 inom #gd-behandling och #gd-bettfel.
   Laddas efter jq-r1.css → reglerna här vinner.
   Inga !important i onödan — kaskad räcker eftersom
   denna fil queueas sist.
   ════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────
   0 · Lokala depth-tokens
   ───────────────────────────────────────────────── */
.gd-jq--v2 {
	--v2-depth-1: 0 1px 2px rgba(21, 23, 27, .05),
	              0 8px 24px -12px rgba(21, 23, 27, .12);
	--v2-depth-2: 0 2px 4px rgba(21, 23, 27, .06),
	              0 18px 40px -18px rgba(21, 23, 27, .22),
	              0 32px 80px -28px rgba(21, 23, 27, .18);
	--v2-depth-3: 0 4px 8px rgba(21, 23, 27, .08),
	              0 28px 64px -22px rgba(21, 23, 27, .28),
	              0 60px 140px -40px rgba(21, 23, 27, .25);
	--v2-depth-ink: 0 1px 2px rgba(0, 0, 0, .35),
	                0 24px 56px -20px rgba(0, 0, 0, .55),
	                0 60px 120px -30px rgba(0, 0, 0, .45);
	--v2-vignette: radial-gradient(ellipse at center,
	               transparent 55%,
	               rgba(0, 0, 0, .22) 100%);
	--v2-warm-top: radial-gradient(ellipse 90vw 70vh at 50% -8%,
	               rgba(255, 248, 232, .55) 0%,
	               transparent 65%);
	--v2-accent-glow: radial-gradient(ellipse 70vw 55vh at 50% 108%,
	                  rgba(30, 115, 190, .12) 0%,
	                  transparent 70%);
}


/* ─────────────────────────────────────────────────
   1 · Atmospheric section backgrounds
   Lägger till ett mjukt top-light på beige och en
   accent-glow nere på ink — utan att förstöra den
   redan killade corduroyen.
   ───────────────────────────────────────────────── */
#gd-behandling.gd-jq--v2 .jq-sec--bg,
#gd-bettfel.gd-jq--v2 .jq-sec--bg {
	position: relative;
}
#gd-behandling.gd-jq--v2 .jq-sec--bg::before,
#gd-bettfel.gd-jq--v2 .jq-sec--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--v2-warm-top);
	mix-blend-mode: soft-light;
	opacity: .9;
}

#gd-behandling.gd-jq--v2 .jq-sec--ink,
#gd-bettfel.gd-jq--v2 .jq-sec--ink {
	position: relative;
}
#gd-behandling.gd-jq--v2 .jq-sec--ink::after,
#gd-bettfel.gd-jq--v2 .jq-sec--ink::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--v2-accent-glow);
	opacity: .85;
}
/* Skydda allt innehåll från att hamna under ::before/::after */
#gd-behandling.gd-jq--v2 .jq-sec > *,
#gd-bettfel.gd-jq--v2 .jq-sec > * {
	position: relative;
	z-index: 1;
}


/* ─────────────────────────────────────────────────
   2 · Spectral italic em — subtil ink-shadow för djup
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-sec--bg h1 em,
.gd-jq--v2 .jq-sec--bg h2 em,
.gd-jq--v2 .jq-sec--lav h2 em {
	font-style: italic;
	color: currentColor;
	text-shadow: 0 1px 0 rgba(255, 255, 255, .55),
	             0 2px 8px rgba(21, 23, 27, .04);
}
.gd-jq--v2 .jq-sec--ink h1 em,
.gd-jq--v2 .jq-sec--ink h2 em,
.gd-jq--v2 .jq-bx-h2 em,
.gd-jq--v2 .jq-v2-risk-h2 em,
.gd-jq--v2 .jq-v2-final-h2 em {
	color: currentColor;
	text-shadow: 0 1px 0 rgba(0, 0, 0, .35),
	             0 2px 16px rgba(30, 115, 190, .18);
}


/* ─────────────────────────────────────────────────
   3 · Översikt-figur — multi-layer skugga + vignette
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-split .jq-collage-main {
	box-shadow: var(--v2-depth-2);
	transition: transform .9s var(--jq-ease),
	            box-shadow .9s var(--jq-ease);
	will-change: transform;
}
.gd-jq--v2 .jq-split .jq-collage-main:hover {
	transform: translateY(-4px);
	box-shadow: var(--v2-depth-3);
}
.gd-jq--v2 .jq-split .jq-collage-main::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--v2-vignette);
	opacity: .85;
	mix-blend-mode: multiply;
}
.gd-jq--v2 .jq-split .jq-collage-main img {
	transition: transform 1.6s var(--jq-ease),
	            filter .9s var(--jq-ease);
	filter: contrast(1.03) saturate(.96);
}
.gd-jq--v2 .jq-split .jq-collage-main:hover img {
	transform: scale(1.035);
}


/* ─────────────────────────────────────────────────
   4 · Före/Efter (jq-v2-ba) — vignette + depth
   Endast 2 statiska figs, inga videor.
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-ba-grid > video,
.gd-jq--v2 .jq-v2-ba-fig video {
	/* Säkerhetsbälte: om någon råkar lägga in <video> här, dölj den. */
	display: none !important;
}
.gd-jq--v2 .jq-v2-ba-fig {
	transition: transform .6s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-ba-fig:hover {
	transform: translateY(-3px);
}
.gd-jq--v2 .jq-v2-ba-frame {
	box-shadow: var(--v2-depth-2);
	background: var(--jq-deep);
	transition: box-shadow .7s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-ba-fig:hover .jq-v2-ba-frame {
	box-shadow: var(--v2-depth-3);
}
.gd-jq--v2 .jq-v2-ba-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--v2-vignette);
	opacity: .65;
	mix-blend-mode: multiply;
}
.gd-jq--v2 .jq-v2-ba-frame::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg,
	            rgba(255, 255, 255, .08) 0%,
	            transparent 28%,
	            transparent 70%,
	            rgba(0, 0, 0, .18) 100%);
	z-index: 1;
}


/* ─────────────────────────────────────────────────
   5 · Möt specialisten — figur depth + vignette
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-sec--lav .jq-collage-main {
	box-shadow: var(--v2-depth-2);
}
.gd-jq--v2 .jq-sec--lav .jq-collage-main::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: var(--v2-vignette);
	opacity: .55;
	mix-blend-mode: multiply;
}


/* ─────────────────────────────────────────────────
   6 · Compare-grid — depth + tydligare aktiv state
   "Du är här"-pill för aktiv behandling.
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-compare-card {
	box-shadow: 0 1px 2px rgba(0, 0, 0, .25),
	            0 12px 32px -16px rgba(0, 0, 0, .35);
	transition: transform .55s var(--jq-ease),
	            box-shadow .55s var(--jq-ease),
	            border-color .35s var(--jq-ease),
	            background .45s var(--jq-ease);
}
.gd-jq--v2 .jq-compare-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 2px 4px rgba(0, 0, 0, .3),
	            0 24px 56px -18px rgba(0, 0, 0, .5),
	            0 50px 120px -32px rgba(0, 0, 0, .35);
}
/* Skärp pillen: tydligare avstånd från övre kant + bättre läsbarhet */
.gd-jq--v2 .jq-compare-card.is-pop,
.gd-jq--v2 .jq-compare-card.is-hi {
	box-shadow: 0 0 0 1px var(--jq-ink),
	            0 4px 10px rgba(0, 0, 0, .35),
	            0 24px 56px -18px rgba(0, 0, 0, .45),
	            0 50px 120px -32px rgba(30, 115, 190, .25);
	padding-top: clamp(40px, 4vw, 56px);
}
.gd-jq--v2 .jq-compare-card.is-pop::before,
.gd-jq--v2 .jq-compare-card.is-hi::before {
	top: clamp(14px, 1.6vw, 20px);
	left: clamp(14px, 1.6vw, 20px);
	background: rgba(30, 115, 190, .14);
	padding: 6px 10px;
	border-radius: 999px;
	letter-spacing: .26em;
	font-size: 9px;
	border: 1px solid rgba(30, 115, 190, .35);
}
/* "Du är här"-länken (jq-compare-card-more på aktiv) — mjuk highlight */
.gd-jq--v2 .jq-compare-card.is-pop .jq-compare-card-more,
.gd-jq--v2 .jq-compare-card.is-hi .jq-compare-card-more {
	color: var(--jq-cream);
	opacity: .92;
}


/* ─────────────────────────────────────────────────
   7 · Pris-rad (behandling.php) — depth + emphasis
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-price-row {
	position: relative;
}
.gd-jq--v2 .jq-v2-price-row::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: linear-gradient(90deg,
	            transparent 0%,
	            rgba(30, 115, 190, .35) 50%,
	            transparent 100%);
	opacity: .6;
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-num {
	text-shadow: 0 1px 0 rgba(255, 255, 255, .55);
}
.gd-jq--v2 .jq-v2-price-row .jq-ix-badge {
	background: var(--jq-ink);
	color: var(--jq-cream);
	padding: 6px 12px;
	border-radius: 999px;
	font-size: 9px;
	letter-spacing: .26em;
	text-transform: uppercase;
	display: inline-block;
	margin-bottom: 12px;
	box-shadow: 0 4px 12px -4px rgba(21, 23, 27, .35);
}


/* ─────────────────────────────────────────────────
   8 · Bettfel · Behandlings-stack pris-cell
   Förstärker existerande nowrap-fix.
   Klassen är .jq-v2-tx-meta-value
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-tx-meta {
	white-space: nowrap;
	min-width: max-content;
}
.gd-jq--v2 .jq-v2-tx-meta-value {
	white-space: nowrap;
	font-size: clamp(.95rem, 1.15vw, 1.15rem);
	letter-spacing: -.012em;
	word-break: keep-all;
	overflow-wrap: normal;
	hyphens: none;
	font-feature-settings: "tnum" on, "lnum" on;
}
.gd-jq--v2 .jq-v2-tx-meta-label {
	white-space: nowrap;
	font-size: 10px;
	letter-spacing: .26em;
}

/* Stack-row på bettfel: ge meta-cellen explicit kolumn, inte krympbar */
@media (min-width: 980px) {
	#gd-bettfel.gd-jq--v2 .jq-v2-tx-row {
		grid-template-columns:
			clamp(72px, 9vw, 132px)
			minmax(0, 1.6fr)
			minmax(140px, auto);
	}
}
@media (max-width: 979px) {
	.gd-jq--v2 .jq-v2-tx-meta {
		text-align: left;
		padding-left: 0;
		border-left: 0;
		border-top: 1px solid rgba(244, 241, 234, .14);
		padding-top: 14px;
		margin-top: 4px;
		flex-direction: row;
		align-items: baseline;
		gap: 12px;
	}
}


/* ─────────────────────────────────────────────────
   9 · Risk-sektion (bettfel) — ren ink, inga ränder
   Säkerhetslager — corduroy ska redan vara killad i
   jq-r1.css. Tvinga ren ink + subtil accent-glow.
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-risk {
	background-image: none;
}
.gd-jq--v2 .jq-v2-risk-row {
	transition: padding-left .45s var(--jq-ease),
	            border-color .35s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-risk-row:hover {
	padding-left: clamp(6px, 1vw, 16px);
	border-bottom-color: rgba(244, 241, 234, .25);
}
.gd-jq--v2 .jq-v2-risk-row:hover .jq-v2-risk-n {
	color: var(--jq-accent);
}


/* ─────────────────────────────────────────────────
   10 · Adv-list (behandling) hover-detalj
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-adv-link {
	transition: padding-left .4s var(--jq-ease),
	            background .4s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-adv-row:hover .jq-v2-adv-link {
	padding-left: clamp(6px, 1vw, 16px);
}
.gd-jq--v2 .jq-v2-adv-row:hover .jq-dx-num {
	color: var(--jq-accent);
}


/* ─────────────────────────────────────────────────
   11 · Symptom-grid (bettfel) — mjuk hover + tydligare cell
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-bx-item {
	transition: background .4s var(--jq-ease),
	            transform .4s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-bx-item:hover {
	background: var(--jq-bg-lt, #F6F3EC);
	transform: translateY(-1px);
}
.gd-jq--v2 .jq-v2-bx-item:hover .jq-v2-bx-n {
	color: var(--jq-accent);
}


/* ─────────────────────────────────────────────────
   12 · Final CTA — solid knapp depth
   ───────────────────────────────────────────────── */
.gd-jq--v2 .jq-v2-final .jq-btn--solid {
	box-shadow: 0 4px 14px -4px rgba(30, 115, 190, .45),
	            0 16px 40px -12px rgba(30, 115, 190, .35);
	transition: transform .35s var(--jq-ease),
	            box-shadow .35s var(--jq-ease);
}
.gd-jq--v2 .jq-v2-final .jq-btn--solid:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 18px -4px rgba(30, 115, 190, .55),
	            0 24px 60px -14px rgba(30, 115, 190, .45);
}


/* ─────────────────────────────────────────────────
   13 · FAQ — fina divider + hover
   ───────────────────────────────────────────────── */
#gd-behandling.gd-jq--v2 .jq-faq details,
#gd-bettfel.gd-jq--v2 .jq-faq details {
	transition: padding .35s var(--jq-ease);
}
#gd-behandling.gd-jq--v2 .jq-faq details[open],
#gd-bettfel.gd-jq--v2 .jq-faq details[open] {
	background: linear-gradient(180deg,
	            rgba(255, 255, 255, .35) 0%,
	            transparent 100%);
}


/* ─────────────────────────────────────────────────
   14 · Carousel card (relaterade) — depth
   ───────────────────────────────────────────────── */
#gd-behandling.gd-jq--v2 .gd-pg-related .jq-card {
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15),
	            0 16px 40px -16px rgba(0, 0, 0, .35);
	transition: transform .5s var(--jq-ease),
	            box-shadow .5s var(--jq-ease);
}
#gd-behandling.gd-jq--v2 .gd-pg-related .jq-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 10px rgba(0, 0, 0, .2),
	            0 28px 60px -18px rgba(0, 0, 0, .5);
}


/* ─────────────────────────────────────────────────
   15 · Video-hero — säkerställ kontrast på text
   ───────────────────────────────────────────────── */
#gd-behandling.gd-jq--v2 .gd-pg-vhero-veil,
#gd-bettfel.gd-jq--v2 .gd-pg-vhero-veil {
	background: linear-gradient(180deg,
	            rgba(15, 16, 20, .28) 0%,
	            rgba(15, 16, 20, .42) 55%,
	            rgba(15, 16, 20, .68) 100%);
}


/* ─────────────────────────────────────────────────
   16 · Reduced motion respekt
   ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
	.gd-jq--v2 .jq-split .jq-collage-main,
	.gd-jq--v2 .jq-split .jq-collage-main img,
	.gd-jq--v2 .jq-v2-ba-fig,
	.gd-jq--v2 .jq-v2-ba-frame,
	.gd-jq--v2 .jq-compare-card,
	.gd-jq--v2 .jq-v2-bx-item,
	.gd-jq--v2 .jq-v2-risk-row,
	.gd-jq--v2 .jq-v2-adv-link,
	.gd-jq--v2 .jq-v2-final .jq-btn--solid,
	#gd-behandling.gd-jq--v2 .gd-pg-related .jq-card {
		transition: none !important;
		transform: none !important;
	}
}