/*
 * LCS Modeshowcase - front-end styling
 * © Lucas Computer Services — Alle rechten voorbehouden
 */

.lcs-ms-collage {
	--lcs-ms-kolommen: 4;
	--lcs-ms-logo-grootte: 56px;
	--lcs-ms-radius: 12px;
	display: grid;
	grid-template-columns: repeat( var( --lcs-ms-kolommen ), 1fr );
	gap: 16px;
	margin: 24px 0;
}

@media ( max-width: 900px ) {
	.lcs-ms-collage {
		grid-template-columns: repeat( min( 3, var( --lcs-ms-kolommen ) ), 1fr );
	}
}

@media ( max-width: 560px ) {
	.lcs-ms-collage {
		grid-template-columns: repeat( 2, 1fr );
		gap: 10px;
	}
}

.lcs-ms-tile {
	display: flex;
	flex-direction: column;
}

.lcs-ms-tile-knop {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
	overflow: hidden;
	border-radius: var( --lcs-ms-radius );
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.15 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.lcs-ms-tile-knop:hover,
.lcs-ms-tile-knop:focus-visible {
	transform: translateY( -2px );
	box-shadow: 0 6px 16px rgba( 0, 0, 0, 0.2 );
}

.lcs-ms-foto {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

.lcs-ms-badge {
	position: absolute;
	width: var( --lcs-ms-logo-grootte );
	height: var( --lcs-ms-logo-grootte );
	object-fit: contain;
	background: rgba( 255, 255, 255, 0.9 );
	border-radius: 50%;
	padding: 6px;
	box-shadow: 0 1px 4px rgba( 0, 0, 0, 0.25 );
}

.lcs-ms-logo-rechtsonder .lcs-ms-badge { right: 8px; bottom: 8px; }
.lcs-ms-logo-rechtsboven .lcs-ms-badge { right: 8px; top: 8px; }
.lcs-ms-logo-linksonder .lcs-ms-badge { left: 8px; bottom: 8px; }
.lcs-ms-logo-linksboven .lcs-ms-badge { left: 8px; top: 8px; }

.lcs-ms-merknaam {
	margin: 6px 0 0;
	font-size: 0.9em;
	text-align: center;
}

/* ===== Stijl: Masonry (Pinterest-achtig, geen JS nodig) ===== */
.lcs-ms-stijl-masonry.lcs-ms-collage {
	display: block;
	column-count: var( --lcs-ms-kolommen );
	column-gap: 16px;
}

.lcs-ms-stijl-masonry .lcs-ms-tile {
	display: inline-block;
	width: 100%;
	break-inside: avoid;
	margin-bottom: 16px;
}

.lcs-ms-stijl-masonry .lcs-ms-foto {
	height: auto;
	aspect-ratio: auto;
}

@media ( max-width: 900px ) {
	.lcs-ms-stijl-masonry.lcs-ms-collage {
		column-count: min( 3, var( --lcs-ms-kolommen ) );
	}
}

@media ( max-width: 560px ) {
	.lcs-ms-stijl-masonry.lcs-ms-collage {
		column-count: min( 2, var( --lcs-ms-kolommen ) );
	}
}

/* ===== Stijl: Prikbord (foto's scheef "geprikt" op een kurkbord) ===== */

/* Houten lijst rondom het bord: steigerhout-look, puur CSS. */
.lcs-ms-prikbord-lijst {
	padding: 22px;
	border-radius: 8px;
	background-color: #8a5a34;
	background-image:
		repeating-linear-gradient( 90deg, rgba( 0, 0, 0, 0.16 ) 0, rgba( 0, 0, 0, 0.16 ) 3px, transparent 3px, transparent 130px ),
		repeating-linear-gradient( 90deg, rgba( 255, 255, 255, 0.05 ) 0, rgba( 255, 255, 255, 0.05 ) 1px, transparent 1px, transparent 5px ),
		linear-gradient( 155deg, #a9764a 0%, #8a5a34 45%, #6e4526 100% );
	box-shadow:
		inset 0 0 0 3px rgba( 0, 0, 0, 0.2 ),
		inset 0 2px 6px rgba( 255, 255, 255, 0.15 ),
		0 8px 22px rgba( 0, 0, 0, 0.35 );
	margin: 24px 0;
}

.lcs-ms-stijl-prikbord.lcs-ms-collage {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	padding: 46px 40px;
	margin: 0;
	border-radius: 4px;
	background-color: #c19a6b;
	background-image:
		radial-gradient( circle at 20% 30%, rgba( 0, 0, 0, 0.10 ) 0, rgba( 0, 0, 0, 0.10 ) 2px, transparent 3px ),
		radial-gradient( circle at 65% 75%, rgba( 0, 0, 0, 0.08 ) 0, rgba( 0, 0, 0, 0.08 ) 2px, transparent 3px ),
		radial-gradient( circle at 80% 15%, rgba( 255, 255, 255, 0.08 ) 0, rgba( 255, 255, 255, 0.08 ) 2px, transparent 3px ),
		radial-gradient( circle at 40% 90%, rgba( 0, 0, 0, 0.08 ) 0, rgba( 0, 0, 0, 0.08 ) 2px, transparent 3px ),
		radial-gradient( circle at 5% 65%, rgba( 0, 0, 0, 0.06 ) 0, rgba( 0, 0, 0, 0.06 ) 2px, transparent 3px );
	background-size: 42px 42px, 58px 58px, 36px 36px, 50px 50px, 30px 30px;
	box-shadow: inset 0 0 40px rgba( 0, 0, 0, 0.18 );
}

.lcs-ms-stijl-prikbord .lcs-ms-tile {
	width: calc( 100% / var( --lcs-ms-kolommen ) - 6px );
	flex: 0 0 auto;
	margin: 6px -18px 4px -18px; /* negatieve marge = foto's vallen licht over elkaar heen */
	transition: transform 0.2s ease;
	position: relative;
}

.lcs-ms-stijl-prikbord .lcs-ms-tile:hover {
	transform: rotate( 0deg ) scale( 1.07 );
	z-index: 50 !important;
}

.lcs-ms-stijl-prikbord .lcs-ms-tile-knop {
	background: #fff;
	padding: 10px 10px 26px 10px;
	border-radius: 2px;
	box-shadow: 0 10px 20px rgba( 0, 0, 0, 0.4 );
}

.lcs-ms-stijl-prikbord .lcs-ms-foto {
	height: auto;
	aspect-ratio: auto;
}

/* Punaise: ronde kop bóven de foto, plus een schaduw op het prikbord zelf zodat 'm goed zichtbaar is. */
.lcs-ms-stijl-prikbord .lcs-ms-tile::before {
	content: '';
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX( -50% );
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba( 0, 0, 0, 0.35 );
	filter: blur( 2px );
	/* Geen z-index hier: moet ónder de foto/punaise blijven. Een positieve
	   z-index zou deze schaduw, ondanks dat 'ie eerder in de DOM staat dan
	   .lcs-ms-tile-knop, altijd bóven die knop (en dus de punaise) tekenen. */
}

.lcs-ms-stijl-prikbord .lcs-ms-tile-knop::before {
	content: '';
	position: absolute;
	top: -16px;
	left: 50%;
	transform: translateX( -50% );
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: radial-gradient( circle at 32% 28%, #ff9b9b 0%, #ff6b6b 35%, #b33 75%, #8a1f1f 100% );
	box-shadow:
		0 3px 4px rgba( 0, 0, 0, 0.5 ),
		inset 0 1px 2px rgba( 255, 255, 255, 0.6 ),
		inset 0 -2px 3px rgba( 0, 0, 0, 0.3 );
	z-index: 3;
}

.lcs-ms-stijl-prikbord .lcs-ms-merknaam {
	color: #3a2a18;
}

/* Zes lichtjes verschillende standjes/prikkleuren, zodat het bord er organisch uitziet. */
.lcs-ms-stijl-prikbord .lcs-ms-variant-1 { transform: rotate( -5deg ); z-index: 6; }
.lcs-ms-stijl-prikbord .lcs-ms-variant-2 { transform: rotate( 4deg ); margin-top: 26px; z-index: 5; }
.lcs-ms-stijl-prikbord .lcs-ms-variant-3 { transform: rotate( -3deg ); margin-top: -6px; z-index: 4; }
.lcs-ms-stijl-prikbord .lcs-ms-variant-4 { transform: rotate( 6deg ); z-index: 3; }
.lcs-ms-stijl-prikbord .lcs-ms-variant-5 { transform: rotate( -6deg ); margin-top: 18px; z-index: 2; }
.lcs-ms-stijl-prikbord .lcs-ms-variant-6 { transform: rotate( 3deg ); margin-top: 34px; z-index: 1; }

.lcs-ms-stijl-prikbord .lcs-ms-variant-1 .lcs-ms-tile-knop::before { background: radial-gradient( circle at 32% 28%, #ff9b9b 0%, #ff6b6b 35%, #b33 75%, #8a1f1f 100% ); }
.lcs-ms-stijl-prikbord .lcs-ms-variant-2 .lcs-ms-tile-knop::before { background: radial-gradient( circle at 32% 28%, #a9c9ff 0%, #6ba8ff 35%, #2255bb 75%, #163d8a 100% ); }
.lcs-ms-stijl-prikbord .lcs-ms-variant-3 .lcs-ms-tile-knop::before { background: radial-gradient( circle at 32% 28%, #fff2ad 0%, #ffe066 35%, #d1a300 75%, #9c7a00 100% ); }
.lcs-ms-stijl-prikbord .lcs-ms-variant-4 .lcs-ms-tile-knop::before { background: radial-gradient( circle at 32% 28%, #a9edbb 0%, #6bd88a 35%, #1f8a45 75%, #14622f 100% ); }
.lcs-ms-stijl-prikbord .lcs-ms-variant-5 .lcs-ms-tile-knop::before { background: radial-gradient( circle at 32% 28%, #ffd4a9 0%, #ffb066 35%, #cc7a1f 75%, #965a13 100% ); }
.lcs-ms-stijl-prikbord .lcs-ms-variant-6 .lcs-ms-tile-knop::before { background: radial-gradient( circle at 32% 28%, #e2c9ff 0%, #c893ff 35%, #7a3fbf 75%, #572b8a 100% ); }

@media ( max-width: 900px ) {
	.lcs-ms-stijl-prikbord .lcs-ms-tile {
		width: calc( 100% / min( 3, var( --lcs-ms-kolommen ) ) - 6px );
	}
}

@media ( max-width: 560px ) {
	.lcs-ms-prikbord-lijst {
		padding: 14px;
	}
	.lcs-ms-stijl-prikbord.lcs-ms-collage {
		padding: 32px 20px;
	}
	.lcs-ms-stijl-prikbord .lcs-ms-tile {
		width: calc( 100% / min( 2, var( --lcs-ms-kolommen ) ) - 10px );
		margin: 6px -10px 4px -10px;
	}
}

.lcs-ms-leeg {
	font-style: italic;
	opacity: 0.75;
}

/* Merkenoverzicht */
.lcs-ms-merken-overzicht {
	--lcs-ms-merken-kolommen: 6;
	display: grid;
	grid-template-columns: repeat( var( --lcs-ms-merken-kolommen ), 1fr );
	gap: 20px;
	margin: 24px 0;
}

@media ( max-width: 900px ) {
	.lcs-ms-merken-overzicht {
		grid-template-columns: repeat( min( 3, var( --lcs-ms-merken-kolommen ) ), 1fr );
	}
}

@media ( max-width: 560px ) {
	.lcs-ms-merken-overzicht {
		grid-template-columns: repeat( 2, 1fr );
	}
}

.lcs-ms-merk-tegel {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 16px;
	border-radius: 10px;
	background: #f8f8f8;
}

.lcs-ms-merk-logo {
	max-width: 100%;
	max-height: 80px;
	object-fit: contain;
	margin-bottom: 10px;
}

.lcs-ms-merk-naam {
	margin: 0;
	font-weight: 600;
}

/* Lightbox */
.lcs-ms-lightbox {
	position: fixed;
	inset: 0;
	background: rgba( 0, 0, 0, 0.85 );
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 100000;
	padding: 24px;
}

.lcs-ms-lightbox[hidden] {
	display: none;
}

.lcs-ms-lightbox-foto {
	max-width: 100%;
	max-height: 90vh;
	border-radius: 6px;
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.5 );
}

.lcs-ms-lightbox-sluiten {
	position: absolute;
	top: 16px;
	right: 24px;
	background: none;
	border: 0;
	color: #fff;
	font-size: 2.5rem;
	line-height: 1;
	cursor: pointer;
}