/**
 * Style bloków wbudowanych.
 *
 * Zasada: blok po wstawieniu ma wyglądać dobrze bez ustawiania czegokolwiek. Wszystko, co da
 * się wziąć z tokenów globalnych, brane jest przez `var()` — z wartością zapasową, żeby bloki
 * działały także wtedy, gdy ktoś nie ustawił jeszcze stylów witryny.
 *
 * Kolejność ma znaczenie: te reguły są bazą, a arkusz wygenerowany dla dokumentu (style
 * ustawione w panelu) dokłada się po nich i wygrywa.
 */

/* ---------------------------------------------------------------- Pojemnik */

.pgc-doc {
	display: flow-root;
}

.pgc-container {
	display: flex;
	flex-direction: column;
	margin-inline: auto;
	width: 100%;
}

.pgc-container--rzad {
	flex-direction: row;
	flex-wrap: wrap;
}

.pgc-container--siatka {
	display: grid;
	grid-template-columns: repeat(var(--pgc-kolumny, 3), minmax(0, 1fr));
}

/* Szerokości: „jak tekst” to kolumna czytelnej długości, „pełna” wychodzi poza siatkę motywu. */
.pgc-container--sz-tresc   { max-width: var(--pgc-szerokosc-tresci, 740px); }
.pgc-container--sz-szeroka { max-width: var(--pgc-szerokosc-szeroka, 1180px); }
.pgc-container--sz-pelna   { max-width: none; }

/* Szerokość musi rządzić CAŁYM blokiem, nie tylko jego wnętrzem.
   Styl redaktora (tło, ramka, wypełnienie) trafia na zewnętrzny `.pgc-b`, a ograniczenie
   szerokości siedziało na wewnętrznym `.pgc-container`. Efekt: pojemnik „ma 740 px”, a jego
   białe tło szło przez całe okno. Dla osoby, która po prostu ustawiła kolor tła, to wygląda
   jak zepsuta strona — więc przenosimy ograniczenie na zewnątrz i zdejmujemy je ze środka. */
.pgc-b--container:has(> .pgc-container--sz-tresc) {
	max-width: var(--pgc-szerokosc-tresci, 740px);
	margin-inline: auto;
}

.pgc-b--container:has(> .pgc-container--sz-szeroka) {
	max-width: var(--pgc-szerokosc-szeroka, 1180px);
	margin-inline: auto;
}

.pgc-b--container:has(> .pgc-container--sz-tresc) > .pgc-container,
.pgc-b--container:has(> .pgc-container--sz-szeroka) > .pgc-container {
	max-width: none;
}

.pgc-container--od-brak { gap: 0; }
.pgc-container--od-s    { gap: var(--pgc-s-s, .75rem); }
.pgc-container--od-m    { gap: var(--pgc-s-m, 1.5rem); }
.pgc-container--od-l    { gap: var(--pgc-s-l, 2.5rem); }

.pgc-container--wy-rozciagnij { align-items: stretch; }
.pgc-container--wy-poczatek   { align-items: flex-start; }
.pgc-container--wy-srodek     { align-items: center; }
.pgc-container--wy-koniec     { align-items: flex-end; }

/* W rzędzie dzieci dzielą się szerokością po równo, dopóki nie zdecyduje inaczej panel stylu. */
.pgc-container--rzad > .pgc-b {
	flex: 1 1 0;
	min-width: min(100%, 15rem);
}

/* Na telefonie rząd zawsze staje się kolumną — inaczej trzy kafelki robią się nieczytelne. */
@media (max-width: 767px) {
	.pgc-container--rzad { flex-direction: column; }
	.pgc-container--siatka { grid-template-columns: 1fr; }
}

