/*
 * JSKR Invest — Aanbod (MVP 3.2). Alleen geladen op de pagina /aanbod/.
 *
 * Bron: A3 - Aanbod.dc.html en A3 - Overdracht specificatie.md §6 (FilterBar, PropertyRow,
 * EmptyState), §7 (sticky FilterBar top 72 / mobiel 64). Waarden letterlijk uit de A3-HTML;
 * tokens uit main.css waar ze gelijk zijn. A3 zet op de pagina geen line-height (→ normal).
 *
 * Inhoud:
 *   1. Pagina en intro
 *   2. FilterBar (desktop ≥900 inline, mobiel knop + paneel)
 *   3. Resultaten en PropertyRow
 *   4. Lege staten
 */

/* ==========================================================================
   1. Pagina en intro
   ========================================================================== */

.aanbod-page {
	display: block;
	overflow-x: clip; /* A3: overflow-x clip, sticky FilterBar blijft werken */
	line-height: normal;
	background: var(--c-navy-900);
	color: var(--c-text-on-dark);
}

.aanbod-page .label {
	line-height: inherit;
}

.aanbod-intro {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: var(--page-top) var(--gutter) 48px;
}

.aanbod-intro__row {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	margin-top: 16px;
}

.aanbod-intro__title {
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	letter-spacing: var(--ls-h1);
}

.aanbod-intro__text {
	max-width: 40ch;
	font-size: 17px;
	font-weight: var(--fw-light);
	line-height: 1.7;
	color: var(--c-text-muted-dark);
}

/* ==========================================================================
   2. FilterBar — sticky onder de header (72 desktop / 64 mobiel)
   ========================================================================== */

.aanbod-filters {
	position: sticky;
	top: 64px;
	z-index: 40;
	background: rgba(7, 18, 35, 0.96);
	border-top: var(--border-width) solid var(--c-line-dark);
	border-bottom: var(--border-width) solid var(--c-line-dark);
}

.aanbod-filters__inner {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.aanbod-filters__desk {
	display: none;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 40px;
	padding: 14px 0;
}

.aanbod-filters__groups {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 40px;
}

.aanbod-filters__group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.aanbod-filters__label {
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c-text-muted-dark);
}

.aanbod-filters__group > .aanbod-filters__label {
	margin-right: 8px;
}

/* Chip: default outline 30 %, hover rand goud, selected goud vlak + ✓ + aria-pressed. */
.aanbod-chip {
	min-height: var(--tap-min);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 16px;
	border: var(--border-width) solid var(--c-line-dark-strong);
	border-radius: 0;
	background: transparent;
	color: var(--c-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	letter-spacing: 0.14em;
	text-transform: uppercase;
	cursor: pointer;
	transition:
		background var(--dur-hover) ease,
		border-color var(--dur-hover) ease,
		color var(--dur-hover) ease;
}

.aanbod-chip:hover {
	border-color: var(--c-gold-400);
}

.aanbod-chip:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 2px;
}

.aanbod-chip.is-active {
	background: var(--c-gold-600);
	border-color: var(--c-gold-600);
	color: var(--c-navy-900);
}

.aanbod-chip__check {
	width: 10px;
	font-size: 13px;
	line-height: 1;
}

.aanbod-chip__n--muted {
	opacity: 0.8;
}

.aanbod-filters__meta {
	display: flex;
	align-items: center;
	gap: 20px;
	font-size: 13px;
	color: var(--c-text-muted-dark);
}

.aanbod-filters__clear {
	min-height: var(--tap-min);
	padding: 0;
	border: 0;
	border-bottom: var(--border-width) solid var(--c-gold-600);
	background: none;
	color: var(--c-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	cursor: pointer;
}

.aanbod-filters__clear:hover {
	color: var(--c-gold-400);
}

.aanbod-filters__clear:focus-visible {
	outline: var(--focus-dark);
	outline-offset: var(--focus-offset);
}

.aanbod-filters__clear[hidden] {
	display: none;
}

/* --- mobiel (<900): knop "Filters" + paneel -------------------------------- */

.aanbod-filters__mob-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 10px 0;
}

.aanbod-filters__toggle {
	min-height: var(--btn-min);
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 18px;
	border: var(--border-width) solid var(--c-gold-600);
	border-radius: 0;
	background: transparent;
	color: var(--c-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	cursor: pointer;
}

.aanbod-filters__toggle.is-active {
	background: var(--c-gold-600);
	color: var(--c-navy-900);
}

.aanbod-filters__toggle:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 2px;
}

.aanbod-filters__badge {
	min-width: 20px;
	height: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 10px;
	background: var(--c-navy-900);
	color: var(--c-text-on-dark);
	font-size: 11px;
	letter-spacing: 0;
}

.aanbod-filters__badge[hidden] {
	display: none;
}

.aanbod-filters__count {
	font-size: 13px;
	color: var(--c-text-muted-dark);
}

.aanbod-filters__panel {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 8px 0 20px;
	border-top: var(--border-width) solid var(--c-line-dark);
}

/* Met JS is het paneel dicht tot de knop het opent; zonder JS staat het open. */
.jskr-js .aanbod-filters__panel:not(.is-open) {
	display: none;
}

.aanbod-filters__panel-group {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding-top: 12px;
}

.aanbod-filters__panel-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.aanbod-filters__panel .aanbod-chip {
	padding: 0 14px;
	letter-spacing: 0.12em;
	transition: none;
}

