/* Sekcje strony głównej. Każda sekcja to grupa bloków z klasą (Zaawansowane > Dodatkowe
   klasy CSS), więc klientka zmienia teksty, zdjęcia i linki w edytorze, a wygląd zostaje.
   Kafel jest klikalny w całości: link z nagłówka rozciąga się na kafel (::after). */
.sekcja { padding: clamp(64px, 9vw, 120px) 0; }
.wp-block-image { margin: 0; }
.wp-block-image img { width: 100%; }

/* Hero: trzy zdjęcia zmieniane przez js/podano.js */
.hero { position: relative; height: min(78vh, 760px); min-height: 520px; overflow: hidden; color: var(--bialy); background: var(--grafit); }
.hero .slajdy .wp-block-image { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; }
.hero .slajdy .wp-block-image:first-child, .hero .slajdy .wp-block-image.aktywny { opacity: 1; }
.hero.ma-slajdy .slajdy .wp-block-image:first-child:not(.aktywny) { opacity: 0; }
.hero .slajdy img { height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 7s ease-out; }
.hero .slajdy .aktywny img { transform: scale(1); }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(20,16,12,.72) 0%, rgba(20,16,12,.42) 45%, rgba(20,16,12,.05) 80%); pointer-events: none; }
.hero .hero-tresc { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; }
.hero .nadtytul { max-width: 340px; line-height: 1.7; font-size: .85rem; letter-spacing: .22em; margin-bottom: 18px; }
.hero h1 { font-size: clamp(3rem, 7.4vw, 6.4rem); text-transform: uppercase; letter-spacing: .01em; line-height: .95; max-width: 880px; margin-bottom: 36px; }
.hero-sterowanie { position: absolute; z-index: 3; right: max(24px, calc((100vw - var(--szer)) / 2 + 24px)); bottom: 36px; display: flex; align-items: center; gap: 16px; font-size: .85rem; font-weight: 500; letter-spacing: .1em; }
.hero-sterowanie .os { width: 54px; height: 1px; background: rgba(255,255,255,.6); }
.hero-sterowanie button { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: transparent; color: var(--bialy); border: 1px solid rgba(255,255,255,.7); cursor: pointer; }
.hero-sterowanie button.bez-obrysu { border-color: transparent; }
.hero-sterowanie button:hover { background: var(--akcent); border-color: var(--akcent); color: var(--grafit); }
.hero-sterowanie svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }

/* Wstęp i oferta */
.wstep-oferty { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 6vw, 96px); align-items: start; }
.okazje { font-family: var(--serif); font-weight: 500; font-size: clamp(1.7rem, 2.8vw, 2.4rem); line-height: 1.2; text-transform: uppercase; margin: 0; }
.okazje::after { content: ""; display: block; width: 44px; height: 2px; background: var(--akcent); margin: 28px 0; }
.wstep-oferty h2 { margin-bottom: 24px; }
.wstep-oferty p:not(.okazje) { margin: 0 0 22px; max-width: 520px; }
.wstep-oferty .link-strzalka { margin: 0; }
.kafle5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: clamp(48px, 6vw, 72px) auto 0; padding: 0 10px; max-width: 1480px; }
.kafel-oferty { position: relative; display: flex; flex-direction: column; background: var(--krem); }
.kafel-oferty .wp-block-image { aspect-ratio: 4/3; overflow: hidden; }
.kafel-oferty .wp-block-image img { height: 100%; object-fit: cover; transition: transform .6s; }
.kafel-oferty:hover img { transform: scale(1.05); }
.kafel-oferty h3 { font-weight: 500; font-size: clamp(1.25rem, 1.6vw, 1.5rem); text-transform: uppercase; text-align: center; line-height: 1.1; margin: 22px 12px 14px; }
.kafel-oferty h3 a { text-decoration: none; }
.kafel-oferty h3 a::after, .pole p a::after, .box p a::after, .realizacja .podpis a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.kafel-oferty .zobacz { align-self: center; margin: 0 0 22px; display: inline-flex; align-items: center; gap: 10px; font-size: .7rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--akcent-ciemny); }
.kafel-oferty .zobacz::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--strzalka) center/contain no-repeat; mask: var(--strzalka) center/contain no-repeat; transition: transform .2s; }
.kafel-oferty:hover .zobacz::after { transform: translateX(4px); }

/* Wybrali nas: pasek logo, strzałki dokłada js/podano.js */
.wybrali { background: var(--brzoskwinia); padding: 34px 0 30px; }
.wybrali h2 { text-align: center; font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 18px; }
.wybrali-pas { display: flex; align-items: center; gap: 12px; }
.wybrali-pas > button { flex: none; width: 40px; height: 40px; display: grid; place-items: center; background: none; border: 0; color: var(--grafit); cursor: pointer; }
.wybrali-pas > button svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.loga { flex: 1; display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; padding: 6px 0; }
.loga::-webkit-scrollbar { display: none; }
.loga .wp-block-image { flex: none; }
/* Loga klientów są kolorowe i część ma białe tło: szarość + mnożenie daje jednolity ciemny znak na beżu */
.loga .wp-block-image img { height: 76px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) contrast(1.35); mix-blend-mode: multiply; }

