/* Zöld Sziget – Állatok. A színek CSS változókkal felülírhatók a témából. */
:root {
	--zs-accent: #1F5A3D;
	--zs-ink: #1B2620;
	--zs-muted: #56625B;
	--zs-card: #FFFFFF;
	--zs-soft: #F6F4EE;
	--zs-line: #ECEAE3;
	--zs-radius: 20px;
}

.zs-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
	gap: 20px;
	margin: 24px auto;
}
.zs-grid-compact { grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); }

.zs-card {
	background: var(--zs-card);
	border-radius: var(--zs-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	color: var(--zs-ink);
}
.zs-card-photo {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	background: #D9CFBE;
}
.zs-card-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.zs-card-photo .zs-badge { position: absolute; left: 14px; top: 14px; }
.zs-card-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.zs-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.zs-card-title { margin: 0; font-size: 1.35em; line-height: 1.2; }
.zs-card-title a { color: inherit; text-decoration: none; }
.zs-card-no { font-size: 0.85em; color: var(--zs-muted); }
.zs-card-meta { margin: 0; font-size: 0.95em; color: var(--zs-muted); }

.zs-badge {
	display: inline-block;
	font-size: 0.8em;
	font-weight: 700;
	padding: 5px 10px;
	border-radius: 8px;
	background: #FBEBD6;
	color: #7A3E0C;
}
.zs-badge-orokbe_adhato,
.zs-badge-menhely { background: #DDEDE3; color: var(--zs-accent); }
.zs-badge-hazament,
.zs-badge-orokbe_adva { background: #E6ECF3; color: #2A4A6B; }
.zs-badge-kioltott,
.zs-badge-elhullott { background: #ECEAE3; color: #3E4A43; }

.zs-facts { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; font-size: 0.95em; }
.zs-facts div { min-width: 0; }
.zs-facts dt { font-size: 0.85em; color: var(--zs-muted); }
.zs-facts dd { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.zs-facts-wide { grid-template-columns: 1fr; }
.zs-more { border-top: 1px solid var(--zs-line); padding-top: 10px; }
.zs-more summary { cursor: pointer; list-style: none; font-weight: 700; font-size: 0.95em; color: var(--zs-accent); display: inline-flex; align-items: center; gap: 6px; }
.zs-more summary::-webkit-details-marker { display: none; }
.zs-more summary::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-2px); transition: transform .2s; }
.zs-more[open] summary::after { transform: rotate(-135deg) translateY(-2px); }
.zs-more-body { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; }
.zs-more .zs-dates { margin-top: 0; }
.zs-dates { margin: 4px 0 0; padding-top: 12px; border-top: 1px solid var(--zs-line); display: flex; flex-wrap: wrap; gap: 4px 20px; font-size: 0.9em; color: var(--zs-muted); }
.zs-dates strong { color: var(--zs-ink); }
.zs-note { margin: 0; font-size: 0.85em; color: var(--zs-muted); }

.zs-single { margin-bottom: 24px; display: flex; flex-direction: column; gap: 14px; }
.zs-single .zs-facts { font-size: 1em; }
.zs-cta { background: var(--zs-soft); border-radius: 14px; padding: 14px 18px; margin: 0; }
.zs-cta a { font-weight: 700; color: var(--zs-accent); }

.zs-empty { margin: 24px auto; background: var(--zs-soft); border-radius: var(--zs-radius); padding: 24px; }
.zs-empty a { font-weight: 700; color: var(--zs-accent); }

.zs-stats-wrap { overflow-x: auto; }
.zs-stats { width: 100%; min-width: 460px; border-collapse: collapse; }
.zs-stats caption { text-align: left; font-weight: 700; padding-bottom: 8px; }
.zs-stats th, .zs-stats td { text-align: left; padding: 10px 8px 10px 0; border-top: 1px solid var(--zs-line); }
.zs-stats thead th { font-size: 0.85em; color: var(--zs-muted); font-weight: 600; border-top: 0; }

@media (max-width: 480px) {
	.zs-facts { grid-template-columns: 1fr; }
}