/*
 * Structura noua de pagini (page-perpetuum.php, wrapper .pnew).
 *
 * Fara stil nou: pagina foloseste division.css + about.css. Aici stau DOAR
 * corectiile de grila necesare fiindca sectiunile noi au 2 sau 4 carduri, iar
 * grilele din division.css sunt pe 3 coloane fixe (ar ramane celule goale).
 * Totul e limitat la .pnew -> paginile de divizie existente nu se schimba.
 */

/* Banda verticala din stanga: tema cloneaza acolo eticheta itemului activ din
   meniu (main.js -> .qrt-current-page-title), care se suprapune peste sloganul
   "MERE TREABA!" din style.css. Pe paginile noi pastram doar sloganul.
   Selectorul e pe body (banda e in header, in afara wrapper-ului .pnew). */
.page-template-page-perpetuum .qrt-current-page-title { display: none; }

/* segmente B2B/B2C/B2G (2 carduri), categorii de produse (4), contact, locatii:
   auto-fit => coloanele goale se colapseaza, cardurile umplu randul */
.pnew .division-solutions { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* grupele de produse (carduri foto): 4 pe rand, ca cele 8 carduri sa umple exact
   doua randuri. Implicit .division-prodgrid e auto-fill 230px => 5 coloane si
   ultimul rand rmane pe jumatate gol. */
.pnew .division-prodgrid { grid-template-columns: repeat(4, 1fr); }
.pnew .division-prodcard { min-height: 260px; }

/* Scrim-ul peste fotografie si z-index-ul textului stau acum in division.css,
   ca sa se aplice si pe paginile de produs (page-divizie.php), nu doar aici. */

@media (max-width: 900px) {
	.pnew .division-prodgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
	.pnew .division-prodgrid { grid-template-columns: 1fr; }
}

/* hub /ce-facem: 3 carduri mari care umplu randul (auto-fill lasa o coloana goala) */
.pnew .division-industries { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }

/* carduri hub mai inalte, ca sa aiba prezenta de homepage */
.pnew #pnew-cards .division-industry { min-height: 320px; }

/* hub in stil homepage: grila .phome-divgrid e pe 4 coloane, noi avem 3 carduri
   -> 3 pe rand, cu carduri mai mari (aspect 3/2 e prea plat la 3 coloane) */
.pnew #pnew-cards .phome-divgrid { grid-template-columns: repeat(3, 1fr); gap: 24px; }
.pnew #pnew-cards .phome-divcard { aspect-ratio: 4 / 3; border-radius: 6px; }
.pnew #pnew-cards .phome-divcard__title { font-size: 22px; }
.pnew #pnew-cards .phome-divcard__desc { font-size: 14px; }
@media (max-width: 900px) {
	.pnew #pnew-cards .phome-divgrid { grid-template-columns: 1fr; }
	.pnew #pnew-cards .phome-divcard { aspect-ratio: 16 / 9; }
}

/* banda showroom: sta in container (pe Acasa e in .qrt-section) */
.pnew .phome-showroom { margin-top: 8px; }

/* rand editorial cu imaginea in dreapta ('flip' => true in date). Alternanta
   automata din division.css merge doar cand randurile sunt in aceeasi sectiune;
   cand fiecare rand e sectiunea lui, o setam explicit. */
@media (min-width: 993px) {
	.pnew .division-offer__row.pnew-offer--flip .division-offer__media { order: 2; }
}

/* ---- HERO BANNER panoramic (imaginea e 1922x818 = 2.35:1) ----
   Inaltimea = ~42.5vw, adica exact raportul imaginii: se vede intreaga, fara
   crop, pana la plafonul de 640px pe ecrane foarte late. Mai scund decat
   slider-ul de pe Acasa, cum se potriveste unei panoramice. */
.pnew .pnew-herobanner {
	position: relative;
	line-height: 0;
	background: #28292c;
	height: clamp(300px, 42.5vw, 640px);
}
.pnew .pnew-herobanner img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* etichetele peste cele trei panouri ale imaginii hero_3. Diagonalele verzi sunt
   inclinate, deci randul de sus si cel de jos au coloane diferite: taieturile cad
   la ~46% / ~75% pe marginea de sus si la ~42% / ~72% pe cea de jos. */
.pnew .pnew-herobanner__panels {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	line-height: 1.2;
	background:
		linear-gradient(to bottom, rgba(24,25,27,.62) 0%, rgba(24,25,27,.28) 20%, rgba(24,25,27,0) 42%),
		linear-gradient(to top, rgba(24,25,27,.72) 0%, rgba(24,25,27,.35) 22%, rgba(24,25,27,0) 45%);
}
.pnew .pnew-panels-row { display: grid; }
.pnew .pnew-panels-row--top {
	grid-template-columns: 46% 29% 25%;
	align-items: start;
	padding-top: clamp(18px, 3vw, 38px);
}
.pnew .pnew-panels-row--bottom {
	grid-template-columns: 42% 30% 28%;
	align-items: end;
	padding-bottom: clamp(24px, 4vw, 58px);
}
.pnew .pnew-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 16px;
	text-align: center;
	text-decoration: none;
	color: #fff;
}
/* eticheta lipita de o margine a panoului, in loc de centrata:
   --left  = "Distribuție produse de amenajări" (stanga jos)
   --right = "Execuție lucrări" (dreapta sus) */
