/* Strona główna: zdjęcia w hero i na kaflach, tło sekcji kontaktu, formularz wyceny bez poczty.
   Ładowany tylko na index (base.njk). Tokeny z style.css. */
:root { --cyan: var(--brand-cyan); --ease: cubic-bezier(.2, .8, .2, 1); }

/* hero: zdjęcie + dwa kafle w 3D */
.hero-art { position: relative; perspective: 87.5rem; padding-bottom: 1.75rem; min-width: 0; }
.hero-stack { position: relative; display: grid; gap: 1rem; transform-style: preserve-3d; transition: transform .3s var(--ease); transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); }
.hero-photo { border-radius: var(--r-tile); overflow: hidden; aspect-ratio: 9 / 8; background: var(--night); box-shadow: 0 2.125rem 4rem -1.875rem rgba(11, 22, 38, .55); }
.hero-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 80% 40%; }
.float { box-shadow: 0 1.375rem 2.75rem -1.375rem rgba(11, 22, 38, .5); }
.float h3 { font-size: 1.125rem; }
.float-b .big { display: block; font: var(--fw-display) 2.75rem/1 var(--font-display); color: var(--cyan); letter-spacing: var(--ls-display); }
@media (min-width: 56rem) {
  .hero-stack { display: block; }
  .tile.float { position: absolute; }
  .float-a { right: -1rem; bottom: -1.75rem; width: min(19.5rem, 80%); transform: translateZ(5.625rem); }
  .float-b { left: -1.25rem; top: 1.5rem; width: 12.5rem; padding: 1.25rem; transform: translateZ(9.375rem); }
}
@media (max-width: 55.99rem) and (min-width: 30rem) { .hero-stack { grid-template-columns: 1fr 1fr; } .hero-photo { grid-column: 1 / -1; } }
@media (max-width: 55.99rem) { .hero-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); } }

/* telefon: zdjęcie nie jest już osobnym kafelkiem, tylko tłem hero; wygasza się w kolor strony, tekst zostaje czytelny */
@media (max-width: 47.5em) {
  .home .hero { isolation: isolate; }
  .hero-art, .hero-stack { position: static; perspective: none; transform: none; transform-style: flat; }
  .hero-stack { display: grid; grid-template-columns: minmax(0, 1fr); }
  .hero-photo {
    position: absolute; z-index: -1; top: 0; left: 0; right: 0; height: 42rem; grid-column: auto; aspect-ratio: auto;
    border-radius: 0; box-shadow: none; background: transparent;
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 52%, transparent 100%);
  }
  .hero-actions .btn-ghost { background: color-mix(in srgb, var(--bg) 72%, transparent); }
  .hero-copy .lede { color: color-mix(in srgb, var(--ink) 74%, var(--ink-2)); }
  .hero-photo img { object-position: 68% 22%; filter: saturate(.55) contrast(.95); }
  .hero-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--bg) 56%, transparent) 0, color-mix(in srgb, var(--bg) 64%, transparent) 60%, var(--bg) 100%); }
}

/* kafle ze zdjęciem */
.photo { display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; isolation: isolate; background: var(--night-2); border-color: var(--night-line); color: var(--night-ink); min-height: 19rem; justify-content: flex-end; }
.photo::before { display: none; }
.photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease); transform: none; }
.photo::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(6, 15, 29, .95) 0%, rgba(6, 15, 29, .78) 42%, rgba(6, 15, 29, .18) 100%); }
.photo p { color: #D5E0EE; }
.photo .ico { background: rgba(255, 255, 255, .12); color: var(--cyan); }
.photo .chips { margin-top: .5rem; }
.photo .chips li { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .09); color: var(--night-ink); }
.photo { --action: var(--brand-cyan); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .photo:hover > img { transform: scale(1.04); } }
@media (min-width: 60rem) { .photo { min-height: 23rem; } }
.stretch { color: inherit; text-decoration: none; }
.stretch::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.photo:has(.stretch:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }

/* kontakt: zdjęcie w tle */
.night { position: relative; isolation: isolate; overflow: hidden; }
.night-bg { position: absolute; inset: 0; z-index: -1; }
.night-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .62; }
.night-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--night) 6%, rgba(6, 15, 29, .72) 50%, rgba(6, 15, 29, .55)); }
.contact-sub { margin-top: .9rem; color: var(--night-ink-2); max-width: 30em; }

/* formularz: e-mail klienta, potwierdzenie bez poczty */
.form-body { display: grid; gap: var(--s-2); }
.form-body[hidden], .form-done[hidden] { display: none; }
.form .form-lead, .form-done p { color: var(--night-ink-2); }
.form-done { display: grid; gap: var(--s-2); justify-items: start; outline: none; }
.form-done h3 { font-size: 1.6rem; }
.form-done .ico { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; border-radius: 1rem; background: var(--action); color: var(--action-ink); }
.form-done .ico svg { width: 1.625rem; height: 1.625rem; }
.form-done strong { color: var(--night-ink); overflow-wrap: anywhere; }
.form-done a, .form .note a, .form .err a { color: var(--night-ink); }
.form .btn[disabled] { opacity: .7; cursor: progress; }
.form #f-again { width: auto; }
.bot { position: absolute; left: -624.9375rem; width: 1px; height: 1px; overflow: hidden; }

/* Zgodność z zatwierdzonym podglądem: bez pochylania kafli, spokojniejsze odstępy i skala nagłówków */
.home { --fs-4: clamp(1.75rem, 1.25rem + 1.8vw, 2.75rem); --fs-5: clamp(2.35rem, 1.45rem + 3.9vw, 4.5rem); }
.home h1 { line-height: 1.04; }
.home .hero { padding: calc(4.25rem + env(safe-area-inset-top, 0px) + 2.25rem) 0 clamp(3.5rem, 2rem + 5vw, 6rem); }
.home .sec { padding-block: clamp(4rem, 2.5rem + 5.5vw, 7.5rem); }
.home .sec:not(.night) { padding-top: 0; } /* odstęp między sekcjami daje dół poprzedniej; nigdy inline style w szablonie */
.home .sec-head { max-width: 44rem; margin-bottom: 2.5rem; }
.home .sec-head p { font-size: var(--fs-2); line-height: 1.5; }
.home .tile { display: flex; flex-direction: column; gap: .75rem; padding: 1.75rem; transform: none; transition: box-shadow .25s, border-color .25s; }
/* delikatne pochylenie za kursorem (max ok. 4°); nie dla kafli wychodzących poza margines i nie dla kafli w hero */
.home .tile:not(.bleed-l):not(.bleed-r):not(.float) { transform: perspective(62.5rem) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s var(--ease), box-shadow .25s, border-color .25s; }
.home .tile.is-live { transition: transform .06s linear, box-shadow .25s, border-color .25s; }
.home .tile > *, .home .tile .ico, .home .tile h3 { transform: none; }
.home .tile .chips { margin: auto 0 0; padding-top: .5rem; }
.home .tile-cta { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 2rem; }
.home .bento > * { grid-column: 1 / -1; }
@media (min-width: 56rem) { .home .bento > .c-4 { grid-column: span 4; } .home .bento > .c-5 { grid-column: span 5; } .home .bento > .c-7 { grid-column: span 7; } .home .bento > .c-8 { grid-column: span 8; } }
.home .float.tile { transform: none; }
@media (min-width: 56rem) { .home .float-a { transform: translateZ(90px); } .home .float-b { transform: translateZ(150px); } }
.home .tile::before { background: radial-gradient(11rem circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--action) 16%, transparent), transparent 65%); }
.home .tile.is-live { box-shadow: none; }
.home .photo::before, .home .tile-cta::before { display: none; }
.home .photo .chips { margin: .5rem 0 0; padding-top: 0; }

