/* File: /assets/css/base.css
   Typografia, elementy bazowe, przyciski, proza, narzedzia.
   Nadpisuje domyslne style GeneratePress tam gdzie trzeba.
   ========================================================================== */

/* --- Reset uzupelniajacy --------------------------------------------- */
*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--dm-header-h) + 1rem);
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

body.dmc {
	margin: 0;
	background: var(--dm-wall);
	color: var(--dm-ink);
	font-family: var(--dm-font-ui);
	font-size: var(--dm-text-md);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
	overflow-x: hidden;
}

/* GeneratePress site wrapper: nie chcemy sztywnego bialego tla motywu */
.dmc .site,
.dmc #page {
	background: var(--dm-wall);
}

/* --- Naglowki -------------------------------------------------------
   Selektor elementu siedzi w :where(), wiec caly blok wazy tyle co jedna
   klasa (0,1,0). Bez tego `.dmc h3` (0,1,1) bilo klasy komponentow i np.
   naglowki widgetow w sidebarze czy kolumn w stopce dostawaly rozmiar H3
   oraz kolor --dm-ink, ktory na grafitowym tle stopki byl nieczytelny.
   Pliki komponentow laduja sie po base.css, wiec przy remisie wygrywaja. */
.dmc :where(h1, h2, h3, h4) {
	font-family: var(--dm-font-display);
	color: var(--dm-ink);
	font-weight: 760;
	line-height: 1.08;
	letter-spacing: -0.021em;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

.dmc :where(h1) {
	font-size: var(--dm-h1);
	letter-spacing: -0.03em;
}

.dmc :where(h2) {
	font-size: var(--dm-h2);
	letter-spacing: -0.025em;
}

.dmc :where(h3) {
	font-size: var(--dm-h3);
	font-weight: 700;
}

.dmc :where(h4) {
	font-size: var(--dm-text-lg);
	font-weight: 700;
	letter-spacing: -0.01em;
}

/* :where() - zerowa specyficznosc na elemencie. Bez tego `.dmc p` (0,1,1) bije
   `.dmc-footer__promise` / `.dmc-side__*` itd. (0,1,0) i kasuje ich marginesy. */
.dmc :where(p) {
	margin: 0 0 1rem;
	overflow-wrap: break-word;
}

.dmc :where(h1, h2, h3) {
	overflow-wrap: break-word;
}

/* Reset linkow zerowej specyficznosci (:where), zeby NIGDY nie nadpisywal
   kolorow komponentow ani kontekstow (stopka, nawigacja). Link dziedziczy
   kolor otoczenia. Kolor marki dostaja tylko linki w prozie - patrz .dmc-prose a. */
:where(.dmc) a {
	color: inherit;
	text-decoration: none;
	transition: color var(--dm-dur-fast) var(--dm-ease);
}

.dmc :focus-visible {
	outline: 3px solid var(--dm-coral);
	outline-offset: 3px;
	border-radius: var(--dm-r-xs);
}

/* Reset obrazka MUSI miec zerowa specyficznosc na klasie - inaczej `.dmc img`
   (0,1,1) bije komponentowe `.dmc-...-img { height: 100% }` (0,1,0) i wtedy
   object-fit: cover nie ma na czym dzialac (obrazek renderuje sie w naturalnej
   wysokosci, a kontener obcina gore - stad "kadr na sam sufit"). */
:where(.dmc) img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* <picture> znika z drzewa pudelek - <img> zachowuje sie jak bezposrednie
   dziecko ramki, wiec width/height/object-fit dzialaja na definitywnym boxie.
   Bez tego obrazek w <picture> nie wypelnia kontenera z aspect-ratio. */
.dmc picture {
	display: contents;
}

.dmc strong,
.dmc b {
	font-weight: 680;
	color: var(--dm-ink);
}

/* --- Kicker / etykieta wersalikowa --------------------------------- */
.dmc-kicker {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.4em 0.55em;
	font-family: var(--dm-font-ui);
	font-size: var(--dm-text-xs);
	font-weight: 640;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	color: var(--dm-coral-deep);
}

.dmc-kicker svg {
	width: 15px;
	height: 15px;
}

.dmc-kicker--muted {
	color: var(--dm-slate);
}

.dmc-kicker--on-dark {
	color: var(--dm-oak);
}

/* --- Proza: dlugie teksty (podstrony matrycy, blog, lead silosu) --- */
.dmc-prose {
	font-family: var(--dm-font-prose);
	font-size: 1.19rem;
	line-height: 1.68;
	color: #2c2822;
}

.dmc-prose > * {
	max-width: var(--dm-reading);
}

.dmc-prose p {
	margin: 0 0 1.15rem;
}

.dmc-prose h2 {
	font-family: var(--dm-font-display);
	margin: 2.4rem 0 0.8rem;
	font-size: var(--dm-h3);
}

.dmc-prose h3 {
	margin: 1.8rem 0 0.6rem;
}

.dmc-prose strong {
	font-weight: 600;
	color: var(--dm-ink);
	background: linear-gradient(transparent 62%, var(--dm-oak-soft) 62%);
}

.dmc-prose a {
	text-decoration: underline;
	text-decoration-color: var(--dm-coral-tint);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.dmc-lead {
	font-family: var(--dm-font-prose);
	font-size: clamp(1.15rem, 0.6vw + 1.05rem, 1.4rem);
	line-height: 1.55;
	color: var(--dm-slate);
	max-width: min(54ch, 100%);
}

/* --- Przyciski ---------------------------------------------------- */
.dmc-btn {
	--_bg: var(--dm-ink);
	--_fg: var(--dm-paper);
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	font-family: var(--dm-font-ui);
	font-size: var(--dm-text-base);
	font-weight: 620;
	line-height: 1;
	letter-spacing: -0.005em;
	padding: 0.95em 1.55em;
	border: 0;
	border-radius: var(--dm-r-pill);
	background: var(--_bg);
	color: var(--_fg);
	cursor: pointer;
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--dm-dur) var(--dm-ease), box-shadow var(--dm-dur) var(--dm-ease), background-color var(--dm-dur-fast) var(--dm-ease);
}

/* przesuw swiatla przy hoverze - subtelny, jeden raz */
.dmc-btn::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, 0.22) 48%, transparent 62%);
	transform: translateX(-120%);
	transition: transform 620ms var(--dm-ease);
}

