/*
 * HydroLuk — zestaw „Studio”: slate, hero z pełnobieżnikowym tłem (zdjęcie), ciemny nagłówek i stopka.
 * Ładowany po main.css — nadpisuje zmienne i kluczowe sekcje.
 */

:root {
	--cream: #e2e8f0;
	--cream-dark: #cbd5e1;
	--page: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 52%, #e2e8f0 100%);
	--ink: #0f172a;
	--surface: #ffffff;
	--surface-soft: rgba(255, 255, 255, 0.94);
	--surface-2: #f8fafc;
	--border: rgba(15, 23, 42, 0.12);
	--text: rgba(15, 23, 42, 0.92);
	--muted: rgba(51, 65, 85, 0.86);
	--accent: #f97316;
	--accent-dim: color-mix(in oklab, var(--accent) 16%, transparent);
	--accent-2: #0ea5e9;
	--accent-glow: color-mix(in oklab, var(--accent-2) 48%, transparent);
	--radius: 12px;
	--radius-sm: 10px;
	--shadow:
		0 16px 48px rgba(15, 23, 42, 0.07),
		0 4px 12px rgba(15, 23, 42, 0.04);
	--shadow-sm: 0 6px 24px rgba(15, 23, 42, 0.06);
	--font-display: "Outfit", ui-sans-serif, system-ui, sans-serif;
	--font-body: "DM Sans", ui-sans-serif, system-ui, sans-serif;
}

html {
	background:
		radial-gradient(ellipse 70% 45% at 96% -4%, rgba(14, 165, 233, 0.1), transparent 52%),
		radial-gradient(ellipse 50% 40% at 4% 10%, rgba(249, 115, 22, 0.08), transparent 50%),
		var(--page);
}

body::before {
	opacity: 0.18;
	mix-blend-mode: multiply;
	filter: saturate(105%);
}

a:hover {
	color: var(--accent-2);
}

