/**
 * Grajdek: style uzupełniające theme.json.
 * Wariant Beż: biel i beż; tryb ciemny w ciepłych brązach (przełącznik w nagłówku).
 */

:root {
	color-scheme: light dark;
}

/* Wybór z przełącznika ma pierwszeństwo przed ustawieniem systemu (kolory light-dark() idą za color-scheme). */
:root[data-theme="light"] {
	color-scheme: light;
}

:root[data-theme="dark"] {
	color-scheme: dark;
}

:root {
	--grajdek-ease: cubic-bezier(0.16, 1, 0.3, 1);
	--grajdek-gutter: clamp(1rem, 4vw, 3rem);
	--grajdek-error: light-dark(#9e2a1e, #ff8f80);
}

html {
	-webkit-text-size-adjust: 100%;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}


::selection {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

:where(.wp-site-blocks) > * {
	margin-block-start: 0;
}

img {
	height: auto;
}

/* Link pomijania nawigacji */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

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

.grajdek-header {
	min-height: 4.5rem;
	padding-left: var(--wp--style--root--padding-left) !important;
	padding-right: var(--wp--style--root--padding-right) !important;
}

.grajdek-header .wp-block-site-title a:hover {
	text-decoration: none;
	opacity: 0.7;
}

.grajdek-header .wp-block-navigation-item__content {
	position: relative;
	padding-block: 0.25rem;
}

.grajdek-header .wp-block-navigation-item__content::after,
.grajdek-footer .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.5s var(--grajdek-ease);
}

.grajdek-header .wp-block-navigation-item__content:hover::after,
.grajdek-header .wp-block-navigation-item__content[aria-current="page"]::after,
.grajdek-footer .wp-block-navigation-item__content:hover::after {
	transform: scaleX(1);
}

.grajdek-header .wp-block-social-links,
.grajdek-footer .wp-block-social-links {
	gap: 0.75rem;
}

.grajdek-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--grajdek-gutter);
}

.grajdek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4rem;
}

.grajdek-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.03em;
}

/* Przełącznik jasny/ciemny: okrąg w połowie wypełniony */
.grajdek-theme-toggle {
	display: inline-grid;
	place-items: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.grajdek-theme-toggle__icon {
	width: 1rem;
	height: 1rem;
	border: 1.5px solid currentColor;
	border-radius: 50%;
	background: linear-gradient(90deg, currentColor 50%, transparent 50%);
	transition: transform 0.6s var(--grajdek-ease);
}

.grajdek-theme-toggle[aria-pressed="true"] .grajdek-theme-toggle__icon {
	transform: rotate(180deg);
}

.grajdek-theme-toggle:hover .grajdek-theme-toggle__icon {
	opacity: 0.7;
}

.grajdek-theme-toggle:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* Hero z pokazem slajdów                                            */
/* ---------------------------------------------------------------- */

.grajdek-hero {
	display: grid;
	grid-template: 100% / 100%;
	height: calc(100svh - 4.5rem);
	min-height: 30rem;
	max-height: 68rem;
	overflow: clip;
	position: relative;
}

.grajdek-hero > * {
	grid-area: 1 / 1;
	margin: 0 !important;
}

.grajdek-hero > .wp-block-gallery {
	min-height: 0;
	height: 100%;
}

.grajdek-hero__content {
	align-self: end;
	position: relative;
	z-index: 1;
	color: var(--wp--preset--color--on-image);
	background: linear-gradient(to top, rgb(10 10 10 / 0.62), rgb(10 10 10 / 0.28) 55%, transparent);
	padding-top: 22vh !important;
}

.grajdek-hero__content .wp-block-button__link {
	background: var(--wp--preset--color--on-image);
	color: #25211d;
	border-color: var(--wp--preset--color--on-image);
}

.grajdek-hero__content .wp-block-button__link:hover {
	background: transparent;
	color: var(--wp--preset--color--on-image);
}

.grajdek-hero__content .wp-block-button__link:focus-visible {
	outline-color: var(--wp--preset--color--on-image);
}

.wp-block-gallery.is-style-slideshow {
	display: grid !important;
	grid-template: 100% / 100%;
	overflow: clip;
	gap: 0 !important;
	background: #1b1b1a;
}

.wp-block-gallery.is-style-slideshow > .wp-block-image {
	grid-area: 1 / 1;
	width: 100% !important;
	height: 100%;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 1.6s ease;
}

.wp-block-gallery.is-style-slideshow > .wp-block-image:first-child {
	opacity: 1;
}

.wp-block-gallery.is-style-slideshow.is-ready > .wp-block-image {
	opacity: 0;
}

.wp-block-gallery.is-style-slideshow.is-ready > .wp-block-image.is-active {
	opacity: 1;
}

.wp-block-gallery.is-style-slideshow > .wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	flex: 1;
}

