/* Firefly blog — responsive photo gallery + lightbox
   Self-contained, no dependencies. Works on light or dark blog themes. */

/* Self-hosted Figtree (OFL, see assets/fonts/OFL.txt) — variable, full Latin incl. Slovak */
@font-face{
  font-family:"Figtree";
  src:url("fonts/Figtree-var.woff2") format("woff2");
  font-weight:300 900;
  font-style:normal;
  font-display:swap;
}

:root{
  --ff-accent:#f5c518;
  --ff-radius:10px;
  --ff-gap:1.6rem;
}

/* ---------- language switcher ---------- */
nav.ff-langs{
  display:flex;
  justify-content:flex-end;
  gap:.25rem;
  max-width:1024px;
  margin:0 auto 1rem;
  font-family:"Figtree",system-ui,'Segoe UI',sans-serif;
  font-size:.82rem;
}
nav.ff-langs a, nav.ff-langs span{
  padding:.2rem .55rem;
  border-radius:6px;
  text-decoration:none;
  color:inherit;
}
nav.ff-langs a{ opacity:.55; }
nav.ff-langs a:hover{ opacity:1; background:rgba(128,128,128,.14); }
nav.ff-langs .active{ font-weight:700; background:rgba(245,197,24,.20); }

/* ---------- inline figure ---------- */
figure.ff-photo{
  margin:2rem auto 3.2rem;
  max-width:1024px;
  text-align:center;
}
figure.ff-photo .ff-thumb-wrap{
  position:relative;
  display:inline-block;
  cursor:zoom-in;
  border-radius:var(--ff-radius);
  overflow:hidden;
  line-height:0;
  box-shadow:0 6px 24px rgba(0,0,0,.28);
}
figure.ff-photo img.ff-thumb{
  display:block;
  width:100%;
  height:auto;
  transition:transform .35s ease, filter .35s ease;
}
figure.ff-photo .ff-thumb-wrap:hover img.ff-thumb{ transform:scale(1.02); filter:brightness(1.06); }
figure.ff-photo .ff-zoom-hint{
  position:absolute; right:.6rem; bottom:.6rem;
  display:inline-flex; align-items:center; gap:.3rem;
  padding:.28rem .5rem; font-size:.78rem; line-height:1;
  color:#fff; background:rgba(0,0,0,.5); border-radius:6px;
  backdrop-filter:blur(2px); opacity:0; transition:opacity .25s ease;
  pointer-events:none;
}
figure.ff-photo .ff-thumb-wrap:hover .ff-zoom-hint{ opacity:1; }
figure.ff-photo figcaption{
  margin-top:.7rem; font-size:.92rem; line-height:1.45;
  color:#aab; font-style:normal;
}

/* ---------- hero (cover) ---------- */
figure.ff-photo.ff-hero{
  max-width:1120px;
  margin:0.4rem auto 2.4rem;
}
figure.ff-photo.ff-hero .ff-thumb-wrap{
  border-radius:12px;
  box-shadow:0 12px 38px rgba(0,0,0,.38);
}

/* ---------- hero carousel ---------- */
.ff-hero-carousel{ position:relative; max-width:1120px; margin:0.4rem auto 2.6rem; }
.ff-hero-track{
  position:relative; aspect-ratio:3 / 2; border-radius:12px; overflow:hidden;
  background:#0c0d11; box-shadow:0 12px 38px rgba(0,0,0,.38);
}
.ff-slide{ position:absolute; inset:0; opacity:0; cursor:zoom-in; transition:opacity .8s ease; }
.ff-slide.active{ opacity:1; }
.ff-slide img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s ease, filter .35s ease; }
.ff-hero-carousel:hover .ff-slide.active img{ transform:scale(1.02); filter:brightness(1.06); }
.ff-hero-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:44px; height:44px; border-radius:50%; border:none; cursor:pointer;
  background:rgba(0,0,0,.42); color:#fff; font-size:1.5rem; line-height:1;
  opacity:0; transition:opacity .25s ease, background .2s ease;
}
.ff-hero-carousel:hover .ff-hero-nav, .ff-hero-nav:focus-visible{ opacity:1; }
.ff-hero-nav:hover{ background:rgba(0,0,0,.62); }
.ff-hero-prev{ left:.6rem; }
.ff-hero-next{ right:.6rem; }
.ff-hero-dots{
  position:absolute; left:0; right:0; bottom:.7rem; z-index:3;
  display:flex; justify-content:center; gap:.45rem;
}
.ff-hero-dot{
  width:9px; height:9px; padding:0; border:none; border-radius:50%; cursor:pointer;
  background:rgba(255,255,255,.5); box-shadow:0 0 3px rgba(0,0,0,.55);
  transition:background .2s ease, transform .2s ease;
}
.ff-hero-dot[aria-current="true"]{ background:var(--ff-accent); transform:scale(1.3); }
@media (prefers-reduced-motion:reduce){ .ff-slide{ transition:none; } }

