/* Podstrony usług i kafle na stronie głównej (zbuduj-podstrony.py). */

/* Hero podstrony: duży nagłówek na pierwszym ekranie, kropka startuje obok niego. */
.phero { min-height: 88vh; min-height: 88svh; display: grid; align-items: end; padding: calc(var(--nav-h) + 40px) 0 clamp(64px, 10vh, 120px); }
.phero__crumb { display: flex; gap: 10px; font: 500 14px/1 var(--mono); color: var(--ink-3); margin-bottom: 28px; }
.phero__crumb a { color: var(--ink-2); }
.phero__crumb a:hover { color: var(--blue-hi); }
.phero__h { margin: 0; max-width: 14ch; font: 700 clamp(44px, 8vw, 128px)/0.98 var(--display); letter-spacing: -0.045em; text-wrap: balance; }
.phero__lead { margin-top: 28px; max-width: 52ch; font-size: clamp(17px, 1.6vw, 21px); color: var(--ink-2); }

/* Kafle usług na stronie głównej */
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 14px; }
.tile { position: relative; display: grid; gap: 10px; align-content: start; min-height: 190px; padding: 28px 28px 84px; border-radius: var(--r-lg); background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; transition: box-shadow .4s var(--ease), translate .4s var(--ease); }
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 120%), rgba(47, 107, 255, .28), transparent 60%); opacity: 0; transition: opacity .4s; pointer-events: none; }
.tile h3 { position: relative; margin: 0; font: 700 clamp(24px, 2.4vw, 30px)/1.1 var(--display); letter-spacing: -0.02em; }
.tile p { position: relative; color: var(--ink-2); max-width: 32ch; }
.tile__go { position: absolute; right: 22px; bottom: 22px; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-hi); transition: background .4s var(--ease), box-shadow .4s; }
.tile__go svg { width: 20px; height: 20px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: translate .4s var(--ease); }
.tile:hover, .tile:focus-visible { box-shadow: inset 0 0 0 1px var(--line-hi), var(--glow); translate: 0 -4px; }
.tile:hover::before, .tile:focus-visible::before { opacity: 1; }
.tile:hover .tile__go, .tile:focus-visible .tile__go { background: var(--blue); box-shadow: none; }
.tile:hover .tile__go svg { translate: 3px 0; }

/* Projekty: kafle ze zdjęciem, każdy otwiera przykładową stronę */
.phero--short { min-height: 62vh; min-height: 62svh; }
.projs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); gap: 14px; }
.proj { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: var(--r-lg); overflow: hidden; background: var(--paper-2); box-shadow: inset 0 0 0 1px var(--line); isolation: isolate; transition: box-shadow .4s var(--ease), translate .4s var(--ease); }
.proj img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.8); transition: scale .9s var(--ease), filter .6s; }
.proj::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 8, 14, .85), rgba(6, 8, 14, 0) 60%); }
.proj__txt { position: absolute; left: 28px; right: 84px; bottom: 24px; z-index: 1; display: grid; gap: 6px; color: #fff; }
.proj__k { font: 500 14px/1 var(--mono); color: rgba(255, 255, 255, .72); }
.proj__h { font: 700 clamp(24px, 2.6vw, 34px)/1.05 var(--display); letter-spacing: -0.02em; }
.proj .tile__go { z-index: 1; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.proj .tile__go svg { stroke: #fff; }
.proj:hover, .proj:focus-visible { box-shadow: inset 0 0 0 1px var(--line-hi), var(--glow); translate: 0 -4px; }
.proj:hover img, .proj:focus-visible img { scale: 1.04; filter: brightness(.95); }
.proj:hover .tile__go, .proj:focus-visible .tile__go { background: var(--blue); box-shadow: none; }

/* Link do kolejnej podstrony */
.next { padding: clamp(40px, 6vw, 80px) 0; border-top: 1px solid var(--line); }
.next__a { display: grid; gap: 8px; padding: clamp(28px, 4vw, 48px) 0; }
.next__k { font: 500 14px/1 var(--mono); color: var(--blue-hi); }
.next__h { font: 700 clamp(40px, 7vw, 96px)/1 var(--display); letter-spacing: -0.04em; transition: color .3s, translate .5s var(--ease); }
.next__p { color: var(--ink-2); }
.next__a:hover .next__h { color: var(--blue-hi); translate: 12px 0; }

/* Linki w stopce */
.foot__links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14px; }
.foot__links a { color: #A9B0C2; }
.foot__links a:hover { color: #fff; }
.nav__links a[aria-current="page"] { color: var(--ink); }