.wp-block-gallery.is-style-slideshow figcaption {
	display: none;
}

/*
 * Poprzedni slajd (is-leaving) zostaje pod spodem w pełni widoczny i z tą samą animacją,
 * a nowy wyłania się nad nim. Bez przeskoku skali i bez przyciemnienia w połowie przejścia.
 */
.wp-block-gallery.is-style-slideshow.is-ready > .wp-block-image.is-leaving {
	opacity: 1;
	z-index: 0;
}

.wp-block-gallery.is-style-slideshow.is-ready > .wp-block-image.is-active {
	z-index: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.wp-block-gallery.is-style-slideshow > .wp-block-image.is-active img,
	.wp-block-gallery.is-style-slideshow > .wp-block-image.is-leaving img {
		animation: grajdek-drift 9s linear both;
	}
}

@keyframes grajdek-drift {
	from { transform: scale(1.04); }
	to { transform: scale(1); }
}

/* ---------------------------------------------------------------- */
/* Siatka realizacji                                                 */
/* ---------------------------------------------------------------- */

.wp-block-post-template.is-style-staggered {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(3rem, 8vw, 6rem);
	list-style: none;
	padding: 0;
}

@media (min-width: 768px) {
	.wp-block-post-template.is-style-staggered {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: clamp(2rem, 6vw, 7rem);
		row-gap: clamp(4rem, 8vw, 8rem);
	}

	.wp-block-post-template.is-style-staggered > li:nth-child(even) {
		margin-top: clamp(6rem, 16vw, 16rem);
	}
}

.grajdek-card {
	display: flex;
	flex-direction: column;
	gap: 0;
}

.grajdek-card .wp-block-post-featured-image {
	overflow: clip;
	margin: 0;
}

.grajdek-card .wp-block-post-featured-image img {
	transition: transform 1.4s var(--grajdek-ease), opacity 0.6s ease;
}

.grajdek-card:hover .wp-block-post-featured-image img {
	transform: scale(1.025);
}

.grajdek-card .wp-block-post-title {
	margin-top: 1.1rem;
}

.grajdek-card .wp-block-post-title a::after {
	/* Cała karta klikalna, bez dublowania linków dla czytników ekranu. */
	content: "";
	position: absolute;
	inset: 0;
}

.grajdek-card {
	position: relative;
}

.grajdek-card .wp-block-post-title a:hover {
	text-decoration: none;
}

/* ---------------------------------------------------------------- */
/* Filtr kategorii realizacji                                        */
/* ---------------------------------------------------------------- */

.grajdek-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: 0.9375rem;
}

.grajdek-filter a {
	color: var(--wp--preset--color--muted);
	text-decoration: none;
	padding-block: 0.25rem;
	border-bottom: 1px solid transparent;
	transition: color 0.3s ease, border-color 0.3s ease;
}

.grajdek-filter a:hover,
.grajdek-filter a[aria-current="page"] {
	color: var(--wp--preset--color--contrast);
	border-bottom-color: currentColor;
}

.grajdek-filter sup {
	font-size: 0.7em;
	margin-left: 0.2em;
	vertical-align: super;
}

/* ---------------------------------------------------------------- */
/* Metryczka realizacji                                              */
/* ---------------------------------------------------------------- */

.grajdek-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 1.25rem 2rem;
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--wp--preset--color--line);
}

.grajdek-meta div {
	display: grid;
	gap: 0.2rem;
}

.grajdek-meta dt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.grajdek-meta dd {
	margin: 0;
}

