/**
 * TEAB Referensprojekt – karusell/rutnät.
 *
 * Självförsörjande och scoped under .teab-cases. Brand-färger som standard via
 * CSS-variabler; BB-modulen kan skriva över dem per nod (kolumner/accent) och
 * väljer färgschema (ljus/mörk) samt bildeffekt (gråskala/zoom). Porterad från
 * mockupen (6-dark.html ".cases"/".case").
 *
 * @package Teab_Moduler
 */

.teab-cases {
	/* Brand-standard – ink/muted/line faller tillbaka på delade tema-tokens
	   (flippar med sidan); .teab-cases--dark och per-instans-overrides vinner kvar. */
	--teab-cases-green: var(--teab-accent, #008A2B);
	--teab-cases-green-bright: var(--teab-accent-bright, #34AC5C);
	--teab-cases-ink: var(--teab-text, #14201A);
	--teab-cases-muted: var(--teab-muted, #5C6B61);
	--teab-cases-line: var(--teab-border, #E2EBE5);
	--teab-cases-cols: 3;
	--teab-cases-gap: 24px;
	--teab-cases-card-min: 360px;
	--teab-cases-card-max: 420px;
	--teab-cases-ratio: 4 / 5;

	/* Typsnitt: ärver temat (inherit). BB:s typsnittsväljare kan skriva över per instans. */
	--teab-cases-font-ui: var(--font-ui, inherit);
	--teab-cases-font-display: var(--font-display, var(--teab-cases-font-ui));

	color: var(--teab-cases-ink);
}

/* Mörkt färgschema – för placering på mörka sektioner/band. */
.teab-cases--dark {
	--teab-cases-ink: #F8FBF9;
	--teab-cases-muted: rgba(255, 255, 255, 0.7);
	--teab-cases-line: #2C2C2C;
}

/* ============ KARUSELL (rail) ============ */
.teab-cases__rail {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(var(--teab-cases-card-min), var(--teab-cases-card-max));
	gap: var(--teab-cases-gap);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	overscroll-behavior-x: contain;
	/* Native scrollbar döljs – vi visar en egen, alltid synlig progress-linje
	   (teab-cases.js styr tummens bredd/position). */
	scrollbar-width: none;
}

.teab-cases__rail::-webkit-scrollbar {
	display: none;
}

.teab-cases__rail > .teab-case {
	scroll-snap-align: start;
}

/* ============ PROGRESS-LINJE (karusell, klick- & dragbar) ============ */
.teab-cases__progress {
	position: relative;
	height: 4px;
	margin-top: 24px;
	background: var(--teab-cases-line);
	border-radius: 2px;
	cursor: grab;
	/* Drag på touch ska inte panorera sidan. */
	touch-action: none;
}

/* Förstorad osynlig greppyta (events landar ändå på .teab-cases__progress). */
.teab-cases__progress::before {
	content: "";
	position: absolute;
	inset: -11px 0;
}

.teab-cases__progress.is-dragging {
	cursor: grabbing;
}

.teab-cases__progress-thumb {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 30%;
	background: var(--teab-cases-green);
	border-radius: 2px;
	pointer-events: none;
	transition: height 0.15s ease, top 0.15s ease;
}

/* Tjockare tumme vid hover/drag – tydligt att den går att greppa. */
.teab-cases__progress:hover .teab-cases__progress-thumb,
.teab-cases__progress.is-dragging .teab-cases__progress-thumb {
	height: 8px;
	top: -2px;
}

/* ============ RUTNÄT (grid) ============ */
.teab-cases__grid {
	display: grid;
	grid-template-columns: repeat(var(--teab-cases-cols), 1fr);
	gap: 48px var(--teab-cases-gap);
}

/* ============ NAV-PILAR (karusell) ============ */
.teab-cases__nav {
	display: flex;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 24px;
}

.teab-cases__navbtn {
	width: 46px;
	height: 46px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	font-size: 18px;
	line-height: 1;
	color: var(--teab-cases-ink);
	background: transparent;
	border: 1px solid var(--teab-cases-line);
	border-radius: 2px;
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.teab-cases__navbtn:hover:not(:disabled) {
	background: var(--teab-cases-green);
	border-color: var(--teab-cases-green);
	color: #fff;
}

.teab-cases__navbtn:disabled {
	opacity: 0.35;
	cursor: default;
}

.teab-cases__navbtn:focus-visible {
	outline: 3px solid var(--teab-cases-green-bright);
	outline-offset: 2px;
}

/* ============ KORT ============ */
.teab-case {
	display: block;
	min-width: 0;
	color: inherit;
	text-decoration: none;
}

.teab-case__img {
	aspect-ratio: var(--teab-cases-ratio);
	overflow: hidden;
	margin-bottom: 22px;
	background: var(--teab-cases-line);
}

.teab-case__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease, filter 0.5s ease;
}

/* Bildeffekt: gråskala → färg (standard, som mockupen). */
.teab-cases--fx-tint .teab-case__img img {
	filter: grayscale(100%) contrast(1.05);
}

.teab-cases--fx-tint .teab-case:hover .teab-case__img img,
.teab-cases--fx-tint .teab-case:focus-visible .teab-case__img img {
	transform: scale(1.04);
	filter: none;
}

/* Bildeffekt: full färg + zoom. */
.teab-cases--fx-zoom .teab-case:hover .teab-case__img img,
.teab-cases--fx-zoom .teab-case:focus-visible .teab-case__img img {
	transform: scale(1.04);
}

.teab-case__meta {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
	font-family: var(--teab-cases-font-ui);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--teab-cases-muted);
}

.teab-case__title {
	margin: 0;
	font-family: var(--teab-cases-font-display);
	font-weight: var(--teab-cases-title-weight, 700);
	font-size: 26px;
	line-height: 1.12;
	letter-spacing: -0.01em;
	color: var(--teab-cases-ink);
}

.teab-case__text {
	margin: 10px 0 0;
	font-family: var(--teab-cases-font-ui);
	font-size: 15px;
	line-height: 1.6;
	color: var(--teab-cases-muted);
}

/* Tangentbordsfokus – tydlig markering på klickbara kort. */
a.teab-case:focus-visible {
	outline: 3px solid var(--teab-cases-green-bright);
	outline-offset: 4px;
}

/* Platshållare i editorn när inga projekt lagts till. */
.teab-cases--empty {
	padding: 40px;
	border: 1px dashed var(--teab-cases-line);
	color: #5C6B61;
	font-family: var(--teab-cases-font-ui);
	text-align: center;
}

/* ============ RESPONSIVT ============ */
@media (max-width: 1024px) {
	.teab-cases__grid {
		--teab-cases-cols: 2;
	}
}

@media (max-width: 640px) {
	.teab-cases__grid {
		--teab-cases-cols: 1;
	}

	.teab-cases {
		--teab-cases-card-min: 80vw;
		--teab-cases-card-max: 80vw;
	}
}

@media (prefers-reduced-motion: reduce) {
	.teab-cases__rail {
		scroll-behavior: auto;
	}

	.teab-case__img img {
		transition: none;
	}

	.teab-cases--fx-tint .teab-case:hover .teab-case__img img,
	.teab-cases--fx-tint .teab-case:focus-visible .teab-case__img img,
	.teab-cases--fx-zoom .teab-case:hover .teab-case__img img,
	.teab-cases--fx-zoom .teab-case:focus-visible .teab-case__img img {
		transform: none;
	}
}