/* Style sekcji (Flexible Content) - kierunek docs/design.md v2. Tokeny w style.css (:root). */

/* ═══════════════════════════════════════════════════════════════════════════
   SEKCJE - wspólne
   ═══════════════════════════════════════════════════════════════════════════ */
.sekcja { padding-block: var(--odstep-sekcji); }
.sekcja--beton { background: var(--beton); }
.sekcja > .kontener > h2 { margin-bottom: clamp(18px, 2.4vw, 28px); }
.sekcja > .kontener > h2 + .lead-sekcji { margin-top: -8px; margin-bottom: clamp(20px, 2.6vw, 32px); }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO - zdjęcie w tle + biała ramka bliżej krawędzi ekranu
   ═══════════════════════════════════════════════════════════════════════════ */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(520px, 72vh, 720px); padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); background: var(--beton); }
.hero__tlo { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--grafit); }
.hero__obraz { width: 100%; height: 100%; object-fit: cover; }
.hero__tlo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30, 35, 38, .38) 0%, rgba(30, 35, 38, .08) 50%, rgba(30, 35, 38, 0) 72%); pointer-events: none; }
.hero__ramka { width: min(100% - 2 * var(--brzeg-hero), 620px); margin-left: var(--brzeg-hero); background: var(--biel); border-radius: var(--promien-duzy); padding: clamp(26px, 3.2vw, 46px); box-shadow: var(--cien-duzy); }
.hero__lead { font-size: clamp(1.08rem, 1.4vw, 1.22rem); line-height: 1.55; margin: 18px 0 24px; }
.hero:not(.hero--zdjecie) { min-height: 0; }
.hero:not(.hero--zdjecie) .hero__ramka { box-shadow: none; margin-inline: auto; width: min(100% - 2 * var(--margines), var(--kontener)); padding-inline: 0; background: none; }