.grajdek-meta--compact {
	display: block;
	border: 0;
	padding: 0;
	color: var(--wp--preset--color--muted);
	font-size: 0.9375rem;
}

/* ---------------------------------------------------------------- */
/* Treść realizacji: zdjęcia                                         */
/* ---------------------------------------------------------------- */

.grajdek-project-content > .wp-block-image,
.grajdek-project-content > .wp-block-gallery {
	margin-block: clamp(0.75rem, 2vw, 1.5rem) !important;
}

.grajdek-project-content > p:last-of-type {
	margin-bottom: var(--wp--preset--spacing--60);
}

.wp-block-image.is-style-portrait {
	max-width: min(100%, 44rem);
	margin-inline: auto !important;
}

.wp-block-image img,
.wp-block-gallery img {
	background: var(--wp--preset--color--surface);
}

/* Telefon: zdjęcia z par w realizacjach jedno pod drugim, w pełnej szerokości. */
@media (max-width: 599px) {
	.wp-block-gallery.alignwide.has-nested-images.columns-2 > figure.wp-block-image:not(#individual-image) {
		width: 100% !important;
	}
}

/* Lightbox w kolorach strony */
.wp-lightbox-overlay .scrim {
	background-color: var(--wp--preset--color--base) !important;
}

.wp-lightbox-overlay .close-button,
.wp-lightbox-overlay .wp-lightbox-navigation-button {
	color: var(--wp--preset--color--contrast);
	fill: currentColor;
}

/* ---------------------------------------------------------------- */
/* Następna realizacja                                               */
/* ---------------------------------------------------------------- */

.grajdek-next {
	display: grid;
	gap: 1.25rem;
	text-decoration: none;
	color: inherit;
}

.grajdek-next__label {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.grajdek-next__title {
	font-size: var(--wp--preset--font-size--xx-large);
	font-weight: 500;
	letter-spacing: -0.03em;
	line-height: 1.05;
	margin: 0;
}

.grajdek-next__image {
	overflow: clip;
	aspect-ratio: 21 / 9;
	background: var(--wp--preset--color--surface);
}

.grajdek-next__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 1.4s var(--grajdek-ease);
}

.grajdek-next:hover .grajdek-next__image img {
	transform: scale(1.02);
}

.grajdek-next:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 6px;
}

@media (max-width: 767px) {
	.grajdek-next__image {
		aspect-ratio: 4 / 3;
	}
}

/* ---------------------------------------------------------------- */
/* Listy i sekcje                                                    */
/* ---------------------------------------------------------------- */

.wp-block-list.is-style-plain {
	list-style: none;
	padding-left: 0;
}

.grajdek-spaces li {
	font-size: var(--wp--preset--font-size--x-large);
	letter-spacing: -0.03em;
	line-height: 1.2;
	padding-block: 0.35rem;
}

.grajdek-rows > .wp-block-columns {
	border-top: 1px solid var(--wp--preset--color--line);
	padding-top: var(--wp--preset--spacing--40);
	margin-block: 0 !important;
}

.grajdek-rows > .wp-block-columns + .wp-block-columns {
	margin-top: var(--wp--preset--spacing--50) !important;
}

.grajdek-sticky {
	position: sticky;
	top: 2rem;
	align-self: start;
}

@media (max-width: 781px) {
	.grajdek-sticky {
		position: static;
	}
}

.grajdek-muted {
	color: var(--wp--preset--color--muted);
}

/* ---------------------------------------------------------------- */
/* Dane kontaktowe i formularz                                       */
/* ---------------------------------------------------------------- */

.grajdek-contact-details {
	display: grid;
	gap: 1.25rem;
	margin: 0;
}

.grajdek-contact-details div {
	display: grid;
	gap: 0.15rem;
}

.grajdek-contact-details dt {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.grajdek-contact-details dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: -0.015em;
}

.grajdek-contact-details a {
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.5s var(--grajdek-ease);
}

.grajdek-contact-details a:hover {
	background-size: 100% 1px;
}

.grajdek-form {
	display: grid;
	gap: 1.5rem;
}

.grajdek-form__row {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 640px) {
	.grajdek-form__row {
		grid-template-columns: 1fr 1fr;
	}
}

.grajdek-field {
	display: grid;
	gap: 0.5rem;
	min-width: 0;
}

