/* ==========================================================================
   Tabs (.agf-tabs) — pasek + panele przełączane w miejscu.
   Styl firmowy (decyzja Tomka 2026-07-22): kwadratowe (zero radiusa),
   aktywny tab = białe tło + niebieska ramka hairline + krzyżyki narożne
   (mini-wariant wzorca .u-image — skala 16→8px, wystają 4px).
   Pierwsze użycie: karta produktu. Komponent generyczny (JS: tabs.js).
   ========================================================================== */

/* Sekcja tabów na karcie produktu */
.product-tabs { padding-block-start: var(--space-64); }

.agf-tabs__bar {
	display: flex;
	gap: var(--space-8);
	padding: var(--space-16);
	background: var(--bg-page);                                     /* fallback solidny */
	background: color-mix(in srgb, var(--graphite) 8%, var(--white));   /* czysty kolor — kratka strony nie przebija */
	overflow-x: auto;                                               /* mobile: przewijany poziomo (full-bleed niżej);
	                                                                   sygnał scrolla = ucięty tab na krawędzi */
	-webkit-overflow-scrolling: touch;
}

.agf-tabs__tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
	min-height: var(--tap-target-min);
	padding: var(--space-8) var(--space-24);
	border: 0;
	background: transparent;
	color: var(--graphite);
	font-family: inherit;
	font-size: var(--text-body);
	font-weight: 600;
	white-space: nowrap;
	cursor: pointer;
	transition: background var(--transition-base), color var(--transition-fast);
}

.agf-tabs__tab:hover { color: var(--blue); }

.agf-tabs__tab[aria-selected="true"] {
	background: var(--white);
	color: var(--graphite);
}

/* Aktywny tab: niebieska ramka hairline na krawędzi…
   (::before/::after zawsze w DOM, sterowane opacity — płynne wejście/zejście przy zmianie taba) */
.agf-tabs__tab::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 1px solid var(--blue);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-base);
}
.agf-tabs__tab[aria-selected="true"]::after { opacity: 1; }

/* …+ krzyżyki narożne mini (wzór .u-image::before, skala /2: krzyż 8px, wystaje 4px) */
.agf-tabs__tab::before {
	content: "";
	position: absolute;
	inset: calc(var(--space-8) / -2);
	pointer-events: none;
	opacity: 0;
	transition: opacity var(--transition-base);
	background:
		linear-gradient(var(--blue), var(--blue)) left var(--space-4) top 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 top var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right var(--space-4) top 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 top var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) left var(--space-4) bottom 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) left 0 bottom var(--space-4) / var(--space-8) 1px no-repeat,
		linear-gradient(var(--blue), var(--blue)) right var(--space-4) bottom 0 / 1px var(--space-8) no-repeat,
		linear-gradient(var(--blue), var(--blue)) right 0 bottom var(--space-4) / var(--space-8) 1px no-repeat;
}
.agf-tabs__tab[aria-selected="true"]::before { opacity: 1; }

.agf-tabs__panel { padding-top: var(--space-48); }   /* desktop; mobile 0 w bloku accordion niżej */
.agf-tabs__panel[hidden] { display: none; }

/* Wejście treści panelu przy zmianie taba (reveal = animation; reduced-motion wyłącza base.css) */
.agf-tabs__panel:not([hidden]) {
	animation: agf-tab-panel-in var(--transition-base) both;
}
@keyframes agf-tab-panel-in {
	from { opacity: 0; }
}

/* Mobile <768px: taby → ACCORDION (decyzja 2026-07-22, expert-lens/Baymard:
   poziome taby na mobile PDP = anti-pattern discoverability; target B2B 45-60+).
   Bar znika, każdy panel = sekcja z nagłówkiem-toggle (multi-open, Opis otwarty
   z serwera). Wygląd nagłówka = wzorzec FAQ (hairline + plus/minus), ale
   NIE exclusive — inżynier porównuje specs z modelami. */
.agf-tabs__acc { display: none; }                                   /* toggle istnieje tylko na mobile */

@media (max-width: 767.98px) {
	.product-tabs { padding-block-start: var(--space-48); }
	.agf-tabs__bar { display: none; }
	.agf-tabs__panel[hidden] { display: block; }                    /* widoczność przejmuje accordion (display:block przywraca też dostępność dla czytników) */
	.agf-tabs__panel { padding-top: 0; border-bottom: 1px solid var(--border); }   /* hairline między SEKCJAMI (jak FAQ item) — nie między nagłówkiem a treścią */
	.agf-tabs__panel:not([hidden]) { animation: none; }             /* fade tabów zbędny w układzie accordion */
	.agf-tabs__acc {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-16);
		width: 100%;
		min-height: var(--tap-target-min);
		padding: var(--space-24) 0;
		border: 0;
		background: transparent;
		font-family: inherit;
		font-size: var(--text-h3);                                  /* 20 na mobile — nagłówek sekcji ponad prozą (16) i śródtytułami (17) */
		font-weight: 600;
		text-align: left;
		color: var(--graphite);
		cursor: pointer;
	}
	.agf-tabs__acc:focus-visible {
		outline: var(--focus-ring);
		outline-offset: calc(-1 * var(--focus-offset));             /* inset jak FAQ — outline na zewnątrz ginie przy krawędziach */
	}
	/* Plus/minus — utilities.css (scalone z faq/product-faq/benefits, audit prio 2.3) */
	/* Gradacja rytmu 24: hairline→nagłówek 24 (pad acc), nagłówek→treść 24 (bottom-pad
	   acc, body top 0), treść→hairline 24. Zerowanie top-padu pierwszego elementu
	   rytmicznego treści — bez tego nagłówek→treść puchło do 48-72. */
	.agf-tabs__body { display: none; padding-block: 0 var(--space-8); }   /* 8 na dole — domknięcie treści przed hairline sekcji */
	.agf-tabs__panel.is-open > .agf-tabs__body { display: block; }
	.agf-tabs__bar + .agf-tabs__panel .agf-tabs__acc { padding-top: 0; }   /* TYLKO pierwszy nagłówek (panel zaraz po barze) bez padu na górze */
	.agf-tabs__body > :first-child { margin-top: 0; }
	.agf-tabs__body .product-specs__row:first-child,
	.agf-tabs__body .product-faq__item:first-child .product-faq__q { padding-top: 0; }
	.agf-tabs__body .product-faq__item:last-child { border-bottom: 0; }   /* hairline domyka panel sekcji — bez dubla linii */
}