/* ==========================================================================
   COMPONENTELE PAGINILOR DE CONȚINUT

   Despre noi, mentorat, voluntariat, contact. Paginile astea aveau, fiecare,
   propriul sistem de design scris în conținut: altă paletă (`--pmi-navy`,
   `--pmi-blue`, `--pmi-accent`), alt font (Plus Jakarta Sans), alte rotunjiri.
   Erau, practic, patru site-uri diferite lipite în același site.

   Aici sunt componentele comune, scrise o dată, din variabilele din
   `tokens.css`. Paginile devin conținut, nu conținut plus stil.

   Se încarcă doar unde e nevoie: vezi `pmi_ro_e_pagina_de_continut()` din
   `functions.php`.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANTETUL PAGINII

   Același tipar ca pe pagina de evenimente. Titlul paginii vine de aici, nu de
   la temă, deci titlul temei se ascunde: două H1 pe aceeași pagină încurcă și
   cititoarele de ecran, și Google.
   -------------------------------------------------------------------------- */
.pmi-pagina .entry-header .entry-title { display: none; }

.pmi-pagina .entry-content > :where(p, ul, ol, h2, h3) {
	max-width: none;
}

.pmi-hero {
	background-color: var(--pmi-fundal-inchis);
	color: var(--pmi-text-pe-inchis);
	border-radius: var(--pmi-raza-xl);
	padding: var(--pmi-sp-9) var(--pmi-sp-8);
	margin-block-end: var(--pmi-sp-8);
}

.pmi-hero__eticheta {
	margin: 0 0 var(--pmi-sp-3);
	font-size: var(--pmi-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-aqua-300);
}

.pmi-hero h1 {
	color: var(--pmi-text-pe-inchis);
	font-size: var(--pmi-text-2xl);
	line-height: var(--pmi-lh-2xl);
	font-weight: var(--pmi-greutate-titlu);
	margin: 0 0 var(--pmi-sp-4);
	max-inline-size: 20ch;
}

.pmi-hero__text {
	color: var(--pmi-text-pe-inchis);
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-lg);
	margin: 0 0 var(--pmi-sp-6);
	max-inline-size: 62ch;
}

/* Rândul de butoane exista doar înăuntrul unui hero. Folosit în corpul paginii,
   nu avea nicio regulă, deci butoanele stăteau lipite pe orizontală, ca două
   elemente `inline-block` oarecare. */
.pmi-rand-butoane {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmi-sp-3);
	margin-block: var(--pmi-sp-5) var(--pmi-sp-6);
}

/* Unul sub altul, fiecare cât îi trebuie, nu întins pe toată lățimea:
   un buton lat de 1200 px nu mai arată a buton. */
.pmi-rand-butoane--stivuit {
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pmi-sp-2);
}

.pmi-hero .pmi-rand-butoane {
	margin-block: 0;
}

.pmi-hero .pmi-buton--primar {
	background-color: var(--pmi-alb);
	color: var(--pmi-ink);
}

.pmi-hero .pmi-buton--primar:hover {
	background-color: var(--pmi-aqua-200);
	color: var(--pmi-ink);
}

.pmi-hero .pmi-buton--contur {
	color: var(--pmi-alb);
	border-color: var(--pmi-alb);
}

.pmi-hero .pmi-buton--contur:hover {
	background-color: var(--pmi-alb);
	color: var(--pmi-ink);
}

/* --------------------------------------------------------------------------
   2. CIFRE

   Rând de cifre mari. Cele care se pot calcula vin din shortcode, nu scrise de
   mână: o cifră scrisă de mână e adevărată o singură dată.
   -------------------------------------------------------------------------- */
.pmi-fapte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: 0 0 var(--pmi-sp-8);
	padding: 0;
	max-inline-size: none;
}

.pmi-fapte li {
	margin: 0;
	padding: var(--pmi-sp-5);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
}

.pmi-fapte__cifra {
	display: block;
	font-size: var(--pmi-text-xl);
	line-height: var(--pmi-lh-xl);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-violet-500);
}

.pmi-fapte__nume {
	display: block;
	margin-block-start: var(--pmi-sp-1);
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
}

/* --------------------------------------------------------------------------
   3. CARDURI DE CONȚINUT

   Grilă de blocuri cu titlu și text. Le folosesc și „Ce îți oferim", și
   echipele de voluntariat, și criteriile de mentorat.
   -------------------------------------------------------------------------- */
.pmi-blocuri {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	padding: 0;
	max-inline-size: none;
}

.pmi-blocuri > li {
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-2);
	margin: 0;
	padding: var(--pmi-sp-6);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
}

.pmi-blocuri h3 {
	margin: 0;
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-blocuri p {
	margin: 0;
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text-secundar);
	max-inline-size: none;
}

.pmi-blocuri__eticheta {
	font-size: var(--pmi-text-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-violet-500);
}

