/*
 * PROJECTED – amit az Elementor nem tud.
 *
 * A színek és a betűk a Kitben vannak (Webhely beállításai → Globális…), ide
 * csak az kerül, amit vezérlőkkel nem lehet kifejezni. Minden osztály a
 * widget „CSS-osztályok” mezőjéből jön, tehát a szerkesztőben is látszik,
 * melyik elem melyik szabályt kapja.
 */

/* ── Nyitó kollázs ────────────────────────────────────────────────────────
 * A hero: óriási „PROJECTED” névlogó, mögötte/előtte egymást átfedő kisképek.
 * Az átfedés abszolút pozicionálás, ezt az Elementor nem adja vezérlőként.
 */
.pj-hero {
	position: relative;
	overflow: hidden;
}

.pj-hero__nev {
	position: relative;
	z-index: 2;
	pointer-events: none;
	white-space: nowrap;
}

/* A kisképek a névlogó alá/fölé csúsznak. A pj-kep--N osztályok adják a helyet. */
.pj-hero__kepek {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pj-hero__kepek .elementor-widget-image {
	position: absolute;
	margin: 0;
}

.pj-hero__kepek img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * A négy kiskép a névlogó köré rendeződik: kettő fent, kettő lent, hogy a
 * középen futó "PROJECTED" sávja szabadon maradjon és olvasható legyen.
 * A méretek százalékban vannak, tehát a kollázs együtt nő a képernyővel.
 */
.pj-kep--1 { top: 2%;  left: 3%;   width: 16%; aspect-ratio: 3/4; }
.pj-kep--2 { top: 58%; left: 14%;  width: 21%; aspect-ratio: 4/3; }
.pj-kep--3 { top: 6%;  left: 63%;  width: 14%; aspect-ratio: 3/4; }
.pj-kep--4 { top: 55%; left: 62%;  width: 24%; aspect-ratio: 16/10; }

/* 900 px alatt a kollázs szétesne: a képek egyszerű rácsba állnak vissza. */
@media (max-width: 900px) {
	.pj-hero__kepek {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
		margin-top: 32px;
	}
	.pj-hero__kepek .elementor-widget-image {
		position: static;
		width: auto !important;
	}
	.pj-kep--1, .pj-kep--2, .pj-kep--3, .pj-kep--4 { aspect-ratio: 4/3; }
	.pj-hero__nev { white-space: normal; }
}

/* ── Projekt-sor ──────────────────────────────────────────────────────────
 * Bal oldalt jobbra zárt adatoszlop, középen nagy kép, jobbra a leírás.
 * A big.dk-s minta szerint (a specifikáció 7. oldala).
 */
.pj-projekt__adat {
	text-align: right;
}

/* A „MÉRET / KATEGÓRIA / FELADAT” címkék: apró, ritkított verzál. */
.pj-cimke .elementor-heading-title,
.pj-cimke {
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* Az adat és a fölötte lévő címke közé nem kell a Kit alap 20 px-e. */
.pj-projekt__adat .elementor-widget:not(:first-child) {
	margin-top: 0;
}

@media (max-width: 900px) {
	.pj-projekt__adat {
		text-align: left;
	}
}

/* ── Szolgáltatás-csempe ──────────────────────────────────────────────────
 * Fotó háttér + sötétítés, a szöveg fölötte. A sötétítés azért CSS, mert
 * az Elementor háttér-átfedése a konténer teljes tartalmát halványítaná.
 */
.pj-csempe {
	position: relative;
	overflow: hidden;
}

.pj-csempe::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.30) 0%, rgba(20, 20, 20, 0.72) 100%);
	transition: background 0.35s ease;
	z-index: 0;
}

.pj-csempe:hover::before {
	background: linear-gradient(180deg, rgba(20, 20, 20, 0.42) 0%, rgba(20, 20, 20, 0.82) 100%);
}

.pj-csempe > .e-con-inner,
.pj-csempe > .elementor-widget {
	position: relative;
	z-index: 1;
}

