/* ==========================================================================
   pmi.ro — prima pagină
   --------------------------------------------------------------------------
   Se încarcă doar pe prima pagină. Folosește exclusiv variabilele din
   tokens.css și componentele deja existente în certificare.css.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ANTETUL
   Fără carusel. Un mesaj care stă pe loc și două acțiuni, nu șapte.
   -------------------------------------------------------------------------- */
.pmi-acasa-hero {
	background-color: var(--pmi-fundal-inchis);
	color: var(--pmi-text-pe-inchis);
	border-radius: var(--pmi-raza-lg);
	padding: var(--pmi-sp-10) var(--pmi-sp-8);
	margin-block-end: var(--pmi-sp-9);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Fotografie reală de la conferința noastră, nu imagine de stoc. Peste ea, un
   strat violet închis: fără el, textul alb nu ar avea contrast suficient pe
   zonele luminoase din poză, iar contrastul nu e negociabil.

   Imaginea e cel mai mare element de pe prima pagină, deci ea decide LCP-ul.
   De aceea vine în două mărimi, în WebP: 900 px pe telefon, 1600 px de la
   tabletă în sus. Originalul avea 2560 px și 772 KB, servit la fel tuturor. */
.pmi-acasa-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image: var(--pmi-hero-imagine-mic, var(--pmi-hero-imagine));
	background-size: cover;
	background-position: center 40%;
}

@media (min-width: 768px) {
	.pmi-acasa-hero::before {
		background-image: var(--pmi-hero-imagine);
	}
}

.pmi-acasa-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(100deg, var(--pmi-violet-950) 30%, rgb(16 5 34 / 0.82) 65%, rgb(79 23 168 / 0.55) 100%);
}

.pmi-acasa-hero :where(h1, p) {
	color: var(--pmi-text-pe-inchis);
	max-width: 24ch;
}

.pmi-acasa-hero h1 {
	font-size: var(--pmi-text-3xl);
	line-height: var(--pmi-lh-3xl);
	margin-block-end: var(--pmi-sp-5);
}

.pmi-acasa-hero__text {
	font-size: var(--pmi-text-md);
	line-height: 1.6;
	color: var(--pmi-neutral-200);
	max-width: 56ch;
	margin-block-end: var(--pmi-sp-7);
}

.pmi-acasa-hero .pmi-rand-butoane {
	display: flex;
	flex-wrap: wrap;
	gap: var(--pmi-sp-3);
}

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

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

.pmi-acasa-hero .pmi-buton--contur {
	color: var(--pmi-alb);
	border-color: rgb(255 255 255 / 0.5);
}

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

/* --------------------------------------------------------------------------
   2. CIFRELE COMUNITĂȚII
   Toate vin din importul de membri, prin scurtături. Niciuna nu e scrisă de
   mână, deci nu se poate învechi fără să observe cineva.
   -------------------------------------------------------------------------- */
.pmi-cifre {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	inline-size: 100%;
}

.pmi-cifre > li {
	margin: 0;
	padding: var(--pmi-sp-6) var(--pmi-sp-5);
	background-color: var(--pmi-fundal-card);
	border-radius: var(--pmi-raza-lg);
}

/* Fiecare cifră își primește culoarea din paleta PMI. Nu decor gratuit:
   ochiul le citește ca patru lucruri distincte, nu ca o listă. */
.pmi-cifre strong {
	display: block;
	font-size: var(--pmi-text-2xl);
	line-height: var(--pmi-lh-2xl);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-violet-500);
}

.pmi-cifre > li { border-block-start: 4px solid var(--pmi-violet-500); }
.pmi-cifre > li:nth-child(2) { border-block-start-color: var(--pmi-aqua-500); }
.pmi-cifre > li:nth-child(2) strong { color: var(--pmi-aqua-500); }
.pmi-cifre > li:nth-child(3) { border-block-start-color: var(--pmi-tangerine-400); }
.pmi-cifre > li:nth-child(3) strong { color: var(--pmi-tangerine-400); }
.pmi-cifre > li:nth-child(4) { border-block-start-color: var(--pmi-saddle-600); }
.pmi-cifre > li:nth-child(4) strong { color: var(--pmi-saddle-600); }

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

