/* Responsive adjustments: tablet/desktop split at 810px, plus mobile (<=600px) */

:root {
	/* Globalny padding layoutu (desktop): 20px @1280, rośnie do ok. 26px @1920 */
	--layout-pad-x: clamp(11.65625px, calc(11.65625px + (14.34375) * ((100vw - 390px) / (1530))), 26px);
	--layout-pad-top: var(--layout-pad-x);
	--header-logo-h: clamp(58.28125px, calc(58.28125px + (71.71875) * ((100vw - 390px) / (1530))), 130px);
}

/* Wspólny padding boczny dla wszystkich standardowych sekcji */
.section .section-width {
	padding-left: var(--layout-pad-x);
	padding-right: var(--layout-pad-x);
}

/* Header i hero trzymają ten sam rytm top + side */
.header-wrapper {
	padding-top: var(--layout-pad-top);
	padding-left: var(--layout-pad-x);
	padding-right: var(--layout-pad-x);
}

/* Scroll-up clone header: desktop compact variant with fixed readability floor.
   Logo >= 80px, nav shell follows logo height, while top padding stays unchanged. */
@media (min-width: 811px) {
	body .header-wrapper.header-clone {
		--clone-logo-h: clamp(80px, calc(var(--header-logo-h) * 0.8), 104px);
	}

	body .header-wrapper.header-clone .site-logo-link {
		height: var(--clone-logo-h);
		width: calc(var(--clone-logo-h) * 2.59);
	}

	body .header-wrapper.header-clone .menu-desktop__nav-shell {
		height: var(--clone-logo-h);
		min-height: var(--clone-logo-h);
		padding-top: clamp(8.159375px, calc(8.159375px + (10.040625) * ((100vw - 390px) / (1530))), 18.2px);
	}
}

.home #hero.hero-shape .hero-shape__inner {
	padding-top: var(--layout-pad-top);
}

/* Footer: ten sam padding boczny co reszta layoutu */
footer .section-width {
	padding-left: var(--layout-pad-x);
	padding-right: var(--layout-pad-x);
}

/* Wyjątek: sekcja slidera pozostaje full-width */
.post-slide .section-width {
	padding-left: 0;
	padding-right: 0;
}