/* Etichetele mici de la finalul unui bloc: „Planificare", „Logistică". */
.pmi-etichete {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmi-sp-2);
	list-style: none;
	margin: auto 0 0;
	padding: var(--pmi-sp-4) 0 0;
}

.pmi-etichete li {
	margin: 0;
	padding: var(--pmi-sp-1) var(--pmi-sp-3);
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-neutral-100);
	font-size: var(--pmi-text-2xs);
	color: var(--pmi-text-secundar);
}

/* --------------------------------------------------------------------------
   4. ECHIPA

   Board-ul. Fără fotografii: nu le avem pe toate, iar o grilă în care jumătate
   din oameni au poză și jumătate au un cerc gol arată mai rău decât una fără
   nicio poză.
   -------------------------------------------------------------------------- */
.pmi-echipa {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	padding: 0;
	max-inline-size: none;
}

/* Chenarul, dunga de sus și rotația de culoare vin din `chenare.css`, ca la
   toate celelalte cutii. */
.pmi-echipa li {
	margin: 0;
	padding: var(--pmi-sp-5);
	background-color: var(--pmi-fundal-card);
}

.pmi-echipa__nume {
	display: block;
	font-size: var(--pmi-text-md);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-echipa__rol {
	display: block;
	margin-block-start: var(--pmi-sp-1);
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text-secundar);
}

.pmi-echipa__din {
	display: block;
	margin-block-start: var(--pmi-sp-2);
	font-size: var(--pmi-text-2xs);
	color: var(--pmi-neutral-400);
}

/* --------------------------------------------------------------------------
   5. PAȘI NUMEROTAȚI
   -------------------------------------------------------------------------- */
.pmi-pasi {
	counter-reset: pas;
	list-style: none;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	padding: 0;
	display: grid;
	gap: var(--pmi-sp-4);
	max-inline-size: none;
}

.pmi-pasi > li {
	counter-increment: pas;
	position: relative;
	margin: 0;
	padding-inline-start: calc(var(--pmi-sp-8) + var(--pmi-sp-2));
	min-block-size: var(--pmi-sp-8);
}

.pmi-pasi > li::before {
	content: counter(pas);
	position: absolute;
	inset-inline-start: 0;
	/* Centrat pe PRIMA linie de text, nu lipit de marginea de sus a cutiei.
	   Bulina are 48 px, linia de text are 24: aliniate amândouă la 0, cifra
	   cade cu 12 px sub rândul pe care ar trebui să-l însoțească. Diferența
	   se scoate din tokenuri, ca să rămână corectă dacă se schimbă vreunul. */
	inset-block-start: calc((var(--pmi-lh-sm) - var(--pmi-sp-8)) / 2);
	inline-size: var(--pmi-sp-8);
	block-size: var(--pmi-sp-8);
	display: grid;
	place-items: center;
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-violet-50);
	color: var(--pmi-violet-500);
	font-weight: var(--pmi-greutate-accent);
}

/* Îngroșarea rămâne în rând, nu pe rând propriu. Ca bloc, restul frazei
   sărea dedesubt și începea cu virgulă, ceea ce arăta a text rupt, nu a
   ierarhie. */
.pmi-pasi strong {
	color: var(--pmi-ink);
}

/* --------------------------------------------------------------------------
   6. JALOANE

   Edițiile programului de mentorat. Starea fiecăreia se dă din clasă, nu
   dintr-un simbol scris în text: un „✓" copiat în conținut nu poate fi
   colorat, nu poate fi citit corect de un cititor de ecran și rămâne acolo
   după ce ediția se încheie.
   -------------------------------------------------------------------------- */
.pmi-jaloane {
	list-style: none;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--pmi-sp-4);
	max-inline-size: none;
}

.pmi-jaloane li {
	margin: 0;
	padding: var(--pmi-sp-5);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
}

.pmi-jaloane__stare {
	display: inline-block;
	margin-block-end: var(--pmi-sp-2);
	padding: var(--pmi-sp-1) var(--pmi-sp-3);
	border-radius: var(--pmi-raza-plin);
	font-size: var(--pmi-text-2xs);
	font-weight: var(--pmi-greutate-accent);
	background-color: var(--pmi-neutral-100);
	color: var(--pmi-text-secundar);
}

.pmi-jaloane li.e-acum {
	border-color: var(--pmi-violet-500);
}

.pmi-jaloane li.e-acum .pmi-jaloane__stare {
	background-color: var(--pmi-violet-500);
	color: var(--pmi-alb);
}

.pmi-jaloane li.urmeaza .pmi-jaloane__stare {
	background-color: var(--pmi-aqua-50);
	color: var(--pmi-aqua-600);
}