/* ============ RYTM SEKCJI (v10): wychodzenie poza margines, pas realizacji, kafel Firma, ruch ============ */
/* --bleed = odległość od krawędzi kolumny treści (.wrap) do krawędzi okna. Skaluje się z rem, więc działa przy każdym zoomie. */
:root { --bleed: calc(var(--gutter) + max(0px, (100vw - 75rem) / 2)); }
.home main { overflow-x: clip; }

/* nagłówek sekcji w dwóch kolumnach */
.home .sec-split { max-width: none; display: grid; gap: 1rem 3rem; align-items: end; }
.home .sec-split > h2 { max-width: 17em; }
.home .sec-split p { max-width: 26em; }
.head-side { display: grid; gap: 1.25rem; justify-items: start; }
@media (min-width: 56rem) { .home .sec-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); } }

/* kafle wychodzące poza margines: zygzak lewa, prawa, lewa. Tekst zostaje na linii siatki. */
@media (min-width: 56rem) {
  .home .tile.bleed-l { margin-left: calc(-1 * var(--bleed)); padding-left: calc(1.75rem + var(--bleed)); border-left-width: 0; border-radius: 0 var(--r-tile) var(--r-tile) 0; }
  .home .tile.bleed-r { margin-right: calc(-1 * var(--bleed)); padding-right: calc(1.75rem + var(--bleed)); border-right-width: 0; border-radius: var(--r-tile) 0 0 var(--r-tile); }
}

/* zdjęcia w kaflach: zapas wysokości na paralaksę (przesuwa je skrypt przez --py) */
.photo > img { inset: -6% 0; height: 112%; translate: 0 var(--py, 0px); will-change: auto; }

