/* ==========================================================================
   De merkblokken op /nieuwe-machines/ (zie novamira-sandbox/stc-merkblokken.php).

   Eén blok per merk: links een grote foto met twee kleintjes ernaast, rechts
   de tekst. Om en om gespiegeld, zodat de pagina ritme krijgt in plaats van
   een rij identieke kaarten. Onder 900 px staat alles onder elkaar.
   ========================================================================== */

.stc-merken {
	display: flex;
	flex-direction: column;
	gap: var(--extralarge, 60px);
}

.stc-merk {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
	gap: var(--large, 40px);
	align-items: center;
}

.stc-merk--gedraaid .stc-merk__beeld {
	order: 2;
}

/* ---------- De foto's ---------- */

.stc-merk__beeld {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 12px;
	align-items: stretch;
}

.stc-merk__groot,
.stc-merk__klein > span {
	display: block;
	overflow: hidden;
	border-radius: 15px;
	background: #F1F2F4;
}

.stc-merk__groot img,
.stc-merk__klein img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.stc-merk__groot {
	aspect-ratio: 4 / 3;
}

.stc-merk__klein {
	display: grid;
	grid-template-rows: 1fr 1fr;
	gap: 12px;
}

.stc-merk__klein > span {
	aspect-ratio: 4 / 3;
}

/* ---------- De tekst ---------- */

.stc-merk__label {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 14px;
	font-size: 0.78rem;
	font-weight: 800;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #00B7BE;
}

.stc-merk__label::before {
	content: "";
	display: block;
	width: 28px;
	height: 2px;
	background: #00B7BE;
}

.stc-merk__tekst h3 {
	margin: 0 0 16px;
	line-height: 1.2;
}

.stc-merk__intro {
	margin: 0 0 20px;
	line-height: 1.75;
	color: #4B5A61;
}

.stc-merk__reeksen {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
}

.stc-merk__reeksen span {
	padding: 6px 12px;
	border: 1px solid #E3E7E9;
	border-radius: 999px;
	font-size: 0.82rem;
	line-height: 1.2;
	color: #00394D;
}

.stc-merk__reeksen .stc-merk__meer {
	border-style: dashed;
	color: #849CA6;
}

.stc-merk__aantal {
	margin: 0 0 22px;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #849CA6;
}

/* ---------- Mobiel ---------- */

@media (max-width: 900px) {

	.stc-merken {
		gap: var(--large, 40px);
	}

	.stc-merk {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--small, 20px);
	}

	.stc-merk--gedraaid .stc-merk__beeld {
		order: 0;
	}
}

@media (max-width: 600px) {

	.stc-merk__beeld {
		grid-template-columns: minmax(0, 1fr);
	}

	.stc-merk__klein {
		grid-template-rows: none;
		grid-template-columns: 1fr 1fr;
	}
}


/* ==========================================================================
   Aanvulling: de tegels netjes laten aansluiten en de reeksen klikbaar maken.

   Het thema heeft "article.article .article-content img { width: auto }".
   Die regel is specifieker dan ".stc-merk__klein img" en won, waardoor de
   kleine beelden niet de volle tegel vulden en er grijze randen overbleven.
   Daarom hieronder met hogere specificiteit.
   ========================================================================== */

article.stc-merk .stc-merk__beeld img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Productrenders staan op een witte achtergrond; die niet bijsnijden maar
   volledig tonen, zodat de machine niet half wegvalt. */
article.stc-merk .stc-merk__vak--product {
	background: #FFFFFF;
	box-shadow: inset 0 0 0 1px #EDEFF1;
}

article.stc-merk .stc-merk__vak--product img {
	object-fit: contain;
	padding: 8%;
	box-sizing: border-box;
}

/* De reeksen zijn nu links. Zelfde vorm als eerst, met hover. */
.stc-merk__reeksen a {
	display: inline-block;
	padding: 6px 12px;
	border: 1px solid #E3E7E9;
	border-radius: 999px;
	font-size: 0.82rem;
	line-height: 1.2;
	color: #00394D;
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.stc-merk__reeksen a:hover,
.stc-merk__reeksen a:focus-visible {
	background: #00394D;
	border-color: #00394D;
	color: #FFFFFF;
}