.pmi-jaloane__nume {
	display: block;
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-jaloane__cand {
	display: block;
	margin-block-start: var(--pmi-sp-1);
	font-size: var(--pmi-text-xs);
	color: var(--pmi-text-secundar);
}

/* Calendarul alegerilor: șase jaloane care se citesc ca o linie a timpului,
   deci vor să stea pe un singur rând. `auto-fit` cu minimul obișnuit de 200 px
   încape doar cinci într-un container de 1200, iar al șaselea rămâne singur pe
   rândul doi.

   Coloanele sunt scrise explicit, nu lăsate pe seama lui `auto-fit`: 6, 3, 2, 1
   împart toate numărul de jaloane fără rest, deci nu apare niciodată un rând
   început și neterminat. Cu `auto-fit` s-ar fi trecut prin 5 și prin 4 la
   lățimile dintre praguri, adică exact orfanul pe care îl evităm.

   Regula e legată de numărul șase. Dacă jaloanele devin cinci sau șapte,
   pragurile se rescriu, nu se moștenesc. */
.pmi-jaloane--calendar {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

@media (max-width: 1100px) {
	.pmi-jaloane--calendar { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
	.pmi-jaloane--calendar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 460px) {
	.pmi-jaloane--calendar { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   7. LISTE CU BIFĂ
   -------------------------------------------------------------------------- */
.pmi-bife {
	list-style: none;
	margin: var(--pmi-sp-4) 0;
	padding: 0;
	display: grid;
	gap: var(--pmi-sp-2);
}

.pmi-bife li {
	position: relative;
	margin: 0;
	padding-inline-start: var(--pmi-sp-6);
	color: var(--pmi-text-secundar);
}

/* Bifa e o bordură rotită, nu un caracter: nu depinde de font și nu devine
   pătrat pe sistemele fără emoji. */
.pmi-bife li::before {
	content: "";
	position: absolute;
	inset-inline-start: 4px;
	inset-block-start: 0.45em;
	inline-size: 6px;
	block-size: 11px;
	border-inline-end: 2px solid var(--pmi-violet-500);
	border-block-end: 2px solid var(--pmi-violet-500);
	transform: rotate(45deg);
}

/* --------------------------------------------------------------------------
   8. CONTACT
   -------------------------------------------------------------------------- */
.pmi-contacte {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	padding: 0;
	max-inline-size: none;
}

.pmi-contacte li {
	margin: 0;
	padding: var(--pmi-sp-6);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
}

.pmi-contacte h3 {
	margin: 0 0 var(--pmi-sp-2);
	font-size: var(--pmi-text-md);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-contacte p {
	margin: 0;
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text-secundar);
	max-inline-size: none;
}

.pmi-contacte a {
	font-weight: var(--pmi-greutate-accent);
}

/* Nota despre sediu: e o adresă juridică, nu un birou în care poți intra.
   Scris mărunt, dar scris, ca nimeni să nu bată drumul degeaba. */
.pmi-nota {
	padding: var(--pmi-sp-4) var(--pmi-sp-5);
	border-inline-start: 3px solid var(--pmi-aqua-300);
	background-color: var(--pmi-aqua-50);
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text);
	margin-block: var(--pmi-sp-5);
	max-inline-size: none;
}

/* --------------------------------------------------------------------------
   9. ECRANE MICI
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
	.pmi-hero {
		padding: var(--pmi-sp-7) var(--pmi-sp-5);
		border-radius: var(--pmi-raza-lg);
	}

	.pmi-hero h1 {
		font-size: var(--pmi-text-xl);
		line-height: var(--pmi-lh-xl);
		max-inline-size: none;
	}
}

/* --------------------------------------------------------------------------
   10. MĂRTURII

   Citat, nume, rol. Fără fotografii și fără carusel: un carusel ascunde zece
   mărturii din unsprezece și le arată doar celui care are răbdare să apese.
   -------------------------------------------------------------------------- */
.pmi-marturii {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	padding: 0;
	max-inline-size: none;
}

.pmi-marturii li {
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-3);
	margin: 0;
	padding: var(--pmi-sp-6);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
}

.pmi-marturii__rol {
	align-self: flex-start;
	padding: var(--pmi-sp-1) var(--pmi-sp-3);
	border-radius: var(--pmi-raza-plin);
	font-size: var(--pmi-text-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: var(--pmi-greutate-accent);
	background-color: var(--pmi-violet-50);
	color: var(--pmi-violet-500);
}

.pmi-marturii blockquote {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-lg);
	color: var(--pmi-ink);
}

.pmi-marturii figcaption,
.pmi-marturii__cine {
	margin-block-start: auto;
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
}

.pmi-marturii__cine strong {
	display: block;
	color: var(--pmi-ink);
	font-weight: var(--pmi-greutate-accent);
	font-size: var(--pmi-text-sm);
}

/* --------------------------------------------------------------------------
   11. CULORI PE CHENARE

   Blocurile primesc pe rând cele trei culori PMI, în ordinea din triunghi.
   Nu e decor: cu opt carduri identice, ochiul nu are de ce să se agațe și
   pagina citește ca un tabel. Culoarea stă în `--ton`, deci dunga, eticheta și
   marginea la hover nu se pot desincroniza.
   -------------------------------------------------------------------------- */
.pmi-blocuri > li {
	--ton: var(--pmi-violet-500);
	--ton-fundal: var(--pmi-violet-50);

	position: relative;
	overflow: hidden;
	transition: border-color var(--pmi-tranzitie);
}

.pmi-blocuri > li:nth-child(3n+1) { --ton: var(--pmi-aqua-300);      --ton-fundal: var(--pmi-aqua-50); }
.pmi-blocuri > li:nth-child(3n+2) { --ton: var(--pmi-tangerine-300); --ton-fundal: var(--pmi-tangerine-50); }
.pmi-blocuri > li:nth-child(3n)   { --ton: var(--pmi-violet-500);    --ton-fundal: var(--pmi-violet-50); }

/* Dunga de sus, nu bordură groasă: o bordură ar trage conținutul cu câțiva
   pixeli față de celelalte carduri dacă vreodată dispare. */
.pmi-blocuri > li::before {
	content: "";
	position: absolute;
	inset-block-start: 0;
	inset-inline: 0;
	block-size: 6px;
	background-color: var(--ton);
}

.pmi-blocuri > li:hover {
	border-color: var(--ton);
}

.pmi-blocuri__eticheta {
	align-self: flex-start;
	padding: var(--pmi-sp-1) var(--pmi-sp-3);
	border-radius: var(--pmi-raza-plin);
	background-color: var(--ton-fundal);
	color: var(--pmi-ink);
}

/* Aceleași trei culori și pe cifre, și pe board. */
.pmi-fapte li:nth-child(4n+1) .pmi-fapte__cifra { color: var(--pmi-aqua-500); }
.pmi-fapte li:nth-child(4n+2) .pmi-fapte__cifra { color: var(--pmi-tangerine-500); }
.pmi-fapte li:nth-child(4n+3) .pmi-fapte__cifra { color: var(--pmi-violet-500); }
.pmi-fapte li:nth-child(4n)   .pmi-fapte__cifra { color: var(--pmi-aqua-600); }


/* --------------------------------------------------------------------------
   12. FOTOGRAFIILE DIN BOARD

   Opt din nouă au fotografie. Al nouălea primește inițialele, într-un cerc de
   aceeași mărime, ca grila să nu aibă un gol în ea. Când vine și poza lui, se
   înlocuiește un `span` cu un `img` și nimic altceva.
   -------------------------------------------------------------------------- */
.pmi-echipa li {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pmi-sp-2);
	border-radius: 0 0 var(--pmi-raza-md) var(--pmi-raza-md);
}

/* Toți pe un rând, indiferent câți sunt.
   Grila obișnuită umple rândul cu cât încape la 240px de card, deci cei cinci
   fondatori ai Student Club ieșeau 4 plus 1, cu un card singur pe rândul al
   doilea. Aici numărul de coloane vine din câți membri are lista, nu din cât
   loc e: `minmax(0, 1fr)` lasă cardurile să scadă sub 240px, ceea ce grila de
   bază nu permite.

   Sub 900px se revine la comportamentul obișnuit: cinci carduri pe lățimea
   unui telefon ar fi cinci coloane de text pe verticală. */
@media (min-width: 900px) {
	.pmi-echipa--un-rand {
		grid-template-columns: repeat(var(--pmi-echipa-coloane, 5), minmax(0, 1fr));
	}
}

/* Ancorat în `.entry-content` din același motiv ca poza vorbitorilor: regula
   generală de imagine a temei bate o clasă simplă. */
.entry-content .pmi-echipa__poza,
.pmi-echipa__initiale {
	inline-size: 88px;
	block-size: 88px;
	border-radius: var(--pmi-raza-plin);
	margin-block-end: var(--pmi-sp-2);
	object-fit: cover;
	/* Fețele stau în treimea de sus a unei fotografii de portret; centrat, un
	   cadru pătrat ar tăia fruntea. */
	object-position: center 22%;
	display: block;
}

.pmi-echipa__initiale {
	display: grid;
	place-items: center;
	background-color: var(--pmi-neutral-100);
	color: var(--pmi-neutral-400);
	font-size: var(--pmi-text-lg);
	font-weight: var(--pmi-greutate-titlu);
}

/* --------------------------------------------------------------------------
   13. FORMULARE
   -------------------------------------------------------------------------- */
.pmi-form {
	max-inline-size: 620px;
	margin-block: var(--pmi-sp-5) var(--pmi-sp-8);
}

.pmi-form__camp {
	margin-block-end: var(--pmi-sp-5);
}

.pmi-form label,
.pmi-form legend {
	display: block;
	margin-block-end: var(--pmi-sp-2);
	font-size: var(--pmi-text-xs);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-form fieldset {
	border: 0;
	padding: 0;
	margin: 0;
}

.pmi-form__cerut {
	font-weight: var(--pmi-greutate-text);
	color: var(--pmi-neutral-400);
	text-transform: none;
}

.pmi-form input[type="text"],
.pmi-form input[type="email"],
.pmi-form input[type="url"],
.pmi-form textarea {
	inline-size: 100%;
	min-block-size: 48px;
	padding: var(--pmi-sp-3) var(--pmi-sp-4);
	border: 1px solid var(--pmi-neutral-300);
	border-radius: var(--pmi-raza-xs);
	background-color: var(--pmi-alb);
	color: var(--pmi-text);
	/* 16 px, nu mai puțin: sub atât, Safari pe iPhone mărește pagina singur
	   când atingi câmpul. */
	font-size: var(--pmi-text-sm);
	font-family: inherit;
}

.pmi-form textarea {
	min-block-size: 120px;
	resize: vertical;
}

.pmi-form input:focus,
.pmi-form textarea:focus {
	border-color: var(--pmi-violet-500);
}

.pmi-form__optiune {
	display: flex;
	align-items: center;
	gap: var(--pmi-sp-2);
	margin-block-end: var(--pmi-sp-2);
	font-weight: var(--pmi-greutate-text);
	font-size: var(--pmi-text-sm);
	color: var(--pmi-text);
}

.pmi-form__optiune input {
	inline-size: 18px;
	block-size: 18px;
	margin: 0;
	flex: none;
	accent-color: var(--pmi-violet-500);
}

.pmi-form__ajutor {
	margin: var(--pmi-sp-2) 0 0;
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
}

.pmi-form__trimite {
	margin-block: var(--pmi-sp-6) var(--pmi-sp-3);
}

.pmi-form__trimite button {
	border: 0;
	font-family: inherit;
	cursor: pointer;
}

.pmi-form__gdpr {
	margin: 0;
	font-size: var(--pmi-text-2xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-neutral-400);
}

.pmi-form__capcana {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.pmi-form__mesaj {
	padding: var(--pmi-sp-4) var(--pmi-sp-5);
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-sm);
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	margin-block: var(--pmi-sp-5);
	max-inline-size: 620px;
}

.pmi-form__mesaj--info {
	border-color: var(--pmi-succes);
	color: var(--pmi-succes);
}

.pmi-form__mesaj--eroare {
	border-color: var(--pmi-eroare);
	color: var(--pmi-eroare);
}

/* --------------------------------------------------------------------------
   14. CARUSEL

   Derulare cu fixare, nu slider clasic. Diferența contează: toate cele
   unsprezece mărturii rămân în pagină, deci le vede și Google, și cine are
   JavaScript oprit, și cine navighează din tastatură. Un slider care ascunde
   zece din unsprezece le scoate din pagină cu totul.

   Săgețile sunt în plus, nu esențiale: fără ele, rândul rămâne derulabil cu
   degetul, cu trackpad-ul sau cu tastele.
   -------------------------------------------------------------------------- */
.pmi-carusel {
	position: relative;
	margin-block: var(--pmi-sp-5) var(--pmi-sp-8);
}

.pmi-carusel__pista {
	display: flex;
	gap: var(--pmi-sp-4);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-inline: var(--pmi-sp-1);
	padding-block-end: var(--pmi-sp-4);
	list-style: none;
	margin: 0;
	padding-inline: 0;
	max-inline-size: none;
	/* Firefox și WebKit, două sintaxe pentru aceeași bară subțire. */
	scrollbar-width: thin;
	scrollbar-color: var(--pmi-neutral-200) transparent;
}

.pmi-carusel__pista::-webkit-scrollbar {
	block-size: 6px;
}

.pmi-carusel__pista::-webkit-scrollbar-thumb {
	background-color: var(--pmi-neutral-200);
	border-radius: var(--pmi-raza-plin);
}

.pmi-carusel__pista > li {
	flex: 0 0 min(360px, 80%);
	scroll-snap-align: start;
	margin: 0;
}

.pmi-carusel__butoane {
	display: flex;
	gap: var(--pmi-sp-2);
	justify-content: flex-end;
	margin-block-end: var(--pmi-sp-3);
}

.pmi-carusel__buton {
	inline-size: 44px;
	block-size: 44px;
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-plin);
	background-color: var(--pmi-fundal-card);
	color: var(--pmi-ink);
	font-size: var(--pmi-text-md);
	line-height: 1;
	cursor: pointer;
	transition: background-color var(--pmi-tranzitie), border-color var(--pmi-tranzitie), color var(--pmi-tranzitie);
}

.pmi-carusel__buton:hover:not(:disabled) {
	background-color: var(--pmi-ink);
	border-color: var(--pmi-ink);
	color: var(--pmi-alb);
}

/* Butonul dezactivat rămâne vizibil, dar spune limpede că e la capăt. Ascuns,
   rândul de butoane ar sări dintr-o parte în alta la fiecare derulare. */
.pmi-carusel__buton:disabled {
	opacity: 0.35;
	cursor: default;
}

/* Fără JavaScript nu există butoane, deci nici rândul lor. */
.pmi-carusel__butoane:empty {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.pmi-carusel__pista {
		scroll-behavior: auto;
	}
}

/* --------------------------------------------------------------------------
   15. FIȘE COMPARABILE

   Partenerii de training, în același format fiecare, ca să se poată compara.
   Blocurile devin mai late: o fișă cu cinci rânduri de date, strânsă pe trei
   coloane, ar rupe fiecare valoare pe câte două rânduri.
   -------------------------------------------------------------------------- */
/* Cei trei keynote pe un singur rând. `auto-fit` cu 420 px minim îi așeza doi
   plus unul, fiindcă trei coloane de 420 nu încap în lățimea conținutului, iar
   al treilea rămânea singur dedesubt, ca și cum ar fi de altă categorie.
   Trei coloane egale, declarate ca atare, spun ce trebuie: sunt de același rang.

   Pe tablete trec la două, pe telefon la una. Pragurile sunt alese după unde
   textul din card devine prea îngust, nu după dimensiuni de dispozitive. */
.pmi-blocuri--fise {
	grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 1024px) {
	.pmi-blocuri--fise {
		grid-template-columns: repeat(2, 1fr);
	}
}

.pmi-fisa {
	display: grid;
	gap: var(--pmi-sp-3);
	margin: var(--pmi-sp-4) 0 0;
	padding-block-start: var(--pmi-sp-4);
	border-block-start: 1px solid var(--pmi-linie);
}

.pmi-fisa > div {
	display: grid;
	grid-template-columns: 140px 1fr;
	gap: var(--pmi-sp-3);
	align-items: baseline;
}

/* În cardurile de vorbitor, eticheta stă deasupra valorii, nu lângă ea. Cu trei
   carduri pe rând rămân 389 px de card, din care o coloană de etichetă de 140
   ar lăsa titlul conferinței să se rupă pe cinci rânduri. */
.pmi-blocuri--fise .pmi-fisa > div {
	grid-template-columns: 1fr;
	gap: var(--pmi-sp-1);
}

.pmi-fisa dt {
	font-size: var(--pmi-text-2xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-neutral-400);
}

.pmi-fisa dd {
	margin: 0;
	font-size: var(--pmi-text-sm);
	line-height: var(--pmi-lh-sm);
	color: var(--pmi-text);
}

/* Etichetele devin linkuri pe fișe, deci au nevoie de stare de hover. */
.pmi-etichete a {
	color: var(--pmi-ink);
	text-decoration: none;
	font-weight: var(--pmi-greutate-accent);
}

.pmi-etichete li:has(a) {
	background-color: var(--ton-fundal, var(--pmi-neutral-100));
	transition: background-color var(--pmi-tranzitie);
}

.pmi-etichete li:has(a):hover {
	background-color: var(--ton, var(--pmi-violet-500));
}

.pmi-etichete li:has(a):hover a {
	color: var(--pmi-alb);
}

@media (max-width: 560px) {
	.pmi-blocuri--fise {
		grid-template-columns: 1fr;
	}

	.pmi-fisa > div {
		grid-template-columns: 1fr;
		gap: var(--pmi-sp-1);
	}
}

/* Logo-urile partenerilor. Vin în formate și proporții foarte diferite: un SVG
   de 3,2:1, un PNG de 3:1 și un JPEG de 5,75:1. Cutia fixă cu `object-fit:
   contain` le aduce la aceeași greutate vizuală, fără să taie niciunul și fără
   să îl întindă. Cutia are și înălțime rezervată, ca titlurile de sub logo să
   pornească de la aceeași linie în toate cardurile. */
/* Ancorat în `.entry-content` din același motiv ca fotografiile vorbitorilor:
   altfel `.entry-content img` din content.css câștigă la specificitate și pune
   colțuri de 24 px. Pe logo-urile cu fundal transparent nu se vedea, dar cel de
   la PM Access umple toată cutia cu două dreptunghiuri pline, iar la 31 px
   înălțime raza aceea îl transforma aproape într-o pastilă. */
.entry-content .pmi-logo-partener {
	inline-size: auto;
	max-inline-size: 180px;
	block-size: 48px;
	object-fit: contain;
	object-position: left center;
	margin-block: var(--pmi-sp-2) var(--pmi-sp-1);
	border-radius: 0;
	display: block;
}

/* --------------------------------------------------------------------------
   15b. FIȘELE PARTENERILOR AUTORIZAȚI

   Sunt patru, iar grila de trei îi lăsa pe al patrulea singur pe rândul doi, ca
   și cum ar fi de altă categorie. Două pe rând îi așază 2×2 și dublează lățimea
   cardului, de la ~380 px la ~580 px.

   Lățimea aceea schimbă și ce e înăuntru: la 580 px, fișa poate reveni la
   eticheta din stânga și valoarea în dreapta. Cele șase rânduri se aliniază
   atunci într-un tabel citibil, în loc să curgă unul sub altul.
   -------------------------------------------------------------------------- */
.pmi-blocuri--parteneri {
	grid-template-columns: repeat(2, 1fr);
}

.pmi-blocuri--parteneri .pmi-fisa > div {
	grid-template-columns: 160px 1fr;
	gap: var(--pmi-sp-3);
	align-items: baseline;
}

/* Linkurile stau lipite de baza cardului, indiferent cât de lung e textul de
   deasupra. Fără asta, cardurile dintr-un rând au aceeași înălțime, dar
   linkurile lor plutesc la înălțimi diferite. */
.pmi-blocuri--parteneri .pmi-etichete {
	margin-block-start: auto;
	padding-block-start: var(--pmi-sp-4);
}

/* Sub 900 px, două coloane strâng fișa sub pragul la care eticheta și valoarea
   mai încap una lângă alta. Se trece la un card pe rând, cu eticheta deasupra. */
@media (max-width: 900px) {
	.pmi-blocuri--parteneri {
		grid-template-columns: 1fr;
	}

	.pmi-blocuri--parteneri .pmi-fisa > div {
		grid-template-columns: 200px 1fr;
	}
}

@media (max-width: 560px) {
	.pmi-blocuri--parteneri .pmi-fisa > div {
		grid-template-columns: 1fr;
		gap: var(--pmi-sp-1);
	}
}

/* --------------------------------------------------------------------------
   16. PROGRAMUL CONFERINȚEI ȘI BILETELE
   -------------------------------------------------------------------------- */
.pmi-program {
	display: grid;
	gap: 0;
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	max-inline-size: none;
}

.pmi-program > div {
	display: grid;
	grid-template-columns: 90px 1fr;
	gap: var(--pmi-sp-4);
	padding-block: var(--pmi-sp-4);
	border-block-start: 1px solid var(--pmi-linie);
}

.pmi-program > div:last-child {
	border-block-end: 1px solid var(--pmi-linie);
}

.pmi-program dt {
	font-size: var(--pmi-text-sm);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-violet-500);
	font-variant-numeric: tabular-nums;
}

.pmi-program dd {
	margin: 0;
	color: var(--pmi-text-secundar);
	line-height: var(--pmi-lh-sm);
}

.pmi-program dd strong {
	color: var(--pmi-ink);
}

.pmi-blocuri--bilete {
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

/* O singură tranșă, de pe 16 august 2026. Fără regula asta, `auto-fit` întinde
   cardul unic peste toți cei 1200 px ai containerului, iar prețul și butonul
   rămân singure într-o bandă goală, ca un banner. Limita e cea de la care
   cardul arată în continuare ca un card, nu ca o secțiune. */
.pmi-blocuri--bilete-unic {
	grid-template-columns: minmax(0, 420px);
}

.pmi-pret {
	font-size: var(--pmi-text-xl) !important;
	line-height: var(--pmi-lh-xl);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink) !important;
}

/* Tranșa epuizată rămâne pe pagină, dar stinsă: arată că prețurile chiar cresc,
   ceea ce e o informație utilă pentru cine se hotărăște acum. */
.pmi-blocuri--bilete .e-epuizat {
	opacity: 0.6;
}

.pmi-blocuri--bilete .e-epuizat .pmi-pret {
	text-decoration: line-through;
	color: var(--pmi-text-secundar) !important;
}

.pmi-blocuri--bilete .e-activ {
	border-color: var(--ton);
}

@media (max-width: 600px) {
	.pmi-program > div {
		grid-template-columns: 1fr;
		gap: var(--pmi-sp-1);
	}
}

/* Fișele de certificare au titlu-link. Fără regula asta, linkul ar moșteni
   albastrul implicit și ar rupe ierarhia titlurilor din grilă. */
.pmi-blocuri h3 a {
	color: var(--pmi-ink);
	text-decoration: none;
}

.pmi-blocuri h3 a:hover {
	color: var(--ton, var(--pmi-violet-500));
	text-decoration: underline;
}

/* Titlurile de grup dintre grile au nevoie de aer deasupra, altfel se lipesc
   de ultimul rând de carduri. */
.pmi-pagina .entry-content h3 {
	margin-block-start: var(--pmi-sp-7);
}

/* --------------------------------------------------------------------------
   17. ROLURI DESFĂȘURABILE

   `details` și `summary` native, nu un acordeon pe JavaScript. Conținutul
   rămâne în pagină, deci îl indexează Google și îl găsește căutarea din
   browser cu Ctrl+F, chiar cu fișele închise. Un acordeon care își ține textul
   în JavaScript îl ascunde de amândouă.
   -------------------------------------------------------------------------- */
.pmi-roluri {
	display: grid;
	gap: var(--pmi-sp-3);
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-8);
	max-inline-size: none;
}