.grajdek-field label,
.grajdek-field legend {
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
}

.grajdek-field .grajdek-field__optional {
	color: var(--wp--preset--color--muted);
	font-weight: 400;
}

.grajdek-field input,
.grajdek-field select,
.grajdek-field textarea {
	box-sizing: border-box;
	min-width: 0;
	font: inherit;
	color: inherit;
	background: transparent;
	border: 1px solid var(--wp--preset--color--muted);
	border-radius: 0;
	padding: 0.8rem 0.9rem;
	width: 100%;
	transition: border-color 0.2s ease;
}

.grajdek-field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - 0.85rem) 50%;
	background-size: 0.3rem 0.3rem;
	background-repeat: no-repeat;
	padding-right: 2.5rem;
}

.grajdek-field select option {
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.grajdek-field textarea {
	min-height: 9rem;
	resize: vertical;
}

.grajdek-field input:hover,
.grajdek-field select:hover,
.grajdek-field textarea:hover {
	border-color: var(--wp--preset--color--contrast);
}

.grajdek-field input:focus-visible,
.grajdek-field select:focus-visible,
.grajdek-field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--contrast);
}

.grajdek-field__help {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

.grajdek-field__error {
	font-size: var(--wp--preset--font-size--small);
	color: var(--grajdek-error);
	margin: 0;
}

.grajdek-field.has-error input,
.grajdek-field.has-error textarea {
	border-color: var(--grajdek-error);
}

.grajdek-consent {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.75rem;
	align-items: start;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.grajdek-consent input {
	width: 1.1rem;
	height: 1.1rem;
	margin: 0.15rem 0 0;
	accent-color: var(--wp--preset--color--contrast);
}

.grajdek-consent.has-error {
	color: var(--grajdek-error);
}

.grajdek-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.grajdek-form__submit {
	justify-self: start;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	letter-spacing: 0.01em;
	padding: 0.95rem 1.8rem;
	border: 1px solid var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease, transform 0.15s ease;
}

.grajdek-form__submit:hover {
	background: transparent;
	color: var(--wp--preset--color--contrast);
}

.grajdek-form__submit:active,
.wp-element-button:active,
.wp-block-button__link:active {
	transform: translateY(1px);
}

.grajdek-form__submit:focus-visible {
	outline: 1px solid var(--wp--preset--color--contrast);
	outline-offset: 3px;
}

.grajdek-notice {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--wp--preset--color--line);
	background: var(--wp--preset--color--surface);
}

.grajdek-notice--error {
	border-color: var(--grajdek-error);
}

.grajdek-notice p {
	margin: 0;
}

.grajdek-notice p + p {
	margin-top: 0.5rem;
}

.grajdek-notice ul {
	margin: 0.5rem 0 0;
	padding-left: 1.1rem;
	font-size: var(--wp--preset--font-size--small);
}

.grajdek-notice:focus {
	outline: none;
}

.grajdek-notice:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 3px;
}

/* Przycisk pauzy pokazu slajdów (WCAG 2.2.2) */
.grajdek-slideshow-toggle {
	position: absolute;
	right: var(--wp--style--root--padding-right, 1rem);
	bottom: var(--wp--preset--spacing--50);
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font: inherit;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--on-image);
	background: rgb(10 10 10 / 0.35);
	border: 1px solid rgb(243 243 241 / 0.6);
	padding: 0.55rem 0.9rem;
	cursor: pointer;
	backdrop-filter: blur(6px);
	transition: background-color 0.3s ease;
}

.grajdek-slideshow-toggle:hover {
	background: rgb(10 10 10 / 0.55);
}

.grajdek-slideshow-toggle:focus-visible {
	outline: 1px solid var(--wp--preset--color--on-image);
	outline-offset: 3px;
}

.grajdek-slideshow-toggle::before {
	content: "";
	width: 0.55rem;
	height: 0.65rem;
	border-inline: 2px solid currentColor;
	box-sizing: border-box;
}

.grajdek-slideshow-toggle[aria-pressed="true"]::before {
	border: 0;
	width: 0;
	height: 0;
	border-left: 0.6rem solid currentColor;
	border-block: 0.35rem solid transparent;
}