.pgc-container__pusty {
	margin: 0;
	padding: 1.5rem;
	border: 1px dashed var(--pgc-c-obrys, rgba(0, 0, 0, .2));
	border-radius: var(--pgc-r-m, 12px);
	text-align: center;
	color: var(--pgc-c-przygaszony, #6b7079);
	font-size: .9em;
}

/* Strona jeszcze bez żadnego bloku — widoczne tylko w kanwie edytora.
   Musi być duże i wyraźne: to jedyna rzecz na ekranie, która mówi „tu się zaczyna”. */
.pgc-doc--pusty {
	min-height: 220px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 2rem auto;
	max-width: var(--pgc-szerokosc-tresci, 740px);
}

.pgc-doc__pusty {
	margin: 0;
	padding: 2.5rem 1.5rem;
	width: 100%;
	border: 2px dashed var(--pgc-c-obrys, rgba(0, 0, 0, .25));
	border-radius: var(--pgc-r-l, 20px);
	text-align: center;
	color: var(--pgc-c-przygaszony, #6b7079);
}

/* ---------------------------------------------------------------- Nagłówek */

.pgc-heading__nad {
	display: block;
	font-size: var(--pgc-t-xs, .78rem);
	font-weight: 700;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--pgc-c-akcent, #a85f37);
	margin-bottom: .6em;
}

/* Kroju pisma tu nie ustawiamy. Gdy w Stylach witryny wybrano własny, dopisze go arkusz
   zmiennych (Globals::css); gdy nie - zostaje reguła motywu dla nagłówków i blok wygląda
   jak reszta strony. `font-family: inherit` byłoby tu gorsze niż brak deklaracji: wzięłoby
   krój akapitu, a nie nagłówka. */
.pgc-heading__tekst {
	margin: 0;
	font-weight: var(--pgc-f-naglowki-grubosc, 700);
	line-height: var(--pgc-f-naglowki-wysokosc, 1.15);
	color: var(--pgc-c-tekst, inherit);
}

/* ---------------------------------------------------------------- Tekst */

.pgc-text > :first-child { margin-top: 0; }
.pgc-text > :last-child { margin-bottom: 0; }

/* ---------------------------------------------------------------- Zdjęcie */

.pgc-image {
	margin: 0;
}

.pgc-image__plik {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--pgc-r-m, 12px);
}

.pgc-image__podpis {
	margin-top: .6em;
	font-size: var(--pgc-t-s, .9rem);
	color: var(--pgc-c-przygaszony, #6b7079);
}

.pgc-image__brak {
	margin: 0;
	padding: 2rem;
	border: 1px dashed var(--pgc-c-obrys, rgba(0, 0, 0, .2));
	border-radius: var(--pgc-r-m, 12px);
	text-align: center;
	color: var(--pgc-c-przygaszony, #6b7079);
}

/* ---------------------------------------------------------------- Przycisk */

.pgc-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5em;
	border: 1px solid transparent;
	border-radius: var(--pgc-r-pill, 999px);
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform .18s ease, background-color .18s ease, color .18s ease;
}

.pgc-button__link:hover { transform: translateY(-1px); }

/*
 * Widoczny fokus.
 *
 * Bez tego jedynym stanem, który widać, jest najechanie myszą — a osoba idąca przez stronę
 * klawiszem Tab nie wie, gdzie stoi (motyw może mieć swój pierścień, ale może go nie mieć
 * i nie da się na tym polegać). Pierścień rysujemy kolorem tekstu, a nie akcentu: akcent bywa
 * tłem samego przycisku, więc obrys w tym samym odcieniu byłby na nim niewidoczny.
 * `outline-offset` zostawia szczelinę w kolorze strony, żeby ramka odcinała się od guzika.
 */
.pgc-button__link:focus-visible,
.pgc-image a:focus-visible,
.pgc-text a:focus-visible {
	outline: 2px solid var(--pgc-c-tekst, #1b2430);
	outline-offset: 2px;
}

.pgc-button__link--s { padding: .55em 1.2em; font-size: var(--pgc-t-s, .9rem); }
.pgc-button__link--m { padding: .75em 1.6em; font-size: var(--pgc-t-m, 1rem); }
.pgc-button__link--l { padding: .95em 2em;   font-size: var(--pgc-t-l, 1.125rem); }

.pgc-button__link--glowny {
	background: var(--pgc-c-akcent, #a85f37);
	color: var(--pgc-c-jasny, #fff);
}

.pgc-button__link--obrysowany {
	border-color: currentColor;
	color: var(--pgc-c-akcent, #a85f37);
	background: transparent;
}

.pgc-button__link--tekstowy {
	padding-inline: 0;
	color: var(--pgc-c-akcent, #a85f37);
	background: transparent;
}
.pgc-button__link--tekstowy::after { content: '→'; }

.pgc-button__link[aria-disabled="true"] {
	opacity: .55;
	cursor: not-allowed;
}

.pgc-button__uwaga {
	display: block;
	margin-top: .4em;
	font-size: .8em;
	color: var(--pgc-c-przygaszony, #6b7079);
}

/* ---------------------------------------------------------------- Odstęp */

.pgc-spacer { width: 100%; }

/* ---------------------------------------------------------------- Widoczność per urządzenie */

/*
 * Dwie rodziny klas, bo jedna nie wystarcza. `pgc-only-*` pokazuje blok na jednym ekranie, ale
 * te klasy się przecinają: dwie naraz chowają blok wszędzie, więc „wszystko oprócz telefonu”
 * nie da się nimi zapisać. Stąd `pgc-hide-*`, która chowa dokładnie jedno urządzenie.
 */
@media (min-width: 1025px) {
	.pgc-only-tablet, .pgc-only-mobile, .pgc-hide-desktop { display: none !important; }
}
@media (min-width: 768px) and (max-width: 1024px) {
	.pgc-only-desktop, .pgc-only-mobile, .pgc-hide-tablet { display: none !important; }
}
@media (max-width: 767px) {
	.pgc-only-desktop, .pgc-only-tablet, .pgc-hide-mobile { display: none !important; }
}

/* ---------------------------------------------------------------- Ruch */

@media (prefers-reduced-motion: reduce) {
	.pgc-button__link { transition: none; }
	.pgc-button__link:hover { transform: none; }
}