.pmi-roluri details {
	border: 1px solid var(--pmi-linie);
	border-radius: var(--pmi-raza-lg);
	background-color: var(--pmi-fundal-card);
	overflow: hidden;
}

.pmi-roluri details[open] {
	border-color: var(--pmi-violet-500);
}

.pmi-roluri summary {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--pmi-sp-2) var(--pmi-sp-4);
	padding: var(--pmi-sp-5) var(--pmi-sp-6);
	cursor: pointer;
	list-style: none;
}

/* Săgeata implicită diferă de la browser la browser. O scoatem și punem una
   proprie, care se rotește la deschidere. */
.pmi-roluri summary::-webkit-details-marker { display: none; }

.pmi-roluri summary::after {
	content: "";
	inline-size: 10px;
	block-size: 10px;
	margin-inline-start: auto;
	border-inline-end: 2px solid var(--pmi-violet-500);
	border-block-end: 2px solid var(--pmi-violet-500);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform var(--pmi-tranzitie);
	flex: none;
}

.pmi-roluri details[open] summary::after {
	transform: rotate(-135deg) translate(-2px, -2px);
}

.pmi-roluri summary:hover .pmi-rol__nume {
	color: var(--pmi-violet-500);
}

.pmi-rol__nume {
	font-size: var(--pmi-text-md);
	font-weight: var(--pmi-greutate-accent);
	color: var(--pmi-ink);
}