@media (max-width: 599px) {
	.grajdek-slideshow-toggle {
		bottom: auto;
		top: 1rem;
	}
}

/* ---------------------------------------------------------------- */
/* Stopka                                                            */
/* ---------------------------------------------------------------- */

.grajdek-footer {
	font-size: 0.9375rem;
}

.grajdek-footer .wp-block-navigation-item__content {
	position: relative;
}

.grajdek-footer a:where(:not(.wp-block-navigation-item__content):not(.wp-social-link-anchor)) {
	text-decoration: none;
}

.grajdek-footer a:where(:not(.wp-block-navigation-item__content):not(.wp-social-link-anchor)):hover {
	text-decoration: underline;
}

/* ---------------------------------------------------------------- */
/* Ruch: ujawnianie przy przewijaniu (CSS scroll-driven, bez JS)     */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	@supports (animation-timeline: view()) {
		.wp-block-post-template.is-style-staggered > li,
		.grajdek-project-content > .wp-block-image,
		.grajdek-project-content > .wp-block-gallery > .wp-block-image,
		.grajdek-reveal {
			animation: grajdek-reveal linear both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}
	}

	.grajdek-hero__content > * {
		animation: grajdek-rise 1.1s var(--grajdek-ease) both;
	}

	.grajdek-hero__content > *:nth-child(2) {
		animation-delay: 0.12s;
	}

	.grajdek-hero__content > *:nth-child(3) {
		animation-delay: 0.24s;
	}
}