.aanbod-filters__panel .aanbod-chip:hover:not(.is-active) {
	border-color: var(--c-line-dark-strong); /* A3 mobiel: geen hover-stijl */
}

.aanbod-filters__panel .aanbod-chip__check {
	font-size: inherit;
	line-height: inherit;
}

.aanbod-filters__panel-actions {
	display: flex;
	gap: 12px;
}

.aanbod-filters__show {
	flex: 1;
	min-height: var(--btn-min);
	border: 0;
	border-radius: 0;
	background: var(--c-gold-600);
	color: var(--c-navy-900);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	font-weight: var(--fw-medium);
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	cursor: pointer;
}

.aanbod-filters__show:focus-visible {
	outline: var(--focus-on-gold);
	outline-offset: 2px;
}

.aanbod-filters__reset {
	min-height: var(--btn-min);
	padding: 0 16px;
	border: var(--border-width) solid var(--c-line-dark-strong);
	border-radius: 0;
	background: none;
	color: var(--c-text-on-dark);
	font-family: var(--font-body);
	font-size: var(--fs-ui);
	letter-spacing: var(--ls-ui);
	text-transform: uppercase;
	cursor: pointer;
}

.aanbod-filters__reset:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 2px;
}

@media (min-width: 900px) {
	.aanbod-filters {
		top: 72px;
	}

	.aanbod-filters__desk {
		display: flex;
	}

	.aanbod-filters__mob {
		display: none;
	}
}

/* ==========================================================================
   3. Resultaten en PropertyRow
   ========================================================================== */

.aanbod-results {
	max-width: var(--container-max);
	min-height: 60vh;
	margin: 0 auto;
	padding: 48px var(--gutter) var(--section-n);
}

.aanbod-list {
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	list-style: none;
}

.aanbod-list[hidden],
.aanbod-list__item[hidden] {
	display: none;
}

.aanbod-list__item {
	border-top: var(--border-width) solid var(--c-line-dark);
}

/* Rij: mobiel 120px thumb + tekst; ≥900 beeld 360 · tekst · oppervlakte 180 · pijl 56. */
.pand-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	gap: 16px;
	align-items: center;
	padding: 24px 0;
	color: var(--c-text-on-dark);
	transition: background var(--dur-ui-fast) ease;
}

a.pand-row:hover {
	background: var(--c-navy-800);
	color: var(--c-text-on-dark);
}

a.pand-row:focus-visible {
	outline: var(--focus-dark);
	outline-offset: 4px;
}

.pand-row__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--c-navy-800);
}

.pand-row__image {
	position: absolute;
	inset: 0;
	transition: transform var(--dur-reveal) var(--ease-out);
}

.pand-row__image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a.pand-row:hover .pand-row__image {
	transform: scale(1.04);
}

.pand-row__body {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
}

/* A3 Aanbod zet op de inline status geen line-height (→ normal); globale .status houdt 1. */
.pand-row__body .status {
	line-height: normal;
}

.pand-row__name {
	font-size: clamp(32px, 3.4vw, 48px);
	line-height: 1;
}

.pand-row__meta {
	font-size: 15px;
	font-weight: var(--fw-light);
	color: var(--c-text-muted-dark);
}

.pand-row__area,
.pand-row__arrow {
	display: none;
}

@media (min-width: 900px) {
	.pand-row {
		grid-template-columns: minmax(0, 360px) minmax(0, 1fr) 180px 56px;
		gap: 40px;
	}

	.pand-row__area {
		display: flex;
		flex-direction: column;
		gap: 6px;
		font-size: var(--fs-small);
		font-weight: var(--fw-light);
		color: var(--c-text-muted-dark);
	}

	.pand-row__arrow {
		display: flex;
		align-items: center;
		justify-content: center;
		justify-self: end;
		width: 56px;
		height: 56px;
		border: var(--border-width) solid var(--c-line-dark-strong);
		font-size: 20px;
		color: var(--c-gold-400);
	}
}

.pand-row__area-label {
	font-size: 11px;
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--c-text-subtle-dark);
}

.pand-row__area-value {
	font-family: var(--font-display);
	font-size: 28px;
	color: var(--c-text-on-dark);
}

.pand-row__area-value.is-missing {
	color: var(--c-text-subtle-dark);
}

/* ==========================================================================
   4. Lege staten — filtercombinatie zonder resultaat (A3 EmptyState) en nog geen panden
   ========================================================================== */

.aanbod-empty {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 20px;
	padding: clamp(64px, 10vw, 128px) 0;
	border-top: var(--border-width) solid var(--c-line-dark);
}

.aanbod-empty[hidden] {
	display: none;
}

.aanbod-empty__title {
	font-family: var(--font-display);
	font-weight: var(--fw-regular);
	font-size: clamp(36px, 4vw, 56px);
	line-height: 1;
}

.aanbod-empty__text {
	max-width: 46ch;
	font-size: 16px;
	font-weight: var(--fw-light);
	line-height: 1.65;
	color: var(--c-text-muted-dark);
}

.aanbod-empty__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* Contact bestaat nog niet: A3-opmaak zonder link en zonder hover-signaal. */
.aanbod-page .btn.is-pending {
	cursor: default;
}

.aanbod-page .btn--outline.is-pending:hover {
	border-color: var(--c-line-dark-strong);
	color: var(--c-text-on-dark);
}

.aanbod-page .btn--outline.is-pending:active {
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	a.pand-row:hover .pand-row__image {
		transform: none; /* §9: hover alleen kleurwissel */
	}
}