/*!
 * VDTA Design — az 1%-os támogatási blokk stílusa ([vdta_ado1])
 *
 * Színpaletta: KIZÁRÓLAG a meglévő márkaszínek — #012c6d, #155081, #D80100,
 * #CE2525, #F0337A, #0FD6D9, valamint a szövegszürkék (#212121, #404040)
 * és a világos hátterek (#FFFFFF, #F3F3F3, #DEDEDE). Új szín nincs;
 * ahol átlátszóság kell, az a meglévő színekből képzett rgba().
 * (A #828282 palettaszín, de szövegre nem használjuk — lásd a KONTRASTZ alábbi megjegyzést.)
 *
 * A blokk eredeti (2026-10-05 előtti) stílusa kékes-zöld színcsaládot használt
 * (#0d4f78, #116b99, #14a9b8, #2de0e7). Ezek a márkaszínekre képezve:
 *   #0d4f78 / #116b99 -> #012c6d — #155081   (fej-gradiens)
 *   #14a9b8 / #2de0e7 -> #0FD6D9             (kiemelő pont, jegyzet-sáv)
 *   #0d5f8c / #123846 -> #155081 — #012c6d   (kiemelések)
 *   #27333a / #37444b / #42525a -> #212121 / #404040 / #404040
 *
 * KONTRASTZ: a #828282 (a paletta része) szándékosan NEM szövegszín ebben a blokkban.
 * Fehér alapon 3,84:1 lenne, ami a WCAG AA 4,5:1 küszöb alatt van — az eredeti blokk
 * címkéje is sötét (#42525a) volt, ezért az a #404040-re képezve 10,4:1-et ad.
 *
 * Ellenőrző parancs (a jóváhagyott paletta ellenőrzése a kiszolgált CSS-en):
 *   bash scripts/audit/07-design-check.sh
 *
 * Kapcsolódó dokumentum: docs/14-design-redesign.md
 */

.vdta-ado1 {
	--vdta-ado1-navy: #012c6d;
	--vdta-ado1-blue: #155081;
	--vdta-ado1-cyan: #0fd6d9;
	--vdta-ado1-ink: #212121;
	--vdta-ado1-ink-soft: #404040;
	--vdta-ado1-line: #dedede;
	--vdta-ado1-surface: #ffffff;
	--vdta-ado1-surface-alt: #f3f3f3;

	display: block;
	width: 100%;
	max-width: 1120px;
	box-sizing: border-box;
	/* A cikk szövege után: fent levegő, lent a hozzászólások előtt kis tér. */
	margin: 26px auto 18px;
	padding: 0;
	/* Az eredeti Arial helyett a téma betűtípusa — a blokk a cikkhez simul. */
	font-family: inherit;
	text-align: left;
}

.vdta-ado1 *,
.vdta-ado1 *::before,
.vdta-ado1 *::after {
	box-sizing: border-box;
}

.vdta-ado1__inner {
	margin: 0 auto;
	border: 1px solid var(--vdta-ado1-line);
	border-radius: 14px;
	overflow: hidden;
	/* A szín külön megadva: az Elementor lazy-load szabálya
	   (.e-con.e-parent:nth-of-type(n+3):not(.e-lazyloaded) * { background-image: none !important })
	   a gradiens KÉPET letiltja a scrollozásig. A sima szín megmarad, így a doboz
	   soha nem lesz átlátszó. */
	background-color: var(--vdta-ado1-surface);
	background-image: linear-gradient(180deg, var(--vdta-ado1-surface) 0%, var(--vdta-ado1-surface-alt) 100%);
	box-shadow: 0 10px 26px rgba(1, 44, 109, 0.1);
}

/* --- Fej --- */

.vdta-ado1__head {
	position: relative;
	margin: 0;
	padding: 13px 18px;
	border-bottom: 3px solid var(--vdta-ado1-cyan);
	/* Fallback: ha a gradiens kép letiltva (lazy-load / JS nélkül), a fehér
	   fejszöveg akkor is sötétkék alapon ül — 13,3:1 kontraszt. */
	background-color: var(--vdta-ado1-navy);
	background-image: linear-gradient(90deg, var(--vdta-ado1-navy) 0%, var(--vdta-ado1-blue) 100%);
	color: #ffffff;
	font-size: 1rem;
	font-weight: 800;
	line-height: 1.35;
	text-align: center;
	text-shadow: 0 1px 2px rgba(1, 44, 109, 0.35);
}

