/* Catálogo público de sohbats en video.
   CSS propio (no Tailwind) para que la página no dependa de que se haya
   corrido `npm run build` en el server — el deploy no lo hace. */

.vc {
  --verde: #096d61;
  --verde-claro: #1aa797;
  --dorado: #d1b574;
  --dorado-tx: #8a6f2e;
  --crema: #faf7ee;
  --tinta: #342127;
  --linea: #e4dcc9;
  --muted: #8a8278;
}
.vc * { box-sizing: border-box; }

.vc-stats { font-size: .95rem; color: var(--muted); margin: 0 0 18px; }
.vc-stats b { color: var(--verde); font-variant-numeric: tabular-nums; }

/* Buscador */
.vc-search {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch;
  background: #fff; border: 1px solid var(--linea); border-radius: 10px; padding: 8px;
}
.vc-search { flex-wrap: nowrap; }
.vc-search input {
  flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent;
  font-size: 16px; font-family: inherit; color: var(--tinta); padding: 10px 8px;
}
.vc-search button.go { flex: none; white-space: nowrap; }
.vc-search input::placeholder { color: #b3a890; }
.vc-search button.go {
  border: none; border-radius: 8px; background: var(--verde); color: #fff;
  font-weight: 600; font-size: .95rem; padding: 10px 22px; cursor: pointer; font-family: inherit;
}
.vc-search button.go:hover { background: var(--verde-claro); }
@media (max-width: 420px) { .vc-search button.go { padding: 10px 16px; } }

/* Filtro por año: plegado, para que la pantalla arranque sin nada que decidir */
.vc-filter { margin: 14px 0 0; }
.vc-filter summary {
  display: inline-block; cursor: pointer; font-size: .95rem; color: var(--verde);
  padding: 10px 0; list-style: none;
}
.vc-filter summary::-webkit-details-marker { display: none; }
.vc-filter summary::before { content: '▸ '; }
.vc-filter[open] summary::before { content: '▾ '; }

.vc-years { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; }
.vc-year {
  border: 1px solid var(--linea); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: .9rem; color: #5c5148; cursor: pointer;
  font-family: inherit; font-variant-numeric: tabular-nums;
}
.vc-year[aria-pressed="true"] { background: var(--dorado); border-color: var(--dorado); color: var(--tinta); font-weight: 600; }
.vc-year .n { color: var(--muted); font-size: .72rem; margin-left: 4px; }
.vc-year[aria-pressed="true"] .n { color: rgba(52,33,39,.6); }

/* Grilla */
.vc-count { font-size: .9rem; color: var(--muted); margin: 22px 0 12px; }
.vc-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 560px) { .vc-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .vc-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1200px) { .vc-grid { grid-template-columns: repeat(4, 1fr); } }

.vc-card {
  display: flex; flex-direction: column; background: #fff; border: 1px solid var(--linea);
  border-radius: 10px; overflow: hidden; color: var(--tinta);
  transition: box-shadow .15s ease, transform .15s ease;
}
.vc-card a { text-decoration: none; color: inherit; }
.vc-thumb { display: block; }
.vc-card:hover { box-shadow: 0 6px 18px rgba(52,33,39,.12); transform: translateY(-2px); }
.vc-thumb { position: relative; background: #231a1c; aspect-ratio: 16 / 9; }
.vc-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vc-dur {
  position: absolute; right: 6px; bottom: 6px; background: rgba(20,14,16,.85); color: #fff;
  font-size: .72rem; padding: 2px 6px; border-radius: 4px; font-variant-numeric: tabular-nums;
}
.vc-play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 2.2rem; opacity: .85; text-shadow: 0 2px 10px rgba(0,0,0,.5);
}
.vc-body { padding: 12px 14px 14px; display: flex; flex-direction: column; flex: 1; gap: 6px; }
.vc-title { font-size: 1.05rem; font-weight: 600; line-height: 1.4; margin: 0; }
.vc-title a:hover { color: var(--verde); }
.vc-meta { font-size: .85rem; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: auto; }
.vc-badges { display: flex; flex-wrap: wrap; gap: 5px; }
.vc-badge {
  font-size: .78rem; padding: 3px 10px; border-radius: 999px; border: 1px solid;
}
.vc-badge.lit { color: var(--verde); border-color: rgba(9,109,97,.4); background: rgba(9,109,97,.06); }
.vc-badge.sem { color: var(--dorado-tx); border-color: rgba(209,181,116,.8); background: rgba(209,181,116,.16); }
.vc-at {
  font-size: .9rem; line-height: 1.5; color: #5c5148;
  border-left: 2px solid var(--dorado); padding-left: 10px; margin: 2px 0 0;
}
.vc-at b { color: var(--verde); font-variant-numeric: tabular-nums; }
.vc-moments { display: flex; flex-wrap: wrap; gap: 4px; }
.vc-moment {
  font-size: .85rem; padding: 5px 10px; border: 1px solid var(--linea); border-radius: 4px;
  color: var(--verde); text-decoration: none; font-variant-numeric: tabular-nums; background: var(--crema);
}
.vc-moment:hover { background: var(--verde); border-color: var(--verde); color: #fff; }

.vc-more { text-align: center; margin: 26px 0 0; }
.vc-more button {
  border: 1px solid var(--verde); background: #fff; color: var(--verde); border-radius: 999px;
  padding: 10px 26px; font-size: .9rem; font-weight: 600; cursor: pointer; font-family: inherit;
}
.vc-more button:hover { background: var(--verde); color: #fff; }
.vc-empty { padding: 40px 12px; text-align: center; color: var(--muted); }
.vc-empty b { color: var(--tinta); }
.vc-loading { padding: 30px 12px; text-align: center; color: var(--muted); font-size: .9rem; }