@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap');

:root{
  --bg: #0b0b0c;
  --bg-panel: #000000;
  --bg-card: #131314;
  --ink: #f4efe6;
  --ink-muted: #948d81;
  --accent: #c9a15c;
  --rule: rgba(244,239,230,0.10);
  --shadow: 0 30px 60px -30px rgba(0,0,0,0.7);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--bg-panel);
  color:var(--ink);
  font-family:'Jost', sans-serif;
  font-weight:300;
  -webkit-font-smoothing:antialiased;
}

a{ color:inherit; text-decoration:none; }

/* ---------- HEADER ---------- */
.site-header{
  background:#1c1b1a;
  background-image: radial-gradient(120% 160% at 50% -20%, #26221d 0%, #171513 55%, #0f0d0c 100%);
  padding:22px 24px 18px;
  text-align:center;
  position:relative;
  overflow:hidden;
}

/* Overlay variant: floats transparently on top of the homepage hero grid
   so the 4 sections can occupy the full viewport height underneath it. */
.site-header.overlay{
  position:fixed;
  top:0; left:0; right:0;
  z-index:60;
  background:linear-gradient(180deg, rgba(0,0,0,.68) 0%, rgba(0,0,0,.28) 65%, transparent 100%);
  padding:14px 24px 16px;
  overflow:visible;
}
.site-header.overlay::before{ display:none; }
.site-header.overlay .logo{ width:clamp(84px, 11vw, 120px); }
.site-header.overlay nav.main-nav{ margin-top:8px; }
.site-header.overlay .socials{ margin-top:8px; }
body.home{ padding-top:0; }
.site-header::before{
  content:"";
  position:absolute; inset:0;
  background: radial-gradient(circle at 50% 0%, rgba(201,161,92,0.14), transparent 55%);
  animation: flash 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes flash{
  0%,100%{ opacity:.5; }
  50%{ opacity:1; }
}
.logo-link{ display:inline-block; line-height:0; }
.logo{
  display:inline-block;
  width:clamp(110px, 13vw, 150px);
  height:auto;
  aspect-ratio: 1249 / 359;
  object-fit:contain;
  position:relative;
}
nav.main-nav{
  margin-top:14px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:30px;
  flex-wrap:wrap;
  position:relative;
}
nav.main-nav a{
  font-family:'Cormorant Garamond', serif;
  font-size:1.15rem;
  color:var(--ink-muted);
  letter-spacing:.03em;
  padding-bottom:3px;
  border-bottom:1px solid transparent;
  transition:color .25s ease, border-color .25s ease;
}
nav.main-nav a:hover{ color:var(--ink); border-color:var(--accent); }
nav.main-nav a.active{ color:#fff; font-weight:600; }

.socials{
  margin-top:14px;
  display:flex;
  justify-content:center;
  gap:18px;
  position:relative;
}
.socials a{
  width:17px; height:17px;
  color:#fff;
  opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.socials a:hover{ opacity:1; transform:translateY(-2px); }
.socials svg{ width:100%; height:100%; fill:currentColor; }

/* ---------- HERO / TAGLINE ---------- */
.tagline{
  text-align:center;
  padding:52px 24px 8px;
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.25rem;
  color:var(--ink-muted);
  letter-spacing:.02em;
}
.rule{
  width:64px; height:1px;
  background:var(--accent);
  margin:26px auto 0;
}

/* ---------- HOME HERO GRID (4 full-screen sections) ---------- */
.hero-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  height:100vh;
  height:100dvh;
  background:var(--rule); /* shows through the gap as hairline dividers */
  gap:1px;
  padding:1px;
}
.hero-cell{
  position:relative;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:hidden;
  background-color:#0c0c0d;
  background-size:cover;
  background-position:center;
  box-shadow: inset 0 0 0 0 var(--accent);
  transition: box-shadow .4s ease;
}
.hero-cell::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,.20) 0%, rgba(0,0,0,.55) 100%);
  transition: background .4s ease;
}
.hero-cell:hover{
  box-shadow: inset 0 0 0 2px var(--accent), 0 0 40px rgba(201,161,92,.25);
}
.hero-cell:hover::after{
  background: rgba(0,0,0,.72);
}
.hero-cell-label{
  position:relative;
  z-index:2;
  text-align:center;
  padding-bottom:8vh;
}
.hero-cell-label .cat-label{
  margin-top:0;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  color:#fff;
  transition: letter-spacing .4s ease;
}
.hero-cell:hover .cat-label{ letter-spacing:.06em; }
.hero-cell-label .cat-sub{ color:#d8d0c2; }

@media (max-width:760px){
  .hero-grid{
    grid-template-columns:1fr;
    grid-template-rows:none;
    height:auto;
  }
  .hero-cell{ height:100vh; height:100dvh; }
}

/* Blokada zoomu dotykiem (pinch/double-tap) na stronie głównej — mobile.
   Dotyczy tylko body.home (index), nie całej strony.
   Wymaga też meta viewport z user-scalable=no w <head> index.html. */
body.home{
  touch-action: pan-y;
}
body.home .hero-grid,
body.home .hero-cell{
  touch-action: manipulation;
}

/* ---------- CATEGORY GRID (home) ---------- */
.category-grid{
  max-width:1240px;
  margin:0 auto;
  padding:48px 40px 80px;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:34px 30px;
}
.category-card{ text-align:center; display:block; }
.thumb{
  aspect-ratio: 3/4;
  border-radius:2px;
  background:
    linear-gradient(160deg, rgba(201,161,92,0.10), transparent 60%),
    linear-gradient(135deg, #1d1c1a, #0c0b0a);
  background-size:cover;
  background-position:center;
  overflow:hidden;
  position:relative;
  box-shadow: var(--shadow);
  transition: transform .5s cubic-bezier(.2,.8,.2,1);
}
.category-card:hover .thumb{ transform:translateY(-6px); }
.thumb::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(0,0,0,.35), transparent 45%);
}
.cat-label{
  margin-top:20px;
  font-family:'Cormorant Garamond', serif;
  font-size:1.5rem;
  color:#fff;
  letter-spacing:.03em;
}
.cat-sub{
  margin-top:4px;
  font-size:.82rem;
  color:var(--ink-muted);
  letter-spacing:.08em;
  text-transform:uppercase;
}

