/* ===== STS Video Gallery – Red/Black theme (final clean) ===== */

/* Wrapper */
.stsvg-wrap {
  --gap:16px;
  background:#000;
  padding:20px;
  border-radius:12px;
}

/* Grid */
.sts-grid { display:grid; gap:var(--gap) }
.sts-grid.cols-2 { grid-template-columns:repeat(2,1fr) }
.sts-grid.cols-3 { grid-template-columns:repeat(3,1fr) }
.sts-grid.cols-4 { grid-template-columns:repeat(4,1fr) }
@media(max-width:900px){ .sts-grid{ grid-template-columns:repeat(2,1fr) } }
@media(max-width:600px){ .sts-grid{ grid-template-columns:1fr } }

/* Cards */
.sts-card {
  background:#111;
  border:1px solid #900;
  border-radius:12px;
  overflow:hidden;
  box-shadow:0 2px 6px rgba(255,0,0,.25);
  color:#eee;
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.sts-card:hover {
  transform:scale(1.015);
  border-color:#f00;
  box-shadow:0 6px 18px rgba(255,0,0,.25);
}

/* Thumbnail */
.sts-thumb { position:relative; display:block; aspect-ratio:16/9; background:#000 }
.sts-thumb img { width:100%; height:100%; object-fit:cover; display:block }

/* Play badge */
.sts-play {
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:rgba(0,0,0,.6);
  border-radius:50%;
  padding:18px;
  font-size:22px;
  color:#f00;
  line-height:1;
  opacity:0;
  transition:opacity .25s ease;
}
.sts-thumb:hover .sts-play { opacity:1 }
/* Para ocultarlo del todo, descomentá: */
/* .sts-play { display:none !important; } */

/* Titles & excerpt */
.sts-title { font-size:16px; margin:10px 12px 6px; color:#f00; font-weight:700 }
.sts-desc { font-size:14px; margin:0 12px 12px; color:#ccc }

/* Pagination */
.sts-pagination ul { display:flex; gap:6px; list-style:none; padding:12px 0; margin:0 }
.sts-pagination a, .sts-pagination span {
  display:block;
  padding:6px 10px;
  border:1px solid #900;
  border-radius:8px;
  text-decoration:none;
  color:#f00;
  background:#111;
}
.sts-pagination .current { background:#f00; color:#fff; border-color:#f00 }

/* Modal */
.sts-modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.9);
  display:flex; align-items:center; justify-content:center;
  padding:20px; z-index:9999;
}
.sts-modal[hidden] { display:none }
.sts-iframe-wrap {
  width:min(100%,960px); aspect-ratio:16/9;
  background:#000; border-radius:12px; overflow:hidden; position:relative;
}
#sts-player { width:100%; height:100%; border:0 }
.sts-close {
  position:absolute; top:12px; right:12px;
  background:#f00; color:#fff; border:0; border-radius:999px;
  width:36px; height:36px; font-size:20px; cursor:pointer;
}
.sts-close:focus-visible { outline:2px solid #fff; outline-offset:2px }

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  .sts-card, .sts-play { transition:none }
}

/* ===== Toolbar compacta ===== */
.sts-toolbar-compact {
  display:flex; align-items:center; gap:12px;
  margin:12px 0 18px; position:relative;
}
.sts-toolbar-compact::after {
  content:""; position:absolute; left:0; right:0; bottom:-10px; height:1px;
  background:linear-gradient(90deg, rgba(255,0,0,.25), rgba(255,0,0,.05), rgba(255,0,0,.25));
}

/* Buscador */
.sts-search-wrap { display:flex; flex:1 }
.sts-search-input {
  flex:1;
  padding:12px 14px;
  border:2px solid #f00;
  border-radius:8px 0 0 8px;
  background:#000;
  color:#fff !important;           /* texto blanco */
  font-size:16px;
}
.sts-search-input::placeholder {
  color:#fff !important;
  opacity:.6 !important;
}
.sts-search-input:focus-visible { outline:none; border-color:#c00 }

.sts-search-btn {
  padding:12px 16px;
  background:#f00; color:#fff;
  border:2px solid #f00; border-left:0;
  border-radius:0 8px 8px 0;
  font-weight:700; font-size:14px; cursor:pointer;
  transition:background .2s, border-color .2s;
}
.sts-search-btn:hover { background:#c00; border-color:#c00 }
.sts-search-btn:focus-visible { outline:2px solid #fff; outline-offset:2px }

/* Controles mini */
.sts-actions { display:flex; align-items:center; gap:10px }
.sts-filter.sm {
  background:transparent; color:#fff; border:none;
  font-size:13px; padding:4px 2px; appearance:none;
  border-bottom:1px solid rgba(255,0,0,.4);
}
.sts-filter.sm:focus-visible { outline:none; border-bottom-color:#f00 }

/* Reset link */
.sts-reset {
  display:inline-block; padding:6px 8px;
  border:1px solid #900; border-radius:8px;
  color:#f00; background:#111; text-decoration:none;
  font-size:12px; height:34px; line-height:20px;
}
.sts-reset:hover { color:#fff }

/* Responsive */
@media (max-width:900px) {
  .sts-toolbar-compact { flex-wrap:wrap; gap:10px }
  .sts-search-wrap { flex:1 1 100% }
}
@media (max-width:520px) {
  .sts-actions { gap:6px }
  .sts-filter.sm, .sts-reset { font-size:11px; height:32px; padding:6px 8px }
}

/* Igualar altura del buscador y el botón */
.sts-search-input,
.sts-search-btn {
  height: 44px;                /* misma altura exacta */
  box-sizing: border-box;      /* que padding y border cuenten igual */
  display: inline-flex;
  align-items: center;         /* centra verticalmente el texto */
}

.sts-search-input {
  border: 2px solid #f00;
  border-radius: 8px 0 0 8px;
  background:#000;
  color:#fff !important;
  font-size:16px;
}

.sts-search-btn {
  border: 2px solid #f00;
  border-left: 0;
  border-radius: 0 8px 8px 0;
  background:#f00;
  color:#fff;
  font-weight:700;
  font-size:14px;
  cursor:pointer;
}

/* Reemplazar la X del input[type=search] por una roja propia */
#stsSearch::-webkit-search-cancel-button{
  -webkit-appearance: none;
  height: 18px;
  width: 18px;
  cursor: pointer;
  background: url("data:image/svg+xml;utf8,\
  <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'>\
    <circle cx='12' cy='12' r='11' fill='black' stroke='%23ff0000' stroke-width='2'/>\
    <path d='M8 8 L16 16 M16 8 L8 16' stroke='%23ff0000' stroke-width='2' stroke-linecap='round'/>\
  </svg>") no-repeat center center;
}

/* Etiqueta para identificar los controles de orden */
.sts-order-label{
  color:#aaa;
  font-size:12px;
  padding:4px 6px;
  border:1px solid rgba(255,0,0,.25);
  border-radius:6px;
  background:#0b0b0b;
  margin-right:6px;
}

/* ===== Intro de galerías (Jugadores, Torneos, Programas) ===== */
.sts-intro {
  background: #111;              /* fondo negro */
  color: #eee;                   /* texto gris claro */
  border: 1px solid #900;        /* borde rojo oscuro */
  border-radius: 12px;
  padding: 20px 24px;
  margin: 20px 0 30px;
  box-shadow: 0 4px 12px rgba(255,0,0,0.2);
}

.sts-intro h2 {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: 800;
  color: #f00;                   /* título rojo */
}

.sts-intro p {
  margin: 6px 0;
  font-size: 15px;
  line-height: 1.6;
  color: #ccc;                   /* gris más suave */
}

.sts-intro .tips {
  margin-top: 10px;
  font-size: 14px;
  font-style: italic;
  color: #ff6666;                /* tips destacados */
}