.pnew .pnew-panel--left  { align-items: flex-start; text-align: left; }
.pnew .pnew-panel--right { align-items: flex-end;   text-align: right; }
.pnew .pnew-panel--left  .pnew-panel__label::after { left: 0; transform: none; }
.pnew .pnew-panel--right .pnew-panel__label::after { left: auto; right: 0; transform: none; }
/* Retragerile de la marginea coloanei. Stanga = marginea benzii, deci mai mare.
   Dreapta = diagonala verde, care e inclinata: "Execuție lucrări" sta sus, unde
   taietura e cel mai la dreapta, deci are nevoie de mai mult spatiu ca sa nu
   intre peste panoul de deseuri. */
.pnew .pnew-panel--left  { padding-left:  clamp(16px, 5vw, 96px); }
.pnew .pnew-panel--right { padding-right: clamp(16px, 3.5vw, 64px); }
.pnew .pnew-panel__label {
	font-family: "Josefin Sans", sans-serif;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-size: clamp(13px, 1.4vw, 20px);
	color: #fff;
	text-shadow: 0 2px 10px rgba(0,0,0,.45);
	position: relative;
	padding-bottom: 8px;
}
/* liniuta verde sub eticheta, ca la .division-eyebrow--rule */
.pnew .pnew-panel__label::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--accent, #6cbe45);
	transition: width .25s ease;
}
.pnew a.pnew-panel:hover .pnew-panel__label::after { width: 64px; }
.pnew a.pnew-panel:focus-visible { outline: 3px solid var(--accent, #6cbe45); outline-offset: -6px; }
.pnew .pnew-panel__sub {
	font-size: clamp(11px, 1vw, 14px);
	color: rgba(255,255,255,.88);
	text-shadow: 0 1px 8px rgba(0,0,0,.5);
	max-width: 38ch;
}
/* panoul 1 (amenajari) e cel mai lat din imagine: ii lasam cutia mai lata, ca sa
   incapa pe doua randuri ca la celelalte doua panouri. */
.pnew .pnew-panels-row--bottom > .pnew-panel:first-child .pnew-panel__sub { max-width: 52ch; }
.pnew a.pnew-panel:hover .pnew-panel__sub { color: #fff; }

/* mobil: panoramica devine o banda foarte scunda, iar cele trei etichete nu mai
   au loc peste ea -> imaginea se vede intreaga, etichetele dispar (cardurile de
   mai jos spun oricum aceleasi trei lucruri). */
@media (max-width: 768px) {
	.pnew .pnew-herobanner { height: auto; }
	.pnew .pnew-herobanner img { height: auto; }
	.pnew .pnew-herobanner__panels { display: none; }
}

/* ============================================================
   BENTO GRID - Produse (cards style => 'bento')
   ------------------------------------------------------------
   9 carduri egale, 3x3, toate de 300px inaltime. Regula --wide
   (doua coloane) ramane in CSS pentru alte pagini, dar aici nu
   o foloseste niciun card: la 9 carduri ar lasa o celula goala.

     Rand 1   Gresie și faianță | Execuție lucrări | Pardoseli
     Rand 2   Uși | Tapet și fototapet | Profile și plinte
     Rand 3   Textile | Echipamente de salubritate | Borcane și sticle

   Ordinea vizuala = ordinea din inc/pages-perpetuum.php, deci pe
   mobil (o coloana) categoriile prioritare rman primele.
   ============================================================ */

/* container mai larg decat restul paginii, ca grila sa respire. Aceeasi latime
   si pentru banda showroom, ca sa fie aliniata cu cardurile. */
.pnew #pnew-cards .division-container,
.pnew #pnew-showroom .division-container { max-width: 1440px; }

.pnew .pnew-bento {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 300px;
	gap: 24px;
}

/* singurul card mai mare: doua coloane, aceeasi inaltime ca restul */
.pnew .pnew-bento__item--wide { grid-column: span 2; }

/* ---- cardul ---- */
.pnew .pnew-bento__item {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 16px;
	background: var(--division-text, #28292c);
	color: #fff;
	text-decoration: none;
	box-shadow: 0 1px 2px rgba(24,25,27,.06), 0 10px 24px rgba(24,25,27,.07);
	transition: transform .3s ease, box-shadow .3s ease;
}
.pnew a.pnew-bento__item:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(24,25,27,.08), 0 20px 40px rgba(24,25,27,.13);
}
.pnew a.pnew-bento__item:focus-visible {
	outline: 3px solid var(--accent, #6cbe45);
	outline-offset: 3px;
}

/* imaginea umple cardul; zoom discret la hover */
.pnew .pnew-bento__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .3s ease;
}
.pnew a.pnew-bento__item:hover .pnew-bento__img { transform: scale(1.05); }

/* gradient doar pe treimea-jumatatea de jos (~45%), ca textul sa fie lizibil
   pe orice fotografie, inclusiv pe cele deschise */
.pnew .pnew-bento__item::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(24,25,27,.88) 0%, rgba(24,25,27,.55) 22%, rgba(24,25,27,0) 45%);
	transition: background .3s ease;
}
.pnew a.pnew-bento__item:hover::after {
	background: linear-gradient(to top, rgba(24,25,27,.92) 0%, rgba(24,25,27,.62) 30%, rgba(24,25,27,.06) 60%);
}

/* linie verde de accent sus, la hover (aceeasi convenție ca .division-benefit) */
.pnew .pnew-bento__item::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	z-index: 3;
	background: var(--accent, #6cbe45);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .3s ease;
}
.pnew a.pnew-bento__item:hover::before { transform: scaleX(1); }

/* ---- conținutul, aliniat jos-stanga ---- */
.pnew .pnew-bento__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
	padding: 26px 28px;
}
.pnew .pnew-bento__title {
	font-size: clamp(19px, 1.5vw, 24px);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.2px;
	text-shadow: 0 1px 10px rgba(0,0,0,.35);
}
.pnew .pnew-bento__text {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255,255,255,.85);
	max-width: 46ch;
}
.pnew .pnew-bento__more {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-family: "Josefin Sans", sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	font-weight: 800;
	font-size: 12px;
	color: #8bd45f;
}
.pnew .pnew-bento__more i { font-size: 10px; transition: transform .3s ease; }
.pnew a.pnew-bento__item:hover .pnew-bento__more i { transform: translateX(4px); }

