/**
 * Lista de articole.
 *
 * Învelișul, firimiturile, H1-ul și tipografia vin din `despre.css`.
 * Aici sunt grila și cardul.
 *
 * Valori măsurate pe exportul 1:1 din 11 august *(1440×2404 · 360×3355)*:
 *   container 1344 · 4 coloane · card ~324 · gap 16 · imagine 324×176
 */

/*
 * ⚠️ Containerul e cel OBIȘNUIT, 1344 — nu cei 1118 de pe „Despre noi" și B2B.
 * Măsurat: cardurile pornesc la 48 și se termină la 1391.
 */
.inco-blog__intro {
	margin: 0 auto;
	max-inline-size: 40rem;
	text-align: center;
	text-wrap: balance;
	font-size: var(--dsp-corp-font);
	line-height: var(--dsp-corp-lh);
	font-weight: 500;
	color: var(--dsp-muted);
}

.inco-blog__grila {
	display: grid;
	grid-template-columns: 1fr;
	gap: 32px 16px;
	margin: 0; padding: 0; list-style: none;
}

/* ─────────────────────────────────────────────────────────── cardul ───── */

/*
 * 🔑 Cardul e o cutie de poziționare, nu un link.
 *
 * Linkul e o suprafață întinsă peste tot cardul, cu titlul ca text — deci
 * clicul merge de oriunde, dar un cititor de ecran anunță **titlul**, nu
 * „citește articolul". Textul rămâne selectabil, fiindcă suprafața stă
 * DEDESUBT, nu peste el.
 */
.inco-blog-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-inline-size: 0;
}
.inco-blog-card__link {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: 12px;
}
.inco-blog-card > *:not(.inco-blog-card__link) { position: relative; z-index: 1; pointer-events: none; }

/*
 * Bordura stă pe CASETĂ, nu pe imagine.
 *
 * 🔑 Pusă pe `<img>`, cei 2px de contur ar fi intrat în cei 100% ai imaginii
 * *(`box-sizing: border-box`)*, deci desenul s-ar fi strâns cu un pixel de
 * fiecare parte și raportul n-ar mai fi ieșit exact. Pe casetă, conturul
 * încadrează, nu ciupește.
 */
.inco-blog-card__media {
	inline-size: 100%;
	border: 1px solid var(--dsp-line);
	border-radius: 12px;
	overflow: hidden;
}
/*
 * 🔑 Raportul e FIX și imaginea umple caseta.
 *
 * Pozele articolelor au rapoarte foarte diferite — trei din cele șase importate
 * sunt portrait. Fără raport fix, rândul ar fi arătat ca un gard cu scânduri de
 * înălțimi diferite. Cu `cover`, toate cad la același gabarit; prețul e că un
 * portrait se taie mult, deci pozele se aleg cu asta în minte.
 */
.inco-blog-card__img {
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 324/176;
	object-fit: cover;
	display: block;
}

/*
 * 🔑 Pastila e ACEEAȘI pe card și în antetul articolului — o definiție, două
 * locuri. Culorile vin din categorie, prin `style`, deci regula nu le știe.
 *
 * ⚠️ Pe articol e un LINK către categorie, deci i se declară și `color` pe
 * hover *(altfel o scrie tema)* și i se scoate sublinierea. → §4n
 */
