/* ════════════════════════════════════════════════════════════════════════
   18-design-work.css — VOALA reference: archivy + detail

   Bez návrhu ve Figmě — mřížka dlaždic je 1:1 sekce „Naše práce"
   (11-works.css), tenhle soubor doplňuje jen to, co je navíc:
   - chips přepínač kategorií (markup .vo-tag z 17-blog.css)
   - galerie v detailu reference (klasická WP [gallery])
   Kostru stránek dodává 15-content.css, dlaždice 11-works.css.
   ════════════════════════════════════════════════════════════════════════ */

/* ── Přepínač kategorií (chips pod hlavičkou) ────────────────────────── */
.vo-term-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: clamp(20px, 2.6vw, 30px);
}
.vo-term-chips .vo-tag--active,
.vo-term-chips a.vo-tag--active {
  background: var(--red-voala);
  color: var(--white-voala);
}

/* ── Galerie v detailu reference ─────────────────────────────────────────
   Klasická WP galerie (dl.gallery-item). Mřížka podle gallery-columns-N,
   obrázky přes celou buňku, radius 5 + stín jako dlaždice.
   ──────────────────────────────────────────────────────────────────────── */
.vo-content .gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin: 1.5em 0;
}
.vo-content .gallery-columns-1 { grid-template-columns: 1fr; }
.vo-content .gallery-columns-3 { grid-template-columns: repeat(3, 1fr); }
.vo-content .gallery-columns-4 { grid-template-columns: repeat(4, 1fr); }

.vo-content .gallery .gallery-item {
  margin: 0;
  padding: 0;
  width: 100% !important;   /* WP dává inline width podle počtu sloupců */
  float: none !important;
}
.vo-content .gallery .gallery-icon { line-height: 0; }
.vo-content .gallery .gallery-icon a { display: block; line-height: 0; }
.vo-content .gallery img {
  width: 100%;
  height: auto;
  margin: 0;
  border: 0 !important;     /* WP kreslí 2px šedý rámeček */
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-map);
}
.vo-content .gallery .gallery-caption {
  margin: .5em 0 0;
  font-size: var(--fs-small);
  color: var(--muted);
  text-align: center;
}
/* WP vkládá mezi řady <br style="clear:both"> — v gridu jen překáží */
.vo-content .gallery br { display: none; }

/* Blokové galerie (kdyby klient přešel na Gutenberg) */
.vo-content .wp-block-gallery { margin: 1.5em 0; }
.vo-content .wp-block-gallery img { border-radius: var(--radius-sm); }

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .vo-content .gallery-columns-3,
  .vo-content .gallery-columns-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .vo-content .gallery,
  .vo-content .gallery-columns-3,
  .vo-content .gallery-columns-4 { grid-template-columns: 1fr; }
}

/* ── Hlavička archivu jen s přepínačem kategorií ─────────────────────────
   Klient si v e-mailu z 2. 9. 2026 nepřál nad výpisem nadpis „Reference".
   Zůstávají jen chips, takže hlavička nemá nad čím držet odstup a mezera
   pod ní je menší než rytmus nadpis → obsah.
   ──────────────────────────────────────────────────────────────────────── */
.vo-archive__head--chips-only .vo-term-chips { margin-top: 0; }
.vo-archive__head--chips-only + * { margin-top: clamp(28px, calc(19.5px + 2.19vw), 51px); }

/* ── Donačítání dalších dlaždic ──────────────────────────────────────────
   Blok pod mřížkou (voala_works_infinite): sám o sobě jen kotva pro
   assets/js/vo-works-infinite.js, se zapnutým JS ukazuje jen stav
   načítání, bez JS klasický odkaz na další stránku.
   ──────────────────────────────────────────────────────────────────────── */
.vo-works-more {
  margin-top: clamp(28px, calc(19.5px + 2.19vw), 51px);
  min-height: 24px;
  text-align: center;
  font-family: var(--font-base);
}
.vo-works-more__fallback { margin: 22px 0 0; }
.vo-works-more__status {
  margin: 0;
  font-size: var(--fs-small);
  color: var(--muted);
}

/* Tři tečky, dokud se načítá */
.vo-works-more.is-loading::before {
  content: '';
  display: block;
  width: 26px;
  height: 26px;
  margin: 0 auto 10px;
  border: 2px solid var(--line);
  border-top-color: var(--red-voala);
  border-radius: 50%;
  animation: vo-works-spin .8s linear infinite;
}
@keyframes vo-works-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .vo-works-more.is-loading::before { animation-duration: 2.4s; }
}