/* --------------------------------------------------------------------------
   3. CERTIFICĂRILE
   -------------------------------------------------------------------------- */
.pmi-grupuri-cert {
	display: grid;
	/* Cele cinci grupe stau pe un rând. Cu `auto-fit` ieșeau 2+2+1, iar ultimul
	   card rămas singur pe rând arată ca o greșeală, nu ca o categorie. */
	grid-template-columns: repeat(5, 1fr);
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	inline-size: 100%;
}

.pmi-grupuri-cert > li {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-3);
	padding: var(--pmi-sp-5);
	background-color: var(--pmi-fundal-card);
	border-radius: var(--pmi-raza-lg);
}

/* Aceleași culori ca formele de pe paginile de certificare: violet pentru PMP,
   albastru pentru CAPM, portocaliu pentru avansate, nisipiu pentru specializări.
   Cine a văzut o pagină de certificare recunoaște codul. */
.pmi-grupuri-cert > li { border-inline-start: 4px solid var(--pmi-aqua-500); }
.pmi-grupuri-cert > li:nth-child(2) { border-inline-start-color: var(--pmi-violet-500); }
.pmi-grupuri-cert > li:nth-child(3) { border-inline-start-color: var(--pmi-saddle-600); }
.pmi-grupuri-cert > li:nth-child(4) { border-inline-start-color: var(--pmi-tangerine-400); }
.pmi-grupuri-cert > li:nth-child(5) { border-inline-start-color: var(--pmi-saddle-600); }

.pmi-grupuri-cert h3 {
	font-size: var(--pmi-text-2xs);
	line-height: var(--pmi-lh-2xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--pmi-text-secundar);
	margin: 0;
}

.pmi-grupuri-cert ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--pmi-sp-2);
}

.pmi-grupuri-cert ul a {
	color: var(--pmi-ink);
	text-decoration: none;
	font-weight: var(--pmi-greutate-accent);
}

.pmi-grupuri-cert ul a:hover {
	color: var(--pmi-violet-500);
}

.pmi-grupuri-cert p {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
	margin: 0;
	max-width: none;
}

/* --------------------------------------------------------------------------
   4. SECȚIUNI PE FUNDAL ALTERNATIV
   -------------------------------------------------------------------------- */
/* Fâșia de membership: violet deschis, ca să iasă din ritmul crem al paginii
   fără să concureze cu antetul. */
.pmi-fasie {
	background-color: var(--pmi-violet-50);
	border-inline-start: 4px solid var(--pmi-violet-500);
	border-radius: var(--pmi-raza-lg);
	padding: var(--pmi-sp-8);
	margin-block: var(--pmi-sp-9);
}

.pmi-fasie > :first-child { margin-block-start: 0; }
.pmi-fasie > :last-child  { margin-block-end: 0; }

/* --------------------------------------------------------------------------
   5. ARTICOLE ȘI EVENIMENTE
   -------------------------------------------------------------------------- */
.pmi-lista-carduri {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	inline-size: 100%;
}

.pmi-lista-carduri > li { margin: 0; }

.pmi-lista-carduri a.pmi-card {
	block-size: 100%;
	gap: var(--pmi-sp-2);
	text-decoration: none;
	border: 1px solid var(--pmi-linie);
	transition: border-color var(--pmi-tranzitie);
}

.pmi-lista-carduri a.pmi-card:hover {
	border-color: var(--pmi-violet-500);
}

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

.pmi-card__titlu {
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
}

.pmi-card__text {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
}

/* Cinci coloane cer lățime. Sub 1100 px trec la trei, apoi la două, ca să nu
   ajungem la carduri de 120 px în care numele certificării se rupe pe trei
   rânduri. */
