/**
 * Shared layer: layout, stars and badge.
 *
 * Everything is driven by custom properties on the wrapper, so a skin is a
 * small file and Elementor's CSS file cache keeps working. Colours and fonts
 * are inherited from the theme on purpose: the widget should look like it
 * belongs to the site, not like a plugin.
 */

.wtr {
	--wtr-columns: 3;
	--wtr-gap: 24px;
	--wtr-radius: 10px;
	--wtr-border: rgba( 0, 0, 0, 0.1 );
	--wtr-muted: rgba( 0, 0, 0, 0.6 );
	--wtr-star: #f5a623;
	--wtr-star-empty: rgba( 0, 0, 0, 0.15 );
	--wtr-star-size: 16px;
	--wtr-card-background: transparent;
	--wtr-card-padding: 0;
	--wtr-avatar: 48px;
}

.wtr-items {
	display: grid;
	gap: var( --wtr-gap );
	grid-template-columns: repeat( var( --wtr-columns ), minmax( 0, 1fr ) );
}

.wtr-list .wtr-items,
.wtr-single .wtr-items {
	grid-template-columns: minmax( 0, 1fr );
}

@media ( max-width: 1024px ) {

	.wtr-items {
		gap: var( --wtr-gap-tablet, var( --wtr-gap ) );
		grid-template-columns: repeat( var( --wtr-columns-tablet, min( 2, var( --wtr-columns ) ) ), minmax( 0, 1fr ) );
	}
}

@media ( max-width: 767px ) {

	.wtr-items {
		gap: var( --wtr-gap-mobile, var( --wtr-gap-tablet, var( --wtr-gap ) ) );
		grid-template-columns: repeat( var( --wtr-columns-mobile, 1 ), minmax( 0, 1fr ) );
	}
}

.wtr-align-center {
	text-align: center;
}

.wtr-align-center .wtr-meta {
	justify-content: center;
}

/* Stars ------------------------------------------------------------------- */

.wtr-stars {
	display: inline-flex;
	gap: 2px;
	line-height: 1;
}

.wtr-star {
	background-color: var( --wtr-star-empty );
	block-size: var( --wtr-star-size );
	display: inline-block;
	inline-size: var( --wtr-star-size );
	-webkit-mask: var( --wtr-star-shape ) no-repeat center / contain;
	mask: var( --wtr-star-shape ) no-repeat center / contain;
	position: relative;
}

.wtr-star::before {
	background-color: var( --wtr-star );
	content: "";
	inset: 0;
	inline-size: var( --wtr-star-fill, 100% );
	position: absolute;
}

.wtr {
	--wtr-star-shape: url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .6l3.5 7.1 7.9 1.1-5.7 5.6 1.3 7.9L12 18.6l-7 3.7 1.3-7.9L.6 8.8l7.9-1.1z'/%3E%3C/svg%3E" );
}

/* Badge ------------------------------------------------------------------- */

.wtr-badge {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: 8px;
}

.wtr-badge-score {
	font-size: 1.25em;
	font-weight: 600;
}

.wtr-badge-count,
.wtr-badge-source {
	color: var( --wtr-muted );
	font-size: 0.875em;
}

.wtr-badge-write {
	font-size: 0.875em;
}

/* Attribution ------------------------------------------------------------- */

.wtr-attribution {
	color: var( --wtr-muted );
	font-size: 0.8125em;
	margin-block-start: var( --wtr-gap );
}

.wtr-google-mark {
	color: var( --wtr-muted );
	font-size: 0.8125em;
	letter-spacing: 0.01em;
}

/* Alleen in de Elementor-editor: een lege widget moet niet op een kapotte
   widget lijken. Op de voorkant blijft hij stil. */
.wtr-editor-empty {
	border: 1px dashed var( --wtr-card-border, #d5d8dc );
	border-radius: var( --wtr-radius, 4px );
	color: #6d7882;
	font-size: 14px;
	padding: 18px 20px;
	text-align: center;
}