.dmc-btn svg {
	width: 18px;
	height: 18px;
}

.dmc-btn:hover {
	transform: translateY(-2px);
	color: var(--_fg);
}

.dmc-btn:hover::after {
	transform: translateX(120%);
}

.dmc-btn:active {
	transform: translateY(0) scale(0.985);
}

@media (prefers-reduced-motion: reduce) {
	.dmc-btn,
	.dmc-btn::after {
		transition: none;
	}

	.dmc-btn:hover {
		transform: none;
	}
}

/* Wariant: telefon / glowne CTA (koral marki) */
.dmc-btn--call {
	--_bg: var(--dm-coral-deep);
	--_fg: #fff;
	box-shadow: var(--dm-shadow-coral);
}

.dmc-btn--call:hover {
	--_bg: var(--dm-coral-press);
	box-shadow: 0 12px 30px rgba(163, 48, 27, 0.36);
}

/* Wariant: zaufanie / darmowa wycena (zielen) */
.dmc-btn--quote {
	--_bg: var(--dm-green);
	--_fg: #fff;
}

.dmc-btn--quote:hover {
	--_bg: var(--dm-green-deep);
	box-shadow: 0 10px 26px rgba(24, 91, 62, 0.28);
}

/* Wariant: ghost na jasnym tle */
.dmc-btn--ghost {
	--_bg: transparent;
	--_fg: var(--dm-ink);
	box-shadow: inset 0 0 0 1.5px var(--dm-line-strong);
}

.dmc-btn--ghost:hover {
	--_bg: var(--dm-paper);
	box-shadow: inset 0 0 0 1.5px var(--dm-ink);
}

