/* Realizacje, baza wiedzy, wyszukiwarka - uzupełnienia makiety dla WordPressa i wersja mobilna realizacji. */

/* Dane obiektu i duże liczby: liczba kolumn wg liczby pozycji */
.r-metryka.m-1 { grid-template-columns: minmax(0, 1fr); }
.r-metryka.m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.r-metryka.m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.r-metryka.m-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.liczby-duze.n-1 { grid-template-columns: minmax(0, 1fr); }
.liczby-duze.n-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.liczby-duze.n-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Film: natywne video pod plakatem z przyciskiem */
.odtwarzacz video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; }
.odtwarzacz.gra video { object-fit: contain; }
.odtwarzacz iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.film-start { display: none; position: absolute; inset: 0; z-index: 3; width: 100%; padding: 0; border: 0; background: none; color: var(--bialy); font: inherit; text-align: left; cursor: pointer; }
.js-film .film-start { display: block; }
.odtwarzacz.gra .film-start, .odtwarzacz.gra::after { display: none; }
.film-real::after, .film-w::after { pointer-events: none; z-index: 1; }
.film-real .film-start .zf-op { z-index: 3; }
.film-w .film-start .kolo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; background: rgba(43,43,42,.6); display: flex; align-items: center; justify-content: center; border: 2px solid var(--bialy); }
.film-w .film-start .fw-op { color: var(--bialy); }
.film-start:hover .kolo { background: var(--czerwien); border-color: var(--czerwien); }
.film-start:focus-visible { outline: 3px solid var(--czerwien); outline-offset: -3px; }

/* Galeria realizacji przy mniej niż 5 zdjęciach */
.galeria-r.n-1 { grid-template-columns: minmax(0, 1fr); grid-template-rows: 560px; }
.galeria-r.n-2 { grid-template-columns: 2fr 1fr; grid-template-rows: 560px; }
.galeria-r.n-2 a:first-child { grid-row: auto; }
.galeria-r.n-3 { grid-template-columns: 2fr 1fr; }
.galeria-r.n-4 a:last-child { grid-column: span 2; }
.galeria-r a[hidden] { display: none; }
.galeria-r a, .galeria-w a { cursor: zoom-in; }
.galeria-r img, .galeria-w img { transition: transform .4s; }
.galeria-r a:hover img, .galeria-w a:hover img { transform: scale(1.03); }

/* Podgląd zdjęć */
.podglad { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(20,20,19,.94); color: var(--bialy); }
.podglad[open] { display: flex; align-items: center; justify-content: center; }
.podglad::backdrop { background: rgba(20,20,19,.94); }
.podglad img { max-width: calc(100vw - 160px); max-height: calc(100vh - 120px); object-fit: contain; }
.podglad button { position: absolute; width: 56px; height: 56px; border: 1px solid rgba(255,255,255,.4); background: rgba(43,43,42,.6); color: var(--bialy); font-size: 32px; line-height: 1; cursor: pointer; }
.podglad button:hover { background: var(--czerwien); border-color: var(--czerwien); }
.podglad .pg-x { top: 24px; right: 24px; }
.podglad .pg-p { left: 24px; top: 50%; transform: translateY(-50%); }
.podglad .pg-n { right: 24px; top: 50%; transform: translateY(-50%); }
.podglad .pg-l { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); font-family: var(--naglowek); font-size: 14px; font-weight: 600; }

/* Systemy użyte w realizacji: dokumenty obok karty produktu */
.r-doki { grid-column: span 3; min-width: 0; }

/* Filtry listy realizacji: natywne select w stylu makiety */
.filtry-r .wybory { display: flex; gap: 12px; align-items: center; }
.filtry-r .wybor { position: relative; padding: 0; }
.filtry-r .wybor select { appearance: none; -webkit-appearance: none; height: 100%; border: 0; background: transparent; font: inherit; color: inherit; padding: 0 40px 0 16px; cursor: pointer; }
.filtry-r .wybor svg { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; }
.js-filtry .filtruj { display: none; }
.paginacja .btn[aria-busy] { opacity: .6; pointer-events: none; }
.sz-linki { display: flex; flex-wrap: wrap; gap: 12px 32px; margin-top: 20px; }
.tresc-w > figure, .tresc-w > .wp-block-image { margin-top: 24px; }
.tresc-w h2[id], .tresc-w h2 { scroll-margin-top: 24px; }