@media (max-width: 810px) {
	/* Mobile parity with desktop clone-system:
	   original header is static at top (non-sticky),
	   sticky behavior is provided only by .header-clone on scroll-up. */
	body .header-wrapper:not(.header-clone) {
		position: absolute;
		background-color: transparent;
	}

	/* Sticky clone on mobile keeps visible background. */
	body .header-wrapper.header-clone {
		background-color: #fff;
	}

	:root {
		--layout-pad-x: 15px;
		--layout-pad-top: 15px;
	}

	body {
		font-size: 18px;
	}

	/* Hero / Section 1 */
	#hero.hero-shape .hero-shape__svg--desktop {
		display: none;
	}

	#hero.hero-shape .hero-shape__svg--mobile {
		display: block;
	}

	#hero.hero-shape .hero-center-visual {
		width: 100%;
		max-width: 100%;
	}

	.home #hero.hero-shape .hero-shape__inner {
		padding-bottom: 10px;
	}

	.home-listing-head {
		padding-top: 36px;
		padding-right: 10px;
		padding-left: 10px;
	}

	.home-listing-title,
	.home-listing-link a {
		font-size: 24px;
	}

	/* Header / menu */
	.header {
		grid-template-columns: max-content max-content;
		justify-content: space-between;
		gap: 16px;
		align-items: flex-start;
	}

	.part-left.parts .site-logo-link {
		/* Mobile logo baseline: 111.52x100 @390; scales with the same 390->1920 fluid model. */
		width: clamp(111.52px, calc(111.52px + (33.456) * ((100vw - 390px) / (1530))), 144.976px);
		height: clamp(100px, calc(100px + (30) * ((100vw - 390px) / (1530))), 130px);
		margin-top: clamp(-13px, calc(-10px + (-3) * ((100vw - 390px) / (1530))), -10px);
	}

	.part-right.parts {
		flex-direction: row;
		align-items: flex-start;
		justify-content: flex-end;
		gap: 0;
		padding-top: 0;
	}

	.menu-desktop {
		display: none;
	}

	.menu-mobile {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: clamp(20px, calc(20px + (6) * ((100vw - 390px) / (1530))), 26px);
	}

	.menu-mobile .menu-join-btn {
		width: clamp(79px, calc(79px + (23.7) * ((100vw - 390px) / (1530))), 102.7px);
		height: clamp(36px, calc(36px + (10.8) * ((100vw - 390px) / (1530))), 46.8px);
		font-size: clamp(18px, calc(18px + (5.4) * ((100vw - 390px) / (1530))), 23.4px);
		border-radius: clamp(18px, calc(18px + (5.4) * ((100vw - 390px) / (1530))), 23.4px);
		color: #fff;
		background-color: #000;
		border: 0;
	}

	.menu-mobile .menu-join-btn:active,
	.menu-mobile .menu-join-btn.is-clicked {
		color: #000;
		background-color: transparent;
	}

	.menu-mobile .menu-join-btn:active::before,
	.menu-mobile .menu-join-btn.is-clicked::before {
		opacity: 1;
		animation: turuloJoinGradientSpin 2.6s linear infinite;
	}

	.menu-mobile .menu-mobile-toggle {
		font-size: clamp(18px, calc(18px + (5.4) * ((100vw - 390px) / (1530))), 23.4px);
		padding-top: clamp(7px, calc(7px + (2.1) * ((100vw - 390px) / (1530))), 9.1px);
	}

	.menu-mobile .hamburger {
		display: none;
	}

	/* Mobile hero typography: projektowe minimum */
	#hero.hero-shape .hero-copy__row {
		gap: 0;
	}

	/* Top sections */
	#top-section .arch-filter-box {
		flex-direction: column;
		align-items: flex-start;
		gap: 12px;
	}

	.single-top-grid {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.single-top-thumb {
		min-height: 220px;
	}

	/* Listings */
	.arch-grid {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		gap: 20px;
	}

		.listing-artists {
			--artists-columns: 2;
			--artists-grid-gap: 20px;
			--artists-gap-row: 10px;
			--artists-gap-social: 20px;
		}
		.listing-news    { grid-template-columns: repeat(2, 1fr); }
		.listing-projects { grid-template-columns: 1fr; }

		.listing-artists .arch-card {
			border-radius: 30px;
			padding: 10px;
		}

	.listing-artists .arch-thumb {
		height: 171px;
	}

		.listing-artists .arch-meta h3 {
			margin-top: 10px;
		}

		.listing-news .arch-card {
			padding: 10px 10px 0;
		}

	.listing-news .arch-thumb {
		height: 186px;
	}

	.listing-news .arch-meta h3 {
		margin-top: 10px;
		margin-bottom: 20px;
	}

	.listing-news .arch-date--desktop {
		display: none;
	}

	.listing-news .arch-date--mobile {
		display: inline-flex;
	}

	.listing-projects {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	.listing-projects .arch-card {
		padding-top: 36px;
		padding-right: 10px;
		padding-bottom: 0;
		padding-left: 10px;
	}

	.listing-projects .arch-meta h3 {
		max-width: calc(100% - 66px);
	}

	.listing-projects .arch-card::after {
		width: 51px;
		height: 51px;
		right: 10px;
	}

	/* Elastic fields */
	.normal-txt .section-content {
		display: grid;
		grid-template-columns: 1fr;
		gap: 24px;
	}

	.gallery .section-content {
		grid-template-columns: 1fr;
	}

	.gallery-wrapper {
		grid-template-columns: repeat(2, 1fr);
		gap: clamp(15px, 4vw, 20px);
	}

	/* Elastic fields: sekcja galerii – tytuł nad galerią */
	#section-4 .section-content {
		grid-template-columns: 1fr;
		row-gap: 16px;
	}

	#section-4 .title-wrapper {
		margin-bottom: 30px;
	}

	.gallery-wrapper .item img {
		width: 100%;
		height: auto;
	}

	.post-slide .section-content {
		flex-direction: column;
		gap: 16px;
	}

	.video-wrapper {
		width: 100%;
		height: auto;
	}

	/* Footer */
	footer .foot-section { grid-template-columns: 1fr; gap: 24px; }
	footer .middle-section { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
	body {
		font-size: 16px;
	}

	.elastic-fields .section-width .section-content {
		grid-template-columns: 1fr;
		row-gap: 20px;
	}

	#section-6 .section-width .section-content,
	#section-7 .section-width .section-content,
	#section-8 .section-width .section-content {
		grid-template-columns: repeat(2, 1fr);
		row-gap: 0;
	}

	/* Top sections */
	.single-top-grid { grid-template-columns: 1fr; }
	.single-top-thumb { min-height: 200px; }

	/* Listings */
	.listing-artists,
	.listing-news { grid-template-columns: 1fr; }

	.listing-projects { grid-template-columns: 1fr; gap: 20px; }

	/* Bottom nav */
	.single-bottom-nav .nav-inline-bottom { font-size: 22px; }
}