/* =========================================================
   Blok: categorieen (Populaire categorieën — foto-tegels)
   Markup/CSS 1:1 hergebruikt uit pages/home.css (sectie 3) + de
   categorie-slider-regels uit layout.css. Zelfde selectors, alles
   gescoped onder .sellabees-block--categorieen; uitsluitend
   bestaande --sellabees-* tokens (geen nieuwe kleurwaarden).
   Zie BLOCKS-GUIDE.md.
   ========================================================= */

/* ---- Sectie + titel (uit home.css: .sellabees-home-section*) ---- */
.sellabees-block--categorieen.sellabees-home-section { padding-block: 56px; }
.sellabees-block--categorieen .sellabees-home-section__title {
	font-family: var(--sellabees-font-heading);
	font-weight: 400;
	font-size: 48px;
	line-height: 1.05;
	color: var(--sellabees-ink);
	text-transform: uppercase;
	margin: 0 0 32px;
}

/* ---- Grid + tegels (uit home.css: .sellabees-categories*, .sellabees-cat-tile*) ---- */
.sellabees-block--categorieen .sellabees-categories__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 26px;
}
.sellabees-block--categorieen .sellabees-cat-tile {
	position: relative;
	display: block;
	aspect-ratio: 333 / 447;
	overflow: hidden;
}
.sellabees-block--categorieen .sellabees-cat-tile__img {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform .4s ease;
}
.sellabees-block--categorieen .sellabees-cat-tile:hover .sellabees-cat-tile__img { transform: scale(1.05); }
/* Zwarte labelbalk onderaan (conform design: zwart, witte tekst + witte pijl) */
.sellabees-block--categorieen .sellabees-cat-tile__bar {
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 50px;
	background: var(--sellabees-ink);
	display: flex; align-items: center; justify-content: space-between;
	padding: 0 15px;
	z-index: 2;
	transition: background .3s ease;   /* hover: zwarte balk → rood */
}
/* Hover: tegel iets groter + zwarte balk wordt rood (design-notitie) */
.sellabees-block--categorieen .sellabees-cat-tile:hover .sellabees-cat-tile__bar { background: var(--sellabees-red); }
.sellabees-block--categorieen .sellabees-cat-tile:hover .sellabees-cat-tile__img { transform: scale(1.07); }
.sellabees-block--categorieen .sellabees-cat-tile__label {
	font-family: var(--sellabees-font-heading);
	font-size: 20px;   /* Figma: Impact 20px */
	color: #fff;
	text-transform: uppercase;
}
.sellabees-block--categorieen .sellabees-cat-tile__arrow { color: #fff; flex: 0 0 auto; }
.sellabees-block--categorieen .sellabees-cat-tile:hover .sellabees-cat-tile__arrow { transform: translateX(4px); transition: transform .2s ease; }

/* ---- Variant: tegel met extra links onder het label -------------------------
   Alleen nieuwe selectors, de regels hierboven blijven onaangeroerd zodat de
   tegels zonder sublinks er precies hetzelfde uitzien.

   De hoofdlink is bij deze variant een overlay over de foto (een <a> in een <a>
   mag niet). De balk heeft al z-index 2 en ligt dus boven de overlay, waardoor
   de sublinks aanklikbaar blijven. */
.sellabees-block--categorieen .sellabees-cat-tile__overlay {
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sellabees-block--categorieen .sellabees-cat-tile--has-sub .sellabees-cat-tile__bar {
	height: auto;
	flex-direction: column;
	align-items: stretch;
	justify-content: flex-start;
	padding: 0;
}
/* Kop = het oude balk-uiterlijk: label links, pijl rechts, zelfde hoogte. */
.sellabees-block--categorieen .sellabees-cat-tile__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	height: 50px;
	padding: 0 15px;
	flex: 0 0 auto;
}
.sellabees-block--categorieen .sellabees-cat-tile__sub {
	display: flex;
	flex-direction: column;
	border-top: 1px solid rgba(255, 255, 255, .22);
}
.sellabees-block--categorieen .sellabees-cat-tile__sublink {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 15px;
	color: #fff;
	font-size: 14px;
	line-height: 1.25;
	text-decoration: none;
	transition: background-color .2s ease;
}
.sellabees-block--categorieen .sellabees-cat-tile__sublink + .sellabees-cat-tile__sublink {
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.sellabees-block--categorieen .sellabees-cat-tile__sublink:hover,
.sellabees-block--categorieen .sellabees-cat-tile__sublink:focus-visible {
	background: rgba(255, 255, 255, .16);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sellabees-block--categorieen .sellabees-cat-tile__subcount {
	flex: 0 0 auto;
	font-size: 12px;
	opacity: .7;
}

/* ---- Dots (uit home.css: .sellabees-slider__dot — categorie-context) ---- */
.sellabees-block--categorieen .sellabees-slider__dot {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
	background: #c4c4c4; cursor: pointer;
}
.sellabees-block--categorieen .sellabees-slider__dot.is-active { background: var(--sellabees-ink); }

/* ---- Scroll-onthul-animaties (uit home.css: .sellabees-reveal*) ---- */
html.sellabees-js .sellabees-block--categorieen .sellabees-reveal {
	opacity: 0;
	transition: opacity .6s ease, transform .6s cubic-bezier(.22, 1, .36, 1);
	will-change: opacity, transform;
}
html.sellabees-js .sellabees-block--categorieen .sellabees-reveal--pop { transform: scale(.85); }
html.sellabees-js .sellabees-block--categorieen .sellabees-reveal.is-revealed { opacity: 1; transform: none; }
/* Gespreide timing (stagger) per tegel */
.sellabees-block--categorieen .sellabees-categories__grid .sellabees-reveal:nth-child(2) { transition-delay: .09s; }
.sellabees-block--categorieen .sellabees-categories__grid .sellabees-reveal:nth-child(3) { transition-delay: .18s; }
.sellabees-block--categorieen .sellabees-categories__grid .sellabees-reveal:nth-child(4) { transition-delay: .27s; }
@media (prefers-reduced-motion: reduce) {
	html.sellabees-js .sellabees-block--categorieen .sellabees-reveal { opacity: 1 !important; transform: none !important; }
}

/* =========================================================
   Categorie-slider — pijlen + dots (uit layout.css). De slider-JS
   (initCategorySlider) wikkelt de grid in .sellabees-catslider en
   injecteert .sellabees-catnav + .sellabees-catnav__dots; alleen
   mobiel, verborgen op desktop.
   ========================================================= */
.sellabees-block--categorieen .sellabees-catnav,
.sellabees-block--categorieen .sellabees-catnav__dots { display: none; }

.sellabees-block--categorieen .sellabees-catnav__btn {
	transition: background-color .25s ease, color .25s ease, opacity .25s ease, box-shadow .25s ease;
}

/* =========================================================
   RESPONSIVE — zelfde snap-punten als de bron.
   ========================================================= */
@media (max-width: 1100px) {
	.sellabees-block--categorieen .sellabees-categories__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ===== MOBIEL (≤ 981px) — categorie-grid → swipe-slider ===== */
@media (max-width: 981px) {
	.sellabees-block--categorieen.sellabees-home-section { padding-block: 38px; }
	.sellabees-block--categorieen .sellabees-home-section__title { font-size: 30px; margin-bottom: 22px; }

	/* Populaire categorieën → slider: 2 tegels per view op tablet, 1 op telefoon. */
	.sellabees-block--categorieen .sellabees-categories__grid {
		display: flex;
		grid-template-columns: none;
		flex-wrap: nowrap;
		gap: 16px;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scrollbar-width: none;
	}
	.sellabees-block--categorieen .sellabees-categories__grid::-webkit-scrollbar { display: none; }
	.sellabees-block--categorieen .sellabees-cat-tile { flex: 0 0 calc((100% - 16px) / 2); scroll-snap-align: start; aspect-ratio: 295 / 396; }

	/* Slider-wrap + pijlen op de tegelhoogte gecentreerd, binnen beeld. */
	.sellabees-block--categorieen .sellabees-catslider { position: relative; }
	.sellabees-block--categorieen .sellabees-catnav {
		display: flex;
		justify-content: space-between;
		position: absolute;
		top: 50%;
		transform: translateY(-50%);
		left: 0; right: 0;
		margin: 0; gap: 0; padding: 0;
		pointer-events: none;
		z-index: 6;
	}
	.sellabees-block--categorieen .sellabees-catnav__dots { display: flex; justify-content: center; gap: 9px; margin-top: 20px; }

	/* Populaire categorieën: dunne donkere chevron (géén rood blok), naast de tegel. */
	.sellabees-block--categorieen .sellabees-catslider .sellabees-catnav__btn {
		pointer-events: auto;
		width: 26px; height: 46px;
		flex: 0 0 auto;
		display: inline-flex; align-items: center; justify-content: center;
		background: none; color: var(--sellabees-black);
		border: 0; border-radius: 0; padding: 0; cursor: pointer;
		box-shadow: none;
	}
	.sellabees-block--categorieen .sellabees-catslider .sellabees-catnav__btn svg { width: 16px; height: auto; filter: drop-shadow(0 1px 2px rgba(255,255,255,.7)); }

	/* De scroll-rij insetten zodat de chevrons náást de tegel vallen i.p.v. erover. */
	.sellabees-block--categorieen .sellabees-catslider .sellabees-categories__grid { margin-inline: 34px; }
}

/* ===== Telefoon (≤ 500px): 1 tegel per view ===== */
@media (max-width: 500px) {
	.sellabees-block--categorieen .sellabees-categories__grid .sellabees-cat-tile { flex: 0 0 100%; }
}

/* ===== Sublink-tegels op kleinere schermen iets compacter ===== */
@media (max-width: 981px) {
	.sellabees-block--categorieen .sellabees-cat-tile__sublink {
		padding: 6px 12px;
		font-size: 13px;
	}
	.sellabees-block--categorieen .sellabees-cat-tile__head { padding: 0 12px; }
}