/* REDFORD V6 · realizacje-lista.css: podstrona /realizacje/ (karta R13-C, 21.10.2026). Generator: tools/build-realizacje.py.
 * Ładowany PO wspólnych arkuszach strony głównej (tokens, base, nav, footer, flow, cookies, btnfx, mkfx, mobile) i po kopii wzorca
 * podstron (wzorzec-strony.css, stąd tylko .sp-crumbs). Tylko klasy rl-* i tło #start/#prace. Jeden krój (--f-text), bez kursywy,
 * akcent kolorem (#C8171D). Hover tylko dla myszy; bez JS i przy reduced motion stan końcowy. */

/* ---------- sekcje: papier, ta sama warstwa co #kontakt (flow.css) ---------- */
#start,#prace{position:relative;isolation:isolate;background:var(--paper);color:var(--ink)}

/* ---------- HERO: ścieżka, duży tytuł jak Taxi, pod nim jedno zdanie (R18-A: bez pigułek-kotwic i kreskowego rysunku) ---------- */
.rl-hero{padding:clamp(128px,15vh,168px) 0 clamp(40px,4.4vw,64px);overflow:hidden}
.rl-hero-in{position:relative}
.rl-hero-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end;margin-top:clamp(20px,2.2vw,32px)}
.rl-h1{grid-column:1/-1;grid-row:1;margin:0;font:700 clamp(48px,7.4vw,124px)/.92 var(--f-text);letter-spacing:-.05em;white-space:nowrap}
/* R27 (24.10, Rafał: „zmniejsz ten tekst tytułowy i napisz go w jednej linii”): H1 w jednej linii (nowrap, cała szerokość kolumny),
   mniejszy rozmiar dobrany pomiarem (qa-R27/measure-h1.py): napis ok. 8 x font-size, zawsze z marginesem do krawędzi kolumny. */
