/* Stockinette — warstwa adaptacyjna: markup Gutenberga → wygląd design systemu.
 *
 * Komponenty w eksporcie były reactowe i część odstępów niosły same znaczniki
 * (np. .luna-card dostawał padding od komponentu, nie od klasy). Bloki mają
 * własną strukturę, więc te braki trzeba domknąć tutaj — zamiast rozszczelniać
 * components.css, który zostaje wierny źródłu.
 *
 * Reguły celują w klasy bloków, żeby nie ruszyć komponentów renderowanych
 * gdzie indziej tą samą klasą .luna-*.
 */

/* ---------- Sekcja i rytm pionowy ---------- */

/* Sekcje stykają się bez szczelin — kolor tła ma się zmieniać krawędź w krawędź,
 * a domyślny margines bloków w treści wpisu wpuszczał między nie tło strony. */
.entry-content > .luna-section,
.luna-section {
	margin-block: 0;
}

.luna-section > .luna-container > * + * {
	margin-top: var(--space-6);
}

.luna-section > .luna-container > .luna-display + p,
.luna-section > .luna-container > .luna-h2 + p {
	margin-top: var(--space-5);
}

/* Nagłówek sekcji odsuwa się od tego, co pod nim — siatki kart, listy, CTA. */
.luna-section > .luna-container > .luna-lead + .wp-block-columns,
.luna-section > .luna-container > .luna-h2 + .wp-block-columns,
.luna-section > .luna-container > p + .wp-block-columns,
.luna-section > .luna-container > * + .luna-steplist {
	margin-top: var(--space-12);
}

/* ---------- Karty na siatce kolumn ---------- */

.wp-block-columns.luna-cardgrid {
	gap: var(--space-6);
	align-items: stretch;
}

/* Padding niosły komponenty reactowe; przy blokach musi wejść z klasy. */
.wp-block-column.luna-card,
.wp-block-group.luna-card {
	padding: var(--space-8);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.wp-block-column.luna-card > *,
.wp-block-group.luna-card > * {
	margin: 0;
}

/* ---------- Kroki procesu ----------
 * .luna-steps z components.css zakłada pięć kolumn i strukturę <li>.
 * Brief ma cztery kroki w blokach kolumnowych, więc numerowana odmiana
 * dostaje własną klasę zamiast naginania tamtej.
 */

.luna-steplist {
	gap: var(--space-6);
}

.luna-steplist .wp-block-column {
	padding-top: var(--space-5);
	border-top: var(--border-width-strong) solid var(--color-primary-600);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
}

.luna-steplist .wp-block-column > * {
	margin: 0;
}

.luna-stepnum {
	font-family: var(--font-ui);
	font-size: var(--font-size-label);
	font-weight: var(--font-weight-bold);
	letter-spacing: var(--tracking-label);
	color: var(--text-accent);
}

/* ---------- Lista wyróżników ---------- */

.luna-ticks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-4);
	max-width: var(--container-text);
}

.luna-ticks li {
	position: relative;
	padding-left: var(--space-8);
	color: var(--text-secondary);
	line-height: var(--line-height-body);
}

.luna-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.45em;
	width: 18px;
	height: 8px;
	border-left: 2px solid var(--color-primary-600);
	border-bottom: 2px solid var(--color-primary-600);
	transform: rotate(-45deg);
}

/* ---------- Przyciski Kadence w stylu Stockinette ----------
 * kadence/singlebtn renderuje się z atrybutów, więc zostaje jako blok, ale
 * jego własne tło i promień muszą ustąpić tokenom.
 */

