/* ============================================================
   Agru-Frank — Sekcja "Branże, które obsługujemy" (home).
   Full-bleed grafitowy band: fotografia w tle (reveal góra→dół przy wejściu
   w viewport, gated JS-em — bez JS zdjęcie widoczne od razu, brak FOUC) +
   scrim + split tekst/lista na własnym CSS grid (`industries__inner`).
   Lista linkuje do podstron detalu /branze/<slug>/, ikona = agf_get_industries().
   Tokeny z base.css.
   ============================================================ */

/* padding-block: z .section (--section-py, responsywne 64→96→128) — nie duplikuj tu. */
.industries {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background: var(--graphite);
	color: var(--white);
}

/* --- Zdjęcie w tle + scrim ---
   Wrapper niesie clip-path (reveal), img tylko object-fit: cover — ten sam
   podział ról co .industries__card-media / .industries__card-image. */
.industries__band-media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}
.industries__band-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, #3E3E3DF2 0%, #3E3E3DE0 50%, #3E3E3DCC 100%);                                            /* fallback */
	background: linear-gradient(to right, color-mix(in srgb, var(--graphite) 95%, transparent) 0%, color-mix(in srgb, var(--graphite) 88%, transparent) 50%, color-mix(in srgb, var(--graphite) 80%, transparent) 100%);
}
.industries__band-image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 130%; /* zapas pod pan pionowy (industries-pan) */
	object-fit: cover;
	transition: opacity var(--transition-slow); /* fade przy zmianie src na hover (industries.js) */
}

/* --- Reveal góra→dół ---
   Bez JS (klasa --js nigdy nie doklejona): brak clip-path, zdjęcie widoczne
   od razu — progressive enhancement, nie zależność. industries.js dokleja
   --js przy starcie i is-visible gdy sekcja wejdzie w viewport (raz). */
.industries--js .industries__band-media {
	clip-path: inset(0 0 100% 0);
}
.industries--js.is-visible .industries__band-media {
	animation: industries-reveal 900ms ease forwards;
}
@keyframes industries-reveal {
	to {
		clip-path: inset(0 0 0% 0);
	}
}

/* --- Pan pionowy (namiastka wideo) ---
   Jeden <img>, src podmieniany hoverem na wiersz branży (industries.js).
   Oversize height pod ruch translateY, ciągły reset góra→dół (bez alternate).
   Chodzi zawsze gdy sekcja widoczna (industries--js.is-visible, ten sam
   hook co reveal), niezależnie która branża jest aktywna. */
.industries--js.is-visible .industries__band-image {
	animation: industries-pan 20s linear infinite;
}
@keyframes industries-pan {
	from { transform: translateY(0); }
	to   { transform: translateY(-23.08%); }
}
@media (prefers-reduced-motion: reduce) {
	.industries--js .industries__band-media {
		clip-path: none;
	}
	.industries--js.is-visible .industries__band-media {
		animation: none;
	}
	.industries__band-image {
		animation: none;
		height: 100%;
		transition: none;
	}
}

/* --- Split tekst/lista: CSS grid, wzór .about__inner / .partners__inner --- */
.industries__inner {
	position: relative;
	z-index: 1;
	display: grid;
	gap: var(--space-32);
	align-items: center;
}
@media (min-width: 992px) {
	.industries__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--space-96);
	}
	/* Desktop: lista po lewej, tekst po prawej — kolejność DOM (a11y/mobile) bez zmian. */
	.industries__inner > *:first-child {
		order: 2;
	}
	.industries__inner > *:last-child {
		order: 1;
	}
}

.industries__cta {
	margin-top: var(--space-32);
}
/* 2 kopie w markupie (--desktop w section-head, --mobile po row-list) — CTA zagniezdzony w
   section-head, lista to osobny grid item; samo "order" nie przenioslo CTA pod liste bez
   ryzyka rozjazdu przy auto-flow 3 itemow w gridzie 2-kolumnowym na desktop. Duplikat + toggle
   to sprawdzony dzis wzorzec (news date/author) — zero ruszania grida industries__inner. */
.industries__cta--mobile {
	display: none;
}
@media (max-width: 767.98px) {
	.industries__cta--desktop {
		display: none;
	}
	.industries__cta--mobile {
		display: inline-flex;
	}
}

/* --- Lista branż: wiersze numerowane ikoną, strzałka wjeżdża na hover --- */
.industries__row-list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.industries__row {
	display: grid;
	grid-template-columns: 32px 1fr 18px;
	column-gap: var(--space-24);
	align-items: center;
	padding: var(--space-16);
	margin-inline: calc(-1 * var(--space-16));
	border-top: 1px solid #FFFFFF29;                                            /* fallback */
	border-top: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
	color: var(--white);
	text-decoration: none;
	transition: background-color var(--transition-fast);
}
.industries__row-list li:last-child .industries__row {
	border-bottom: 1px solid #FFFFFF29;                                            /* fallback */
	border-bottom: 1px solid color-mix(in srgb, var(--white) 16%, transparent);
}
.industries__row:hover {
	background: #FFFFFF0F;                                            /* fallback */
	background: color-mix(in srgb, var(--white) 6%, transparent);
}
.industries__row:hover .industries__row-name {
	color: var(--blue-light);
	transform: translateX(3px);
}
.industries__row:hover .industries__row-arrow {
	transform: translateX(3px);
}
.industries__row:hover .industries__row-icon {
	transform: translateX(3px) scale(1.05);
}
.industries__row:focus-visible {
	outline: var(--focus-ring);
	outline-offset: var(--focus-offset);
}
.industries__row-icon {
	display: inline-flex;
	color: var(--blue-light);
	transform-origin: left center;
	transition: transform var(--transition-fast);
}
.industries__row-name {
	margin: 0;
	font-size: var(--text-h4);
	line-height: 1.2;
	font-weight: 400;
	transition: color var(--transition-fast), transform var(--transition-fast);
}
.industries__row-arrow {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--blue-light);
	transition: transform var(--transition-fast);
}