.rl-lead{grid-column:1/span 5;grid-row:2;align-self:start;max-width:24em;margin:clamp(24px,2.4vw,36px) 0 0;font:700 clamp(18px,1.5vw,22px)/1.4 var(--f-text);letter-spacing:-.01em;color:#3A3A37}

/* ---------- LISTA (R14-A): układ rozproszony ze STAŁEJ tabeli LAYOUT w build-realizacje.py (zmienne na <li>) ----------
 * desktop: siatka 12 kolumn, karta w swojej kolumnie (--c) i rzędzie (--r), przesunięta w dół o --o px (przy 1440, skalowane);
 * karty jednego rzędu mają rozłączne kolumny, więc nie nachodzą. Telefon i tablet: jedna kolumna, różne szerokości, lewa/prawa. */
.rl-sec{padding:0 0 clamp(96px,10vw,160px)}
.rl-sec .wrap{position:relative}
.rl-ln{display:block;height:1px;margin-bottom:clamp(40px,4.4vw,64px);background:rgba(14,14,14,.14);transform-origin:0 50%}
.rl-grid{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.rl-it{min-width:0;scroll-margin-top:110px}
@media (min-width:1024px){
  .rl-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:clamp(104px,10vw,150px);align-items:start}
  .rl-it{grid-column:var(--c);grid-row:var(--r);margin-top:calc(var(--o) * min(1px, 100vw / 1440))}
}
.rl-a{display:block;color:inherit;text-decoration:none;border-radius:20px}
.rl-img{position:relative;margin:0;aspect-ratio:var(--ar,16/10);overflow:hidden;border-radius:20px;background:var(--tone);transform:rotate(var(--rot,0deg))}
.rl-img img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .9s var(--e-out)}
.rl-meta{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:16px;align-items:end;margin-top:18px}
.rl-k{grid-column:1;grid-row:1;display:flex;align-items:center;gap:10px;margin:0 0 6px;font:700 var(--fs-lbl)/1.2 var(--f-text);letter-spacing:var(--ls-lbl);text-transform:uppercase;color:#5A5A55}
.rl-n{color:var(--red);font-variant-numeric:tabular-nums}
.rl-name{grid-column:1;grid-row:2;margin:0;font:700 clamp(24px,2.2vw,32px)/1.08 var(--f-text);letter-spacing:-.02em;transition:color .35s var(--e-out)}
.rl-go{grid-column:2;grid-row:1/span 2;display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(14,14,14,.2);color:var(--ink);
  transition:background-color .35s var(--e-out),color .35s var(--e-out),box-shadow .35s var(--e-out),transform .45s var(--e-out)}
.rl-go svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rl-d{margin:10px 0 0;max-width:30em;font:700 var(--fs-sm)/1.45 var(--f-text);color:#3A3A37}
@media (hover:hover) and (pointer:fine){
  .rl-a:hover .rl-img img{transform:scale(1.04)}
  .rl-a:hover .rl-name{color:var(--red)}
  .rl-a:hover .rl-go{background:var(--red);color:var(--paper);box-shadow:inset 0 0 0 1px var(--red);transform:rotate(45deg)}
}
.rl-a:focus-visible{outline:2px solid var(--red);outline-offset:6px}
.rl-a:focus-visible .rl-name{color:var(--red)}
.rl-a:focus-visible .rl-go{background:var(--red);color:var(--paper);box-shadow:inset 0 0 0 1px var(--red)}

/* ---------- tablet i telefon ---------- */
@media (max-width:1023px){
  .rl-hero{padding:calc(112px + env(safe-area-inset-top,0px)) 0 40px}
  .rl-hero-row{grid-template-columns:minmax(0,1fr);margin-top:20px}
  .rl-h1{grid-column:1;font-size:max(24px,9.6vw);letter-spacing:-.045em}   /* R27: jedna linia także na tablecie i telefonie */
  .rl-lead{grid-column:1;grid-row:2;margin-top:20px;font-size:17px}
  /* tablet: jedna kolumna, karty węższe (--tw) na zmianę przy lewej i prawej krawędzi, nierówne odstępy */
  .rl-it{width:var(--tw);max-width:100%}
  .rl-it--r{margin-left:auto}
  .rl-it+.rl-it{margin-top:clamp(40px,7vw,72px)}
  .rl-it:nth-child(3n+2){margin-top:clamp(28px,5vw,48px)}
  .rl-img,.rl-a{border-radius:16px}
  .rl-name{font-size:clamp(20px,3vw,26px)}
  .rl-go{width:44px;height:44px}
  .rl-k{font-size:14px}
  .rl-it{scroll-margin-top:88px}
}
@media (max-width:599px){
  /* telefon: szerokości --mw (100%, 86%, 92%...), lewa/prawa na zmianę */
  .rl-it{width:var(--mw)}
  .rl-it+.rl-it{margin-top:44px}
  .rl-it:nth-child(3n+2){margin-top:32px}
  .rl-it:nth-child(3n){margin-top:56px}
  .rl-meta{margin-top:14px}
  .rl-name{font-size:24px}
  .rl-d{font-size:15px}
}
/* telefon w poziomie (niska wysokość): mniejszy tytuł, węższe karty, żeby kadr mieścił się w ekranie */
@media (orientation:landscape) and (max-height:540px){
  .rl-hero{padding-top:calc(96px + env(safe-area-inset-top,0px))}
  .rl-h1{font-size:clamp(24px,8vw,72px)}   /* R27: jedna linia */
  .rl-it{width:calc(var(--tw) * .8)}
}

/* ---------- ruch: ukrycie przed wejściem tylko gdy działa GSAP (klasa od realizacje-lista.js) ---------- */
/* opacity zamiast visibility: karty przed wejściem zostają w kolejności Tab (fokus od razu je pokazuje, realizacje-lista.js) */
html.rl-anim:not(.rf-reduced) .rl-it{opacity:0}
@media (prefers-reduced-motion:reduce){
  .rl-img img,.rl-go,.rl-name{transition:none}
  .rl-a:hover .rl-img img{transform:none}
}