/**
 * TEAB Projekt – grid av referensprojekt (CPT-driven).
 *
 * Hämtar projekt från CPT:n "teab_projekt" och visar dem i ett rutnät med
 * valfri filterrad (verksamhetsområde). Bilderna visas i FÄRG (ingen gråskala) –
 * diskret inzoomning vid hover. Self-contained och scoped under .teab-projekt.
 * INGET hårdkodat: färger/typsnitt via CSS-variabler → temat → brand-literal.
 *
 * @package Teab_Moduler
 */

.teab-projekt {
	--_ink:     var(--teab-projekt-ink, var(--teab-text, #14201A));
	--_muted:   var(--teab-projekt-muted, var(--teab-muted, #5C6B61));
	--_accent:  var(--teab-projekt-accent, var(--teab-link, #006420));
	--_line:    var(--teab-projekt-line, color-mix(in srgb, var(--_ink) 16%, transparent));

	--_font-ui:      var(--teab-projekt-font-ui, var(--font-ui, inherit));
	--_font-display: var(--teab-projekt-font-display, var(--font-display, var(--_font-ui)));

	--_cols:    var(--teab-projekt-cols, 3);
	--_ratio:   var(--teab-projekt-ratio, 4 / 3);
	--_surface: var(--teab-projekt-surface, var(--teab-panel, #FFFFFF));
	--_pad:     var(--teab-projekt-pad, 28px);
	--_easing:  cubic-bezier(.2, .6, .2, 1);

	font-family: var(--_font-ui);
	color: var(--_ink);
	/* Skydd: modulen får aldrig spilla utanför sin bredd (horisontell scroll på
	   mobil). clip påverkar inte layouten och skapar ingen scroll-container. */
	max-width: 100%;
	overflow-x: clip;
}

.teab-projekt *,
.teab-projekt *::before,
.teab-projekt *::after { box-sizing: border-box; }

/* Mörkt schema. */
.teab-projekt--dark {
	--teab-projekt-ink: #EDF4EF;
	--teab-projekt-muted: rgba(237, 244, 239, 0.62);
	--teab-projekt-accent: var(--teab-accent-bright, #34AC5C);
	--teab-projekt-surface: var(--teab-panel, #161D17);
}

/* ============ FILTERRAD ============ */
.teab-projekt__filters {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	margin-bottom: 48px;
}
.teab-projekt__filter {
	font-family: var(--_font-ui);
	font-size: 13px;
	font-weight: 600;
	padding: 10px 18px;
	border: 1px solid var(--_line);
	background: transparent;
	color: var(--_ink);
	cursor: pointer;
	transition: background .2s var(--_easing), color .2s var(--_easing), border-color .2s var(--_easing);
}
.teab-projekt__filter:hover { border-color: var(--_ink); }
.teab-projekt__filter.is-active {
	background: var(--_ink);
	color: var(--teab-projekt-surface, #fff);
	border-color: var(--_ink);
}
.teab-projekt--dark .teab-projekt__filter.is-active { color: #14201A; background: #EDF4EF; border-color: #EDF4EF; }
.teab-projekt__filter:focus-visible { outline: 2px solid var(--_accent); outline-offset: 3px; }

/* ============ RUTNÄT ============ */
/* Inramade kort: hårlinjerna ritas via varje korts höger/botten-kant + en yttre
   ram (top/left) på griden. Då blir det inga grå "spökceller" när sista raden
   inte är full – tomma celler ritas inte alls. */
.teab-projekt__grid {
	display: grid;
	grid-template-columns: repeat(var(--_cols), 1fr);
	border-top: 1px solid var(--_line);
	border-left: 1px solid var(--_line);
}

.teab-projekt__card {
	display: flex; flex-direction: column;
	/* Tillåt att grid-spåret krymper under innehållets min-storlek – annars kan
	   t.ex. nowrap-metaraden tvinga kortet bredare än skärmen (overflow på mobil). */
	min-width: 0;
	background: var(--_surface);
	border-right: 1px solid var(--_line);
	border-bottom: 1px solid var(--_line);
}
.teab-projekt__card.is-hidden { display: none; }

/* Rutan definierar höjden (aspect-ratio). Alla kort är lika breda → alla rutor
   (och därmed bilderna) blir EXAKT lika höga. Negativ marginal låter bilden gå
   kant-i-kant i kortet. */
.teab-projekt__media {
	position: relative;
	aspect-ratio: var(--_ratio);
	overflow: hidden;
	margin: 0 calc(-1 * var(--_pad)) 22px;
}
/* Bilden fyller rutan helt med "cover" – oavsett bildens egna proportioner.
   Absolut + inset:0 + 100%/100% gör den immun mot tema-regler om img-höjd. */
.teab-projekt__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .6s var(--_easing);
}
.teab-projekt__card a:hover .teab-projekt__media img,
.teab-projekt__card a:focus-visible .teab-projekt__media img { transform: scale(1.045); }

.teab-projekt__media--empty {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--_font-display);
	font-weight: 700;
	color: var(--_muted);
	font-size: 14px;
	background: color-mix(in srgb, var(--_ink) 7%, transparent);
}

.teab-projekt__link { color: inherit; text-decoration: none; display: block; padding: 0 var(--_pad) var(--_pad); }
.teab-projekt__link:focus-visible { outline: 2px solid var(--_accent); outline-offset: -2px; }

.teab-projekt__meta {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--_muted);
	margin-bottom: 10px;
}
.teab-projekt__meta span { white-space: nowrap; }
.teab-projekt__meta .teab-projekt__omrade { white-space: normal; }

.teab-projekt__title {
	font-family: var(--_font-display);
	font-weight: var(--teab-projekt-title-weight, 700);
	font-size: 23px;
	line-height: 1.14;
	letter-spacing: -0.01em;
	color: var(--_ink);
}
.teab-projekt__card a:hover .teab-projekt__title { color: var(--_accent); }

.teab-projekt__excerpt {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.6;
	color: var(--_muted);
}

/* ============ TOMT LÄGE ============ */
.teab-projekt__empty {
	padding: 48px;
	border: 1px dashed var(--_line);
	color: var(--_muted);
	font-family: var(--_font-ui);
	text-align: center;
}

/* ============ RESPONSIVT ============ */
@media (max-width: 1024px) {
	.teab-projekt__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.teab-projekt__grid { grid-template-columns: 1fr; }
	/* Mindre kortpadding på mobil (28px var i bredaste laget). */
	.teab-projekt { --_pad: 18px; }
	/* Metaraden får radbrytas så område/år aldrig tvingar kortet bredare. */
	.teab-projekt__meta { flex-wrap: wrap; }
}

@media (prefers-reduced-motion: reduce) {
	.teab-projekt__media img { transition: none; }
	.teab-projekt__card a:hover .teab-projekt__media img { transform: none; }
}