/* culoarea de link a temei ar suprascrie albul pe :hover */
.pnew a.pnew-bento__item,
.pnew a.pnew-bento__item:hover,
.pnew a.pnew-bento__item:focus,
.pnew a.pnew-bento__item:hover .pnew-bento__title,
.pnew a.pnew-bento__item:focus .pnew-bento__title { color: #fff; }
.pnew a.pnew-bento__item:hover .pnew-bento__text { color: rgba(255,255,255,.9); }

/* ---- tableta: 2 coloane; cardul lat ocupa randul intreg ---- */
@media (max-width: 992px) {
	.pnew .pnew-bento {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 260px;
	}
}
/* ---- mobil: o coloana, fara span ---- */
@media (max-width: 700px) {
	.pnew .pnew-bento {
		grid-template-columns: 1fr;
		grid-auto-rows: 230px;
		gap: 16px;
	}
	.pnew .pnew-bento__item--wide { grid-column: auto; }
}

/* key accounts: titlul e la stanga, deci si randul de logo-uri porneste din
   stanga (.division-brands e centrat, fiindca pe paginile de divizie sta sub un
   titlu centrat). Spatiu peste, ca sa se desprinda de text. */
.pnew .division-brands { justify-content: flex-start; margin-top: 34px; }

/* branduri si parteneri: logo-uri un pic mai mari decat pe Acasa
   (homepage.css: 65px / slide de 90px) */
.pnew .qrt-brands-slider .swiper-slide { min-height: 120px; }
.pnew .qrt-brands-slider .swiper-slide img { max-height: 90px; }

/* Secțiunea de formular: .division-contactgrid--single are max-width 560px in
   division.css (pentru formularul ingust de pe paginile de divizie). Aici
   formularul e singurul conținut al secțiunii, deci il lasam pe toata latimea
   containerului, iar câmpurile stau doua pe rand. */
.pnew #pnew-form .division-contactgrid--single { max-width: none; }

/* harta locatiilor: refoloseste cadrul de PDF (.division-docview) dar mai scunda */
.pnew .pnew-map .division-docview__frame { height: min(70vh, 600px); }

/* .div-cardbtn creste gap-ul la hover (6px -> 10px). Pe etichetele lungi
   (ex. "www.utilaje-salubritate.ro") nu mai incape si textul sare pe 2 randuri,
   deci creste si inaltimea intregului rand de carduri. Fixam latimea si mutam
   animatia pe sageata - acelasi efect, fara reflow. */
.pnew .div-cardbtn,
.pnew .div-cardbtn:hover { gap: 6px; }
.pnew .div-cardbtn span { transition: transform .2s ease; }
.pnew .div-cardbtn:hover span { transform: translateX(4px); }

/* Butoanele unui rand editorial stau pe acelasi rand. Marginea de sus era pe
   `.division-highlights + .div-btn`; butoanele au acum un wrapper, deci relatia
   de frati s-a mutat pe el. */
.pnew .division-offer__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pnew .division-highlights + .division-offer__actions,
.pnew .division-offer__text + .division-offer__actions { margin-top: 28px; }

/* Harta apare IN LOCUL imaginii, la fel de mare: e poziționata absolut peste
   caseta media, care isi ia dimensiunea din imagine (aspect-ratio 4/3 din
   division.css). Tranzitie incrucisata intre cele doua. */
.pnew .division-offer__media { position: relative; }
.pnew .division-offer__media img { transition: opacity .4s ease; }
.pnew .pnew-mapview {
	position: absolute; inset: 0;
	opacity: 0; visibility: hidden;
	border-radius: var(--division-radius); overflow: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.pnew .pnew-mapview iframe { display: block; width: 100%; height: 100%; border: 0; }
.pnew .division-offer__row.is-map-open .pnew-mapview { opacity: 1; visibility: visible; }
.pnew .division-offer__row.is-map-open .division-offer__media img { opacity: 0; }

/* Etichetele "Segment B2B" / "Segment B2C" un pic mai mari decat restul
   eyebrow-urilor (13px in division.css). Tintim prin id-urile secțiunilor, deci
   celelalte eyebrow-uri din pagina rmn neschimbate. */
.pnew--amenajari #amenajari-b2b > .division-container > .division-eyebrow,
.pnew--amenajari #amenajari-b2c > .division-container > .division-eyebrow {
	font-size: 15px; letter-spacing: 2.2px;
}

/* ==========================================================================
   ZONA DE BRANDURI - DOAR PE /amenajari/ (.pnew--amenajari)
   Trei grupuri, in ordine: branduri partenere (grila de logo-uri) ->
   brandurile noastre (text + 2 carduri) -> retaileri DIY (grila de logo-uri).
   Tot ce urmeaza e scopat pe clasa de pagina, ca celelalte pagini care
   folosesc acelasi template sa rmna neschimbate.
   ========================================================================== */

/* --- 1. branduri partenere: banda de logo-uri. Stilul componentei sta in
   assets/logo-marquee.css, fiindca e folosita si pe Acasa. Aici doar spatiul. --- */
.pnew .logo-marquee { margin-top: 28px; }

/* --- 3. retaileri DIY: carduri de logo, 4 / 3 / 2 coloane.
   Rescriem flex-ul centrat din division.css. --- */
.pnew--amenajari .division-brand {
	display: flex; align-items: center; justify-content: center;
	height: 130px; padding: 18px;
	background: #fff;
	border: 1px solid var(--division-border);
	border-radius: 5px;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pnew--amenajari .division-brand:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 28px rgba(24,25,27,.11);
	border-color: #d9dcdd;
}
/* Toate logo-urile gri, si la hover - altfel Hornbach iese portocaliu lang
   restul. Ultimele doua selectoare anuleaza hover-ul din division.css.
   grayscale + opacity .5 peste cardul alb => negrul din logo se compune in
   rgb(127,127,127) = #7f7f7f, tonul cerut. Nu folosim umplere plata (mask sau
   contrast(0)) fiindca hornbach.jpg si brick.jpg au fundal opac: ar deveni
   dreptunghiuri gri, nu logo-uri. */
.pnew--amenajari .division-brand img,
.pnew--amenajari .division-brand img:hover,
.pnew--amenajari .division-brand a:focus-visible img {
	max-width: 100%; max-height: 62px;
	width: auto; height: auto;
	object-fit: contain;
	filter: grayscale(100%); opacity: .5;
}
/* focus vizibil daca logo-urile devin linkuri */
.pnew--amenajari .division-brand a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }

.pnew--amenajari .division-brands {
	display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
	margin-top: 28px;
}

@media (min-width: 768px) {
	.pnew--amenajari .division-brands { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1024px) {
	.pnew--amenajari .division-brands { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 767px) {
	.pnew--amenajari .division-brand { height: 100px; padding: 14px; }
	.pnew--amenajari .division-brand img { max-height: 48px; }
}

/* --- 2. brandurile noastre: intro pe toata latimea, cardurile pe un rand dedesubt.
   Doua zone (text stanga / carduri dreapta) lasau cardurile la ~280px, adica textul
   pe 6-9 randuri si gol in josul cardurilor scurte. Pe toata latimea cardurile ajung
   la ~355px si textul intra in 3-4 randuri. --- */
/* Banda verde merge pe toata latimea ecranului, ca benzile gri din tema
   (.division-section--alt), iar continutul rmne in .division-container - deci
   titlul si cardurile se aliniaza exact cu secțiunile de deasupra si dedesubt.
   Inainte, fundalul era pe cutia interioara si impingea tot conținutul cu 44px. */
.pnew--amenajari .pnew-ownbrands-section {
	background: linear-gradient(135deg, #f2f8ee 0%, #eaf4e4 100%);
	border-top: 1px solid #dceace; border-bottom: 1px solid #dceace;
}
.pnew--amenajari .pnew-ownbrands { padding: 0; background: none; border: 0; border-radius: 0; }
.pnew--amenajari .pnew-ownbrands__intro { max-width: 760px; margin-bottom: clamp(24px, 3vw, 34px); }
.pnew--amenajari .pnew-ownbrands__intro .division-title { margin-bottom: 14px; }
.pnew--amenajari .pnew-ownbrands__intro p { margin: 0; font-size: 16px; line-height: 1.65; }
/* fundalul verde sta pe secțiune, deci aici rmne doar grila de carduri
   (homepage.css pune padding + fundal pe .phome-ownbrands, le anulam) */
.pnew--amenajari .phome-ownbrands {
	grid-template-columns: 1fr; gap: 20px;
	padding: 0; background: none; border: 0; border-radius: 0;
}
/* cardul: banda de logo sus (inaltime fixa, cu linie despartitoare), text dedesubt.
   Logo-urile vin la rezolutii diferite (artgreso.png = 600x203, Atria/Profiline
   de pe CDN la 200px inaltime), deci le plafonam la 44px ca sa arate egale. */
.pnew--amenajari .phome-ownbrand { padding: 0; gap: 0; }
.pnew--amenajari .phome-ownbrand__logowrap {
	justify-content: center; width: 100%;
	height: 88px; padding: 18px;
	border-bottom: 1px solid var(--division-border);
}
/* Toate trei sunt lockup-uri orizontale de ~3:1 (artgreso.png = 600x203), deci
   plafonarea la 44px le aduce pe toate la ~130px latime. */
.pnew--amenajari .phome-ownbrand__logo { max-height: 44px; max-width: 170px; }
.pnew--amenajari .phome-ownbrand__wordmark { font-size: 26px; }
.pnew--amenajari .phome-ownbrand__desc {
	padding: 22px clamp(20px, 2vw, 26px) 26px;
	font-size: 15px; line-height: 1.6;
}

@media (min-width: 640px) {
	.pnew--amenajari .phome-ownbrands { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
	.pnew--amenajari .phome-ownbrands { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   CARIERE
   ------------------------------------------------------------
   Doua componente noi: banda alba de valori care intra peste
   hero ('heroStrip') si cardurile de post ('jobs'). Restul
   paginii foloseste componentele existente (hero, intro,
   contoare, CTA final).
   ============================================================ */

.pnew .pnew-strip-section { position: relative; z-index: 3; margin-top: -70px; }
.pnew .pnew-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 24px;
	padding: 34px 30px;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(24,25,27,.06), 0 18px 40px rgba(24,25,27,.10);
}
.pnew .pnew-strip .division-solution { text-align: center; }
@media (max-width: 992px) {
	.pnew .pnew-strip-section { margin-top: 24px; }
}

/* carduri de post: anuntul de angajare (imagine verticala) + datele postului */
.pnew .pnew-jobs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 24px;
	margin-top: 32px;
}
.pnew .pnew-job {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(24,25,27,.06), 0 10px 24px rgba(24,25,27,.07);
	transition: transform .3s ease, box-shadow .3s ease;
}
.pnew .pnew-job:hover {
	transform: translateY(-4px);
	box-shadow: 0 1px 2px rgba(24,25,27,.08), 0 20px 40px rgba(24,25,27,.13);
}
/* anuntul e format A4: il aratam intreg (contain), pe fond inchis */
.pnew .pnew-job__media {
	display: block;
	aspect-ratio: 3 / 4;
	background: #28292c;
}
.pnew .pnew-job__media img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pnew .pnew-job__body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: 22px 24px 26px;
}
.pnew .pnew-job__title { margin: 0; font-size: 20px; line-height: 1.25; }
.pnew .pnew-job__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 13px;
	opacity: .75;
}
.pnew .pnew-job__meta i { margin-right: 7px; color: var(--accent, #6cbe45); }
.pnew .pnew-job__text { margin: 0; font-size: 14px; }

/* placeholder cat timp postul nu are anunt/fotografie */
.pnew .pnew-job__media--empty {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eceef0;
	color: #b3b8bf;
	font-size: 40px;
}

/* ============================================================
   COLABOREAZĂ CU NOI (/colaboreaza-cu-noi/)
   ------------------------------------------------------------
   Pagina foloseste componentele existente (hero, banda alba de
   valori, carduri pe icon, benefits, banda de logo-uri, formular
   CF7, banda verde de CTA). Aici stau doar:
     corectiile specifice paginii - scopate pe
        .pnew--colaboreaza-cu-noi, ca sa nu atinga /cariere/,
        /amenajari/, /unde-suntem/ etc.
   ============================================================ */

/* --- 1. Hero: pe mobil pastram fotografia (implicit division.css o ascunde).
       Contrastul e asigurat de un scrim vertical peste imagine. --- */
@media (max-width: 768px) {
	.pnew--colaboreaza-cu-noi .division-hero.has-bg {
		background-image: var(--hero-bg) !important;
		background-position: center bottom !important;
		background-size: cover;
	}
	.pnew--colaboreaza-cu-noi .division-hero__overlay {
		display: block;
		background: linear-gradient(180deg, rgba(244,246,245,.97) 0%, rgba(244,246,245,.9) 52%, rgba(244,246,245,.62) 100%);
	}
	.pnew--colaboreaza-cu-noi .division-hero { padding-bottom: clamp(120px, 34vw, 200px); }
}

/* --- 2. Formularul, elementul central al paginii: card mai lat si centrat.
       Pagina are doar hero + formular, deci sectiunea primeste fundalul gri
       deschis al site-ului, ca sa se desprinda cardul alb. --- */
.pnew--colaboreaza-cu-noi #pnew-form { background: var(--division-surface, #f7f8f8); }
.pnew--colaboreaza-cu-noi #pnew-form .division-contactgrid--single { max-width: 960px; margin-inline: auto; }
.pnew--colaboreaza-cu-noi #pnew-form .division-form {
	padding: clamp(26px, 3.4vw, 44px);
	border-radius: 18px;
	box-shadow: 0 1px 2px rgba(24,25,27,.06), 0 18px 40px rgba(24,25,27,.08);
}
/* titlul sectiunii centrat deasupra cardului (in rest titlurile sunt aliniate stanga) */
.pnew--colaboreaza-cu-noi #pnew-form .division-eyebrow { text-align: center; }
.pnew--colaboreaza-cu-noi #pnew-form .division-title { text-align: center; padding-left: 0; border-left: 0; margin-bottom: 14px; }
/* 'max-width' e inline pe paragraf, de aceea !important */
.pnew--colaboreaza-cu-noi #pnew-form .division-about__text {
	max-width: 640px !important;
	margin: 0 auto 34px;
	text-align: center;
}

/* --- 3. Starile formularului CF7: eroare pe câmp, mesaj de raspuns, loading.
       Pluginul nu aduce stiluri proprii pentru ele. --- */
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form .wpcf7-not-valid { border-color: #d63638; }
.pnew--colaboreaza-cu-noi .division-form .wpcf7-not-valid-tip {
	display: block; margin-top: 6px;
	font-size: 13px; font-weight: 600; color: #d63638;
}
.pnew--colaboreaza-cu-noi .division-form .wpcf7-response-output {
	margin: 20px 0 0 !important;
	padding: 14px 18px !important;
	border-width: 1px !important;
	border-radius: 8px;
	font-size: 15px; line-height: 1.5;
	color: var(--division-text, #28292c);
}
.pnew--colaboreaza-cu-noi .division-form form.sent .wpcf7-response-output { border-color: var(--accent, #6cbe45); background: #f2f8ee; }
.pnew--colaboreaza-cu-noi .division-form form.invalid .wpcf7-response-output,
.pnew--colaboreaza-cu-noi .division-form form.unaccepted .wpcf7-response-output,
.pnew--colaboreaza-cu-noi .division-form form.spam .wpcf7-response-output,
.pnew--colaboreaza-cu-noi .division-form form.failed .wpcf7-response-output { border-color: #d63638; background: #fdf1f1; }
/* trimitere in curs: butonul devine inactiv, spinner-ul CF7 langa el */
.pnew--colaboreaza-cu-noi .division-form form.submitting input[type="submit"] { opacity: .6; pointer-events: none; }
.pnew--colaboreaza-cu-noi .division-form .wpcf7-spinner { margin: 0 0 0 14px; vertical-align: middle; }
/* acordul GDPR: separat vizual de câmpuri */
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form .wpcf7-acceptance { display: block; margin-top: 4px; }
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form .wpcf7-acceptance label { line-height: 1.55; }
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form .wpcf7-acceptance a { color: var(--accent, #6cbe45); text-decoration: underline; }

/* zone de atingere de minimum 44px pe toate controalele */
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form input[type="text"],
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form input[type="email"],
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form input[type="tel"],
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form select { min-height: 46px; }
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form input[type="submit"] { min-height: 48px; }
@media (max-width: 576px) {
	.pnew--colaboreaza-cu-noi .division-form .wpcf7-form input[type="submit"] { width: 100%; }
}

/* label-ul imbraca inputul (asociere implicita), deci textul introdus ar mosteni
   font-weight-ul etichetei - il aducem inapoi la normal */
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form label input,
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form label select,
.pnew--colaboreaza-cu-noi .division-form .wpcf7-form label textarea { font-weight: 400; }

/* banda de introducere: aliniata la stanga, ca restul sectiunilor (.division-container),
   nu centrata ca pe homepage. Padding-ul de 24px al containerului + 32px pentru linia
   verde sunt deja in .phome-about-section / .phome-about. */
.pnew .phome-about { margin-left: 0; padding-left: 19px; } /* 19px = 3px bordura + 16px padding de la .division-title */