/* Blog "El tablón" - página de entrada + ficha reutilizable. Reutiliza tokens/base/variant-comunidad (skin B). */

/* Nota: --kids (color provisional del principal Infantil) vive ahora en tokens.css. */

/* --- Hero --- */
.blog-hero { background: var(--bg); padding-top: var(--space-5); padding-bottom: var(--space-4); }
.blog-hero h1.display { font-size: clamp(2.4rem, 1.5rem + 4vw, 4rem); line-height: 0.95; margin-top: var(--space-2); }
.blog-hero__lead { font-size: var(--fs-lg); color: var(--ink-soft); max-width: 58ch; margin-top: var(--space-3); }

/* --- Ficha base (.post): pieza reutilizable en home y radios --- */
.post { display: flex; flex-direction: column; border: var(--rule) solid var(--ink); background: #fff; transition: transform .12s ease, box-shadow .12s ease; }
.post:hover { transform: translate(-4px,-4px); box-shadow: var(--shadow-hard); }
.post[hidden] { display: none; }

.post__thumb { position: relative; display: flex; align-items: center; justify-content: center; min-height: 172px; border: 0; border-bottom: var(--rule) solid var(--ink); }
.post__body { display: flex; flex-direction: column; flex: 1; gap: 0.55rem; padding: var(--space-3); }
.post__foot { margin-top: auto; padding-top: var(--space-3); display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.post__date { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.08em; color: var(--gray-700); }
.post .post__title { font-size: clamp(1.7rem, 1.35rem + 1.7vw, 2.2rem); line-height: 1.06; text-wrap: balance; overflow-wrap: break-word; margin-bottom: var(--space-1); }
.post__title a { display: inline; background-image: linear-gradient(var(--accent), var(--accent)); background-size: 0% 3px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .18s ease; }
.post:hover .post__title a, .post__title a:hover { background-size: 100% 3px; }
.post__excerpt { color: var(--ink-soft); font-size: var(--fs-base); }
.post__more { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.92rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--accent-ink); box-shadow: inset 0 -3px 0 var(--accent); white-space: nowrap; }
.post__more::after { content: "→"; font-size: 1.1em; line-height: 1; transition: transform .15s ease; }
.post:hover .post__more::after, .post__more:hover::after { transform: translateX(4px); }
.post__more:hover { background: var(--accent); color: #fff; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .post__more::after { transition: none; } }

/* --- Etiquetas sobre la foto: principales (color) primero + secundarias (uniforme) después --- */
.post__tags { position: absolute; left: var(--space-2); bottom: var(--space-2); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.4rem; }
.ptag { font-family: var(--font-mono); font-size: 0.76rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.42em 0.72em; border: 2px solid var(--ink); display: inline-flex; align-items: center; box-shadow: var(--shadow-hard-sm); }
/* Principales: relleno de color (Torneos, Academia, Club) */
.ptag--torneos { background: var(--spark-ink); color: #fff; }
.ptag--academia { background: var(--green-dark); color: #fff; }
.ptag--club { background: var(--ink); color: #fff; }
.ptag--infantil { background: var(--kids); color: #fff; }
/* Secundarias (pilares de aprendizaje): diseño uniforme para todas */
.ptag--sec { background: #fff; color: var(--ink); }
.post--feature .post__tags { left: var(--space-3); bottom: var(--space-3); }
.post--feature .ptag { font-size: 0.86rem; padding: 0.5em 0.82em; }

/* Imagen destacada real: llena el thumb en formato apaisado consistente (recorta con cover). */
.post__thumb img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.post--feature .post__thumb img { aspect-ratio: 16 / 10; }

/* Tarjeta SIN imagen destacada (.post--noimg): no hay thumb; los tags van dentro del cuerpo,
   en flujo normal, encima del título. Al asignar una imagen destacada, la tarjeta vuelve sola
   a la versión con foto (lo decide has_post_thumbnail en inc/blog.php). */
.post__tags--inline { position: static; align-items: flex-start; margin-bottom: var(--space-2); }
.post--noimg .post__body { padding-top: var(--space-3); }
.post--feature.post--noimg { display: block; } /* sin foto, el destacado no usa la rejilla 2-col */

/* --- Destacada (.post--feature): la misma ficha, en horizontal y a mayor escala --- */
.blog-feature { padding-top: var(--space-4); padding-bottom: var(--space-3); }
.post--feature { border-width: var(--rule-thick); }
.post--feature .post__thumb { border-bottom: var(--rule) solid var(--ink); min-height: 240px; }
.post--feature .post__body { padding: var(--space-4); gap: 0.7rem; }
.post--feature .post__title { font-size: var(--fs-h2); margin-bottom: var(--space-2); }
.post--feature .post__excerpt { font-size: var(--fs-lg); max-width: 60ch; }
.post--feature .post__more { font-size: 1.02rem; }

/* --- Filtros (mismo patrón que Eventos) --- */
.blog-list { padding-top: var(--space-2); }
.filters { display: flex; flex-direction: column; gap: var(--space-3); padding-block: 0 var(--space-4); }

/* Botón "Filtrar" (lo inyecta theme.js): en MÓVIL colapsa los filtros tras un botón para no
   comerse ~324px de scroll; en ESCRITORIO los filtros se ven siempre y el botón se oculta. */
.filters-toggle { display: none; }
@media (max-width: 759px) {
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 0.55em;
    min-height: 44px; margin-block: var(--space-2) var(--space-3);
    font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700;
    letter-spacing: 0.06em; text-transform: uppercase;
    padding: 0.5em 1.1em; border: var(--rule) solid var(--ink);
    background: #fff; color: var(--ink); cursor: pointer;
    transition: background .12s, color .12s;
  }
  .filters-toggle__chev { font-size: 0.9em; transition: transform .18s ease; }
  .filters-toggle[aria-expanded="true"] .filters-toggle__chev { transform: rotate(180deg); }
  .filters-toggle.has-active { background: var(--ink); color: #fff; } /* hay filtro aplicado */
  .filters.is-collapsed { display: none; }
  .filters { padding-block: 0 var(--space-3); }
}
@media (prefers-reduced-motion: reduce) { .filters-toggle__chev { transition: none; } }
.filters__row { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.filters__label { flex: none; font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gray-700); margin-right: var(--space-1); min-width: 4.2em; }
.filter { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.5em 1.1em; border: var(--rule) solid var(--ink); background: #fff; color: var(--ink); cursor: pointer; transition: background .12s, color .12s; }
.filter:hover { background: var(--gray-100); }
/* Filtro activo = color del propio tag (principales) */
.filter.on { color: #fff; background: var(--ink); }
.filter[data-cat="torneos"].on { background: var(--spark-ink); }
.filter[data-cat="academia"].on { background: var(--green-dark); }
.filter[data-cat="club"].on { background: var(--ink); }
.filter[data-cat="infantil"].on { background: var(--kids); }
/* Secundarios: borde y texto más tenues + color activo distinto (neutro), para que se lean como secundarios */
.filter--sec { border-color: var(--gray-300); color: var(--gray-700); }
.filter--sec:hover { background: var(--gray-100); }
.filter--sec.on { background: var(--gray-700); color: #fff; border-color: var(--ink); }

/* --- Rejilla --- */
.postgrid { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
.post-empty { border: var(--rule) solid var(--ink); background: #fff; padding: var(--space-4); font-size: var(--fs-base); color: var(--ink-soft); }
.post-empty[hidden] { display: none; }

.blog-pager { grid-column: 1 / -1; margin-block: var(--space-2) var(--space-3); display: flex; justify-content: center; }

/* --- CTA newsletter integrado en la rejilla (banda a lo ancho, cierre del listado) --- */
.news-tile { grid-column: 1 / -1; background: var(--green-dark); color: #fff; border: var(--rule-thick) solid var(--ink); padding: var(--space-4); display: grid; gap: var(--space-3); align-items: center; }
.news-tile h2 { color: #fff; font-size: var(--fs-h2); line-height: 1.04; }
.news-tile__lead { color: #fff; font-size: var(--fs-lg); max-width: 46ch; margin-top: var(--space-2); }
.news-tile__text { display: flex; flex-direction: column; }
.news-form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.news-form input { flex: 1 1 13rem; min-height: 52px; padding: 0.85em 1em; border: var(--rule) solid var(--ink); font-family: var(--font-body); font-size: var(--fs-base); background: #fff; color: var(--ink); }
.news-tile .btn--spark { background: var(--spark-ink); color: #fff; border-color: var(--ink); white-space: nowrap; }
/* NOTA: el CTA inline (.news-inline) se movió a snippets/cta-newsletter-inline.html para reutilizarlo en otras páginas. */

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* --- Breakpoints --- */
@media (min-width: 620px) {
  .postgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 760px) {
  .post--feature { display: grid; grid-template-columns: 1.05fr 1fr; }
  .post--feature .post__thumb { border-bottom: 0; border-right: var(--rule) solid var(--ink); min-height: 100%; }
  .post--feature .post__body { justify-content: flex-start; }
}
@media (min-width: 760px) {
  .news-tile { grid-template-columns: 1.25fr 0.9fr; gap: var(--space-5); padding: var(--space-5); }
  /* Formulario apilado SOLO en la banda de cierre: llena la altura del título+texto */
  .news-tile .news-form { flex-direction: column; align-items: stretch; }
  .news-tile .news-form input { flex: none; }
  .news-tile .btn--spark { min-height: 52px; justify-content: center; }
}