/* REALIZACJE: pas kafli przewijany w poziomie, zaczyna się na linii siatki i wychodzi poza prawy margines */
.strip { display: flex; align-items: flex-start; gap: 1.25rem; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; padding: .5rem var(--bleed) 1.5rem; scroll-padding-inline: var(--bleed); scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.strip:focus-visible { outline-offset: -3px; }
.strip .tile { flex: 0 0 min(27rem, 82%); scroll-snap-align: start; }
.strip .photo { min-height: 25rem; background: radial-gradient(120% 80% at 80% 0%, #1B3566 0%, transparent 60%), linear-gradient(165deg, #12203A, #060F1D); }
@media (min-width: 56rem) { .strip .tile:nth-child(2) { margin-top: 3.5rem; } .strip .tile:nth-child(3) { margin-top: 1.25rem; } }
.strip .tile > div { position: static; display: grid; gap: .5rem; }  /* link .stretch ma pokrywać cały kafel, nie tylko blok z tekstem */
.strip h3 { font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); overflow-wrap: anywhere; }
.strip .yr { position: absolute; z-index: 1; top: 1.25rem; left: 1.25rem; padding: .4375rem .75rem; border-radius: var(--r-pill); font: 600 var(--fs-0)/1 var(--font-body); color: var(--cyan); background: color-mix(in srgb, var(--night) 62%, transparent); -webkit-backdrop-filter: blur(.5rem); backdrop-filter: blur(.5rem); }
/* znak Q jako tło, gdy zdjęcia nie ma (nie wczytało się albo nie wgrano) */
.strip .photo::before, .strip .photo.is-live::before { display: block; content: ""; position: absolute; z-index: -2; right: -2.5rem; bottom: -3rem; width: 17rem; aspect-ratio: 212 / 206; inset-inline-start: auto; inset-block-start: auto; background: url("brand/q-dark.png") center / contain no-repeat; opacity: .1; pointer-events: none; transition: none; }
.strip-ctl { display: flex; gap: .625rem; }
.strip-ctl[hidden] { display: none; }
.round { display: grid; place-items: center; width: 3rem; height: 3rem; padding: 0; border-radius: 50%; border: 1.5px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; transition: border-color .15s, opacity .15s, transform .15s; }
.round svg { width: 1.25rem; height: 1.25rem; }
.round[data-dir="-1"] svg { transform: scaleX(-1); }
.round:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .round:not(:disabled):hover { border-color: var(--ink); transform: translateY(-2px); } }

/* pas nazw obiektów (z danych realizacji). Czysto dekoracyjny, więc przy ograniczonym ruchu go nie ma. */
.marquee { display: none; overflow: hidden; margin-bottom: clamp(4rem, 2.5rem + 5.5vw, 7.5rem); padding-block: 1.125rem; border-block: 1px solid var(--line); background: var(--surface); }
.marquee-track { display: flex; width: max-content; }
.marquee ul { display: flex; flex: none; }
.marquee li { display: flex; align-items: center; white-space: nowrap; font: var(--fw-display) var(--fs-3)/1.2 var(--font-display); letter-spacing: var(--ls-display); color: var(--ink-2); }
.marquee li::after { content: ""; width: 2rem; margin-inline: 2rem; border-top: 2px solid var(--line); }
@media (prefers-reduced-motion: no-preference) {
  .marquee { display: block; }
  .marquee-track { animation: marquee 110s linear infinite; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) { .marquee:hover .marquee-track { animation-play-state: paused; } }
@keyframes marquee { to { transform: translateX(-50%); } }

/* FIRMA: kafel wychodzi poza lewy margines, pod nim trzy kroki z przesunięciem */
.home .firm { background: none; }
.firm-card { position: relative; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-tile); }
.firm-pic { position: relative; min-height: 22rem; overflow: hidden; background: var(--night-2); }
.firm-pic img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; object-position: 60% 50%; translate: 0 var(--py, 0px); }
.firm-badge { position: absolute; left: 1.5rem; bottom: 1.5rem; padding: .625rem 1rem; border-radius: 1rem; background: var(--surface); color: var(--ink); font: 600 var(--fs-1)/1.2 var(--font-body); }
.firm-card .firm-copy { align-content: center; padding: clamp(1.75rem, 1rem + 3.5vw, 4rem); }
@media (min-width: 56rem) { .firm-badge { left: var(--bleed); } .firm-card.bleed-l { margin-left: calc(-1 * var(--bleed)); border-left-width: 0; border-radius: 0 var(--r-tile) var(--r-tile) 0; } }
@media (max-width: 55.99rem) { .firm-card { grid-template-columns: minmax(0, 1fr); } .firm-pic { min-height: 16rem; } }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; margin-top: 2.5rem; padding-bottom: 2.5rem; }
.step { display: grid; align-content: start; gap: .75rem; padding: 1.5rem 1.75rem 1.75rem; border-radius: var(--r-tile); background: var(--surface); border: 1px solid var(--line); }
.step b { font: var(--fw-display) var(--fs-4)/1.05 var(--font-display); letter-spacing: var(--ls-display); font-variant-numeric: lining-nums proportional-nums; }
.step span { color: var(--ink-2); }
.step-night { background: var(--night-2); border-color: var(--night-line); color: var(--night-ink); }
.step-night b { color: var(--cyan); }
.step-night span { color: var(--night-ink-2); }
@media (min-width: 48rem) { .step:nth-child(2) { margin-top: 2.25rem; } .step:nth-child(3) { margin-top: .75rem; } }
@media (max-width: 47.99rem) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* RUCH: tylko transform/opacity, tylko gdy użytkownik nie ograniczył ruchu */
.night-bg img { transform: scale(1.04); }
@media (prefers-reduced-motion: no-preference) {
  .night-bg img { animation: drift 30s ease-in-out infinite alternate; will-change: transform; }
  @keyframes drift { from { transform: scale(1.04) translate3d(0, 0, 0); } to { transform: scale(1.12) translate3d(-1.5%, -1%, 0); } }
}
@media (min-width: 56rem) and (prefers-reduced-motion: no-preference) {
  .home .float-a { animation: bob 7s ease-in-out infinite alternate; }
  .home .float-b { animation: bob 8s ease-in-out -3s infinite alternate; }
  @keyframes bob { from { translate: 0 0; } to { translate: 0 -.625rem; } }
}