:root {
  --bg: #f8f8f6;
  --surface: #ffffff;
  --surface-soft: #f1f2ef;
  --text: #1a1f2b;
  --muted: #5e6472;
  --line: #e4e7ec;
  --accent: #5e66f9;
  --accent-soft: #eef0ff;
  --radius: 20px;
  --shadow: 0 20px 45px rgba(33, 38, 56, 0.08);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body{
  margin:0;
  font-family:"Inter","Segoe UI",sans-serif;
  color:var(--text);
  line-height:1.65;

  /* soft sky wash + subtle grid */
  background:
    radial-gradient(1100px 500px at 0% -10%, #f1f4ff 0%, transparent 55%),
    radial-gradient(900px 520px at 100% 0%, rgba(210,230,255,.55) 0%, transparent 60%),
    linear-gradient(180deg, #f6f9ff 0%, var(--bg) 55%, #ffffff 100%),
    linear-gradient(to right, rgba(120,150,210,.10) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(120,150,210,.10) 1px, transparent 1px);

  background-size:
    auto,
    auto,
    auto,
    56px 56px,
    56px 56px;

  background-attachment:
    scroll,
    scroll,
    scroll,
    fixed,
    fixed;
}

a { color:inherit; text-decoration:none; }
img { max-width:100%; display:block; }
.container { width:min(1180px, 92vw); margin:0 auto; }

.topbar { position:sticky; top:0; z-index:40; backdrop-filter:blur(10px); background:rgba(248,248,246,.88); border-bottom:1px solid rgba(0,0,0,.05); }
.nav { display:flex; align-items:center; justify-content:space-between; padding:.95rem 0; gap:1rem; }
.brand { font-size:.98rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.nav-links { display:flex; gap:.5rem; flex-wrap:wrap; }
.nav-links a { font-size:.9rem; color:var(--muted); border:1px solid transparent; border-radius:999px; padding:.42rem .82rem; transition:180ms ease; }
.nav-links a:hover { color:var(--text); border-color:var(--line); background:#fff; }

.section { padding:1.4rem 0; }
.section h1,.section h2,.section h3,h4 { margin:0; font-family:"Cormorant Garamond", Georgia, serif; letter-spacing:.01em; }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; color:#79829a; font-size:.74rem; margin-bottom:.35rem; }
.lead { color:var(--muted); max-width:60ch; margin:1rem 0 0; }

.hero-banner { min-height:72vh; background:var(--hero-image) center/cover no-repeat; position:relative; display:grid; place-items:center; }
.hero-banner::before { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(20,24,39,.35), rgba(20,24,39,.62)); }
.hero-banner-overlay { position:relative; text-align:center; color:#fff; width:min(860px,92vw); }
.hero-banner-overlay h1 { font-size:clamp(2.4rem,7vw,5.2rem); line-height:.95; margin-bottom:.6rem; }
.hero-banner-overlay p { color:#eef2ff; margin-bottom:1.2rem; }
.hero-banner-overlay .eyebrow { color:#d6defe; }

.center-intro, .center-title-only { text-align:center; }
.center-intro h2, .center-title-only h2 { font-size:clamp(2rem,5vw,3.6rem); }
.center-intro .lead, .center-title-only .lead { margin-inline:auto; }

.btn { display:inline-flex; align-items:center; justify-content:center; border-radius:999px; padding:.72rem 1.15rem; font-weight:600; border:1px solid var(--line); background:#fff; transition:180ms ease; cursor:pointer; }
.btn:hover { transform:translateY(-1px); }
.btn.primary { border-color:transparent; background:linear-gradient(135deg,#4954ff,#6b78ff); color:#fff; box-shadow:0 12px 24px rgba(92,103,249,.35); }

.section-head h2 { font-size:clamp(2rem,4vw,3.2rem); }
.variant-title { font-size:2rem; margin:2rem 0 1rem; }

.gallery-grid { display:grid; grid-template-columns:repeat(12,1fr); gap:1rem; }
.card { grid-column:span 4; }
.card:nth-child(5n+1), .card:nth-child(5n+4) { grid-column:span 6; }
.card>a { border-radius:16px; overflow:hidden; display:block; border:1px solid var(--line); box-shadow:var(--shadow); }
.card img { width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .22s ease; }
.card:hover img { transform:scale(1.03); }
.card-body { padding:.75rem .2rem .2rem; }
.card-body h3 { font-size:1.6rem; margin-top:.1rem; }
.meta { color:var(--muted); font-size:.88rem; letter-spacing:.02em; }

.carousel { display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:.7rem; }
.carousel-track { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,36%); gap:1rem; overflow-x:auto; scroll-behavior:smooth; scrollbar-width:none; }
.carousel-track::-webkit-scrollbar { display:none; }
.carousel-slide { border:1px solid var(--line); border-radius:16px; overflow:hidden; background:#fff; box-shadow:var(--shadow); }
.carousel-slide img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.carousel-btn { border:1px solid var(--line); background:#fff; width:44px; height:44px; border-radius:999px; cursor:pointer; }

.carousel-btn:disabled,
.carousel-btn.is-disabled{
  opacity: .35;
  cursor: not-allowed;
  pointer-events: none;
}

.hover-grid { display:grid; gap:.9rem; }
.hover-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
.hover-card { position:relative; border:0; padding:0; border-radius:16px; overflow:hidden; cursor:pointer; }
.hover-card img { width:100%; aspect-ratio:4/3; object-fit:cover; }
.hover-overlay { position:absolute; inset:auto 0 0 0; padding:.8rem; color:#fff; background:linear-gradient(180deg, transparent, rgba(0,0,0,.46)); transform:translateY(100%); transition:.22s ease; text-align:left; }
.hover-card:hover .hover-overlay { transform:translateY(0); }

.story-grid { display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:center; }
.story-grid article p { color:#42495a; }
.story-visual { margin:0; border:1px solid var(--line); border-radius:22px; overflow:hidden; box-shadow:var(--shadow); }
.story-visual img { width:100%; aspect-ratio:5/6; object-fit:cover; }

.contact-links p { margin:.3rem 0; color:#3d4658; }
.contact-links a { color:#2e45d7; font-weight:600; }

.art-modal[hidden] { display:none; }
.art-modal { position:fixed; inset:0; z-index:90; }
.art-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.55); }

.art-modal-dialog {
  position:relative;
  width:min(860px,92vw);
  margin:4vh auto;
  background:#fff;
  border-radius:18px;
  padding:1rem;
  border:1px solid var(--line);
  box-shadow:0 30px 80px rgba(0,0,0,.25);
}

.art-modal-zoom-wrap{
  width:100%;
  max-height:70vh;
  overflow:hidden;
  border-radius:14px;
  background:#fff;
  border:1px solid var(--line);
}

.art-modal-zoom-wrap img{
  max-height:70vh;
  width:100%;
  height:auto;
  object-fit:contain;
  transform-origin:center center;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:none;
}

.art-modal-close {
  position:absolute;
  right:.6rem;
  top:.6rem;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:1.5rem;
}

.art-modal-fs{
  position:absolute;
  right:3.4rem;
  top:.6rem;
  width:40px;
  height:40px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size:1.05rem;
  display:grid;
  place-items:center;
}

/* ===== FIX: modal buttons always clickable (above zoom/image) ===== */
.art-modal-dialog{
  position: relative;
  z-index: 1;          /* stacking context */
  isolation: isolate;  /* super pewne odseparowanie warstw */
}

/* zoom/image niżej */
.art-modal-zoom-wrap{
  position: relative;
  z-index: 1;
}

/* przyciski zawsze NA GÓRZE */
.art-modal-close,
.art-modal-fs{
  position: absolute;
  z-index: 9999;
  pointer-events: auto;
}

/* obraz nigdy nie ma “zjadać” klików na przyciskach */
.art-modal-zoom-wrap img{
  position: relative;
  z-index: 1;
}

/* keep buttons visible + clickable in fullscreen */
.art-modal-dialog:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  margin:0;
  border-radius:0;
  padding:1rem;
  background:#fff;
}
.art-modal-dialog:fullscreen .art-modal-zoom-wrap{
  max-height: calc(100vh - 160px);
}
.art-modal-dialog:fullscreen .art-modal-zoom-wrap img{
  max-height: calc(100vh - 160px);
}
.art-modal-dialog:fullscreen .art-modal-close,
.art-modal-dialog:fullscreen .art-modal-fs{
  position:fixed;
  top:14px;
  z-index:9999;
  background:#fff;
  color:#1a1f2b;
}
.art-modal-dialog:fullscreen .art-modal-close{ right:14px; }
.art-modal-dialog:fullscreen .art-modal-fs{ right:62px; }

.art-modal-zoom-wrap img.is-zoomed{ cursor:grab; }
.art-modal-zoom-wrap img.is-zoomed:active{ cursor:grabbing; }

.footer { border-top:1px solid var(--line); margin-top:2.2rem; padding:1.5rem 0; color:#737d91; font-size:.92rem; }

.sep{
  border: 0;
  height: 1px;
  margin: 2.2rem auto;
  width: min(1180px, 92vw);
  background: linear-gradient(90deg, transparent, rgba(0,0,0,.12), transparent);
}

.load-more-wrap{
  display:flex;
  justify-content:center;
  margin: 1.4rem 0 0;
}

[data-grid] .hover-card.is-hidden{
  display:none !important;
}

/* ===== MOBILE HAMBURGER NAV ===== */
.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:0;
}
.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#2a3142;
  border-radius:2px;
  transition: .2s ease;
}

/* responsive */
@media (max-width: 980px) {
  .hero-banner { min-height:60vh; }
  .story-grid { grid-template-columns:1fr; }
  .carousel-track { grid-auto-columns:minmax(260px,70%); }
  .card,.card:nth-child(5n+1),.card:nth-child(5n+4) { grid-column:span 6; }
}
@media (max-width: 680px) {
  .section { padding:1.2rem 0 !important;}
  .hover-grid.cols-3 { grid-template-columns:1fr; }
  .card,.card:nth-child(5n+1),.card:nth-child(5n+4) { grid-column:span 12; }
  .carousel-track { grid-auto-columns:100%; }

  .nav{ position:relative; }
  .nav-toggle{ display:inline-flex; }

  .nav-links{
    position:absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, 92vw);
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: .6rem;
    display:none;
    flex-direction:column;
    gap:.25rem;
    backdrop-filter: blur(10px);
  }

  .nav-links a{
    display:block;
    padding:.65rem .85rem;
    border-radius: 12px;
  }

  .topbar.is-open .nav-links{
    display:flex;
  }

  .topbar.is-open .nav-toggle span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .topbar.is-open .nav-toggle span:nth-child(2){
    opacity:0;
  }
  .topbar.is-open .nav-toggle span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* =========================
   HAMBURGER NAV (JS driven)
========================= */

.nav-toggle{
  display:none;
  width:44px;
  height:44px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  padding:0;
}

.nav-toggle span{
  display:block;
  width:18px;
  height:2px;
  background:#2a3142;
  border-radius:2px;
  transition:.2s ease;
}

@media (max-width: 680px){
  .nav{ position:relative; }
  .nav-toggle{ display:inline-flex; }

  .nav-links{
    position:absolute;
    top: calc(100% + 10px);
    right: 0;
    width: min(320px, 92vw);
    background: rgba(255,255,255,.96);
    border: 1px solid var(--line);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: .6rem;
    display:none;
    flex-direction:column;
    gap:.25rem;
    backdrop-filter: blur(10px);
    z-index: 9999;
  }

  .topbar.nav-open .nav-links{ display:flex; }

  .nav-links a{
    display:block;
    padding:.65rem .85rem;
    border-radius: 12px;
  }

  /* burger -> X */
  .topbar.nav-open .nav-toggle span:nth-child(1){
    transform: translateY(7px) rotate(45deg);
  }
  .topbar.nav-open .nav-toggle span:nth-child(2){
    opacity:0;
  }
  .topbar.nav-open .nav-toggle span:nth-child(3){
    transform: translateY(-7px) rotate(-45deg);
  }
}

/* =========================
   MODAL: MOBILE = no zoom/no fullscreen
========================= */
@media (max-width: 680px){
  .art-modal-fs{ display:none !important; } /* tylko X zostaje */

  /* wyłącz “zoom feeling” */
  .art-modal-zoom-wrap{
    overflow: visible;
    border: 0;
  }
  .art-modal-zoom-wrap img{
    transform: none !important;
    cursor: default !important;
  }
}