/**
 * Parteneriate B2B — DOAR bucățile noi.
 *
 * Blocurile de text+imagine, rândurile numerotate, firimiturile, containerele
 * și tipografia vin din `despre.css`: sunt aceleași componente, cu aceleași
 * clase. Aici stau acordeonul, cardurile și formularul.
 *
 * Valori măsurate pe exporturile 1:1 din 11 august *(1440×4458 · 360×5104)*.
 */

/* ─────────────────────────────────────────── întrebări frecvente ───────── */

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

/*
 * ⚠️ Acordeonul are lățimea LUI — 888, nu 1118. Măsurat: 276 → 1163, centrat
 * pe 1440. E a treia lățime din pagină, și e intenționată: o întrebare citită
 * pe un rând de 1118 ar avea prea mult drum până la semnul din dreapta.
 */
.inco-b2b-faq__lista {
	inline-size: min(100%, 55.5rem);   /* 888 */
	margin-inline: auto;
	display: flex; flex-direction: column;
	/*
	 * ⚠️ 16 între întrebări, 8 între întrebare și răspunsul EI. Măsurat pe
	 * export: 1365→1374 e 8, 1427→1444 e 16. Aveam 8 peste tot, deci răspunsul
	 * părea lipit de întrebarea următoare — semnalat de Seba.
	 */
	gap: 16px;
}

/*
 * 🔴 `<details>` NU poartă nicio ramă.
 *
 * Aveam bordura, fundalul și raza pe el — și, cât e închis, arată corect. Dar
 * `<details>` conține și răspunsul: la deschidere, rama lui creștea și le
 * înconjura pe amândouă, iar răspunsul își avea și el bordura lui **înăuntru**.
 * Ieșeau două cutii concentrice acolo unde macheta are două cutii ALĂTURATE.
 *
 * 🔑 Cutia se pune pe ce se vede, nu pe ce grupează. `<details>` grupează;
 * întrebarea și răspunsul se văd — deci ele au ramă.
 */
.inco-b2b-faq__item {
	background: none;
	border: 0;
	border-radius: 0;
}

/*
 * ⚠️ Regula asta a fost odată ștearsă din greșeală, mutând rama de pe
 * `<details>` pe ea: am înlocuit o bucată de fișier fără să mă uit ce mai era
 * înăuntru, iar înăuntru era chiar așezarea. Rezultatul, văzut de Seba:
 * întrebarea și semnul lipite la stânga, cutia mai înaltă, textul sus.
 * → **o ștergere pe interval se citește înainte, nu după.**
 */
.inco-b2b-faq__intrebare {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-block-size: 54px;
	padding: 8px 20px;
	cursor: pointer;
	list-style: none;

	background: var(--dsp-surface);
	border: 1px solid var(--dsp-line);
	border-radius: 8px;

	/* 18 la 1440, măsurat pe export — nu 20, cât are titlul rândurilor. */
	font-size: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}

.inco-b2b-faq__intrebare::-webkit-details-marker { display: none; }
.inco-b2b-faq__intrebare::marker { content: ''; }

/*
 * Semnul „+" / „×", din două linii.
 *
 * 🔑 Desenat, nu scris. Un „+" de text are altă grosime și altă poziție în
 * fiecare font, iar „×" nu se aliniază niciodată cu el. Așa, cele două stări
 * sunt același desen rotit — deci se pot și anima.
 */
/* 14×14 și ALBASTRU — măsurat pe export. Aveam 16 și bleumarinul textului. */
.inco-b2b-faq__semn {
	position: relative; flex: 0 0 14px;
	inline-size: 14px; block-size: 14px;
	color: var(--dsp-albastru);
}
.inco-b2b-faq__semn::before,
.inco-b2b-faq__semn::after {
	content: ''; position: absolute; inset-block-start: 50%; inset-inline-start: 0;
	inline-size: 14px; block-size: 1.5px; border-radius: 2px;
	background: currentColor;
	transition: transform .2s ease, opacity .2s ease;
}
.inco-b2b-faq__semn::after { transform: rotate(90deg); }
.inco-b2b-faq__item[open] .inco-b2b-faq__semn::before { transform: rotate(45deg); }
.inco-b2b-faq__item[open] .inco-b2b-faq__semn::after { transform: rotate(-45deg); }

/*
 * Răspunsul e o CUTIE SEPARATĂ sub întrebare, cum e în machetă — nu o
 * prelungire a ei. De aia are bordură proprie și margine de 8, exact ca golul
 * dintre două întrebări.
 */
