/*
 * OrbitGallery styles.
 * All customizable values are exposed as CSS custom properties on .og-root,
 * so you can override them per-instance without touching this file:
 *
 *   <div id="gallery" style="--og-accent:#7c9cff;"></div>
 */

.og-root{
  --og-bg-2:#1a1d24;
  --og-accent:#d8b46a;
  --og-text:#f2ede1;
  --og-text-dim:#9a978d;
  --og-shadow: 0 10px 28px rgba(0,0,0,.55);
  --og-radius: 8px;

  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  width:100%;
}

.og-stage{
  position:relative;
  width:100%;
  max-width:100%;
  overflow:hidden;
}

.og-ring-item{
  position:absolute;
  top:0; left:0;
  width:1px; height:1px;
}

.og-thumb{
  position:absolute;
  top:50%; left:50%;
  box-sizing:content-box;                 /* passe-partout (border) dodaje się NA ZEWNĄTRZ kadru → obraz wypełnia dokładnie */
  border:0 solid var(--og-mat, #f6f3ec);  /* białe pole; grubość ustawia JS proporcjonalnie do rozmiaru */
  box-shadow:var(--og-shadow);
  background:var(--og-mat, #f6f3ec);
  cursor:pointer;
}

.og-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain; /* never crops — natural aspect ratio is preserved */
  box-sizing:border-box;
  border:1px solid var(--og-keyline, rgba(28,20,12,.5)); /* cienka linia (keyline) przy krawędzi zdjęcia */
}

.og-controls{
  display:flex;
  align-items:center;
  gap:14px;
}

.og-dots{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:center;
}

.og-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--og-text-dim);
  opacity:.35;
  transition:opacity .3s, background .3s, transform .3s;
}

.og-dot.on{
  background:var(--og-accent);
  opacity:1;
  transform:scale(1.35);
}

.og-btn{
  appearance:none;
  border:1px solid rgba(128,128,128,.3);
  background:rgba(128,128,128,.08);
  color:var(--og-text);
  border-radius:999px;
  padding:7px 16px;
  font:inherit;
  font-size:11px;
  letter-spacing:.14em;
  text-transform:uppercase;
  cursor:pointer;
  transition:border-color .25s, background .25s;
}

.og-btn:hover{
  border-color:var(--og-accent);
  background:color-mix(in srgb, var(--og-accent) 12%, transparent);
}