/**
 * Widget: Gatunki wg kontynentów (kora-gatunki)
 *
 * Wymiary z makiety (Figma 520:1656 - lista, 573:1809 - okno): pasek
 * kontynentów 72px, wiersz gatunku 48px, okno 1200px z wcięciem 50px,
 * kolumna etykiet tabeli 268/1084.
 */

.kora-species {
	--kora-species-dark: var(--kora-zielen, #033222);
	--kora-species-text: var(--kora-tekst, #00140C);
	--kora-species-muted: var(--kora-tekst-pomocniczy, #363E3B);
	--kora-species-line: var(--kora-linia, #BEC0CB);
}

/* ── Lista ─────────────────────────────────────────────────────────── */

.kora-species__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.kora-species .kora-species__continent {
	margin: 0;
	padding: 24px;
	background-color: var(--kora-species-dark);
	color: var(--kora-bialy, #FFF);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
}

.kora-species__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Hello Elementor stylizuje każdy button - reset także dla :hover/:focus. */
.kora-species .kora-species__item,
.kora-species .kora-species__item:hover,
.kora-species .kora-species__item:focus {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 24px 12px;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--kora-species-text);
	font: inherit;
	font-size: 17px;
	line-height: 25px;
	text-align: start;
	cursor: pointer;
}

.kora-species .kora-species__item:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kora-species .kora-species__item:focus-visible {
	outline: 2px solid var(--kora-species-dark);
	outline-offset: -2px;
}

@media (max-width: 1024px) {
	.kora-species__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: 32px;
	}
}

@media (max-width: 767px) {
	.kora-species__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.kora-species .kora-species__continent {
		padding: 20px 16px;
		border-radius: 12px 12px 0 0;
	}

	.kora-species .kora-species__item {
		padding-inline: 16px;
	}
}

/* ── Okno ──────────────────────────────────────────────────────────── */

html:has(.kora-species__dialog[open]) {
	overflow: hidden;
}

.kora-species__dialog {
	inline-size: min(1200px, 100% - 32px);
	max-inline-size: none;
	max-block-size: calc(100dvh - 32px);
	margin: auto;
	padding: 39px 50px 32px;
	border: 0;
	border-radius: 12px;
	background-color: var(--kora-bialy, #FFF);
	color: var(--kora-species-text);
	overflow: auto;
	overscroll-behavior: contain;
}

/* Po otwarciu fokus trafia na samo okno (species.js), a nie na
   przycisk zamknięcia - przy otwarciu z adresu (#gatunek-…) przycisk
   dostawał obwódkę fokusu, której nie ma w makiecie. */
.kora-species__dialog:focus {
	outline: none;
}

.kora-species__dialog::backdrop {
	background-color: rgba(0, 20, 12, 0.6);
}

.kora-species .kora-species__close,
.kora-species .kora-species__close:hover,
.kora-species .kora-species__close:focus {
	position: absolute;
	inset-block-start: 39px;
	inset-inline-end: 50px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 49px;
	block-size: 49px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--kora-tlo-jasne, #F7F7F7);
	color: var(--kora-species-dark);
	cursor: pointer;
}

.kora-species .kora-species__close:hover {
	background-color: var(--kora-obramowanie, #EFEFEF);
}

.kora-species__close svg {
	inline-size: 14px;
	block-size: 14px;
}

.kora-species__head {
	display: flex;
	align-items: center;
	gap: 25px;
	padding-inline-end: 70px;
}

.kora-species .kora-species__photo {
	flex: 0 0 auto;
	inline-size: 165px;
	block-size: 165px;
	border-radius: 12px;
	object-fit: cover;
}

.kora-species__heading {
	display: flex;
	flex-direction: column;
	gap: 19px;
}

.kora-species .kora-species__title {
	margin: 0;
	color: var(--kora-species-text);
	font-size: 40px;
	font-weight: 500;
	line-height: 48px;
}

.kora-species .kora-species__subtitle {
	margin: 0;
	color: var(--kora-czarny, #000);
	font-size: 20px;
	font-weight: 500;
	line-height: 24px;
}

.kora-species__table {
	margin: 36px 0 0;
	border-block-start: 1px solid var(--kora-species-text);
}

.kora-species__row {
	display: grid;
	grid-template-columns: 24.72% minmax(0, 1fr);
	border-block-end: 1px solid var(--kora-species-line);
	font-size: 17px;
	line-height: 25px;
}

.kora-species__row dt,
.kora-species__row dd {
	margin: 0;
	padding: 24px 16px;
}

.kora-species__row dt {
	color: var(--kora-species-text);
	font-weight: 500;
}

.kora-species__row dd {
	color: var(--kora-species-muted);
}

.kora-species__row dd a {
	color: inherit;
	text-decoration: none;
}

.kora-species__row dd a:hover {
	text-decoration: underline;
}

.kora-species__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 26px;
	margin-block-start: 32px;
}

.kora-species .kora-species__inquiry {
	display: inline-flex;
	padding: 9px 20px;
	border-radius: 40px;
	background-color: var(--kora-limonka, #C8F250);
	color: var(--kora-species-dark);
	font-size: 17px;
	line-height: 25px;
	text-decoration: none;
	transition: background-color 0.2s;
}

.kora-species .kora-species__inquiry:hover {
	background-color: var(--kora-limonka-hover, #B2E12C);
	color: var(--kora-species-dark);
}

.kora-species .kora-species__pdf {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--kora-species-dark);
	font-size: 17px;
	line-height: 25px;
	text-decoration: none;
}

.kora-species .kora-species__pdf:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

.kora-species__pdf svg {
	inline-size: 13px;
	block-size: 13px;
}

@media (max-width: 767px) {
	.kora-species__dialog {
		inline-size: calc(100% - 24px);
		max-block-size: calc(100dvh - 24px);
		padding: 20px 16px 24px;
	}

	.kora-species .kora-species__close,
	.kora-species .kora-species__close:hover,
	.kora-species .kora-species__close:focus {
		inset-block-start: 16px;
		inset-inline-end: 16px;
		inline-size: 40px;
		block-size: 40px;
	}

	.kora-species__head {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
		padding-inline-end: 52px;
	}

	.kora-species .kora-species__photo {
		inline-size: 96px;
		block-size: 96px;
	}

	.kora-species__heading {
		gap: 8px;
	}

	.kora-species .kora-species__title {
		font-size: 28px;
		line-height: 34px;
	}

	.kora-species__table {
		margin-block-start: 24px;
	}

	.kora-species__row {
		grid-template-columns: minmax(0, 1fr);
		padding-block: 16px;
	}

	.kora-species__row dt,
	.kora-species__row dd {
		padding: 0 8px;
	}

	.kora-species__row dt {
		margin-block-end: 4px;
	}
}