.inco-b2b-faq__raspuns {
	/* Cutie separată, la 8 sub întrebare. Nu mai trage de marginile părintelui:
	   părintele n-are ramă, deci n-are ce compensa. */
	margin: 8px 0 0;
	padding: 16px 20px;
	border: 1px solid var(--dsp-line);
	border-radius: 8px;
	background: var(--dsp-surface);
	font-size: var(--dsp-rand-text-font);
	line-height: var(--dsp-rand-text-lh);
	font-weight: 500;
	color: var(--dsp-muted);
}

/*
 * Deschiderea și închiderea, animate.
 *
 * 🔑 `<details>` nu poate anima nimic din oficiu: conținutul închis e scos din
 * randare, iar `display: none` nu se tranzitează. `::details-content` împreună
 * cu `interpolate-size` rezolvă exact asta — sunt singurele care pot anima o
 * înălțime „auto".
 *
 * ⚠️ Unde nu sunt suportate *(azi: Firefox, Safari)*, regulile astea sunt pur
 * și simplu ignorate, iar acordeonul se deschide instant — adică exact cum
 * făcea înainte. Nimic nu se strică; doar animația lipsește.
 */
@supports (interpolate-size: allow-keywords) {
	:root { interpolate-size: allow-keywords; }
}

.inco-b2b-faq__item::details-content {
	block-size: 0;
	overflow: hidden;
	opacity: 0;
	transition: block-size .28s ease, opacity .2s ease, content-visibility .28s;
	transition-behavior: allow-discrete;
}
.inco-b2b-faq__item[open]::details-content {
	block-size: auto;
	opacity: 1;
}

/* Cine nu vrea mișcare, n-o primește. */
@media (prefers-reduced-motion: reduce) {
	.inco-b2b-faq__item::details-content,
	.inco-b2b-faq__semn::before,
	.inco-b2b-faq__semn::after { transition: none; }
}

/* ────────────────────────────────────── cele trei carduri de beneficii ─── */

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

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

.inco-b2b-card {
	display: flex; flex-direction: column;
	gap: 16px;
	min-block-size: 13.25rem;   /* 212 */
	/* Padding 32, ca la rândurile numerotate — măsurat: cercul începe la 33. */
	padding: 32px;
	background: var(--dsp-surface);
	border: 1px solid var(--dsp-line);
	border-radius: 12px;
}
.inco-b2b-card__nr {
	font-size: var(--dsp-rand-text-font);
	line-height: 1;
	font-weight: 500;
	color: var(--dsp-muted);
}
/* Iconița stă într-un cerc, ca în machetă — 48, cu desenul de 24 în mijloc. */
.inco-b2b-card__icon {
	display: inline-flex; align-items: center; justify-content: center;
	/* 56, măsurat pe export — iconița exportată are 44 și stă centrată în el. */
	inline-size: 56px; block-size: 56px;
	border-radius: 50%;
	background: var(--blue-card-fill-default, #E8F8FF);
	color: var(--dsp-ink);
}
.inco-b2b-card__icon svg { inline-size: 44px; block-size: 44px; display: block; }
.inco-b2b-card__titlu {
	margin: auto 0 0;
	font-size: var(--dsp-rand-titlu-font);
	line-height: var(--dsp-rand-titlu-lh);
	font-weight: 600;
	letter-spacing: -0.02em;
	color: var(--dsp-ink);
}

/*
 * 🔑 Cardul evidențiat e o STARE, nu o poziție. Bifa se pune pe cardul care
 * trebuie, din admin — deci un al patrulea card nu mută evidențierea aiurea.
 */
.inco-b2b-card.is-evidentiat {
	background: var(--dsp-albastru);
	border-color: var(--dsp-albastru);
}
.inco-b2b-card.is-evidentiat .inco-b2b-card__titlu,
.inco-b2b-card.is-evidentiat .inco-b2b-card__nr { color: var(--pure-white, #fff); }
.inco-b2b-card.is-evidentiat .inco-b2b-card__nr { opacity: .75; }
.inco-b2b-card.is-evidentiat .inco-b2b-card__icon {
	background: rgba(255, 255, 255, .18);
	color: var(--pure-white, #fff);
}

/* ─────────────────────────────────────────────── formularul de contact ─── */

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

/* ───────────────────────────────────────────────────────── de la 900px ─── */

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

	.inco-b2b-faq__intrebare { padding-inline: 24px; min-block-size: 56px; }
	.inco-b2b-faq__raspuns { padding-inline: 24px; }

}