/* Sekcja: Zajrzyj do środka gotowych materiałów (zapowiedź przykładowych dokumentów) */

.oai-site .oai-doc-teaser {
	position: relative;
	background: var(--oai-color-white);
	padding: 96px 40px;
	overflow-x: hidden;
}

.oai-site .oai-doc-teaser__inner {
	max-width: 1140px;
	margin: 0 auto;
}

/* Intro */

.oai-site .oai-doc-teaser__intro {
	max-width: 720px;
	margin: 0 auto 40px;
	text-align: center;
}

.oai-site .oai-doc-teaser__eyebrow {
	margin: 0 0 16px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--oai-color-cyan);
}

.oai-site .oai-doc-teaser__title {
	margin: 0 0 16px;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--oai-color-navy);
	overflow-wrap: break-word;
	text-wrap: balance;
}

.oai-site .oai-doc-teaser__lead {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--oai-color-navy-muted);
	overflow-wrap: break-word;
}

/* Przełączniki dokumentów — desktop: trzy w jednym rzędzie, zawijają się
   wyłącznie gdy brakuje miejsca. Zakładki nie są już przesuwane ani ręcznie,
   ani programowo — zawsze wszystkie widoczne. */

.oai-site .oai-doc-teaser__tablist {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0 auto;
}

.oai-site .oai-doc-teaser__tab {
	flex-shrink: 0;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	padding: 10px 20px;
	border-radius: 999px;
	border: 1px solid var(--oai-color-border);
	background: var(--oai-color-white);
	color: var(--oai-color-navy);
	cursor: pointer;
	user-select: none;
	transition: background-color var(--oai-transition-fast), color var(--oai-transition-fast), border-color var(--oai-transition-fast);
}

.oai-site .oai-doc-teaser__tab:hover {
	border-color: var(--oai-color-cyan);
}

.oai-site .oai-doc-teaser__tab.is-oai-doc-teaser-active {
	background: var(--oai-color-navy);
	border-color: var(--oai-color-navy);
	color: var(--oai-color-white);
}

/* Obszar fragmentów */

.oai-site .oai-doc-teaser__stage {
	margin-top: 32px;
}

.oai-site .oai-doc-teaser__panel[hidden] {
	display: none;
}

.oai-site .oai-doc-teaser__frames {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
}

.oai-site .oai-doc-teaser__frame {
	position: relative;
	min-width: 0;
	overflow: hidden;
	background: var(--oai-color-white);
	border: 1px solid var(--oai-color-border);
	border-radius: var(--oai-radius-m);
	box-shadow: 0 4px 16px rgba(1, 2, 66, 0.06);
}

.oai-site .oai-doc-teaser__frame--large {
	aspect-ratio: 16 / 9;
}

.oai-site .oai-doc-teaser__frame--small {
	aspect-ratio: 4 / 3;
}

.oai-site .oai-doc-teaser__image {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	height: 100%;
	object-fit: cover;
	-webkit-user-drag: none;
	user-select: none;
}

/* CTA i informacja pod sekcją */

.oai-site .oai-doc-teaser__cta {
	display: flex;
	width: fit-content;
	margin: 40px auto 0;
}

.oai-site .oai-doc-teaser__note {
	margin: 16px auto 0;
	max-width: 560px;
	text-align: center;
	font-size: 13px;
	color: var(--oai-color-navy-muted);
}

/* Od 781px: duży fragment po lewej (65%), mniejszy po prawej (35%), lekko przesunięty w dół.
   Desktop — bez zmian. */

@media (min-width: 781px) {
	.oai-site .oai-doc-teaser__frames {
		grid-template-columns: 65% minmax(0, 1fr);
		gap: 24px;
		align-items: start;
	}

	.oai-site .oai-doc-teaser__frame--small {
		margin-top: 32px;
	}
}

/* Do 780px (tablet + mobile): stabilne ograniczenie całej sekcji i jej
   wewnętrznych kontenerów, żeby żaden element nie mógł rozszerzyć strony. */

@media (max-width: 780px) {
	.oai-site .oai-doc-teaser {
		width: auto;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		contain: inline-size;
	}

	.oai-site .oai-doc-teaser__inner {
		width: auto;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
		overflow-x: hidden;
	}

	.oai-site .oai-doc-teaser__intro,
	.oai-site .oai-doc-teaser__stage,
	.oai-site .oai-doc-teaser__panel,
	.oai-site .oai-doc-teaser__frames,
	.oai-site .oai-doc-teaser__frame,
	.oai-site .oai-doc-teaser__cta,
	.oai-site .oai-doc-teaser__note {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	.oai-site .oai-doc-teaser__frames {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		width: 100%;
		overflow: hidden;
	}

	.oai-site .oai-doc-teaser__frame {
		width: 100%;
		margin: 0;
		overflow: hidden;
	}

	/* Minimalna, ostateczna ochrona wrappera całego motywu — wyłącznie do 780px. */
	.oai-site {
		width: 100%;
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* Korekta regresji sticky headera: overflow-x na zwykłym divie (.oai-site)
	   tworzy dla niego własny kontener przewijania i łamie position: sticky
	   nagłówka (.oai-header w main.css), bo header zaczyna się pozycjonować
	   względem tego diva zamiast realnego viewportu. Ustawiony na body ten sam
	   overflow-x jest przez przeglądarkę propagowany do viewportu (specyfikacja
	   CSS Overflow) i daje identyczną ochronę przed poziomym scrollem bez tego
	   efektu ubocznego. */
	body {
		overflow-x: hidden;
	}
}

/* Tablet 601–780px: zakładki w jednym rzędzie, jeśli się mieszczą, w przeciwnym
   razie naturalnie zawijają się do kolejnego wiersza. Bez żadnego przewijania. */

@media (min-width: 601px) and (max-width: 780px) {
	.oai-site .oai-doc-teaser__tablist {
		flex-wrap: wrap;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
		box-sizing: border-box;
	}

	.oai-site .oai-doc-teaser__tab {
		flex: 0 1 auto;
		max-width: 100%;
		min-width: 0;
		white-space: normal;
		text-align: center;
		box-sizing: border-box;
	}
}

/* Mobile do 600px: trzy zakładki w pionie, każda na pełną szerokość — najbardziej
   niezawodny układ bez jakiegokolwiek przewijania poziomego tablisty. */

@media (max-width: 600px) {
	.oai-site .oai-doc-teaser__tablist {
		display: grid;
		grid-template-columns: minmax(0, 1fr);
		gap: 10px;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		overflow: visible;
		box-sizing: border-box;
	}

	.oai-site .oai-doc-teaser__tab {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		max-width: 100%;
		min-width: 0;
		min-height: 44px;
		box-sizing: border-box;
		white-space: normal;
		text-align: center;
	}
}

/* Mobile do 430px */

@media (max-width: 430px) {
	.oai-site .oai-doc-teaser {
		padding: 56px 18px;
	}

	.oai-site .oai-doc-teaser__stage {
		margin-top: 24px;
	}

	.oai-site .oai-doc-teaser__cta {
		width: 100%;
	}
}

/* Mobile do 360px */

@media (max-width: 360px) {
	.oai-site .oai-doc-teaser {
		padding: 48px 16px;
	}
}