@media (max-width: 1023px) {
  /* Lista realizacji */
  .wyrozniona { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .wyrozniona .fot { min-height: 240px; }
  .wyrozniona .tr { padding: 24px 20px 28px; }
  .wyrozniona h2 { font-size: 28px; }
  .wyrozniona .metryka b { font-size: 16px; }
  .filtry-r .wybory { flex-direction: column; align-items: stretch; width: 100%; }
  .filtry-r .wybor select { width: 100%; }
  .lista-real { gap: 32px; }
  .paginacja { flex-direction: column; gap: 12px; margin-top: 40px; }
  .paginacja .btn { width: 100%; }

  /* Realizacja */
  .r-hero { height: 520px; }
  .r-hero .k { padding-bottom: 64px; }
  .r-hero h1 { font-size: 32px; }
  .r-hero .miejsce { font-size: 16px; }
  .r-metryka, .r-metryka.m-3, .r-metryka.m-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: -32px; }
  .r-metryka.m-1 { grid-template-columns: minmax(0, 1fr); }
  .r-metryka div { padding: 14px 12px; border-right: 0; border-bottom: 1px solid var(--linia); }
  .r-metryka div:nth-child(odd) { border-right: 1px solid var(--linia); }
  .r-metryka div:last-child:nth-child(odd) { grid-column: span 2; border-right: 0; }
  .r-metryka div:nth-last-child(-n+2):nth-child(even), .r-metryka div:last-child { border-bottom: 0; }
  .r-metryka b { font-size: 15px; }
  .r-metryka span { font-size: 11px; }
  .liczby-duze, .liczby-duze.n-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .liczby-duze.n-1 { grid-template-columns: minmax(0, 1fr); }
  .sekcja[style*="padding-top:96px"] { padding-top: 64px !important; }
  .opis-real .blok p { font-size: 16px; }
  .opis-real .bloki { gap: 24px; }
  .film-real .zf-op { left: 16px; bottom: 16px; gap: 12px; }
  .film-real .zf-op .kolo { width: 48px; height: 48px; }
  .film-real .zf-op b { font-size: 16px; }
  .film-real .zf-op span span { display: none; }
  .galeria-r, .galeria-r.n-3, .galeria-r.n-2 { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: 120px; gap: 8px; }
  .galeria-r a:first-child { grid-row: auto; grid-column: span 2; height: 220px; }
  .galeria-r.n-1 { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 240px; }
  .galeria-r.n-1 a:first-child, .galeria-r.n-2 a:first-child { grid-column: auto; height: auto; }
  .galeria-r.n-2 { grid-auto-rows: 160px; }
  .galeria-r.n-4 a:last-child { grid-column: span 2; }
  .galeria-r .wiecej { font-size: 14px; }
  .r-doki { grid-column: 1 / -1; }
  .powiazane .real.srednia { height: 280px; }
  .podglad img { max-width: 100vw; max-height: calc(100vh - 140px); }
  .podglad .pg-p, .podglad .pg-n { top: auto; bottom: 16px; transform: none; width: 48px; height: 48px; }
  .podglad .pg-x { top: 16px; right: 16px; width: 48px; height: 48px; }
  .podglad .pg-l { bottom: 30px; }

  /* Baza wiedzy, wpis */
  .film-w .film-start .kolo { width: 56px; height: 56px; }
  .fw-op { left: 12px; bottom: 12px; font-size: 12px; }
  .galeria-w { grid-template-columns: 1fr 1fr; gap: 8px; }
  .galeria-w a:first-child { grid-column: span 2; }
}