/**
 * Simonis & Buunk Advertenties
 *
 * Rebuilds the look of the theme's catalogue shelf (.shelf / .part in
 * simonisbuunk-expanded.css) without its height-calculating JavaScript:
 * fixed-ratio image frames and flexbox keep every row equal, so there is no layout shift.
 */

/* Grid ------------------------------------------------------------------ */

.sb-adv-shelf {
	position: relative;
	z-index: 0; /* Keeps the caption band (z-index: -1) above ancestor backgrounds. */
}

.sb-adv-grid {
	display: flex;
	flex-wrap: wrap;
	margin-top: 0;
	margin-bottom: 0;
	padding: 0;
	list-style: none;
}

/* Bootstrap's clearfix pseudo-elements would become flex items. */
.sb-adv-grid::before,
.sb-adv-grid::after {
	display: none;
}

.sb-adv-item {
	display: flex;
	margin-bottom: 50px;
}

/* Item ------------------------------------------------------------------ */

.sb-adv {
	display: flex;
	flex-direction: column;
	width: 100%;
	margin: 0;
}

.sb-adv-link {
	display: block;
	padding: 15px 15px 0;
	color: inherit;
}

.sb-adv-link:hover .sb-adv-image {
	opacity: 0.85;
}

.sb-adv-link:focus-visible {
	outline: 3px solid #262626;
	outline-offset: 2px;
}

/* Same portrait ratio as the catalogue covers; other formats are scaled, never cropped. */
.sb-adv-frame {
	display: block;
	aspect-ratio: 470 / 572;
	background-color: #f4f4f4;
}

.sb-adv-frame .sb-adv-image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: opacity 0.15s;
}

.sb-adv-caption {
	position: relative;
	flex: 1 0 auto;
	padding: 15px 15px 25px;
	background-color: #dedede;
}

/*
 * Continuous grey band behind each row, as on the catalogue page.
 * The theme uses 3000px pseudo-elements clipped by .shelf; this grid sits inside
 * the content container, so a horizontally clipped box-shadow is used instead:
 * shadows never create scrollable overflow.
 */
.sb-adv-grid .sb-adv-caption::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-color: #dedede;
	box-shadow: 0 0 0 100vmax #dedede;
	clip-path: inset(0 -100vmax);
}

.sb-adv-title {
	display: block;
	margin-top: 0;
}

.sb-adv-meta {
	display: block;
	font-family: "Nunito Sans", sans-serif;
	font-weight: 300;
}

/* Single ([laatste_advertentie]): scales with its container ------------- */

.sb-adv-single {
	max-width: 100%;
}

.sb-adv--single .sb-adv-link,
.sb-adv-shelf--wide .sb-adv-link {
	padding: 0; /* Image as wide as the grey caption. */
}

/*
 * breed="ja": the frame follows the advertisement's own ratio, so the image always
 * fills the full width (no background bands beside it). The width/height
 * attributes on the image reserve the space, so there is no layout shift.
 */
.sb-adv-shelf--wide .sb-adv-frame {
	aspect-ratio: auto;
	background-color: transparent;
}

.sb-adv-shelf--wide .sb-adv-frame .sb-adv-image {
	height: auto;
}

/* Empty state ------------------------------------------------------------ */

.sb-adv-empty {
	margin: 0 0 50px;
}

/* Pagination (matches the theme's .pagination-wrapper) ------------------ */

.sb-adv-pagination {
	margin-bottom: 50px;
	text-align: right;
}

.sb-adv-pagination ul.page-numbers {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sb-adv-pagination .page-numbers li {
	margin: 0;
}

.sb-adv-pagination a.page-numbers,
.sb-adv-pagination span.page-numbers {
	position: relative;
	display: inline-block;
	padding: 0.7em;
	/* Theme uses #b8b8b8, which fails WCAG contrast; #767676 is the lightest grey that passes. */
	color: #767676;
	text-decoration: none;
}

.sb-adv-pagination span.page-numbers.current,
.sb-adv-pagination a.page-numbers:hover,
.sb-adv-pagination a.page-numbers:focus-visible {
	color: #262626;
}

.sb-adv-pagination span.page-numbers.current::after,
.sb-adv-pagination a.page-numbers:not(.prev):not(.next):hover::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 10px;
	left: 0;
	width: 30%;
	height: 2px;
	margin: 0 auto;
	background-color: #262626;
}

.sb-adv-pagination a.prev,
.sb-adv-pagination a.next {
	border-radius: 3px;
	background-color: #d2d2d2;
	color: #262626;
}

.sb-adv-pagination a.prev:hover,
.sb-adv-pagination a.next:hover {
	background-color: #b8b8b8;
	color: #000;
}

.sb-adv-pagination a.page-numbers:focus-visible {
	outline: 3px solid #262626;
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.sb-adv-pagination {
		text-align: center;
	}
}