.vdta-ado1__head::before {
	content: "";
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-right: 9px;
	border-radius: 50%;
	background: var(--vdta-ado1-cyan);
	box-shadow: 0 0 0 0 rgba(15, 214, 217, 0.75);
	animation: vdta-ado1-dot 2.4s ease-out infinite;
	vertical-align: middle;
}

@keyframes vdta-ado1-dot {
	0% {
		box-shadow: 0 0 0 0 rgba(15, 214, 217, 0.75);
	}
	70% {
		box-shadow: 0 0 0 9px rgba(15, 214, 217, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(15, 214, 217, 0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.vdta-ado1__head::before {
		animation: none;
	}
}

/* --- Törzs --- */

.vdta-ado1__body {
	padding: 20px 24px 22px;
	color: var(--vdta-ado1-ink);
	font-size: 1rem;
	line-height: 1.7;
}

.vdta-ado1__body p {
	margin: 0 0 14px;
}

.vdta-ado1__body p:last-child {
	margin-bottom: 0;
}

.vdta-ado1__body strong {
	color: var(--vdta-ado1-blue);
	font-weight: 700;
}

/* --- Adószám / bankszámlaszám --- */

/*
 * 2 hasznos sáv, 240 px alatt 1. MÉRVE (dev, headless Chrome):
 *   1440 px -> "528px 528px 0px 0px"   (a 3-4. sáv 0-ra omlik, a gap is eltűnik)
 *   1025 px -> "460.5px 460.5px 0px"
 *    768 px -> "696px"  (a media query 1fr-je)
 * Az auto-fit-et azért tartjuk meg a fix "1fr 1fr" helyett, mert a Petition
 * sablonban a blokk egy szűk bal oszlopba kerül; ott az auto-fit 1 sávra esik
 * vissza ahelyett, hogy 240 px alá préselné a két kártyát.
 */
.vdta-ado1__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 14px;
	margin: 16px 0;
}

.vdta-ado1__data {
	padding: 13px 15px;
	border: 1px solid var(--vdta-ado1-line);
	border-radius: 10px;
	background: var(--vdta-ado1-surface);
	box-shadow: 0 3px 10px rgba(1, 44, 109, 0.05);
}

.vdta-ado1__data span {
	display: block;
	margin-bottom: 5px;
	/* Az eredeti #42525a volt; #828282 fehér alapon csak 3,84:1 kontrasztot adna. */
	color: var(--vdta-ado1-ink-soft);
	font-size: 0.82rem;
	font-weight: 700;
	line-height: 1.3;
}

.vdta-ado1__data b {
	display: block;
	color: var(--vdta-ado1-navy);
	font-size: 1.05rem;
	line-height: 1.35;
	overflow-wrap: break-word;
	word-break: break-word;
}

/* --- Kiemelt jegyzet --- */

.vdta-ado1__note {
	margin-top: 16px;
	padding: 14px 16px;
	border-left: 4px solid var(--vdta-ado1-cyan);
	border-radius: 0 10px 10px 0;
	background: rgba(15, 214, 217, 0.09);
	color: var(--vdta-ado1-ink);
}

/* --- Aláírás --- */

.vdta-ado1__signature {
	margin-top: 16px;
	padding-top: 13px;
	border-top: 1px solid var(--vdta-ado1-line);
	color: var(--vdta-ado1-ink-soft);
}

.vdta-ado1__signature strong {
	display: block;
	color: var(--vdta-ado1-navy);
}

/* --- Reszponzív --- */

@media (max-width: 768px) {
	.vdta-ado1 {
		margin: 20px auto 14px;
	}

	.vdta-ado1__head {
		padding: 12px 14px;
		font-size: 0.95rem;
		text-align: left;
	}

	.vdta-ado1__body {
		padding: 16px 15px 18px;
		font-size: 0.96rem;
	}

	.vdta-ado1__grid {
		grid-template-columns: 1fr;
		gap: 10px;
		margin: 14px 0;
	}
}