/* Mozaika */
.mozaika { display: grid; grid-template-columns: 1.05fr 1fr 1.4fr; min-height: 640px; }
.mozaika-tekst { background: var(--krem); padding: clamp(40px, 6vw, 96px) clamp(24px, 4vw, 64px); display: flex; flex-direction: column; justify-content: center; }
.mozaika-tekst h2 { font-size: clamp(2rem, 3.4vw, 3rem); margin: 0; }
.mozaika-tekst p:not(.nadtytul) { color: var(--tekst-jasny); margin: 0 0 32px; max-width: 360px; }
.mozaika-duze { position: relative; overflow: hidden; }
.mozaika-duze img, .pole img { height: 100%; object-fit: cover; transition: transform .7s; }
.mozaika-siatka { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1.1fr; gap: 6px; padding-left: 6px; }
.pole { position: relative; overflow: hidden; color: var(--bialy); min-height: 220px; }
.pole .wp-block-image { height: 100%; }
.pole::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.7), rgba(20,16,12,0) 60%); pointer-events: none; }
.pole p { position: absolute; z-index: 1; left: 20px; right: 20px; bottom: 18px; margin: 0; font-family: var(--serif); font-weight: 500; font-size: clamp(1.25rem, 1.8vw, 1.6rem); line-height: 1.1; text-transform: uppercase; }
.pole p a { text-decoration: none; }
.pole:hover img { transform: scale(1.05); }

/* Współpraca */
.karty3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--linia); border: 1px solid var(--linia); margin-top: 40px; }
.karta { background: var(--tlo); padding: 36px 32px; }
.karta .wp-block-image img { height: 52px; width: auto; object-fit: contain; margin-bottom: 22px; }
.karta .logo-na-ciemnym img { background: var(--grafit); padding: 10px 14px; box-sizing: content-box; }
.karta h3 { font-size: 1.55rem; font-weight: 500; }
.karta p { margin: 0; color: var(--tekst-jasny); }

