/**
 * Artikelkaarten: aanvullingen op assets/css/shop.css (dat bestand zit vol).
 *
 * - De titel op een kaart blijft op één regel en eindigt met "..." als hij
 *   te lang is, zodat elke kaart even hoog wordt.
 * - "Bekijken" en "+" staan altijd onderin de kaart.
 * - Lijstweergave op mobiel: beeld links, tekst rechts, de knoppen onder de
 *   prijs en evenveel ruimte links als rechts.
 * - Homepagina: op mobiel een slider met pijlen en bolletjes.
 *
 * Wordt overal geladen waar shop.css geladen wordt (inc/shop-kaarten.php).
 */

:root {
	--kaart-titel-regels: 1;
	--lijst-beeld-mobiel: 5.5rem;
	--home-artikel-breedte: 78%;
	--home-artikel-gat: 1rem;
	--home-pijl-rand: 0.4rem;
	--home-artikel-duur: 0.6s;
}

/* ------------------------------------------------------------ Kaart */

/* De link vult de ruimte op, zodat de knoppen altijd onderaan staan. */
.artikel__link {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
}

.artikel__body {
	min-width: 0;
}

.artikel__acties {
	margin-top: auto;
	padding-top: 0.9rem;
}

/* Titel op één regel met "..." erachter (niet in de lijstweergave). */
ul.products:not([data-weergave="lijst"]) .artikel__titel {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* ------------------------------------------------------------ Lijstweergave */

ul.products[data-weergave="lijst"] .artikel__acties {
	padding-top: 0;
}

@media (max-width: 600px) {

	/*
	 * Beeld links (twee rijen hoog), rechts de tekst met de knoppen eronder.
	 * minmax(0, 1fr) houdt de kaart binnen de breedte van het scherm.
	 */
	ul.products[data-weergave="lijst"] .artikel {
		grid-template-columns: var(--lijst-beeld-mobiel) minmax(0, 1fr);
		grid-template-rows: auto auto;
		align-items: start;
		gap: 0.6rem 0.9rem;
		min-width: 0;
	}

	ul.products[data-weergave="lijst"] .artikel__media {
		grid-column: 1;
		grid-row: 1 / span 2;
		align-self: center;
	}

	ul.products[data-weergave="lijst"] .artikel__body {
		grid-column: 2;
		grid-row: 1;
		padding-top: 0;
	}

	ul.products[data-weergave="lijst"] .artikel__acties {
		grid-column: 2;
		grid-row: 2;
		margin: 0;
	}
}

/* ------------------------------------------------------------ Homepagina: slider op mobiel */

.artikelen-slider__knop,
.artikelen-slider__dots {
	display: none;
}

/*
 * Eindeloos doorlopen op mobiel (data-loop): slider.js hangt een kopie van
 * alle artikelen achter de rij. Buiten de slider (desktop, of zolang de
 * slider niet actief is) blijven die kopieën verborgen.
 */
.artikelen-slider:not(.slider--klaar) [data-kloon] {
	display: none;
}

@media (max-width: 767px) {

	.artikelen-slider {
		position: relative;
		overflow: hidden;
		/* Ruimte voor de schaduw en de lift van de kaarten. */
		padding-block: 4px;
	}

	.sectie--webshop .artikelen-slider .products {
		display: flex;
		flex-wrap: nowrap;
		gap: var(--home-artikel-gat);
		margin-top: 0;
		transition: transform var(--home-artikel-duur) cubic-bezier(0.4, 0, 0.2, 1);
		touch-action: pan-y;
	}

	.sectie--webshop .artikelen-slider .products > li.product {
		flex: 0 0 var(--home-artikel-breedte);
		min-width: 0;
	}

	.artikelen-slider__knop {
		display: inline-flex;
		top: 38%;
	}

	.artikelen-slider .slider__knop--vorige {
		left: var(--home-pijl-rand);
	}

	.artikelen-slider .slider__knop--volgende {
		right: var(--home-pijl-rand);
	}

	.artikelen-slider__dots {
		display: flex;
	}

	.sectie--webshop .slider__dots--onder {
		margin-top: 1.25rem;
	}

	/* Tijdens het slepen geen link openen of tekst selecteren. */
	.artikelen-slider.slider--sleept a,
	.artikelen-slider.slider--sleept img {
		pointer-events: none;
	}
}

/*
 * "Verminder beweging": base.css zet dan alle overgangen op 0,01 ms. Vegen is
 * een actie van de bezoeker zelf, dus de slider blijft gewoon schuiven.
 */
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {

	.sectie--webshop .artikelen-slider .products {
		transition-duration: var(--home-artikel-duur) !important;
	}
}