.luna-btnrow {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn {
	background: none;
	border-radius: var(--radius-button);
	padding-block: 0;
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn--primary {
	background: var(--color-primary-800);
	color: var(--text-on-accent);
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn--primary:hover {
	background: var(--color-primary-900);
	color: var(--text-on-accent);
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn--secondary {
	background: transparent;
	color: var(--text-accent);
	border: var(--border-width) solid var(--border-accent);
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn--secondary:hover {
	background: var(--surface-accent-soft);
	color: var(--text-accent);
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn--inverse {
	background: var(--color-white);
	color: var(--color-primary-900);
}

.wp-block-kadence-advancedbtn .kb-button.luna-btn--inverse:hover {
	background: var(--color-primary-50);
	color: var(--color-primary-900);
}

/* ---------- Sekcja odwrócona ---------- */

.luna-section--inverse p,
.luna-section--inverse .luna-lead {
	color: var(--color-neutral-300);
}

/* ---------- Przyciski: skala, kontrast, miękkość ----------
 * Przyciski na żywej treści to gołe kadence/singlebtn (.kb-button) bez klas
 * .luna-btn, więc reguły wyżej ich nie dotyczą — te dotyczą. Dzięki temu
 * działają też na stronie głównej edytowanej ręcznie w Gutenbergu, bez
 * przebudowy wpisu.
 *
 * Trzy rzeczy naraz: skala (14 px ginęło przy nagłówku hero), kontrast
 * (obrys w piaskowym na kościanym tle był ledwo widoczny) i miękkość —
 * promień z tokenu, bo kwadratowy róg to była jedyna twarda krawędź w
 * całym układzie.
 */

.kb-buttons-wrap {
	gap: var(--space-5);
}

.wp-block-kadence-singlebtn .kb-button,
.luna-enquiry-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 56px;
	padding-inline: var(--space-8);
	border-radius: var(--radius-button);
	border: 2px solid transparent;
	font-family: var(--font-ui);
	font-size: clamp(1rem, 0.94rem + 0.3vw, 1.125rem);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-default),
		border-color var(--duration-fast) var(--ease-default),
		color var(--duration-fast) var(--ease-default),
		transform var(--duration-fast) var(--ease-out),
		box-shadow var(--duration-default) var(--ease-out);
}

/* Wypełniony: grafit na kości. Na hover rozjaśnia się i unosi — samo
   przyciemnienie o jeden stopień było zmianą, której nie dało się zauważyć. */
.wp-block-kadence-singlebtn .kb-button:not(.is-style-outline),
.luna-enquiry-button {
	background: var(--color-primary-800);
	border-color: var(--color-primary-800);
	color: var(--text-on-accent);
}

.wp-block-kadence-singlebtn .kb-button:not(.is-style-outline):hover,
.luna-enquiry-button:hover {
	background: var(--color-primary-700);
	border-color: var(--color-primary-700);
	color: var(--text-on-accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

/* Obrysowy: obrys grafitowy zamiast piaskowego. Piaskowy na kościanym tle
   nie dawał kontrastu wymaganego dla elementu sterującego. */
.wp-block-kadence-singlebtn .kb-button.is-style-outline {
	background: transparent;
	border-color: var(--color-primary-800);
	color: var(--color-primary-800);
}

.wp-block-kadence-singlebtn .kb-button.is-style-outline:hover {
	background: var(--color-primary-800);
	border-color: var(--color-primary-800);
	color: var(--text-on-accent);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.wp-block-kadence-singlebtn .kb-button:active,
.luna-enquiry-button:active {
	transform: translateY(0);
	box-shadow: none;
}

.wp-block-kadence-singlebtn .kb-button:focus-visible,
.luna-enquiry-button:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

/* Na ciemnych sekcjach obrys grafitowy zniknąłby w tle. */
.stk-dark .wp-block-kadence-singlebtn .kb-button.is-style-outline {
	border-color: var(--color-white);
	color: var(--color-white);
}

.stk-dark .wp-block-kadence-singlebtn .kb-button.is-style-outline:hover {
	background: var(--color-white);
	color: var(--color-primary-900);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-kadence-singlebtn .kb-button:hover,
	.luna-enquiry-button:hover {
		transform: none;
	}
}