.pmi-rol__efort {
	font-size: var(--pmi-text-xs);
	color: var(--pmi-text-secundar);
}

.pmi-roluri details > :not(summary) {
	padding-inline: var(--pmi-sp-6);
	max-inline-size: none;
}

.pmi-roluri details > :last-child {
	padding-block-end: var(--pmi-sp-6);
}

.pmi-roluri h4 {
	margin: var(--pmi-sp-5) 0 var(--pmi-sp-2);
	font-size: var(--pmi-text-sm);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--pmi-neutral-400);
}

.pmi-roluri ul {
	margin: 0;
	padding-inline-start: var(--pmi-sp-5);
	color: var(--pmi-text-secundar);
}

.pmi-roluri li {
	margin-block-end: var(--pmi-sp-1);
}

/* --------------------------------------------------------------------------
   LEGĂTURA CĂTRE CEALALTĂ LIMBĂ

   Doar pe perechea conferinței, singura pagină scrisă de mână în engleză.
   Discret: cine are nevoie de ea o caută, cine nu, n-are de ce să se împiedice
   de ea.
   -------------------------------------------------------------------------- */
.pmi-limba {
	margin-block-start: var(--pmi-sp-7);
	padding-block-start: var(--pmi-sp-4);
	border-block-start: 1px solid var(--pmi-linie);
	font-size: var(--pmi-text-sm);
}