@media (max-width: 1100px) {
	.pmi-grupuri-cert { grid-template-columns: repeat(3, 1fr); }
	.pmi-lista-carduri { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
	.pmi-cifre { grid-template-columns: repeat(2, 1fr); }
	.pmi-grupuri-cert { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.pmi-grupuri-cert,
	.pmi-lista-carduri { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
	.pmi-acasa-hero { padding: var(--pmi-sp-7) var(--pmi-sp-6); }
	.pmi-acasa-hero :where(h1, p) { max-width: none; }
	.pmi-fasie { padding: var(--pmi-sp-6); }
}

/* Titlul generat de temă („Home") ar dubla mesajul din antet și ar pune un H1
   în plus pe pagină. Antetul propriu conține deja H1-ul. */
.home .entry-header .entry-title { display: none; }


/* --------------------------------------------------------------------------
   6. RITMUL TEXTULUI
   Aceeași regulă ca pe paginile de certificare: text pe toată coloana, aliniat
   la ambele capete, cu despărțire în silabe. Sub 600 px revine la stânga,
   fiindcă pe coloană îngustă justify lărgește spațiile inegal.
   -------------------------------------------------------------------------- */
.home .entry-content > p,
.home .entry-content > ul,
.home .entry-content > ul li,
.home .pmi-fasie p {
	max-width: none;
	text-align: justify;
	hyphens: auto;
	-webkit-hyphens: auto;
}

/* Excepții: textul din antet și cel din carduri rămâne aliniat la stânga.
   Pe blocuri scurte, justify creează goluri vizibile între cuvinte. */
.pmi-acasa-hero p,
.pmi-cifre span,
.pmi-grupuri-cert p,
.pmi-grupuri-cert li,
.pmi-lista-carduri li,
.pmi-card__titlu,
.pmi-card__text {
	text-align: start;
	hyphens: manual;
}

@media (max-width: 600px) {
	.home .entry-content > p,
	.home .entry-content > ul li,
	.home .pmi-fasie p {
		text-align: start;
	}
}


/* --------------------------------------------------------------------------
   7. ARTICOLELE DE PE PRIMA PAGINĂ
   Blocul nativ „Ultimele articole" scoate o listă goală de stil. Îi dăm forma
   de card din restul paginii.

   Fără imagini: niciun articol nu are imagine reprezentativă, iar o imagine
   generică pusă doar ca să existe nu spune nimic despre articol. Când
   articolele primesc imagini proprii, regula de mai jos se completează.
   -------------------------------------------------------------------------- */
.pmi-blog-acasa.wp-block-latest-posts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--pmi-sp-4);
	list-style: none;
	margin: 0;
	padding: 0;
	max-width: none;
	inline-size: 100%;
}

/* Blocul nativ pune `width: calc(33.33% - 1.25em)` pe fiecare element, ceea ce
   într-o grilă înseamnă o treime dintr-o treime. Anulăm lățimea și marginile
   lui și lăsăm grila să împartă spațiul. */
.pmi-blog-acasa.wp-block-latest-posts > li {
	inline-size: auto;
	max-inline-size: none;
	margin: 0;
}

.pmi-blog-acasa > li {
	margin: 0;
	padding: var(--pmi-sp-5);
	background-color: var(--pmi-fundal-card);
	border: 1px solid var(--pmi-linie);
	border-block-start: 4px solid var(--pmi-violet-500);
	border-radius: var(--pmi-raza-lg);
	transition: border-color var(--pmi-tranzitie);
}

.pmi-blog-acasa > li:nth-child(2) { border-block-start-color: var(--pmi-aqua-500); }
.pmi-blog-acasa > li:nth-child(3) { border-block-start-color: var(--pmi-tangerine-400); }

.pmi-blog-acasa > li:hover { border-color: var(--pmi-violet-500); }

.pmi-blog-acasa .wp-block-latest-posts__post-title {
	display: block;
	font-size: var(--pmi-text-md);
	line-height: var(--pmi-lh-md);
	font-weight: var(--pmi-greutate-titlu);
	color: var(--pmi-ink);
	text-decoration: none;
	text-align: start;
	hyphens: manual;
	margin-block-end: var(--pmi-sp-3);
}

.pmi-blog-acasa .wp-block-latest-posts__post-title:hover {
	color: var(--pmi-violet-500);
}

.pmi-blog-acasa .wp-block-latest-posts__post-excerpt {
	font-size: var(--pmi-text-xs);
	line-height: var(--pmi-lh-xs);
	color: var(--pmi-text-secundar);
	margin: 0;
	text-align: start;
	hyphens: manual;
}

@media (max-width: 860px) {
	.pmi-blog-acasa.wp-block-latest-posts { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
	.pmi-blog-acasa.wp-block-latest-posts { grid-template-columns: 1fr; }
}