.inco-blog-card__pastila,
.inco-art__pastila {
	align-self: flex-start;
	display: inline-flex; align-items: center;
	block-size: 22px;
	padding-inline: 12px;
	border-radius: 999px;
	font-size: 12px; line-height: 1; font-weight: 600;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.inco-blog-card__titlu {
	margin: 0;
	font-size: var(--dsp-rand-titlu-font);
	line-height: 1.35;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}

.inco-blog-card__text {
	margin: 0;
	font-size: var(--dsp-rand-text-font);
	line-height: var(--dsp-rand-text-lh);
	font-weight: 500;
	color: var(--dsp-muted);
}

/*
 * Minutele și categoria, despărțite de un punct.
 *
 * ⚠️ Punctul e desenat de CSS, între elemente — nu scris în text. Așa, când
 * lipsesc minutele, nu rămâne un punct singur la început de rând.
 */
.inco-blog-card__meta {
	margin: auto 0 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	font-size: 12px; line-height: 16px; font-weight: 500;
	color: var(--dsp-muted);
}
.inco-blog-card__meta > span + span::before { content: '· '; }

.inco-blog-card__cta {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: var(--dsp-rand-text-font);
	line-height: 1;
	font-weight: 600;
	color: var(--dsp-albastru);
}
.inco-blog-card__cta svg { inline-size: 16px; block-size: 16px; display: block; transition: transform .2s ease; }

/* Tot cardul reacționează, deși linkul e o singură suprafață. */
.inco-blog-card:hover .inco-blog-card__titlu { color: var(--dsp-albastru); }
.inco-blog-card:hover .inco-blog-card__cta svg { transform: translateX(3px); }
.inco-blog-card__link:focus-visible {
	outline: 2px solid var(--dsp-albastru);
	outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
	.inco-blog-card__cta svg { transition: none; }
}

/* ────────────────────────────────────────────────── „Vezi mai multe" ──── */

.inco-blog__mai-mult {
	display: flex; justify-content: center;
	margin-block-start: 40px;
}
.inco-blog__gol {
	margin: 40px 0 0;
	text-align: center;
	color: var(--dsp-muted);
}

/* Newsletterul își păstrează lățimea containerului paginii. */
.inco-dsp__news.inco-home { inline-size: 100%; margin-inline: 0; }

/* ───────────────────────────────────────────────────────── lățimile ───── */

@media (min-width: 600px) {
	.inco-blog__grila { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 900px) {
	.inco-blog__grila { grid-template-columns: repeat(4, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGINA UNUI ARTICOL

   Măsurat pe exporturile 1:1 din 11 august *(1440×2940 · 360×3290)*.

   🔑 Coloana de citit are **664** pe desktop și **328** pe telefon — a patra
   lățime din proiect, după 1344, 1118 și 888. Firimiturile, „Articole
   similare" și newsletterul rămân pe cei 1344 obișnuiți, deci pagina are două
   lățimi în același ecran. E intenționat: un rând de text de 1344 e prea lung
   pentru citit, dar un rând de carduri de 664 ar fi prea îngust.
   ═══════════════════════════════════════════════════════════════════════════ */

.inco-art-pagina {
	/*
	 * `min(100% - 32px, 41.5rem)` — nu `clamp()`. Dă exact 328 la 360 *(16 de
	 * fiecare parte)* și se oprește la 664. O funcție mai puțin de verificat,
	 * aceeași formă ca la containerul arhivei.
	 */
	--art-col:       min(100% - 32px, 41.5rem);

	--art-h1-font:   clamp(1.5rem, 1.3333rem + 0.7407vw, 2rem);        /* 24 → 32 */
	--art-h1-lh:     clamp(1.875rem, 1.7083rem + 0.7407vw, 2.375rem);  /* 30 → 38 */
	--art-h2-font:   clamp(1rem, 0.9167rem + 0.3704vw, 1.25rem);       /* 16 → 20 */
	--art-h2-lh:     clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);   /* 24 → 27 */
	--art-corp-font: clamp(0.875rem, 0.8333rem + 0.1852vw, 1rem);      /* 14 → 16 */
	--art-corp-lh:   clamp(1.25rem, 1.2083rem + 0.1852vw, 1.375rem);   /* 20 → 22 */
	--art-meta-font: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);   /* 12 → 14 */
}

.inco-art {
	inline-size: var(--art-col);
	margin-inline: auto;
	margin-block-start: 24px;
}

/* ───────────────────────────────────────────────────────── antetul ───── */

.inco-art__antet {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.inco-art__h1 {
	margin: 12px 0 0;
	font-size: var(--art-h1-font);
	line-height: var(--art-h1-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
	/* Titlul se rupe echilibrat: pe 664 ajunge des la două rânduri. */
	text-wrap: balance;
}

/*
 * Minutele și data, despărțite de un punct DESENAT — nu scris în text.
 * Când lipsește una din ele, nu rămâne un punct singur la început de rând.
 */
.inco-art__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 8px 0 0;
	font-size: var(--art-meta-font);
	line-height: 1.45;
	font-weight: 500;
	color: var(--dsp-muted);
}
.inco-art__meta > span + span::before {
	content: "·";
	margin-inline-end: 6px;
}

/* ───────────────────────────────────────────────────────── imaginea ──── */

/*
 * ⚠️ FĂRĂ bordură, spre deosebire de cardurile din listă — verificat pe
 * export, pixelii trec direct din fundal în fotografie. Cardul are ramă
 * fiindcă stă într-un rând de patru; aici imaginea e singură pe lățime.
 */
.inco-art__media {
	margin: 24px 0 0;
	border-radius: 12px;
	overflow: hidden;
}
.inco-art__img {
	display: block;
	inline-size: 100%;
	block-size: auto;
	aspect-ratio: 328/160;
	object-fit: cover;
}
@media (min-width: 900px) {
	.inco-art__img { aspect-ratio: 664/336; }
}

/* ─────────────────────────────────────────────────────── conținutul ──── */

/*
 * Textul articolului e scris de client în editorul WordPress, deci regulile
 * de aici trebuie să acopere tot ce poate ieși de acolo — nu doar ce e în
 * machetă. Un `<blockquote>` sau o listă nestilizate ar fi apărut cu
 * înfățișarea temei, adică din altă lume.
 */
.inco-art__corp {
	margin-block-start: 24px;
	font-size: var(--art-corp-font);
	line-height: var(--art-corp-lh);
	font-weight: 400;
	color: var(--dsp-ink);
}

.inco-art__corp > *:first-child { margin-block-start: 0; }

.inco-art__corp p { margin: 0 0 8px; }

.inco-art__corp :is(h2, h3, h4) {
	margin: 24px 0 8px;
	font-size: var(--art-h2-font);
	line-height: var(--art-h2-lh);
	font-weight: 600;
	letter-spacing: -0.01em;
	color: var(--dsp-ink);
}
.inco-art__corp h3 { font-size: var(--art-corp-font); line-height: var(--art-corp-lh); }

.inco-art__corp :is(ul, ol) { margin: 0 0 8px; padding-inline-start: 20px; }
.inco-art__corp li { margin-block-end: 4px; }

.inco-art__corp strong, .inco-art__corp b { font-weight: 600; color: var(--dsp-ink); }

/*
 * 🔴 `color` se declară pe hover, chiar dacă rămâne aceeași.
 *
 * Fără ea, `a:hover` din `reset.css`-ul temei duce textul pe `#333366`.
 * A șaptea oară aceeași cauză. → §4n
 */
.inco-art__corp a,
.inco-art__corp a:hover,
.inco-art__corp a:focus {
	color: var(--dsp-albastru);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.inco-art__corp :is(img, figure img) {
	display: block;
	max-inline-size: 100%;
	block-size: auto;
	border-radius: 12px;
}
.inco-art__corp figure { margin: 16px 0; }

.inco-art__corp blockquote {
	margin: 16px 0;
	padding: 12px 16px;
	border-inline-start: 3px solid var(--dsp-albastru);
	background: var(--dsp-surface);
	border-radius: 0 8px 8px 0;
	color: var(--dsp-muted);
}

/* ────────────────────────────────────────────── articole similare ────── */

.inco-art__similare { margin-block-start: var(--dsp-sect-sus); }

.inco-art__similare-titlu {
	margin: 0 0 32px;
	font-size: var(--dsp-h1-font);
	line-height: var(--dsp-h1-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}

/*
 * 🔑 Caruselul e CHIAR cel al produselor — clasele, regulile și JavaScriptul
 * lui. Aici se spune doar CÂTE coloane are, fiindcă `--inco-c` e calculat de
 * container queries croite pe cardul de produs, iar noi vrem patru.
 */
.inco-art__carusel .inco-products__grid {
	--inco-c: 4;
	--inco-gap: 16px;
	gap: 32px 16px;
	margin-block: 0;
	list-style: none;
}

/*
 * Pe telefon: un card lat cât pagina minus 48, deci următorul se vede pe
 * margine. 328 − 48 = 280, iar al doilea începe la 296 — exact ca în machetă.
 * Un card care ar umple tot ecranul n-ar spune că lista continuă.
 *
 * 🔴 Selectorul repetă `.inco-products.is-carusel` ANUME.
 *
 * Prima scriere avea doar `.inco-art__carusel .inco-products__grid` — (0,2,0),
 * iar regula de bază a caruselului e (0,3,0) și declară același
 * `grid-auto-columns`. Deci a mea nu s-a aplicat niciodată: cardurile au ieșit
 * **70px**, adică formula produselor cu patru coloane, îndesată pe un telefon.
 * Măsurat pe pagina livrată, nu presupus. → §4g, a șaptea oară
 */
@media (max-width: 899.98px) {
	.inco-products.is-carusel.inco-art__carusel .inco-products__grid {
		grid-auto-columns: calc(100% - 48px);
	}
}

/*
 * Cardul de articol se oprește la locul lui în carusel, ca cel de produs.
 * Regula stă aici, nu în `product-card.css`, fiindcă e despre cardul NOSTRU.
 */
.inco-products.is-carusel .inco-blog-card { scroll-snap-align: start; }

.inco-art__pastila,
.inco-art__pastila:hover,
.inco-art__pastila:focus {
	text-decoration: none;
	/*
	 * `color` NU se declară aici: vine din `style`, calculat din categorie.
	 * O culoare scrisă în foaie ar bate atributul doar dacă ar fi `!important`
	 * — deci n-ar face nimic, dar ar minți pe cine citește fișierul.
	 */
	filter: none;
}
.inco-art__pastila:hover { filter: brightness(0.96); }