/* ════════════════════════════════════════════════════════════════════════
   11-works.css — VOALA výpis realizací („Naše práce")

   Zdroj: Figma VOALA_WEB_2025 → HOMEPAGE
   - desktop 13:644: 12 dlaždic 287 × 287, 4 sloupce, mezera 25,
     tělo stránky 1222 (15:1006 … 15:1017)
   - mobil 13:395: 10 dlaždic 170 × 170, 2 sloupce, mezera ~16,5
   - dlaždice: radius 5, stín 0 4px 4px -2px rgba(24,39,75,.08), fotka cover
   - tlačítko „Další realizace": červený pill, Inter 600 16, WHITE_VOALA

   Rozměry (optické):
                                 390        1440
   účaří nadpisu → mřížka         50        100   (řeší 10-section.css)
   konec mřížky → tlačítko        50         50
   konec tlačítka → další sekce   50        150   (řeší 10-section.css)

   Markup: template-parts/works.php → [vo_works]
   Sekce v Divi dostává CSS Class „vo-section vo-line-top vo-works-section".

   Hover design neřeší; dlaždice bez popisku nedává uživateli vědět, co je
   za ní, proto fotka ztmavne a najede přes ni název práce.
   ════════════════════════════════════════════════════════════════════════ */

.vo-works {
  --vo-works-gap:    clamp(16.5px, calc(13.34px + 0.81vw), 25px);
  --vo-works-btn-h:  clamp(32px, calc(42.97px - 0.762vw), 40px);
  --vo-works-btn-fs: clamp(16px, calc(18.67px - 0.19vw), 18px);
  --vo-works-gap-btn: 50px;

  font-family: var(--font-base);
}

/* ── Mřížka ──────────────────────────────────────────────────────────── */
.vo-works__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--vo-works-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.vo-works__grid > li { margin: 0; padding: 0; list-style: none; }
.vo-works__grid > li::before { content: none; }   /* Divi si do li kreslí odrážky */

/* ── Dlaždice ────────────────────────────────────────────────────────── */
.vo-works .vo-work {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--gray-voala);
  box-shadow: var(--shadow-map);
  text-decoration: none;
}

.vo-works .vo-work__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform var(--t-base);
}

/* ── Hover: ztmavení + název ─────────────────────────────────────────── */
.vo-works .vo-work__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(42, 49, 51, .55);
  opacity: 0;
  transition: opacity var(--t-base);
}
.vo-works .vo-work__title {
  font-size: clamp(14px, 1.2vw, 18px);
  font-weight: 600;
  line-height: 1.3;
  color: var(--white-voala);
  text-align: center;
  text-wrap: balance;
}
.vo-works .vo-work:hover .vo-work__overlay,
.vo-works .vo-work:focus-visible .vo-work__overlay { opacity: 1; }
.vo-works .vo-work:hover .vo-work__img { transform: scale(1.04); }
.vo-works .vo-work:focus-visible {
  outline: 2px solid var(--red-voala);
  outline-offset: 3px;
}

/* ── Tlačítko pod mřížkou ────────────────────────────────────────────────
   Ve Figmě je na desktopu červený pill 157 × 32, na mobilu červené outline
   tlačítko 159 × 40 s radiusem 5. Sjednoceno na pill jako zbytek webu,
   výška se mezi framy dopočítává.
   ──────────────────────────────────────────────────────────────────────── */
.vo-works__more {
  margin: var(--vo-works-gap-btn) 0 0;
  padding: 0;
  text-align: center;
}

.vo-works .vo-works__btn,
.vo-works a.vo-works__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--vo-works-btn-h);
  padding: 0 clamp(17.8px, calc(15.76px + 0.524vw), 23.3px) !important;
  border: 0 !important;
  border-radius: 30px !important;
  background: var(--red-voala) !important;
  color: var(--white-voala) !important;
  font-family: var(--font-base);
  font-size: var(--vo-works-btn-fs) !important;
  font-weight: 600 !important;
  line-height: 1.2 !important;
  text-decoration: none;
  transition: background var(--t-fast);
}
.vo-works .vo-works__btn:hover,
.vo-works a.vo-works__btn:hover { background: var(--red-voala-dark) !important; }
.vo-works .vo-works__btn:focus-visible {
  outline: 2px solid var(--black-voala);
  outline-offset: 3px;
}

/* ── Prázdný stav (jen pro přihlášeného editora) ─────────────────────── */
.vo-works__empty {
  margin: 0;
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .vo-works__grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 720px) {
  /* Mobilní frame: dva sloupce, dlaždice 170 × 170 */
  .vo-works__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  .vo-works .vo-work__img,
  .vo-works .vo-work__overlay { transition: none; }
  .vo-works .vo-work:hover .vo-work__img { transform: none; }
}