/* === Single Realizacja — corporate quilt gallery === */
:root{
  --rs-text: #0f172a;
  --rs-muted: #64748b;
  --rs-border: #e2e8f0;
  --rs-bg: #f7f9fc;
  --rs-surface: #ffffff;
  --rs-brand: #0a7a54;
  --rs-brand-weak: #0a7a5422;
  --rs-shadow: 0 6px 24px rgba(13, 38, 76, .06);

  /* ostrze — ścięte rogi kafelków */
  --bevel: 14px;
  --bevel-hover: 20px;
}

/* blokuj scroll, gdy lightbox otwarty */
.rs-lock{ overflow: hidden; }

/* Sekcja i kontener */
.rs-single{ position: relative; isolation:isolate; padding: 56px 0 48px; background: var(--rs-bg); }
.rs-container{ width: min(1100px, 92%); margin: 0 auto; }

/* Breadcrumb */
.rs-breadcrumb{
  display:flex; align-items:center; gap:10px;
  font-size: 14px; color: var(--rs-muted); margin-bottom: 12px;
}
.rs-breadcrumb a{ color: var(--rs-brand); text-decoration:none; }
.rs-breadcrumb a:hover{ text-decoration:underline; }

/* Hero */
.rs-hero{ margin-bottom: 18px; }
.rs-hero__title{
  margin:0 0 8px; color: var(--rs-text);
  font-size: clamp(28px, 3vw, 42px);
  letter-spacing:.2px; font-weight: 800;
}
.rs-hero__excerpt{
  margin:0; color: var(--rs-muted);
  font-size: clamp(16px, 1.5vw, 18px);
}

/* Layout treści + galerii (zapas na przyszłość) */
.rs-wrap{ display:grid; grid-template-columns: 1fr; gap: 22px; }
@media (min-width: 992px){
  .rs-wrap{ grid-template-columns: 1fr; } /* teraz 1 kolumna; zostawione na przyszłe sidebary */
}

/* === GALERIA PATCHWORK (quilt) === */
.rs-gallery{
  display:grid; gap: 16px;
  grid-template-columns: repeat(12, 1fr); /* gęsta siatka 12 kolumn */
}

/* Kafelek */
.rs-g{
  position: relative; overflow: hidden;
  background: var(--rs-surface); border: none; border-radius: 0;
  box-shadow: var(--rs-shadow);
  text-decoration: none;
  /* ścięte rogi */
  --b: var(--bevel);
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                     calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  transition: clip-path .25s ease, transform .25s ease, box-shadow .25s ease;
  grid-column: span 4; /* domyślnie 4/12 => 3 w rzędzie */
}
@media (max-width: 992px){ .rs-g{ grid-column: span 6; } }  /* 2 w rzędzie */
@media (max-width: 560px){ .rs-g{ grid-column: span 12; } } /* 1 w rzędzie */

/* Modyfikatory rozmiaru (patchwork) */
.rs-g--wide{ grid-column: span 8; } /* szeroki kafel */
.rs-g--tall{ grid-column: span 4; } /* wizualnie „wyższy” robimy przez aspekt img */

/* Obramowanie zgodne z clip-path (pseudo-element) */
.rs-g::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  clip-path: polygon(var(--b) 0, 100% 0, 100% calc(100% - var(--b)),
                     calc(100% - var(--b)) 100%, 0 100%, 0 var(--b));
  box-shadow: inset 0 0 0 1px var(--rs-border);
}

