/**
 * Gästebewertungen – frontend styles.
 * Override the custom properties in your theme, e.g.:
 *   .gbw { --gbw-card-bg: #fff; --gbw-radius: 4px; }
 */

.gbw {
	--gbw-card-bg: #f3f3f3;
	--gbw-radius: 10px;
	--gbw-gap: 16px;
	--gbw-padding: 20px;
	--gbw-text-color: #1f1f1f;
	--gbw-muted: #5f6368;
	--gbw-star: #f4b400;
	--gbw-star-empty: #c4c7c5;
	--gbw-avatar-size: 40px;
	--gbw-focus: #0b57d0;
	--gbw-lines: 4;

	container-type: inline-size;
	font-family: inherit;
	margin-block: 1.5em;
}

.gbw__title {
	margin: 0 0 1em;
}

.gbw__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--gbw-gap);
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Columns depend on the available width of the shortcode container, not the viewport. */
@container (min-width: 560px) {
	.gbw--cols-2 .gbw__grid,
	.gbw--cols-3 .gbw__grid,
	.gbw--cols-4 .gbw__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@container (min-width: 860px) {
	.gbw--cols-3 .gbw__grid,
	.gbw--cols-4 .gbw__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@container (min-width: 1100px) {
	.gbw--cols-4 .gbw__grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.gbw__item {
	margin: 0;
	padding: 0;
	min-width: 0;
}

.gbw__item::before,
.gbw__item::marker {
	content: none;
}

.gbw-card {
	box-sizing: border-box;
	height: 100%;
	padding: var(--gbw-padding);
	background: var(--gbw-card-bg);
	border: 0;
	border-radius: var(--gbw-radius);
	color: var(--gbw-text-color);
	font-size: 15px;
	line-height: 1.5;
}

.gbw-card__header {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin-bottom: 12px;
}

.gbw-card__avatar {
	flex: none;
	display: grid;
	place-items: center;
	width: var(--gbw-avatar-size);
	height: var(--gbw-avatar-size);
	border-radius: 50%;
	color: #fff;
	font-size: calc(var(--gbw-avatar-size) * 0.5);
	line-height: 1;
	user-select: none;
}

.gbw-card__meta {
	flex: 1;
	min-width: 0;
}

.gbw .gbw-card__name,
.gbw .gbw-card__date {
	margin: 0;
	padding: 0;
}

.gbw-card__name {
	font-weight: 700;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

.gbw-card__date {
	color: var(--gbw-muted);
	font-size: 13px;
	line-height: 1.4;
}

.gbw-card__source {
	flex: none;
	color: var(--gbw-muted);
	font-size: 12px;
	line-height: 1.4;
	white-space: nowrap;
}

.gbw-card__source a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: transparent;
	text-underline-offset: 2px;
}

.gbw-card__source a:hover {
	text-decoration-color: currentColor;
}

.gbw-card__stars {
	display: flex;
	gap: 1px;
	margin-bottom: 10px;
	line-height: 0;
}

.gbw-star {
	display: block;
	width: 18px;
	height: 18px;
}

.gbw-star--full {
	fill: var(--gbw-star);
}

.gbw-star--empty {
	fill: var(--gbw-star-empty);
}

.gbw-card__text {
	white-space: pre-line;
	overflow-wrap: break-word;
}

/* Clamp only when JS is running, so without JS the full text stays visible. */
.gbw--js .gbw-card__text:not(.is-expanded) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--gbw-lines);
	line-clamp: var(--gbw-lines);
	overflow: hidden;
}

/* Reset aggressive theme button styles. */
.gbw .gbw-card__toggle {
	display: inline-block;
	margin: 10px 0 0;
	padding: 0;
	min-height: 0;
	width: auto;
	background: none;
	border: 0;
	border-radius: 2px;
	box-shadow: none;
	color: var(--gbw-muted);
	font: inherit;
	font-size: 13px;
	letter-spacing: normal;
	line-height: 1.4;
	text-transform: none;
	text-decoration: none;
	cursor: pointer;
}

.gbw .gbw-card__toggle:hover {
	background: none;
	color: var(--gbw-text-color);
	text-decoration: underline;
}

.gbw .gbw-card__toggle[hidden] {
	display: none;
}

.gbw__footer {
	margin-top: 1.25em;
	text-align: center;
}

.gbw__footer p {
	margin: 0 0 0.5em;
}

.gbw__note {
	color: var(--gbw-muted);
	font-size: 0.875em;
}

.gbw a:focus-visible,
.gbw .gbw-card__toggle:focus-visible {
	outline: 2px solid var(--gbw-focus);
	outline-offset: 2px;
}

@media (forced-colors: active) {
	.gbw-card {
		border: 1px solid CanvasText;
	}

	.gbw-star--full {
		fill: CanvasText;
	}
}