/* Nasze realizacje – jeden komponent wszędzie (strona główna, Strony internetowe…): mozaika zrzutów (Adrian 2026-10-29, lab new-realizacje-lista, wariant 06).
   Pięć kafli w pełnych rzędach: Akwadrat duży na dwa rzędy, obok dwa mniejsze, pod nimi dwa szerokie. Nazwa, branża
   i zakres w ciemnym pasku na dole zrzutu; zakres pokazuje się pod kursorem i przy fokusie z klawiatury, na ekranach
   dotykowych widać go od razu. Na wąskim ekranie pasek stoi pod zrzutem. Cały kafel prowadzi do strony realizacji
   (::after linku nazwy na całej powierzchni), adres strony klienta leży nad nim. Kolory wyłącznie var(--…) z :root
   site.css; ruch tylko opacity i transform, przy prefers-reduced-motion bez przejść. */
/* Podkład paska na zrzucie (2026-10-29, czytelność): od dołu pełny granat, przez całą wysokość tekstu co najmniej 88%
   granatu, przejście do przezroczystości tylko w górnym odstępie paska (40 px). Najgorszy przypadek (biały zrzut pod
   paskiem): --on-dark-2 ok. 7:1, --cyan ok. 6,5:1. */
:root { --rm-veil: color-mix(in srgb, var(--navy-900) 88%, transparent); }
.e072 .rm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0; padding: 0; list-style: none; }
.rm__tile { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; overflow: hidden;
  border-radius: 18px; background: var(--navy-900); }
.rm__shot { min-width: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--paper); }
.rm__shot img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.rm__bar { display: grid; gap: 6px; min-width: 0; padding: 16px 18px 14px; background: var(--navy-900); color: var(--on-dark); }
.e072 .rm__name { margin: 0; font: 700 20px/1.25 var(--display); letter-spacing: -.01em; overflow-wrap: break-word; }
.e072 .rm__name a { color: var(--on-dark); text-decoration: underline 2px transparent; text-underline-offset: 5px; }
.e072 .rm__name a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.e072 .rm__name a:focus-visible { outline: none; }
.rm__tile:has(.rm__name a:focus-visible) { outline: 2px solid var(--blue); outline-offset: 4px; }
.rm__tile:has(.rm__name a:hover) .rm__name a { text-decoration-color: currentColor; }
.rm__trade { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--on-dark-2); overflow-wrap: break-word; }
.rm__scope { margin: 0; font: 500 12.5px/1.5 var(--mono); color: var(--cyan); overflow-wrap: break-word; }
.e072 .rm__site { position: relative; z-index: 2; justify-self: start; display: inline-flex; align-items: center; min-height: 32px;
  max-width: 100%; color: var(--on-dark); font: 600 14.5px/1.3 var(--text); text-decoration: underline 1.5px var(--line-dark-2);
  text-underline-offset: 5px; overflow-wrap: anywhere; }
.e072 .rm__site:hover { text-decoration-color: var(--orange-2); }
.e072 .rm__site:focus-visible { outline-color: var(--orange-2); }

/* od 900 px: mozaika 6 kolumn, pasek na zrzucie (ta sama komórka siatki, bez pozycjonowania – link nazwy obejmuje kafel) */
@media (min-width: 900px) {
  .e072 .rm { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; }
  .rm__shot, .rm__bar { grid-area: 1 / 1; }
  /* z-index (bez position): powiększony pod kursorem zrzut (transform) nie przykrywa paska (błąd z 29.10: napisy
     znikały), a ::after linku nazwy dalej liczy się od kafla, więc cały kafel zostaje klikalny */
  .rm__bar { z-index: 1; align-self: end; padding: 56px 22px 18px;
    background: linear-gradient(to top, var(--navy-900) 0%, var(--rm-veil) calc(100% - 40px), transparent); }
  .rm__t1 { grid-column: 1 / 5; grid-row: 1 / 3; }
  .rm__t1 .rm__shot { aspect-ratio: auto; height: 100%; }
  .e072 .rm__t1 .rm__name { font-size: 26px; }
  .rm__t2, .rm__t3 { grid-column: 5 / 7; }
  .rm__t2 .rm__bar, .rm__t3 .rm__bar { padding: 40px 18px 14px; }
  .e072 :is(.rm__t2, .rm__t3) .rm__name { font-size: 18px; }
  .e072 :is(.rm__t2, .rm__t3) .rm__site { display: none; }
  .rm__t4 { grid-column: 1 / 4; }
  .rm__t5 { grid-column: 4 / 7; }
  .rm__t4 .rm__shot, .rm__t5 .rm__shot { aspect-ratio: 16 / 8; }
}
/* część realizacji (work_section(slugs), 2026-10-29): pełne rzędy dla 2 i 4 kafli (dwa szerokie obok siebie); 3 kafle jak
   góra mozaiki pięciu (duży i dwa obok) – bez zmian */
@media (min-width: 900px) {
  .e072 :is(.rm--n2, .rm--n4) .rm__tile { grid-column: span 3; grid-row: auto; }
  .e072 :is(.rm--n2, .rm--n4) .rm__shot { aspect-ratio: 16 / 9; height: auto; }
  .e072 :is(.rm--n2, .rm--n4) .rm__bar { padding: 48px 20px 16px; }
  .e072 :is(.rm--n2, .rm--n4) .rm__name { font-size: 20px; }
  .e072 :is(.rm--n2, .rm--n4) .rm__site { display: inline-flex; }
}
/* zakres pod kursorem i przy fokusie; na ekranach dotykowych (hover: none) widoczny zawsze */
@media (min-width: 900px) and (hover: hover) {
  .rm__scope { opacity: 0; transform: translateY(6px); }
  .rm__tile:is(:hover, :focus-within) .rm__scope { opacity: 1; transform: none; }
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .rm__scope { transition: opacity .15s, transform .15s var(--ease); }
  .rm__shot img { transition: transform .4s var(--ease); }
  .rm__tile:hover .rm__shot img { transform: scale(1.03); }
}