/* ── Blog-kártya ──────────────────────────────────────────────────────────
 * A benoy.com-os minta: kép, dátum, komoly címsor, kivonat, „Tovább”.
 *
 * A stílus itt van és nem widget-vezérlőben: az Elementor archívum-skinjének
 * vezérlőnevei verziónként változnak, ezek az osztálynevek viszont stabilak.
 */
.pj-cikkracs .elementor-post__thumbnail img {
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
}

.pj-cikkracs .elementor-post__card,
.pj-cikkracs .elementor-post {
	background: transparent;
}

/*
 * A mintán (benoy.com/news) a dátum a cím FÖLÖTT áll, az Elementor klasszikus
 * skinje viszont alá teszi. A sorrendet a widget nem engedi átállítani, ezért
 * flex-order: a szövegdoboz oszlop-flexbox lesz, és a dátum előrekerül.
 */
.pj-cikkracs .elementor-post__text {
	display: flex;
	flex-direction: column;
}

.pj-cikkracs .elementor-post__meta-data { order: -1; }

/* Dátum: apró, ritkított verzál – ugyanaz a nyelv, mint a projekt-címkéké. */
.pj-cikkracs .elementor-post__meta-data {
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--e-global-color-pjhalvany);
	margin-bottom: 10px;
}

.pj-cikkracs .elementor-post__title {
	margin-bottom: 10px;
}

.pj-cikkracs .elementor-post__title a {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--e-global-color-primary);
}

.pj-cikkracs .elementor-post__title a:hover {
	color: var(--e-global-color-accent);
}

.pj-cikkracs .elementor-post__excerpt p {
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.7;
	color: var(--e-global-color-text);
}

.pj-cikkracs .elementor-post__read-more {
	font-family: Inter, system-ui, sans-serif;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--e-global-color-accent);
}

/* ── Apróságok ────────────────────────────────────────────────────────────*/

/* A Hello Elementor alap h1-e a bejegyzésekben túl nagy a mi léptékünkhöz. */
.pj-vekony {
	font-weight: 300;
}

/* Vékony elválasztó vonal, amit több szekció is használ. */
.pj-vonal {
	border-top: 1px solid var(--e-global-color-pjvonal);
}

/* Fluent Forms: a saját dobozstílusát levesszük, hogy az oldalhoz simuljon. */
.pj-urlap .ff-el-group { margin-bottom: 14px; }

.pj-urlap .ff-el-form-control {
	border: 1px solid var(--e-global-color-pjvonal);
	border-radius: 0;
	padding: 14px 16px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	background: #fff;
}

.pj-urlap .ff-el-form-control:focus {
	border-color: var(--e-global-color-primary);
	box-shadow: none;
	outline: none;
}

.pj-urlap .ff-btn-submit {
	background: var(--e-global-color-primary);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 15px 34px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.10em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.25s ease;
}

.pj-urlap .ff-btn-submit:hover {
	background: var(--e-global-color-pjbronz);
}

/* ── Demján Sándor Program: kötelező támogatói blokk a láblécben ──────────── */

/*
 * A logósor beágyazott konténer, az Elementor pedig minden konténernek 100%
 * szélességet ad – ettől a logók új sorba estek a mondat alá. Tartalomra
 * húzzuk, így a `space-between` a blokk két szélére állítja a két elemet.
 *
 * KÉT BUKTATÓ egy szelektorban:
 *  - NEM gyerek-, hanem leszármazott-szelektor kell. A `boxed` konténer egy
 *    `.e-con-inner` burkolót tesz a tartalma köré, tehát a `.pj-dsp` osztály
 *    és a logósor közé beékelődik egy elem – a `>` sosem talált volna.
 *  - Két osztály kell, mert az Elementor `.e-con{width:var(--width)}` szabályát
 *    csak nagyobb fajsúllyal lehet biztosan verni, betöltési sorrendtől
 *    függetlenül.
 */
.pj-dsp .pj-dsp-logok {
	width: auto;
}