/* ---------- SUBPAGE GALLERY ---------- */
.page-title{
  text-align:center;
  padding:60px 24px 10px;
  font-family:'Cormorant Garamond', serif;
  font-size:clamp(2rem, 4vw, 2.8rem);
  color:#fff;
  letter-spacing:.03em;
}
.page-sub{
  text-align:center;
  font-size:.85rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--ink-muted);
  margin-top:6px;
}
.gallery{
  max-width:1240px;
  margin:0 auto;
  padding:48px 40px 40px;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}
.gallery .thumb{ aspect-ratio: 4/5; }
.gallery.concerts .thumb{ aspect-ratio: 3/2; }
.gallery.sesje-grid{ grid-template-columns:repeat(4, 1fr); gap:22px; }
.gallery.sesje-grid .thumb{
  aspect-ratio: 2/3;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ---------- 18STKI MOSAIC (big + 3 stacked / row of 3 / mirrored, ~3:2 feel) ----------
   Fixed row-height unit (not "auto") so every track is identical — this is what
   prevents empty black gaps between cells, regardless of the real photos' exact ratio. */
.gallery.mosaic-grid{
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: clamp(80px, 11vw, 150px);
  gap:20px;
}
.gallery.mosaic-grid figure{ margin:0; height:100%; }
.gallery.mosaic-grid .thumb{
  width:100%;
  height:100%;
  aspect-ratio:auto;
}
/* group 1: big left (cols 1-2, spans 3 rows) + three small stacked right (col 3) */
.gallery.mosaic-grid figure:nth-child(11n+1){ grid-column: 1 / span 2; grid-row: span 3; }
.gallery.mosaic-grid figure:nth-child(11n+2){ grid-column: 3; grid-row: span 1; }
.gallery.mosaic-grid figure:nth-child(11n+3){ grid-column: 3; grid-row: span 1; }
.gallery.mosaic-grid figure:nth-child(11n+4){ grid-column: 3; grid-row: span 1; }
/* group 2: row of 3, a little taller */
.gallery.mosaic-grid figure:nth-child(11n+5){ grid-column: 1; grid-row: span 2; }
.gallery.mosaic-grid figure:nth-child(11n+6){ grid-column: 2; grid-row: span 2; }
.gallery.mosaic-grid figure:nth-child(11n+7){ grid-column: 3; grid-row: span 2; }
/* group 3 (mirrored group 1): three small stacked left (col 1) + big right (cols 2-3, spans 3 rows) */
.gallery.mosaic-grid figure:nth-child(11n+8){ grid-column: 1; grid-row: span 1; }
.gallery.mosaic-grid figure:nth-child(11n+9){ grid-column: 1; grid-row: span 1; }
.gallery.mosaic-grid figure:nth-child(11n+10){ grid-column: 1; grid-row: span 1; }
.gallery.mosaic-grid figure:nth-child(11n){ grid-column: 2 / span 2; grid-row: span 3; }

@media (max-width:700px){
  .gallery.mosaic-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .gallery.mosaic-grid figure{
    height:auto;
    grid-column:1 !important;
    grid-row:auto !important;
  }
  .gallery.mosaic-grid .thumb{
    height:auto;
    aspect-ratio:3/2;
  }
}

@media (max-width:900px){
  .gallery.sesje-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:520px){
  .gallery.sesje-grid{ grid-template-columns:1fr; }
}
.gallery figure{ margin:0; }
.gallery figcaption{
  margin-top:14px;
  text-align:center;
  font-family:'Cormorant Garamond', serif;
  font-size:1.15rem;
  color:var(--ink);
}

.legal-content{
  max-width:760px;
  margin:0 auto;
  padding:20px 24px 30px;
  color:var(--ink);
  font-size:.98rem;
  line-height:1.75;
}
.legal-content p{ margin:0 0 18px; }
.legal-content p:last-child{ margin-bottom:0; }

.back-link{
  display:block;
  text-align:center;
  padding:10px 24px 90px;
  color:var(--accent);
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  letter-spacing:.03em;
}
.back-link:hover{ color:#fff; }
.back-link .arrow{ display:inline-block; transform:translateX(0); transition:transform .2s ease; }
.back-link:hover .arrow{ transform:translateX(-4px); }

/* ---------- ARTIST GALLERY (3:2 photo essay) ---------- */
.artist-meta{
  text-align:center;
  padding:0 24px 40px;
  color:var(--ink-muted);
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.05rem;
}
.artist-gallery{
  max-width:1160px;
  margin:0 auto;
  padding:0 40px 30px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.artist-gallery .thumb{
  aspect-ratio: 3 / 2;
  border-radius:2px;
}
.artist-gallery figure{ margin:0; }
/* every 3rd image (3rd, 6th, 9th, 12th...) breaks the rhythm as a full-width frame,
   matching a two-up / wide-band brick pattern */
.artist-gallery figure:nth-child(3n){
  grid-column: span 2;
}

@media (max-width:760px){
  .artist-gallery{ grid-template-columns:1fr; padding:0 20px 20px; }
  .artist-gallery figure:nth-child(3n){ grid-column:span 1; }
}

/* ---------- ARTIST GALLERY 18STKA (zygzak: 1  2 / _  3 / 4  5 / _  6) ----------
   Ten sam układ co .artist-gallery, ale co 3. zdjęcie NIE jest rozciągane na
   pełną szerokość — zostaje normalnego rozmiaru i po prostu ląduje w kolumnie 2,
   zostawiając kolumnę 1 pustą w tym rzędzie (efekt schodkowy). */
.artist-gallery-18ska{
  max-width:1160px;
  margin:0 auto;
  padding:0 40px 30px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
}
.artist-gallery-18ska figure{ margin:0; }
.artist-gallery-18ska .thumb{
  aspect-ratio: 3 / 2;
  border-radius:2px;
}
.artist-gallery-18ska figure:nth-child(3n){
  grid-column: span 2;
}

@media (max-width:760px){
  .artist-gallery-18ska{ grid-template-columns:1fr; padding:0 20px 20px; }
  .artist-gallery-18ska figure:nth-child(3n){ grid-column:span 1; }
}

/* ---------- CONTACT ---------- */
#kontakt{
  background:#0b0b0c;
  border-top:1px solid var(--rule);
  padding:90px 24px 100px;
}
.kontakt-wrap{
  max-width:960px;
  margin:0 auto;
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:60px;
}
.kontakt-wrap h2{
  font-family:'Cormorant Garamond', serif;
  font-size:2.2rem;
  color:#fff;
  margin:0 0 14px;
  font-weight:500;
}
.kontakt-intro{
  color:var(--ink-muted);
  font-family:'Cormorant Garamond', serif;
  font-style:italic;
  font-size:1.15rem;
  line-height:1.6;
  margin-bottom:26px;
}
.kontakt-details{ list-style:none; padding:0; margin:0; }
.kontakt-details li{
  padding:10px 0;
  border-bottom:1px solid var(--rule);
  font-size:.98rem;
  color:var(--ink);
  display:flex;
  gap:12px;
}
.kontakt-details span.label{
  color:var(--ink-muted);
  min-width:88px;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.72rem;
  padding-top:2px;
}

form.kontakt-form{ display:flex; flex-direction:column; gap:16px; }
form.kontakt-form input,
form.kontakt-form textarea{
  background:var(--bg-card);
  border:1px solid var(--rule);
  color:var(--ink);
  padding:14px 16px;
  font-family:'Jost', sans-serif;
  font-size:.95rem;
  border-radius:2px;
  resize:none;
}
form.kontakt-form input:focus,
form.kontakt-form textarea:focus{
  outline:none;
  border-color:var(--accent);
}
form.kontakt-form button{
  margin-top:6px;
  background:var(--accent);
  color:#171512;
  border:none;
  padding:14px 20px;
  font-family:'Cormorant Garamond', serif;
  font-size:1.05rem;
  letter-spacing:.03em;
  cursor:pointer;
  border-radius:2px;
  transition:background .2s ease;
}
form.kontakt-form button:hover{ background:#e0b872; }

footer{
  padding:44px 24px 34px;
  border-top:1px solid var(--rule);
  background:#000;
}
.footer-wrap{
  max-width:1160px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:20px;
  text-align:center;
}
.footer-social{
  display:flex;
  gap:22px;
}
.footer-social a{
  width:20px; height:20px;
  color:#fff;
  opacity:.85;
  transition:opacity .2s ease, transform .2s ease;
}
.footer-social a:hover{ opacity:1; transform:translateY(-2px); }
.footer-social svg{ width:100%; height:100%; fill:currentColor; }
.footer-legal{
  display:flex;
  gap:10px 26px;
  flex-wrap:wrap;
  justify-content:center;
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--ink-muted);
}
.footer-legal a{ transition:color .2s ease; }
.footer-legal a:hover{ color:var(--accent); }
.footer-legal .dot{ opacity:.4; }
.footer-copy{
  font-size:.75rem;
  letter-spacing:.05em;
  color:var(--ink-muted);
}

/* ---------- RESPONSIVE ---------- */
@media (max-width:900px){
  .category-grid{ grid-template-columns:repeat(2,1fr); padding:40px 24px 60px; gap:26px; }
  .gallery{ grid-template-columns:repeat(2,1fr); padding:36px 20px; }
  .kontakt-wrap{ grid-template-columns:1fr; }
}
@media (max-width:520px){
  .category-grid{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  nav.main-nav{ gap:24px; }
}

@media (prefers-reduced-motion: reduce){
  .site-header::before{ animation:none; }
  *{ transition:none !important; animation:none !important; }
}