@keyframes grajdek-reveal {
	from {
		opacity: 0;
		transform: translateY(2.5rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes grajdek-rise {
	from {
		opacity: 0;
		transform: translateY(1.25rem);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* ---------------------------------------------------------------- */
/* Drobne                                                            */
/* ---------------------------------------------------------------- */

.grajdek-arrow-link a,
a.grajdek-arrow-link {
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.2rem;
}

.grajdek-arrow-link a::after,
a.grajdek-arrow-link::after {
	content: "\2192";
	transition: transform 0.4s var(--grajdek-ease);
}

.grajdek-arrow-link a:hover::after,
a.grajdek-arrow-link:hover::after {
	transform: translateX(0.3rem);
}

.grajdek-breadcrumbs {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
}

.grajdek-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.grajdek-breadcrumbs li + li::before {
	content: "/";
	margin-right: 0.5rem;
}

.grajdek-breadcrumbs a {
	text-decoration: none;
}

.grajdek-breadcrumbs a:hover {
	text-decoration: underline;
}

@media (max-width: 781px) {
	.wp-block-columns.grajdek-stack-mobile-reverse {
		flex-direction: column-reverse;
	}
}

/* ---------------------------------------------------------------- */
/* Wariant Beż                                                       */
/* ---------------------------------------------------------------- */

/* Stopka na ciemniejszym beżu domyka stronę ciepłym tłem. */
.grajdek-footer {
	background: var(--wp--preset--color--surface-deep);
	border-top-color: transparent !important;
}

/* Cieplejszy przyciemniający gradient na zdjęciu w hero. */
.grajdek-hero__content {
	background: linear-gradient(to top, rgb(37 33 29 / 0.6), rgb(37 33 29 / 0.25) 55%, transparent);
}

/* Szare tła zastępcze zdjęć w odcieniu beżu. */
.wp-block-gallery.is-style-slideshow {
	background: var(--wp--preset--color--surface-deep);
}

/* Przyciski: po najechaniu ciemniejszy beż zamiast przezroczystego. */
:where(.wp-element-button, .wp-block-button__link):not(.grajdek-hero__content *):hover,
.grajdek-form__submit:hover {
	background: var(--wp--preset--color--surface-deep) !important;
}

.grajdek-field input,
.grajdek-field select,
.grajdek-field textarea {
	background-color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--line);
}

.grajdek-field input:hover,
.grajdek-field select:hover,
.grajdek-field textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

/* Typografia: szeryf (Libre Baskerville) w dużych tekstach, bezszeryf (IBM Plex Sans) w treści. */
p.has-xx-large-font-size,
p.has-x-large-font-size,
.grajdek-spaces li,
.grajdek-next__title,
.grajdek-contact-details dd,
.grajdek-meta dd {
	font-family: var(--wp--preset--font-family--serif);
	font-weight: 400 !important;
	letter-spacing: -0.005em !important;
}

p.has-xx-large-font-size {
	line-height: 1.28 !important;
}

p.has-x-large-font-size {
	line-height: 1.45 !important;
}

.grajdek-spaces li {
	line-height: 1.35;
}

.grajdek-contact-details dd,
.grajdek-meta dd {
	font-size: 1.0625rem;
}

.grajdek-contact-details dd {
	font-size: var(--wp--preset--font-size--large);
}

/* Etykiety i drobny tekst: lekko rozstrzelone, jak w katalogach architektonicznych. */
.grajdek-meta dt,
.grajdek-contact-details dt,
.grajdek-next__label,
.grajdek-breadcrumbs,
.grajdek-filter {
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.75rem;
}

.grajdek-filter sup {
	letter-spacing: 0;
}

.grajdek-header .wp-block-navigation {
	letter-spacing: 0.01em;
}

/* Więcej beżu: karty realizacji na beżowym tle, cieplejsze linie. */
.grajdek-card .wp-block-post-featured-image,
.grajdek-next__image {
	background: var(--wp--preset--color--surface-deep);
}

.grajdek-rows > .wp-block-columns {
	border-top-color: var(--wp--preset--color--line);
}

/* Nagłówki części w realizacji (np. „Na zewnątrz”, „Stodoła jasna”). */
.grajdek-project-content > .grajdek-section-title {
	margin-top: var(--wp--preset--spacing--60) !important;
	margin-bottom: var(--wp--preset--spacing--30) !important;
}

/* Logo (podpis): czarny tusz na przezroczystym tle; w trybie ciemnym odwrócone na jasne. */
.grajdek-logo {
	margin: 0;
	line-height: 0;
}

.grajdek-logo img {
	height: auto;
}

.grajdek-logo a:hover img {
	opacity: 0.7;
}

.grajdek-header .grajdek-logo img {
	width: clamp(160px, 15vw, 215px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .grajdek-logo img {
		filter: invert(1) brightness(0.94);
	}
}

:root[data-theme="dark"] .grajdek-logo img {
	filter: invert(1) brightness(0.94);
}

/* ---------------------------------------------------------------- */
/* FAQ (rozwijane pytania, natywne <details>, bez JS)                 */
/* ---------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

#faq {
	scroll-margin-top: 2rem;
}

.grajdek-faq .wp-block-details {
	border-top: 1px solid var(--wp--preset--color--line);
	margin: 0 !important;
	padding: 0;
}

.grajdek-faq .wp-block-details:last-child {
	border-bottom: 1px solid var(--wp--preset--color--line);
}

.grajdek-faq .wp-block-details summary {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1.5rem;
	padding-block: 1.25rem;
	cursor: pointer;
	list-style: none;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.35;
}

.grajdek-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.grajdek-faq .wp-block-details summary::after {
	content: "+";
	flex: none;
	font-size: 1.5rem;
	line-height: 1;
	font-weight: 300;
	transition: transform 0.4s var(--grajdek-ease);
}

.grajdek-faq .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

.grajdek-faq .wp-block-details summary:hover {
	color: var(--wp--preset--color--muted);
}

.grajdek-faq .wp-block-details summary:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 4px;
}

.grajdek-faq .wp-block-details > :not(summary) {
	max-width: 62ch;
	margin-top: 0;
	margin-bottom: 1rem;
	color: var(--wp--preset--color--muted);
}

.grajdek-faq .wp-block-details > :last-child {
	margin-bottom: 1.5rem;
}

/* Płynne rozwijanie tam, gdzie przeglądarka to obsługuje. */
@media (prefers-reduced-motion: no-preference) {
	@supports (interpolate-size: allow-keywords) {
		.grajdek-faq {
			interpolate-size: allow-keywords;
		}

		.grajdek-faq .wp-block-details::details-content {
			height: 0;
			overflow: clip;
			transition: height 0.45s var(--grajdek-ease), content-visibility 0.45s allow-discrete;
		}

		.grajdek-faq .wp-block-details[open]::details-content {
			height: auto;
		}
	}
}