/* ============================================================
   Agru-Frank — Zaplecze logistyczne (strona O firmie) — 3 karty DE/AT/PL.
   Karta = krzyżyki narożne + shadow-mega, wzorzec 1:1 z .products-cf__card (products.css),
   ramka zawsze widoczna (bez hover-reveal — inaczej niż products.css): ::before = 8 linii
   krzyżyków, ::after = 4 boki ramki. Prawy górny róg = mozaika flagi kraju (świadome
   odejście od blue/graphite/white palety).
   ============================================================ */

.logistics__grid {
	display: grid;
	gap: var(--space-32);
	margin-top: var(--space-48);
}

@media (min-width: 768px) {
	.logistics__grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

.logistics__node {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 260px; /* css-lint-ok: user wartość 2026-07-14, miejsce na mozaikę flagi + tekst */
	padding: var(--space-24);
	background: var(--white);
	box-shadow: var(--shadow-mega);
}

/* Mozaika flagi — kwadraciki w barwach kraju, prawy górny róg, opacity per kwadrat
   ręcznie dobrane w PHP (agf_logistics_flag_mosaic — nieregularny trójkąt, gasnący
   nierównomiernie od prawej-góry ku lewej-dołowi). */
.logistics__flag-mosaic {
	position: absolute;
	top: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	pointer-events: none;
}

.logistics__flag-row {
	display: flex;
	flex-direction: row-reverse;
}

.logistics__flag-cell {
	position: relative;
	width: 21px;
	height: 21px;
}

.logistics__flag-cell-bg {
	position: absolute;
	inset: 0;
	outline: 1px solid var(--border); /* zarys — biel flagi (AT/PL) inaczej ginie na jasnym tle karty */
	outline-offset: -0.5px;
}

/* Kontur schodkowego trójkąta — niebieski akcent na zewnętrznej krawędzi mozaiki (l = lewa,
   ostatni kwadrat wiersza; b = dół, brak wiersza pod spodem w tym miejscu). Element-siostra
   -bg (nie dziecko/pseudo tego samego elementu): opacity na -bg inaczej "przecieka" na border
   przez CSS stacking, kreska wychodziła nierówna. */
.logistics__flag-cell-edge {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.logistics__flag-cell-edge--l {
	border-left: 1px solid var(--blue); /* ta sama grubość co krzyżyki/ramka karty (::before/::after) */
}

.logistics__flag-cell-edge--b {
	border-bottom: 1px solid var(--blue);
}

.logistics__flag-cell-edge--l-b {
	border-left: 1px solid var(--blue);
	border-bottom: 1px solid var(--blue);
}

/* Krzyżyki + stała ramka: współdzielone z .u-image (utilities.css) —
   kopia scalona 2026-07-22 (audyt pkt 4). Box karty (position/bg) niżej bez zmian. */

.logistics__node-code {
	display: block;
	margin-bottom: var(--space-16);
	font-family: var(--font-mono);
	font-weight: 500;
	font-size: var(--text-label); /* 14px */
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--graphite) 62%, var(--white));
}

.logistics__node-title {
	margin: auto 0 var(--space-8); /* auto na top: dosuwa title+desc do dołu karty (head zostaje na górze) */
	font-size: var(--text-h3);
	font-weight: 400;
	color: var(--graphite);
}

.logistics__node-desc {
	margin: 0;
	font-size: var(--text-body);
	line-height: 1.6;
	color: color-mix(in srgb, var(--graphite) 75%, var(--white));
}