/*
	Plantele. Tokenurile sunt ale temei; extensia nu-și aduce paletă proprie.
*/

.plante {
	margin-block: var(--sp-5);
}

.plante__titlu {
	margin: 0 0 var(--sp-2);
	font-size: var(--t-h3);
	color: var(--text);
}

.plante__nota {
	margin: 0 0 var(--sp-3);
	font-size: var(--t-mic);
	color: var(--text-stins);
}

.plante__lista {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
	gap: var(--sp-3);
	margin: 0;
	padding: 0;
	list-style: none;
}

.planta-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-1);
	padding: var(--sp-2);
	border: 1px solid var(--chenar);
	border-radius: var(--rotunjire-mica);
	background: var(--fundal);
}

.planta-card__legatura {
	display: flex;
	flex-direction: column;
	gap: .35em;
	color: var(--text);
	text-decoration: none;
}

.planta-card__legatura:hover .planta-card__nume,
.planta-card__legatura:focus-visible .planta-card__nume { color: var(--verde-text); }

.planta-card__poza {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--rotunjire-mica);
	background: var(--fundal-blanda);
}

.planta-card__poza--goala { display: block; border: 1px dashed var(--chenar); }

.planta-card__nume { font-weight: 600; line-height: 1.25; }

.planta-card__latin {
	font-size: var(--t-mic);
	color: var(--text-stins);
}

/* Pastilele de îngrijire: informație, nu butoane — deci fără umbră și fără mână. */
.planta-pastile {
	display: flex;
	flex-wrap: wrap;
	gap: .3em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.planta-pastile li {
	padding: .15em .6em;
	border-radius: 999px;
	background: var(--fundal-verde-2);
	font-size: var(--t-mic);
	color: var(--text-secundar);
}

/* --- fișa plantei --- */

.planta-fisa { margin-block: var(--sp-6); }

.planta-fisa__cap {
	display: flex;
	gap: var(--sp-5);
	align-items: flex-start;
	margin-bottom: var(--sp-5);
}

.planta-fisa__poza {
	flex: 0 0 auto;
	width: min(22rem, 40vw);
	aspect-ratio: 1;
	object-fit: cover;
	border-radius: var(--rotunjire);
	background: var(--fundal-blanda);
}

.planta-fisa__nume {
	margin: 0;
	font-size: var(--t-h1);
	color: var(--text);
}

.planta-fisa__latin {
	margin: .1em 0 var(--sp-3);
	color: var(--text-stins);
}

.planta-fisa__diametru {
	margin: var(--sp-3) 0 0;
	font-weight: 600;
	color: var(--verde-text);
}

.planta-fisa__atentie {
	margin: var(--sp-2) 0 0;
	font-size: var(--t-mic);
	color: #8a4b00;
}

.planta-fisa__text {
	max-width: 46rem;
	margin-bottom: var(--sp-6);
	line-height: 1.7;
}

.planta-fisa__produse { margin-bottom: var(--sp-6); }

.planta-fisa__produse h2 {
	margin: 0 0 var(--sp-4);
	font-size: var(--t-h2);
}

@media (max-width: 44rem) {
	.planta-fisa__cap { flex-direction: column; }
	.planta-fisa__poza { width: 100%; }
}

/* --- Caruselul de plante, în cutia de lângă acordeon --------------------- */

.plante__antet {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-start;
	justify-content: space-between;
	margin-bottom: var(--sp-3);
}

.plante__antet .plante__titlu,
.plante__antet .plante__nota { margin-bottom: 0; }

.plante__sageti {
	display: flex;
	flex: 0 0 auto;
	gap: var(--sp-2);
}

/*
	Două vizibile, nici una și jumătate: cartonașul ia exact jumătate din
	lățime, minus jumătate din spațiul dintre ele. Restul stau la dreapta și se
	aduc cu săgeata sau cu degetul.
*/
.plante__lista--carusel {
	display: flex;
	gap: var(--sp-3);
	overflow-x: auto;
	/* `proximity`, nu `mandatory`: cu lipirea obligatorie, Chrome prinde derularea
	   lină din mers și o trage înapoi la cartonașul de dinainte — pista pornea
	   câțiva pixeli și se întorcea la zero. Cu apropiere, animația ajunge unde a
	   fost trimisă, iar lipirea o așază la capăt. */
	scroll-snap-type: x proximity;
	padding-block-end: var(--sp-2);
	scrollbar-width: thin;
}

/* `justify-content` ține pastilele lipite de fund: cu titluri de una sau două
   rânduri, cartonașele arătau altfel înalte unul lângă altul. */
.plante__lista--carusel > .planta-card {
	flex: 0 0 calc((100% - var(--sp-3)) / 2);
	scroll-snap-align: start;
	justify-content: space-between;
}