/*
 * Varumärkessektion ([woodmart_brands]-shortcoden/blocket, både grid- och
 * carousel-läge).
 *
 * Woodmarts standard-CSS för denna widget (css/parts/el-brand.css) är byggd
 * för SMÅ logotyp-remsor - den begränsar bilden till max-height:60px och
 * centrerar den med object-fit:contain. Vi vill ha stora, fyrkantiga
 * produktbild-rutor istället, så vi måste explicit häva den spärren
 * (--wd-brand-img-height/-width samt max-height) i båda lägena.
 *
 * Namn-etiketten: Woodmarts mall ritar bara ut varumärkesnamnet som en
 * osynlig "title"-tooltip (syns bara vid hover). Vi genererar en riktig,
 * alltid synlig vit "pill" via CSS content: attr(title) - ingen PHP/mall
 * behöver ändras.
 */

.wd-brand-item {
	position: relative;
	--wd-brand-img-height: 100%;
	--wd-brand-img-width: 100%;
	--wd-brand-pd: 0;
	padding: 0 !important;
}

.wd-brand-item img {
	display: block;
	max-height: none !important;
	object-fit: cover !important;
}

.wd-brand-item a.wd-fill {
	position: absolute;
	inset: 0;
	z-index: 2;
}

.wd-brand-item a.wd-fill::after {
	content: attr(title);
	position: absolute;
	left: 50%;
	bottom: 16px;
	transform: translateX(-50%);
	z-index: 3;
	background: #fff;
	color: #111;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	padding: 10px 24px;
	border-radius: 6px;
	white-space: nowrap;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.15 );
	transition: background-color 0.4s ease-in-out, color 0.4s ease-in-out, box-shadow 0.4s ease-in-out;
}

/* Vid hover: pillen blir enbart svart (ingen pil, ingen extra skugga) -
   mjuk övergång (0.4s ease-in-out) istället för en abrupt växling. */
.wd-brand-item:hover a.wd-fill::after {
	background: #111;
	color: #fff;
}

/* Rutnätsläget (t.ex. /brands/-sidan OCH startsidans svepbara rad, som
   båda använder style=grid - se front-page.php och assets/js/scroll-
   carousel.js för hur startsidans version görs svepbar via native
   scroll-snap istället för Swiper): fyrkantig ruta med fast höjd/bredd,
   bilden fyller (och beskärs vid behov av) hela rutan. */
.wd-layout-grid .wd-brand-item {
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 8px;
}

.wd-layout-grid .wd-brand-item img {
	width: 100%;
	height: 100%;
	transition: transform 0.4s ease-in-out;
}

.wd-layout-grid .wd-brand-item:hover img {
	transform: scale( 1.05 );
}