/* —— nagłówek (ciemny pas) —— */
.site-header {
	background: linear-gradient(180deg, #0f172a 0%, #0c1322 100%);
	border-bottom: 1px solid rgba(248, 250, 252, 0.08);
	backdrop-filter: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.site-title {
	color: #f8fafc;
}

.site-tagline {
	color: #94a3b8 !important;
}

.site-nav__list a {
	color: #e2e8f0 !important;
	border-bottom-color: transparent !important;
}

.site-nav__list a:hover {
	color: #fb923c !important;
	border-bottom-color: rgba(251, 146, 60, 0.55) !important;
}

.nav-toggle {
	border-color: rgba(248, 250, 252, 0.18);
}

.nav-toggle__bar {
	background: #f1f5f9;
}

/* Logo białe / oryginalne na ciemnym pasku — bez pomarańczowego filtru z main.css */
.site-header .site-branding .site-logo-link img,
.site-header .site-branding .custom-logo-link img {
	filter: none !important;
	opacity: 1 !important;
	transition: opacity 0.2s ease;
}

.site-header .site-branding .site-logo-link:hover img,
.site-header .site-branding .site-logo-link:focus-visible img,
.site-header .site-branding .custom-logo-link:hover img,
.site-header .site-branding .custom-logo-link:focus-visible img {
	filter: none !important;
	opacity: 0.88 !important;
}

/* Sekcja 1 — środek: flex + wyraźnie na każdym potomku (nad WordPress core / blokami) */
section.hero.hero--photo-bg .hero__layout.hero__layout--centered {
	display: grid !important;
	grid-template-columns: minmax(0, 1fr) !important;
	justify-items: stretch !important;
	width: 100% !important;
	max-width: 100% !important;
	margin-inline: 0 !important;
	box-sizing: border-box;
}

section.hero.hero--photo-bg .hero__copy.hero__copy--center {
	box-sizing: border-box;
	display: flex !important;
	flex-direction: column !important;
	align-items: stretch !important;
	width: 100% !important;
	max-width: min(76rem, 100%) !important;
	margin-inline: auto !important;
	text-align: center !important;
}

section.hero.hero--photo-bg .hero__copy.hero__copy--center > *,
section.hero.hero--photo-bg .hero__copy.hero__copy--center p,
section.hero.hero--photo-bg .hero__copy.hero__copy--center h1,
section.hero.hero--photo-bg .hero__copy.hero__copy--center div,
section.hero.hero--photo-bg .hero__copy.hero__copy--center dl {
	text-align: center !important;
}

section.hero.hero--photo-bg .hero__cta {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	width: 100% !important;
	gap: 0.75rem;
	box-sizing: border-box;
}

section.hero.hero--photo-bg .hero__cta .btn {
	margin-inline: 0;
}

.hero.hero--photo-bg dl.hero__stats {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: 1rem 1.5rem;
	width: 100% !important;
	max-width: min(72rem, 100%) !important;
	margin-inline: auto !important;
	box-sizing: border-box;
	justify-items: stretch !important;
	text-align: center !important;
}

.hero.hero--photo-bg .hero__stats > div {
	text-align: center !important;
}

.hero.hero--photo-bg .hero__stats dt,
.hero.hero--photo-bg .hero__stats dd {
	text-align: center !important;
}

.hero.hero--photo-bg {
	background-image:
		linear-gradient(
			180deg,
			rgba(15, 23, 42, 0.86) 0%,
			rgba(15, 23, 42, 0.58) 48%,
			rgba(15, 23, 42, 0.9) 100%
		),
		var(--hero-cover-bg) !important;
	background-size: cover !important;
	background-position: center center !important;
	padding-block: clamp(3.25rem, 9vw, 5.85rem) !important;
	min-height: min(90vh, 960px) !important;
}

.hero__bg,
.hero__grain {
	display: none !important;
}

.hero.hero--photo-bg .hero__eyebrow {
	color: #38bdf8 !important;
	text-align: center !important;
}

.hero__eyebrow {
	color: #38bdf8 !important;
}

.hero.hero--photo-bg .hero__title,
.hero.hero--photo-bg h1.hero__title {
	color: #f8fafc !important;
	text-align: center !important;
}

.hero.hero--photo-bg .hero__lead,
.hero__lead {
	color: #cbd5e1 !important;
	text-align: center !important;
}

.hero.hero--photo-bg .hero__stats {
	text-align: center !important;
}

.hero__accent {
	background: linear-gradient(100deg, #fb923c 0%, #f97316 55%, #ea580c 100%) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
}

.hero.hero--photo-bg .hero__stats > div,
.hero__stats > div {
	border-top-color: rgba(248, 250, 252, 0.16) !important;
}

.hero.hero--photo-bg .hero__stats dt,
.hero__stats dt {
	color: #94a3b8 !important;
}

.hero.hero--photo-bg .hero__stats dd,
.hero__stats dd {
	color: #e2e8f0 !important;
}

.hero.hero--photo-bg .hero__brief {
	background: rgba(15, 23, 42, 0.5) !important;
	border-color: rgba(248, 250, 252, 0.16) !important;
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.28) !important;
}

.hero.hero--photo-bg .hero__brief-label {
	color: #bae6fd !important;
}

.hero.hero--photo-bg .checklist--hero li {
	color: rgba(241, 245, 249, 0.94) !important;
}

/* Brief: w main.css checklist ma text-align:left — tutaj pełne wyśrodkowanie sekcji 1 */
section.hero.hero--photo-bg .checklist.checklist--hero {
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	width: 100% !important;
	max-width: min(38rem, 100%) !important;
	margin-inline: auto !important;
	text-align: center !important;
}

section.hero.hero--photo-bg .checklist.checklist--hero li {
	text-align: center !important;
	margin-inline: auto !important;
	max-width: 42rem;
	width: 100%;
	box-sizing: border-box;
}

.hero__panel {
	border: 1px solid var(--border);
	box-shadow: var(--shadow);
	background: var(--surface) !important;
}

.hero__panel-media {
	background: linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

@media (max-width: 960px) {
	.hero.hero--photo-bg {
		min-height: min(88vh, 840px) !important;
		background-position: center 22% !important;
	}

	.hero.hero--photo-bg .hero__title {
		font-size: clamp(1.75rem, 6.5vw, 2.55rem) !important;
	}

	/* Jedna kolumna: bloki z max-width z main.css (34ch) muszą być wyśrodkowane w komórce */
	.hero.hero--photo-bg dl.hero__stats {
		grid-template-columns: 1fr !important;
		justify-items: center !important;
	}

	.hero.hero--photo-bg .hero__stats > div {
		max-width: min(40rem, 100%) !important;
		width: 100%;
		margin-inline: auto !important;
		justify-self: center !important;
	}
}

@media (max-width: 720px) {
	.hero.hero--photo-bg .hero__stats dt,
	.hero.hero--photo-bg .hero__stats dd {
		margin-inline: auto !important;
		max-width: 42rem !important;
	}
}

/* —— pasek wyróżników —— */
.stripe {
	background: linear-gradient(180deg, #0f172a 0%, #111c2e 100%) !important;
	border: 1px solid rgba(248, 250, 252, 0.1) !important;
	box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12);
}

.stripe strong {
	color: #f8fafc;
}

.stripe .muted {
	color: #94a3b8 !important;
}

/* —— sekcje —— */
.section--muted {
	background:
		radial-gradient(circle at 70% -20%, rgba(14, 165, 233, 0.06), transparent 45%),
		linear-gradient(180deg, #eef2f7 0%, transparent 90%) !important;
	border-block: 1px solid rgba(15, 23, 42, 0.06) !important;
}

.section-title {
	color: var(--ink) !important;
}

.surface--elevated {
	border-color: rgba(15, 23, 42, 0.1) !important;
	background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
}

.btn--primary {
	background: linear-gradient(162deg, #f97316 0%, #ea580c 48%, #c2410c 100%) !important;
	border-color: rgba(249, 115, 22, 0.45) !important;
}

/* Drugi przycisk w hero stoi na ciemnym tle — osadzony styl */
.hero__copy .btn--ghost {
	background: rgba(255, 255, 255, 0.07) !important;
	color: #f1f5f9 !important;
	border-color: rgba(248, 250, 252, 0.22) !important;
}

.hero__copy .btn--ghost:hover {
	background: rgba(255, 255, 255, 0.14) !important;
	color: #ffffff !important;
	border-color: rgba(248, 250, 252, 0.35) !important;
}

.project-card__visual {
	background:
		radial-gradient(circle at 55% -8%, rgba(14, 165, 233, 0.08), transparent 55%),
		linear-gradient(145deg, #f1f5f9 0%, #e2e8f0 100%) !important;
}

/* —— stopka —— */
.site-footer {
	background: linear-gradient(180deg, #0f172a 0%, #0a0f1a 100%) !important;
	border-top: 1px solid rgba(248, 250, 252, 0.08) !important;
	color: #cbd5e1;
}

.site-footer .muted,
.site-footer__address,
.site-footer__snippet {
	color: #94a3b8 !important;
}

.site-footer__list a {
	color: #e2e8f0 !important;
}

.site-footer__bar {
	border-top-color: rgba(248, 250, 252, 0.08) !important;
	color: #94a3b8;
}

.site-footer .site-footer__logo-slot .site-logo-link--footer img,
.site-footer .site-footer__logo-slot .custom-logo-link img {
	filter: none !important;
	opacity: 1 !important;
}

.site-footer .site-footer__logo-slot .site-logo-link--footer:hover img,
.site-footer .site-footer__logo-slot .custom-logo-link:hover img {
	filter: none !important;
	opacity: 0.88 !important;
}

.footer-keywords-heading {
	color: #64748b !important;
}

.footer-keywords-frame {
	--fk-bg: rgba(15, 23, 42, 0.55) !important;
	--fk-border: rgba(248, 250, 252, 0.1) !important;
	background: var(--fk-bg) !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25) !important;
}

.footer-keywords-frame:hover {
	--fk-bg: rgba(30, 41, 59, 0.75) !important;
	--fk-border: rgba(249, 115, 22, 0.35) !important;
}

.footer-keywords-item {
	color: #94a3b8 !important;
}

.footer-keywords-frame:hover .footer-keywords-item {
	color: #cbd5e1 !important;
}

.footer-keywords-item:hover {
	color: #fb923c !important;
	background: rgba(249, 115, 22, 0.12) !important;
	border-color: rgba(249, 115, 22, 0.28) !important;
}

/* —— blog / pojedynczy wpis —— */
.blog-page-title,
.single-title {
	color: var(--ink) !important;
}

@media (max-width: 720px) {
	.site-nav {
		background: linear-gradient(180deg, #0f172a 0%, #111c2e 100%) !important;
		border: 1px solid rgba(248, 250, 252, 0.12) !important;
	}

	.site-nav__list a {
		color: #e2e8f0 !important;
	}
}