/* Wariant: ghost na ciemnym tle */
.dmc-btn--ghost-dark {
	--_bg: transparent;
	--_fg: var(--dm-on-dark);
	box-shadow: inset 0 0 0 1.5px rgba(244, 239, 230, 0.3);
}

.dmc-btn--ghost-dark:hover {
	--_bg: rgba(244, 239, 230, 0.08);
	--_fg: #fff;
	box-shadow: inset 0 0 0 1.5px rgba(244, 239, 230, 0.6);
}

.dmc-btn--lg {
	font-size: var(--dm-text-lg);
	padding: 1.1em 1.9em;
}

.dmc-btn--block {
	width: 100%;
}

/* --- Link ze strzalka --------------------------------------------- */
.dmc-arrowlink {
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	font-family: var(--dm-font-ui);
	font-weight: 620;
	color: var(--dm-ink);
}

.dmc-arrowlink svg {
	width: 17px;
	height: 17px;
	transition: transform var(--dm-dur) var(--dm-ease);
}

.dmc-arrowlink:hover {
	color: var(--dm-coral-deep);
}

.dmc-arrowlink:hover svg {
	transform: translateX(4px);
}

/* --- Chip / plakietka ------------------------------------------- */
.dmc-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	font-family: var(--dm-font-ui);
	font-size: var(--dm-text-sm);
	font-weight: 560;
	padding: 0.5em 0.9em;
	border-radius: var(--dm-r-pill);
	background: var(--dm-paper);
	color: var(--dm-ink);
	box-shadow: inset 0 0 0 1px var(--dm-line);
}

.dmc-chip svg {
	width: 15px;
	height: 15px;
	color: var(--dm-green);
}

.dmc-chip--free svg {
	color: var(--dm-green);
}

/* --- Telefon jako element tekstowy ----------------------------- */
.dmc-tel {
	font-family: var(--dm-font-ui);
	font-weight: 680;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.01em;
	white-space: nowrap;
	color: inherit;
}

/* --- Narzedzia ------------------------------------------------- */
.dmc-container {
	width: 100%;
	max-width: var(--dm-container);
	margin-inline: auto;
	padding-inline: var(--dm-gutter);
}

.dmc-container--wide {
	max-width: var(--dm-container-wide);
}

.dmc-section {
	padding-block: var(--dm-section);
}

.dmc-section--tight {
	padding-block: clamp(2.5rem, 5vw, 4rem);
}

.dmc-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dmc-eml-ph {
	border-bottom: 2px solid var(--dm-coral-tint);
}

/* --- Zabezpieczenie przed poziomym przepelnieniem ---
   Dzieci gridu i flexa maja domyslnie min-width: auto i nie chca sie zwezac
   ponizej intrinsic size dlugiego tekstu. To zeruje ten prog wszedzie tam,
   gdzie skladamy kolumny. */
.dmc-hero__inner > *,
.dmc-hero__copy > *,
.dmc-sec-head,
.dmc-sec-head > *,
.dmc-sec-head__body,
.dmc-sec-head__body > *,
.dmc-grid > *,
.dmc-silos > *,
.dmc-silo > *,
.dmc-steps > *,
.dmc-step__body > *,
.dmc-trust > *,
.dmc-trust__txt,
.dmc-trust__txt > *,
.dmc-realizacje > *,
.dmc-author__inner > *,
.dmc-author__copy > *,
.dmc-cta-final__inner > *,
.dmc-footer__top > * {
	min-width: 0;
}

/* --- Wejscia sekcji: widoczne w spoczynku, subtelny lift przy dmc-anim --- */
.dmc-anim .dmc-reveal {
	opacity: 0.001;
	transform: translateY(22px);
	transition: opacity 640ms var(--dm-ease-out), transform 640ms var(--dm-ease-out);
}

.dmc-anim .dmc-reveal.is-in,
.dmc-reveal {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.dmc-anim .dmc-reveal {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}