/* ============================================================
   Márti & Keve – közös alap (reset, alapok, lightbox, reveal)
   Minden layout erre épül; színt CSAK a paletta-változókból vesz.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--nav-offset, 80px);
  -webkit-text-size-adjust: 100%;
}

body {
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font-size: 1rem;
  line-height: 1.6;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul[role="list"], ol[role="list"] { list-style: none; }

::selection { background: rgba(var(--c-primary-rgb), .25); }

:focus-visible {
  outline: 2px solid var(--c-primary);
  outline-offset: 3px;
  border-radius: 2px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ── Scroll-reveal animáció ─────────────────────────────── */
[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .4s cubic-bezier(.22,.61,.36,1), transform .4s cubic-bezier(.22,.61,.36,1);
  will-change: opacity, transform;
}
[data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ── Lightbox (diavetítés) – a gallery.js szúrja be a DOM-ot ── */
.mklb {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(20, 14, 16, .92);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .21s ease, visibility .21s ease;
}
.mklb.is-open { opacity: 1; visibility: visible; }

.mklb-stage {
  position: relative;
  max-width: min(88vw, 1200px);
  max-height: 82vh;
  display: flex; flex-direction: column; align-items: center;
  touch-action: pan-y;
}
.mklb-img {
  max-width: 100%;
  max-height: 76vh;
  width: auto; height: auto;
  border-radius: 6px;
  box-shadow: 0 24px 80px rgba(0,0,0,.5);
  user-select: none;
  -webkit-user-drag: none;
  transition: opacity .17s ease, transform .17s ease;
}
.mklb.is-loading .mklb-img { opacity: .25; }
.mklb-cap {
  margin-top: 14px;
  color: rgba(255,255,255,.85);
  font-size: .9rem;
  letter-spacing: .04em;
  text-align: center;
}
.mklb-counter {
  position: absolute; top: 20px; left: 24px;
  color: rgba(255,255,255,.75);
  font-size: .85rem; letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}
.mklb-spinner {
  position: absolute; inset: 0; margin: auto;
  width: 42px; height: 42px;
  border: 3px solid rgba(255,255,255,.25);
  border-top-color: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: mklb-spin .5s linear infinite;
  pointer-events: none;
}
.mklb.is-loading .mklb-spinner { opacity: 1; }
@keyframes mklb-spin { to { transform: rotate(360deg); } }

.mklb-btn {
  position: absolute; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  color: #fff;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.22);
  transition: background .2s ease, transform .2s ease;
}
.mklb-btn:hover { background: rgba(var(--c-primary-rgb), .55); transform: scale(1.06); }
.mklb-btn svg { width: 22px; height: 22px; }
.mklb-close { top: 16px; right: 16px; }
.mklb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.mklb-next { right: 16px; top: 50%; transform: translateY(-50%); }
.mklb-prev:hover { transform: translateY(-50%) scale(1.06); }
.mklb-next:hover { transform: translateY(-50%) scale(1.06); }

@media (max-width: 640px) {
  .mklb-stage { max-width: 94vw; }
  .mklb-btn { width: 40px; height: 40px; }
  .mklb-prev { left: 8px; }
  .mklb-next { right: 8px; }
  .mklb-counter { top: 18px; left: 16px; }
}

body.mklb-lock { overflow: hidden; }