/* assets/info-center-grid.css */

.rwig-grid {
	display: grid;
	grid-template-columns: repeat(var(--rwig-columns, 4), 1fr);
	gap: 18px;
	margin: 24px 0;
}

.rwig-tile {
	position: relative;
	height: 160px;
	border-radius: 10px;
	background-color: #eaf5ea;
	background-size: cover;
	background-position: center;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	overflow: visible;
}

.rwig-tile--noimage {
	background-image: none !important;
}

.rwig-tile__tint {
	position: absolute;
	inset: 0;
	border-radius: 10px;
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, calc(var(--rwig-alpha, 0.6) * 0.45)),
		rgba(20, 20, 20, var(--rwig-alpha, 0.6))
	);
	pointer-events: none;
	transition: opacity 0.2s;
}

.rwig-tile:hover .rwig-tile__tint,
.rwig-tile.rwig-open .rwig-tile__tint {
	opacity: 0.65;
}

.rwig-tile__body {
	position: relative;
	z-index: 2;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 12px;
	box-sizing: border-box;
}

.rwig-tile__title {
	font-family: Enriqueta, Georgia, serif;
	font-weight: 700;
	font-size: var(--rwig-title-size, 16px);
	text-decoration: none;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}


.rwig-tile__count {
	font-size: 11px;
	color: #f0f0f0;
	margin-top: 4px;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Bridge: schließt die Lücke zwischen Kachel und Popover, damit :hover beim
   Übergang von Kachel zu Popover nicht verloren geht. */
.rwig-tile::after {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 10px;
}

.rwig-popover {
	position: absolute;
	top: 100%;
	margin-top: 10px;
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #7cc26a;
	border-radius: 8px;
	padding: 12px 14px;
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity 0.15s, transform 0.15s;
	z-index: 30;
}

.rwig-tile:hover .rwig-popover,
.rwig-tile:focus-within .rwig-popover,
.rwig-tile.rwig-open .rwig-popover,
.rwig-popover:hover {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.rwig-badge-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.rwig-badge {
	display: inline-block;
	background: #eef3ea;
	color: #1f4a2c;
	border: 1px solid #d3ddca;
	border-radius: 999px;
	padding: 4px 10px;
	font-size: 12px;
	text-decoration: none;
	transition: border-color 0.15s;
}

.rwig-badge:hover {
	border-color: #2d6a3e;
}

.rwig-badge--active,
.rwig-badge--active:hover {
	background: #173d24;
	color: #fdfdf9;
	border-color: #173d24;
	cursor: default;
}

@media (max-width: 900px) {
	.rwig-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.rwig-grid {
		grid-template-columns: 1fr;
	}
}

/* Kompakter Streifen für Info-Center-Unterseiten: [regenwald-info-center-subheader] */

.rwig-strip {
	display: flex;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
	margin: 24px 0;
}

.rwig-strip__photo {
	flex: 0 0 150px;
	background-color: #eaf5ea;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: flex-end;
	padding: 14px;
	box-sizing: border-box;
}

.rwig-strip__photo--noimage {
	background-image: none !important;
}

.rwig-strip__tint {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(20, 20, 20, calc(var(--rwig-alpha, 0.6) * 0.2)),
		rgba(20, 20, 20, var(--rwig-alpha, 0.6))
	);
	pointer-events: none;
}

.rwig-strip__title {
	position: relative;
	font-family: Enriqueta, Georgia, serif;
	font-weight: 700;
	font-size: 16px;
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.rwig-strip__body {
	flex: 1;
	background: #fff;
	padding: 16px 20px;
	min-width: 0;
}

.rwig-strip__label {
	font-size: 12px;
	color: #6b6b6b;
	margin: 0 0 10px;
}

@media (max-width: 520px) {
	.rwig-strip {
		flex-direction: column;
	}

	.rwig-strip__photo {
		flex: 0 0 110px;
	}
}