/* ---------- video gallery (click a poster to play in the lightbox) ---------- */
.ff-videos{
  max-width:1120px; margin:1.6rem auto 2.8rem;
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:1.5rem;
}
figure.ff-video{ margin:0; text-align:center; }
figure.ff-video .ff-video-thumb{
  position:relative; display:block; cursor:pointer;
  border-radius:12px; overflow:hidden; line-height:0;
  aspect-ratio:3 / 2; background:#0c0d11; box-shadow:0 8px 28px rgba(0,0,0,.34);
}
figure.ff-video img.ff-video-poster{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform .35s ease, filter .35s ease;
}
figure.ff-video .ff-video-thumb:hover img.ff-video-poster{ transform:scale(1.03); filter:brightness(1.08); }
figure.ff-video .ff-video-play{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:64px; height:64px; border-radius:50%;
  background:rgba(10,11,15,.5); border:2px solid rgba(255,255,255,.85);
  backdrop-filter:blur(2px); transition:background .2s ease, transform .2s ease, border-color .2s ease;
}
figure.ff-video .ff-video-play::after{
  content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%);
  border-style:solid; border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent #fff;
}
figure.ff-video .ff-video-thumb:hover .ff-video-play{
  background:rgba(245,197,24,.9); border-color:rgba(245,197,24,.9); transform:translate(-50%,-50%) scale(1.08);
}
figure.ff-video .ff-video-thumb:hover .ff-video-play::after{ border-left-color:#141414; }
figure.ff-video .ff-video-thumb:focus-visible{ outline:3px solid var(--ff-accent); outline-offset:3px; }
figure.ff-video figcaption{
  margin-top:.7rem; font-size:.92rem; line-height:1.45; color:#aab;
}

/* ---------- table of contents ---------- */
nav.ff-toc{
  max-width:1024px;
  margin:1.8rem auto;
  padding:.9rem 1.2rem;
  border:1px solid rgba(128,128,128,.28);
  border-radius:var(--ff-radius);
  background:rgba(128,128,128,.06);
}
nav.ff-toc .ff-toc-title{ margin:0 0 .5rem; font-weight:700; font-size:.95rem; }
nav.ff-toc ul{ margin:0; padding-left:1.2rem; }
nav.ff-toc li{ margin:.28rem 0; }
nav.ff-toc a{ text-decoration:none; }
nav.ff-toc a:hover{ text-decoration:underline; }

/* ---------- stats block ---------- */
.ff-stats{
  max-width:1024px; margin:.4rem auto 0; text-align:left;
  border:1px solid rgba(128,128,128,.28); border-radius:var(--ff-radius);
  background:rgba(128,128,128,.06); overflow:hidden;
}
.ff-stats>summary{
  cursor:pointer; padding:.7rem 1rem; font-weight:600; font-size:.92rem;
  list-style:none; user-select:none;
}
.ff-stats>summary::-webkit-details-marker{ display:none; }
.ff-stats>summary::before{ content:"▸ "; color:var(--ff-accent); }
.ff-stats[open]>summary::before{ content:"▾ "; }
.ff-stats .ff-stats-body{ padding:0 1rem 1rem; }
.ff-stats img.ff-chart{ display:block; width:100%; max-width:760px; height:auto; margin:.2rem auto .9rem; border-radius:8px; }
.ff-stats table{ width:100%; border-collapse:collapse; font-size:.9rem; }
.ff-stats table th, .ff-stats table td{
  text-align:left; padding:.35rem .5rem; border-bottom:1px solid rgba(128,128,128,.18);
}
.ff-stats table th{ width:42%; font-weight:600; color:#9aa; }

/* ---------- lightbox ---------- */
.ff-lightbox{
  position:fixed; inset:0; z-index:9999;
  display:none; align-items:center; justify-content:center;
  background:rgba(8,9,12,.94); backdrop-filter:blur(4px);
  opacity:0; transition:opacity .2s ease;
}
.ff-lightbox.ff-open{ display:flex; opacity:1; }
.ff-lightbox .ff-stage{
  position:relative; max-width:96vw; max-height:88vh;
  display:flex; align-items:center; justify-content:center;
}
.ff-lightbox img.ff-big{
  max-width:96vw; max-height:88vh; width:auto; height:auto;
  border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.6);
  background:#111;
}
.ff-lightbox video.ff-vid-big{
  max-width:96vw; max-height:88vh; width:auto; height:auto;
  border-radius:6px; box-shadow:0 10px 40px rgba(0,0,0,.6);
  background:#000;
}
.ff-lightbox .ff-spinner{
  position:absolute; width:44px; height:44px; border-radius:50%;
  border:4px solid rgba(255,255,255,.2); border-top-color:var(--ff-accent);
  animation:ff-spin 1s linear infinite; display:none;
}
.ff-lightbox.ff-loading .ff-spinner{ display:block; }
@keyframes ff-spin{ to{ transform:rotate(360deg); } }

.ff-lightbox .ff-caption{
  position:absolute; left:0; right:0; bottom:0;
  padding:1rem 1.2rem .9rem; color:#eee; font-size:.95rem; line-height:1.45;
  text-align:center; background:linear-gradient(transparent,rgba(0,0,0,.7));
  border-bottom-left-radius:6px; border-bottom-right-radius:6px;
}

/* toolbar */
.ff-lightbox .ff-toolbar{
  position:fixed; top:0; right:0; left:0;
  display:flex; align-items:center; gap:.6rem;
  padding:.7rem 1rem; color:#ddd; font-size:.85rem;
  background:linear-gradient(rgba(0,0,0,.55),transparent);
}
.ff-lightbox .ff-toolbar .ff-res{
  padding:.25rem .55rem; border-radius:999px; background:rgba(255,255,255,.12);
  font-variant-numeric:tabular-nums;
}
.ff-lightbox .ff-toolbar .ff-spacer{ flex:1; }
.ff-lightbox button{
  font:inherit; color:#fff; background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.18); border-radius:8px;
  padding:.35rem .7rem; cursor:pointer; transition:background .15s ease;
  display:inline-flex; align-items:center; gap:.35rem;
}
.ff-lightbox button:hover{ background:rgba(255,255,255,.26); }
.ff-lightbox button:disabled{ opacity:.4; cursor:default; }
.ff-lightbox .ff-upgrade{ background:rgba(245,197,24,.22); border-color:rgba(245,197,24,.5); }
.ff-lightbox .ff-upgrade:hover{ background:rgba(245,197,24,.38); }

/* nav arrows */
.ff-lightbox .ff-nav{
  position:fixed; top:50%; transform:translateY(-50%);
  width:52px; height:52px; border-radius:50%; font-size:1.4rem; justify-content:center;
}
.ff-lightbox .ff-prev{ left:1rem; }
.ff-lightbox .ff-next{ right:1rem; }
.ff-lightbox .ff-close{ font-size:1.1rem; }

@media (max-width:640px){
  .ff-lightbox .ff-nav{ width:42px; height:42px; }
  .ff-lightbox .ff-toolbar{ font-size:.78rem; gap:.4rem; }
  .ff-lightbox .ff-toolbar .ff-label-full{ display:none; }
}