.pmi-limba a {
	color: var(--pmi-text-secundar);
}

.pmi-limba a:hover {
	color: var(--pmi-ink);
}

/* --------------------------------------------------------------------------
   FOTOGRAFIILE VORBITORILOR

   Cerc, ca la board, doar mai mare: sunt capul de afiș al paginii, nu o listă
   de nume. Aceeași formă peste tot unde site-ul arată oameni.

   Cele trei fotografii au fundaluri diferite, una gri, una albă, una întunecată,
   fiindcă sunt pozele lor oficiale. Cercul le adună la aceeași formă, ceea ce
   ține rândul coerent fără să retușăm pozele altcuiva.
   -------------------------------------------------------------------------- */
/* Selectorul e ancorat în `.entry-content`, altfel regula generală de imagine
   din `content.css`, care are `.entry-content img`, îl bate la specificitate și
   cercul iese pătrat cu colțuri de 24 px. */
.entry-content .pmi-vorbitor__poza {
	inline-size: 120px;
	block-size: 120px;
	border-radius: var(--pmi-raza-plin);
	margin-block: var(--pmi-sp-2) var(--pmi-sp-1);
	object-fit: cover;
	/* Fețele stau în treimea de sus a unui portret; centrat, cadrul ar tăia
	   fruntea. Aceeași valoare ca la board. */
	object-position: center 22%;
	background-color: var(--pmi-neutral-100);
	display: block;
}

/* Nu toate portretele au subiectul la mijloc. Al Lysei Morrison îl are la 61 la
   sută din lățime, deci un cadru centrat o împinge în dreapta cercului. Clasa
   spune de ce, nu pe cine: e o proprietate a fotografiei, nu a omului. */
.entry-content .pmi-vorbitor__poza--decentrat {
	object-position: 83% 22%;
}