/* Subtelny pasek akcentu */
.rs-g::after{
  content:""; position:absolute; left:0; top:0; right:0; height:3px;
  background: linear-gradient(90deg, var(--rs-brand), #0b8f61); opacity:.85;
}

/* Zdjęcie wewnątrz kafla */
.rs-g__img{
  width:100%; height:100%; object-fit:cover; display:block;
  aspect-ratio: 4/3; /* default */
  transform: scale(1.02);
  filter: grayscale(.12) saturate(.95);
  transition: transform .35s ease, filter .35s ease;
}
/* „tall” – wrażenie wyższego kafla */
.rs-g--tall .rs-g__img{ aspect-ratio: 3/4; }
/* „wide” – jeszcze bardziej szeroki feeling */
.rs-g--wide .rs-g__img{ aspect-ratio: 16/9; }

/* Veil + przycisk powiększ */
.rs-g__veil{
  position:absolute; inset:0; background: linear-gradient(180deg, transparent, rgba(0,0,0,.18));
  opacity: 0; transition: opacity .25s ease;
}
.rs-g__zoom{
  position:absolute; right:10px; bottom:10px;
  padding: 6px 10px; font-size: 12px; font-weight: 800; letter-spacing:.4px;
  color:#fff; background: rgba(10,122,84,.9);
  border-radius: 999px;
  transform: translateY(6px); opacity: 0;
  transition: transform .25s ease, opacity .25s ease, background .2s ease;
}
@media (hover:hover){
  .rs-g:hover{ --b: var(--bevel-hover); transform: translateY(-3px); box-shadow: 0 12px 36px rgba(13, 38, 76, .12); }
  .rs-g:hover .rs-g__img{ transform: scale(1.07); filter: grayscale(0) saturate(1); }
  .rs-g:hover .rs-g__veil{ opacity: 1; }
  .rs-g:hover .rs-g__zoom{ transform: translateY(0); opacity: 1; }
}

/* Pustka */
.rs-empty{ color: var(--rs-muted); }

/* Link „wróć” */
.rs-back{ margin-top: 22px; }
.rs-back__btn{
  display:inline-block; text-decoration:none; font-weight:800; color: var(--rs-brand);
  padding: 10px 16px; border:1px solid var(--rs-brand); border-radius: 999px;
  transition: background .15s ease, color .15s ease;
}
.rs-back__btn:hover{ background: var(--rs-brand); color:#fff; }

/* === LIGHTBOX (lekki) === */
.rs-lightbox{
  position: fixed; inset: 0; z-index: 9999; background: rgba(15,23,42,.88);
  display: grid; grid-template-columns: 56px 1fr 56px; grid-template-rows: 56px 1fr 56px;
  align-items: center; justify-items: center;
}
.rs-lightbox[hidden]{ display:none; }
.rs-lb__stage{ grid-column: 1 / -1; grid-row: 2 / 3; width: min(92vw, 1200px); height: min(80vh, 800px); display:grid; grid-template-rows: 1fr auto; gap: 10px; }
.rs-lb__img{ width:100%; height:100%; object-fit: contain; border-radius: 0; background:#0b1220; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
.rs-lb__caption{ color:#e2e8f0; text-align:center; font-size: 14px; }

.rs-lb__close{
  grid-column: 3 / 4; grid-row: 1 / 2; align-self: start; justify-self: end;
  width: 44px; height: 44px; margin: 8px; border:0; border-radius:50%;
  font-size: 26px; line-height: 1; color:#0b1220; background:#e2e8f0;
  cursor:pointer; transition: transform .1s ease, opacity .1s ease;
}
.rs-lb__close:hover{ transform: scale(1.05); }

.rs-lb__nav{
  width: 44px; height: 44px; border:0; border-radius:50%;
  color:#0b1220; background:#e2e8f0; cursor:pointer;
  font-size: 26px; line-height: 1;
  display:flex; align-items:center; justify-content:center;
  transition: transform .1s ease, opacity .1s ease;
}
.rs-lb__prev{ grid-column: 1 / 2; grid-row: 2 / 3; }
.rs-lb__next{ grid-column: 3 / 4; grid-row: 2 / 3; }
.rs-lb__nav:hover{ transform: scale(1.05); }

/* Preferencje: mniej ruchu */
@media (prefers-reduced-motion: reduce){
  *{ transition: none !important; }
}