/* Boxy */
.boxy { background: var(--krem); }
.boxy-uklad { display: grid; grid-template-columns: .9fr 1.6fr; gap: clamp(32px, 5vw, 80px); align-items: end; }
.boxy-uklad .wstep { margin: 0 0 24px; }
.boxy-siatka { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.box { position: relative; aspect-ratio: 3/4; overflow: hidden; color: var(--bialy); }
.box .wp-block-image { position: absolute; inset: 0; }
.box img { height: 100%; object-fit: cover; transition: transform .6s; }
.box:hover img { transform: scale(1.05); }
.box::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.65), rgba(20,16,12,0) 55%); pointer-events: none; }
.box p { position: absolute; z-index: 1; left: 14px; right: 14px; bottom: 12px; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.2rem; line-height: 1.1; text-transform: uppercase; }
.box p a { text-decoration: none; }
.dowoz { border-left: 2px solid var(--akcent); padding: 4px 0 4px 16px; margin: 0 0 32px; font-weight: 500; }
.znaczki { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 64px; padding-top: 40px; border-top: 1px solid var(--linia); }
.znaczek { display: flex; align-items: center; gap: 14px; margin: 0; font-weight: 500; font-size: .92rem; }
.znaczek::before { content: ""; flex: none; width: 34px; height: 34px; background: var(--akcent-ciemny); -webkit-mask: var(--ikona) center/contain no-repeat; mask: var(--ikona) center/contain no-repeat; }
.znaczek-klos { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21V9'/%3E%3Cpath d='M12 13c-3 0-5-2-5-5 3 0 5 2 5 5zM12 13c3 0 5-2 5-5-3 0-5 2-5 5zM12 9c-2.5 0-4-1.5-4-4 2.5 0 4 1.5 4 4zM12 9c2.5 0 4-1.5 4-4-2.5 0-4 1.5-4 4z'/%3E%3C/svg%3E"); }
.znaczek-lisc { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 19c0-8 6-14 14-14 0 8-6 14-14 14z'/%3E%3Cpath d='M5 19l8-8'/%3E%3C/svg%3E"); }
.znaczek-gwiazda { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l2.2 5.6L20 9.3l-4.5 3.9 1.4 5.8L12 16l-4.9 3 1.4-5.8L4 9.3l5.8-.7z'/%3E%3C/svg%3E"); }
.znaczek-eko { --ikona: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 19H4l3-5M17 19h3l-3-5M9 6l3-3 3 3M12 3v7M7 14l-2-3.5M17 14l2-3.5M9 19h6'/%3E%3C/svg%3E"); }

/* Uroczystości: zdjęcie w tle jest zwykłym blokiem obrazka, żeby dało się je podmienić */
.uroczystosci { position: relative; overflow: hidden; color: var(--bialy); padding: clamp(96px, 14vw, 180px) 0; background: var(--grafit); }
.uroczystosci > .wp-block-image { position: absolute; inset: 0; }
.uroczystosci > .wp-block-image img { height: 100%; object-fit: cover; }
.uroczystosci::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(20,16,12,.8), rgba(20,16,12,.35)); }
.uroczystosci .kontener { position: relative; z-index: 2; }
.uroczystosci .tresc { max-width: 620px; }
.uroczystosci .nadtytul { color: var(--brzoskwinia); }
.uroczystosci h2 { font-size: clamp(2.2rem, 4.4vw, 3.8rem); }
.uroczystosci .wp-block-buttons { margin: 32px 0 16px; }

/* Realizacje: strzałki dokłada js/podano.js */
.naglowek-sekcji { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 40px; }
.naglowek-sekcji .wstep { margin: 0; }
.strzalki { display: flex; gap: 10px; flex: none; }
.strzalka { display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--grafit); background: transparent; color: var(--grafit); cursor: pointer; }
.strzalka svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.6; }
.strzalka:hover { background: var(--akcent); border-color: var(--akcent); }
.karuzela { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 300px); gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 24px; padding: 0 24px 8px; scrollbar-width: none; max-width: var(--szer); margin: 0 auto; }
.karuzela::-webkit-scrollbar { display: none; }
.realizacja { scroll-snap-align: start; position: relative; aspect-ratio: 3/4; overflow: hidden; color: var(--bialy); }
.realizacja .wp-block-image { position: absolute; inset: 0; }
.realizacja img { height: 100%; object-fit: cover; transition: transform .6s; }
.realizacja:hover img { transform: scale(1.05); }
.realizacja::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20,16,12,.7), rgba(20,16,12,0) 55%); pointer-events: none; }
.realizacja .podpis { position: absolute; z-index: 1; left: 18px; right: 18px; bottom: 16px; margin: 0; font-family: var(--serif); font-weight: 500; font-size: 1.45rem; line-height: 1.1; text-transform: uppercase; }
.realizacja .podpis a { text-decoration: none; }
.realizacja .podpis::after { content: "Zobacz więcej"; display: block; margin-top: 4px; font: 600 .7rem/1.6 var(--sans); letter-spacing: .12em; color: var(--brzoskwinia); }

/* Opinie */
.opinie { background: var(--krem); }
.opinie-siatka { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 56px); margin-top: 48px; }
.opinia { margin: 0; font-family: var(--serif); font-weight: 500; font-style: italic; font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.3; }
.opinia::before { content: "„"; display: block; font-size: 3.6rem; line-height: .5; color: var(--akcent); margin-bottom: 14px; }

@media (prefers-reduced-motion: reduce) {
	.hero .slajdy .wp-block-image, .hero .slajdy img { transition: none; transform: none !important; }
}
@media (max-width: 1080px) {
	.kafle5 { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: minmax(230px, 42%); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 0 24px; }
	.kafle5::-webkit-scrollbar { display: none; }
	.kafel-oferty { scroll-snap-align: start; }
	.mozaika { grid-template-columns: 1fr 1fr; }
	.mozaika-tekst { grid-column: 1 / -1; }
	.boxy-uklad { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
	.hero { height: 86svh; min-height: 560px; }
	.hero::after { background: linear-gradient(0deg, rgba(20,16,12,.8) 0%, rgba(20,16,12,.45) 55%, rgba(20,16,12,.2) 100%); }
	.hero .hero-tresc { justify-content: flex-end; padding-bottom: 110px; }
	.hero-sterowanie { left: 24px; right: auto; bottom: 28px; }
	.wstep-oferty, .karty3, .opinie-siatka { grid-template-columns: 1fr; }
	.kafle5 { grid-auto-columns: 72%; }
	.mozaika { grid-template-columns: 1fr; }
	.mozaika-duze { aspect-ratio: 4/5; }
	.mozaika-siatka { padding: 6px 0 0; }
	.pole { min-height: 200px; }
	.boxy-siatka { grid-template-columns: repeat(2, 1fr); }
	.znaczki { grid-template-columns: 1fr 1fr; }
	.naglowek-sekcji { flex-direction: column; align-items: start; }
	.karuzela { grid-auto-columns: 76%; }
}
@media (max-width: 520px) {
	.hero .wp-block-button, .hero .wp-block-button__link { width: 100%; }
	.wybrali-pas > button { display: none; }
}