/* SYGNATURA: znacznik z oględzin (SVG „slice” = ten sam kadr co zdjęcie) */
.znacznik { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.znacznik__obwod, .znacznik__linia { fill: none; stroke: var(--czerwien); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.znacznik__obwod { stroke-width: calc(6.5px * var(--znacznik-skala, 1)); }
/* Etykieta i linia w pikselach ekranu - położenie liczy assets/js/app.js (zawsze w hero, nigdy na ramce). */
.znacznik-laczenie { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.znacznik__linia { stroke-width: 2.5px; }
.znacznik__etykieta { position: absolute; right: clamp(16px, 4vw, 48px); bottom: clamp(56px, 8vw, 96px); z-index: 2; width: max-content; max-width: min(300px, 28vw); }
.znacznik__opis { background: var(--biel); border-radius: 10px; padding: 10px 14px 11px; box-shadow: 0 8px 28px rgba(30, 35, 38, .25); border-left: 4px solid var(--czerwien); font: 400 1rem/1.35 var(--font-tekst); color: var(--grafit); }
.znacznik__opis .etykieta { display: block; color: var(--czerwien); margin-bottom: 2px; }

/* Kafle problemów NA PRZECIĘCIU hero i następnej sekcji (motyw zaakceptowany 2026-10-08) */
.hero-pas { background: var(--beton); }
.hero-kafle { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; position: relative; z-index: 2; margin-top: clamp(-52px, -3.6vw, -40px); }
.kafel-problem { display: flex; align-items: center; gap: 14px; min-height: 88px; padding: 16px 18px; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); box-shadow: var(--cien); font-weight: 700; line-height: 1.25; text-decoration: none; transition: border-color .2s, box-shadow .2s; }
.kafel-problem:hover { border-color: var(--czerwien); box-shadow: 0 14px 38px rgba(30, 35, 38, .2); }
.kafel-problem__ikona { width: 46px; height: 46px; }
.kafel-problem__strzalka { margin-left: auto; color: var(--czerwien); }

@media (max-width: 960px) { .hero-kafle { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Tablet i telefon: zdjęcie u góry, ramka pod nim (zachodzi na zdjęcie) - przy wąskim ekranie ramka obok zdjęcia
   zasłaniała znacznik (2026-10-08). */
@media (max-width: 960px) {
	.hero.hero--zdjecie { --hero-foto: clamp(260px, 50vw, 440px); display: block; min-height: 0; padding: calc(var(--hero-foto) - 40px) 0 0; background: var(--biel); }
	.hero--zdjecie .hero__tlo { bottom: auto; height: var(--hero-foto); }
	.hero--zdjecie .hero__ramka { position: relative; width: calc(100% - 2 * var(--margines)); margin: 0 auto; padding: 24px 22px 26px; }
	.hero-pas { padding-top: 18px; }
	.hero-kafle { margin-top: 0; }
}
.znacznik-zasloniety .znacznik, .znacznik-zasloniety .znacznik__etykieta, .znacznik-zasloniety .znacznik-laczenie { display: none; }
@media (max-width: 640px) {
	.znacznik__etykieta, .znacznik-laczenie { display: none; }
	.hero-pas { padding-top: 18px; }
	.hero-kafle { margin-top: 0; }
	.kafel-problem { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; font-size: .95rem; }
	.kafel-problem__strzalka { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRONA USŁUGI - treść obok panelu bocznego, FAQ pod siatką
   ═══════════════════════════════════════════════════════════════════════════ */
.uklad-uslugi { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: clamp(28px, 4vw, 56px); align-items: start; padding-block: clamp(36px, 5vw, 64px) 0; }
.uklad-uslugi .kontener { width: auto; margin: 0; }
.uklad-uslugi__tresc > .sekcja { padding-block: clamp(26px, 3.4vw, 40px); }
.uklad-uslugi__tresc > .sekcja:first-child { padding-top: 0; }
.uklad-uslugi__tresc > .sekcja--beton { padding-inline: clamp(20px, 3vw, 40px); border-radius: var(--promien-duzy); margin-block: 8px; }
.uklad-uslugi + .sekcja--faq { padding-top: clamp(32px, 4vw, 56px); }

/* Panel na całą wysokość kolumny; przykleja się TYLKO boks kontaktowy, żeby dane kontaktowe były widoczne
   przy przewijaniu nawet przy długiej liście usług (feedback 2026-10-08). */
.panel-uslug { align-self: stretch; }
.panel-uslug__wnetrze { display: flex; flex-direction: column; gap: 16px; height: 100%; }
.panel-uslug__blok { background: var(--beton); border-radius: var(--promien); padding: 18px 20px; }
.panel-uslug__kontakt { position: sticky; top: calc(var(--wysokosc-naglowka) + 24px); }
.panel-uslug__tytul { margin: 0 0 8px; font-family: var(--font-display); font-weight: 760; font-size: 1.08rem; }
.panel-uslug__tytul a { text-decoration: none; }
.panel-uslug__tytul a:hover { color: var(--czerwien); }
.panel-uslug__lista { list-style: none; margin: 0; padding: 0; font-size: .97rem; }
.panel-uslug__lista li { border-top: 1px solid var(--rysa); }
.panel-uslug__lista li:first-child { border-top: 0; }
.panel-uslug__lista a, .panel-uslug__lista span { display: block; padding: 6px 0; line-height: 1.3; text-decoration: none; }
.panel-uslug__lista a:hover { color: var(--czerwien); }
.panel-uslug__lista .jest-biezaca span { font-weight: 700; color: var(--czerwien-ciemna); }
.panel-uslug__kontakt { background: var(--grafit); color: var(--stopka-tekst); }
.panel-uslug__kontakt .panel-uslug__tytul { color: #fff; }
.panel-uslug__tekst { margin: 0 0 12px; font-size: 1rem; }
.panel-uslug__dane { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.panel-uslug__dane li { display: flex; align-items: center; gap: 10px; }
.panel-uslug__dane a { color: #fff; font-weight: 700; text-decoration: none; }
.panel-uslug__dane a:hover { text-decoration: underline; }
.przyciski--panel .przycisk { width: 100%; }

@media (max-width: 1080px) {
	.uklad-uslugi { grid-template-columns: minmax(0, 1fr); }
	.panel-uslug__wnetrze { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); height: auto; }
	.panel-uslug__kontakt { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TEKST
   ═══════════════════════════════════════════════════════════════════════════ */
.sekcja--tekst h2 { margin-bottom: 18px; }
.tekst-uklad { display: grid; gap: clamp(24px, 4vw, 48px); }
.sekcja--z-obrazem .tekst-uklad { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); align-items: stretch; }
.tekst-uklad__obraz { margin: 0; }
.tekst-uklad__obraz img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--promien); }
@media (max-width: 760px) { .sekcja--z-obrazem .tekst-uklad { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   TABELA - ciemny nagłówek, obramowania, przewijanie tylko w obrębie tabeli
   ═══════════════════════════════════════════════════════════════════════════ */
.tabela-przewijana { overflow-x: auto; border: 1px solid var(--rysa); border-radius: var(--promien); background: var(--biel); }
.tabela { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 1rem; line-height: 1.4; }
.tabela thead th { background: var(--grafit); color: #fff; font-family: var(--font-display); font-weight: 700; text-align: left; padding: 14px 16px; }
.tabela th, .tabela td { padding: 12px 16px; border: 1px solid var(--rysa); text-align: left; vertical-align: top; }
.tabela thead th { border-color: var(--grafit); }
.tabela tbody th { font-weight: 700; }
.tabela tbody tr:nth-child(even) { background: #FAFBFB; }
.tabela a { color: var(--czerwien-ciemna); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════════════════
   KROKI - realna kolejność, numeracja niesie informację
   ═══════════════════════════════════════════════════════════════════════════ */
.kroki { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 24px; list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--grafit); counter-reset: krok; }
.kroki__krok { counter-increment: krok; padding-top: 18px; }
.kroki__krok::before { content: counter(krok); display: block; font-family: var(--font-display); font-weight: 820; font-size: 2.8rem; line-height: 1; color: var(--czerwien); margin-bottom: 10px; }
.kroki__krok p { margin: 8px 0 0; color: var(--grafit-2); font-size: 1rem; line-height: 1.5; }
.uklad-uslugi .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
@media (max-width: 960px) { .kroki { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; } }
@media (max-width: 480px) { .kroki, .uklad-uslugi .kroki { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   ZAPROSZENIE (CTA) - pas między sekcjami albo karta
   ═══════════════════════════════════════════════════════════════════════════ */
.sekcja--cta { padding-block: clamp(20px, 3vw, 32px); }
.cta { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 18px 32px; border-radius: var(--promien-duzy); }
.cta h2 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.cta p { margin: 8px 0 0; color: var(--grafit-2); }
.cta--pas { background: var(--czerwien-tlo); padding: clamp(18px, 2.4vw, 26px) clamp(20px, 3vw, 32px); border-left: 5px solid var(--czerwien); }
.cta--karta { background: var(--grafit); padding: clamp(26px, 4vw, 48px); }
.cta--karta h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.3rem); }
.cta--karta p { color: var(--stopka-tekst); font-size: 1.1rem; }
.cta--karta .przycisk--obrys { border-color: #fff; color: #fff; }
.cta--karta .przycisk--obrys:hover { background: #fff; color: var(--grafit); }
.uklad-uslugi .cta { grid-template-columns: 1fr; }
@media (max-width: 760px) { .cta { grid-template-columns: 1fr; } }

/* ═══════════════════════════════════════════════════════════════════════════
   GALERIA / REALIZACJE + LIGHTBOX
   ═══════════════════════════════════════════════════════════════════════════ */
.galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; list-style: none; margin: 0; padding: 0; }
.galeria--album { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.galeria__figura { margin: 0; }
.galeria__przycisk { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: var(--promien-maly); overflow: hidden; }
.galeria__obraz { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.galeria__podpis { margin-top: 6px; font-size: .92rem; color: var(--grafit-2); display: grid; gap: 2px; }
.galeria__podpis a { color: var(--czerwien-ciemna); font-weight: 700; }
.galeria__wiecej { margin: 22px 0 0; }
@media (max-width: 960px) { .galeria--album { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .galeria, .galeria--album { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.lightbox { border: 0; padding: 0; background: transparent; max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; }
.lightbox::backdrop { background: rgba(14, 17, 19, .9); }
.lightbox__figura { display: grid; place-items: center; height: 100%; padding: 56px 64px; }
.lightbox__obraz { max-width: 100%; max-height: calc(100vh - 140px); object-fit: contain; border-radius: var(--promien-maly); }
.lightbox__opis { color: #fff; margin-top: 12px; text-align: center; font-size: 1rem; }
.lightbox__sterowanie button { position: fixed; display: grid; place-items: center; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer; }
.lightbox__sterowanie button:hover { background: var(--czerwien); }
.lightbox__zamknij { top: 16px; right: 16px; }
.lightbox__poprzedni { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__nastepny { right: 16px; top: 50%; transform: translateY(-50%); }

/* ═══════════════════════════════════════════════════════════════════════════
   OPINIE - cytaty 1:1
   ═══════════════════════════════════════════════════════════════════════════ */
.opinie { display: grid; gap: 18px; }
.opinie--siatka { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.opinia { margin: 0; background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); padding: 26px 28px 24px; display: flex; flex-direction: column; }
.opinia blockquote { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.6; }
.opinia blockquote::before { content: ''; display: block; width: 34px; height: 26px; margin-bottom: 14px; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 34 26'%3E%3Cpath fill='%23CD2122' d='M0 26V15C0 6.7 4.6 1.6 13 0l1.4 3.4C9.6 5 7.6 8 7.4 12H14v14H0Zm20 0V15c0-8.3 4.6-13.4 13-15l1 3.4C29.6 5 27.6 8 27.4 12H34v14H20Z'/%3E%3C/svg%3E"); }
.opinia blockquote p { margin: 0; }
.opinia figcaption { margin-top: auto; }
.opinia cite { font-style: normal; font-weight: 700; }
.opinia__nota { display: block; color: var(--grafit-2); font-size: .9rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   FAQ - ostatnia sekcja, pełna szerokość
   ═══════════════════════════════════════════════════════════════════════════ */
.faq { display: grid; gap: 10px; }
.faq__pozycja { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); }
.sekcja--faq:not(.sekcja--beton) .faq__pozycja { background: var(--beton); border-color: transparent; }
.faq__pytanie { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 22px; cursor: pointer; list-style: none; }
.faq__pytanie::-webkit-details-marker { display: none; }
.faq__pytanie h3 { font-size: 1.12rem; }
.faq__pytanie::after { content: ''; flex: none; width: 10px; height: 10px; border: solid var(--czerwien); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); margin-top: -5px; transition: transform .2s; }
.faq__pozycja[open] .faq__pytanie::after { transform: rotate(-135deg); margin-top: 5px; }
.faq__odpowiedz { padding: 0 22px 20px; }
.faq__odpowiedz p { margin: 0; }
.faq__odpowiedz p + p { margin-top: .8em; }

/* ═══════════════════════════════════════════════════════════════════════════
   KAFELKI, KARTY WPISÓW, POZOSTAŁE SZABLONY - podstawowe style (rozwinięcie w kolejnej pętli 6-8)
   ═══════════════════════════════════════════════════════════════════════════ */
.kafelki { display: grid; grid-template-columns: repeat(var(--kolumny, 4), minmax(0, 1fr)); gap: 18px; list-style: none; margin: 0; padding: 0; }
.kafelki--2 { --kolumny: 2; } .kafelki--3 { --kolumny: 3; } .kafelki--4 { --kolumny: 4; }
.kafelek { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; }
.kafelek__obraz img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.kafelek__tytul, .kafelek__opis { margin: 0; padding: 0 20px; }
.kafelek__tytul { padding-top: 18px; }
.kafelek__opis { padding-bottom: 20px; color: var(--grafit-2); font-size: 1rem; margin-top: 8px; }
@media (max-width: 960px) { .kafelki { --kolumny: 2 !important; } }
.siatka-kart { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; }
.karta { background: var(--biel); border: 1px solid var(--rysa); border-radius: var(--promien); overflow: hidden; }
.karta__tresc { padding: 18px 20px 22px; }