/* ================================================================
   MAQUETA DE BLOG — NZ Bikefitter
   Se carga despues de css/styles.css y solo agrega clases nuevas.
   No redefine ningun token ni clase existente del sitio.
   ================================================================ */

:root{
  --reading: 68ch;          /* ancho de columna de lectura */
  --post-radius: 0;         /* el sistema del sitio es de esquinas rectas */
}

/* ================= CABECERA DE SECCION ================= */
.blog-head{
  padding: calc(clamp(64px, 8vw, 120px) + 90px) 0 clamp(40px, 5vw, 72px);
  border-bottom: 1px solid var(--line);
}
.blog-head h1{
  font-size: clamp(44px, 7vw, 104px);
  margin-top: 22px;
}
.blog-head .lede{
  font-size: clamp(17px, 1.5vw, 21px);
  max-width: 46ch;
  margin-top: 26px;
}

/* Filtros por tema. Actuan como navegacion, no como control de formulario:
   en la version real cada uno lleva a su propia URL indexable. */
.blog-filters{
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: clamp(32px, 4vw, 52px);
}
.blog-filter{
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600;
  color: var(--grey);
  padding: 11px 20px;
  border: 1px solid var(--line-strong);
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.blog-filter:hover{ color: var(--off-white); border-color: var(--accent); }
.blog-filter[aria-current="true"]{
  background: var(--off-white); color: var(--black); border-color: var(--off-white);
}

/* ================= DESTACADO ================= */
.post-featured{
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  align-items: center;
  gap: 0;
  margin: clamp(48px, 6vw, 88px) 0 clamp(56px, 7vw, 100px);
}
.post-featured-media{
  position: relative;
  aspect-ratio: 16 / 11;
  overflow: hidden;
  background: var(--charcoal-2);
}
.post-featured-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s var(--ease);
}
.post-featured:hover .post-featured-media img{ transform: scale(1.04); }

/* La tarjeta invade la imagen para romper la reticula y señalar jerarquia
   sin recurrir a un tamaño de titulo aun mayor. */
.post-featured-body{
  position: relative; z-index: 2;
  background: var(--charcoal);
  border: 1px solid var(--line);
  padding: clamp(28px, 3.4vw, 52px);
  margin-left: clamp(-80px, -5vw, -32px);
  box-shadow: var(--shadow-md);
}
.post-featured-body h2{
  font-size: clamp(26px, 2.9vw, 42px);
  margin: 20px 0 18px;
}
.post-featured-body p{
  color: var(--grey); font-size: 16px; line-height: 1.65; max-width: 44ch;
}
.post-featured-body h2 a{ transition: color .3s var(--ease); }
.post-featured-body h2 a:hover{ color: var(--accent); }
.post-featured-body .btn-ghost{ display: inline-block; margin-top: 28px; }

/* Marca la seccion activa en el nav, que hoy no tiene estado propio porque
   la home es una sola pagina. */
.nav-links a[aria-current="page"]{ color: var(--accent); }

/* ================= REJILLA DE ARTICULOS ================= */
.post-grid{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: clamp(28px, 3vw, 44px);
  margin-bottom: clamp(64px, 8vw, 120px);
}

.post-card{
  display: flex; flex-direction: column;
  border-top: 1px solid var(--line-strong);
  padding-top: 22px;
  position: relative;
}
/* Linea de acento que crece al pasar el cursor: refuerza cual tarjeta esta
   activa sin mover el layout. */
.post-card::before{
  content: ''; position: absolute; top: -1px; left: 0; height: 1px; width: 0;
  background: var(--accent);
  transition: width .5s var(--ease);
}
.post-card:hover::before,
.post-card:focus-within::before{ width: 100%; }

.post-card-media{
  display: block;
  aspect-ratio: 3 / 2; overflow: hidden; background: var(--charcoal-2);
  margin-bottom: 22px;
}
.post-card-media img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .9s var(--ease), filter .9s var(--ease);
  filter: saturate(0.85);
}
.post-card:hover .post-card-media img{ transform: scale(1.05); filter: saturate(1); }

.post-card h3{
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.12;
  margin: 16px 0 14px;
  min-height: 2.24em;
  transition: color .3s var(--ease);
}
.post-card:hover h3{ color: var(--accent); }
.post-card p{
  color: var(--grey); font-size: 15px; line-height: 1.65;
  margin-bottom: 22px;
}
.post-card .post-meta:last-child{ margin-top: auto; }

/* ================= METADATOS ================= */
.post-meta{
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
  font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--grey-dim);
}
.post-meta > * + *::before{
  content: ''; display: inline-block;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--grey-dim);
  margin-right: 14px; vertical-align: middle;
}
.post-tag{
  color: var(--accent); font-weight: 600;
}

/* ================= PAGINACION ================= */
.blog-pagination{
  display: flex; justify-content: center; align-items: center; gap: 8px;
  margin-top: clamp(56px, 7vw, 96px);
  padding-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line);
}
.page-link{
  min-width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px; letter-spacing: 0.08em; color: var(--grey);
  border: 1px solid transparent;
  transition: color .3s var(--ease), border-color .3s var(--ease);
}
.page-link:hover{ color: var(--off-white); border-color: var(--line-strong); }
.page-link[aria-current="page"]{ color: var(--off-white); border-color: var(--accent); }

/* ================= ESTADO VACIO ================= */
.blog-empty{
  text-align: center;
  padding: clamp(64px, 9vw, 128px) 0;
  border: 1px dashed var(--line-strong);
}
.blog-empty h3{ font-size: clamp(22px, 2.2vw, 30px); margin: 22px 0 16px; }
.blog-empty p{ color: var(--grey); max-width: 42ch; margin: 0 auto; line-height: 1.7; }
.blog-empty svg{ width: 40px; height: 40px; margin: 0 auto; color: var(--accent-dim); }

/* ================================================================
   PAGINA DE ARTICULO
   ================================================================ */

/* Barra de progreso de lectura. Fija bajo el nav. */
.read-progress{
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  z-index: 101; background: transparent; pointer-events: none;
}
.read-progress span{
  display: block; height: 100%; width: 0;
  background: var(--accent);
  transform-origin: left;
}

.article-head{
  padding: calc(clamp(56px, 7vw, 100px) + 90px) 0 clamp(32px, 4vw, 52px);
}
/* Mismo ancho que la columna de lectura, para que el titulo y el cuerpo
   compartan margen izquierdo en vez de quedar centrados por separado. */
.article-head-inner{
  width: min(100%, var(--reading)); margin: 0 auto;
}
.article-head h1{
  font-size: clamp(32px, 4vw, 58px);
  margin: 22px 0 28px;
}
.article-head .lede{
  font-size: clamp(18px, 1.7vw, 23px);
  max-width: 54ch;
}
.article-breadcrumb{
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey-dim);
  margin-bottom: 26px;
}
.article-breadcrumb a{ transition: color .3s var(--ease); }
.article-breadcrumb a:hover{ color: var(--accent); }
.article-breadcrumb span{ margin: 0 10px; }

.article-cover{
  margin: clamp(32px, 4vw, 56px) 0 clamp(48px, 6vw, 80px);
}
.article-cover img{
  width: 100%; aspect-ratio: 21 / 9; object-fit: cover;
  background: var(--charcoal-2);
}
.article-cover figcaption{
  margin-top: 14px;
  font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--grey-dim);
}

/* Reticula de lectura: columna central acotada y un riel lateral fijo con
   los datos del articulo, que en pantallas chicas se convierte en una fila. */
.article-layout{
  display: grid;
  grid-template-columns: minmax(0, 210px) minmax(0, var(--reading)) minmax(0, 210px);
  justify-content: center;
  gap: clamp(28px, 4vw, 72px);
  padding-bottom: clamp(64px, 8vw, 120px);
}
.article-rail{
  align-self: start;
  position: sticky; top: 130px;
  display: flex; flex-direction: column; gap: 26px;
  font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--grey-dim);
}
.article-rail b{
  display: block; color: var(--off-white);
  font-family: var(--display); font-weight: 700; letter-spacing: 0.04em;
  font-size: 13px; margin-top: 6px;
}
.article-rail-block{ border-top: 1px solid var(--line); padding-top: 14px; }
.article-share{ display: flex; gap: 10px; }
.article-share a{
  width: 38px; height: 38px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); color: var(--grey);
  transition: color .3s var(--ease), border-color .3s var(--ease), transform .3s var(--ease);
}
.article-share a:hover{ color: var(--accent); border-color: var(--accent); transform: translateY(-2px); }
.article-share svg{ width: 16px; height: 16px; }
.article-aside-right{ align-self: start; }

/* ================= CUERPO DEL ARTICULO ================= */
.prose{
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(17px, 1.25vw, 19.5px);
  line-height: 1.78;
  color: color-mix(in srgb, var(--off-white) 88%, transparent);
}
.prose > * + *{ margin-top: 1.35em; }
.prose-lead{
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.62;
  color: var(--off-white);
}
.prose h2{
  font-size: clamp(23px, 2.2vw, 32px);
  margin-top: 2.4em; margin-bottom: 0.7em;
  padding-top: 0.9em;
  border-top: 1px solid var(--line);
}
.prose h3{
  font-size: clamp(17px, 1.4vw, 21px);
  margin-top: 2em; margin-bottom: 0.6em;
  color: var(--accent);
}
.prose a{
  color: var(--accent);
  border-bottom: 1px solid var(--accent-dim);
  transition: border-color .3s var(--ease);
}
.prose a:hover{ border-color: var(--accent); }
.prose strong{ color: var(--off-white); font-weight: 600; }
/* El reset global solo quita los marcadores de <ul>. Sin esto el <ol> pinta su
   numeracion nativa ademas del contador propio de .prose ol li::before. */
.prose ul, .prose ol{ padding-left: 0; list-style: none; }
.prose li{ position: relative; padding-left: 26px; margin-top: 0.7em; }
.prose ul li::before{
  content: ''; position: absolute; left: 0; top: 0.72em;
  width: 8px; height: 1px; background: var(--accent);
}
.prose ol{ counter-reset: prose-list; }
.prose ol li{ counter-increment: prose-list; }
.prose ol li::before{
  content: counter(prose-list, decimal-leading-zero);
  position: absolute; left: 0; top: 0.15em;
  font-family: var(--sans); font-size: 12px; font-weight: 600;
  color: var(--accent); letter-spacing: 0.06em;
}

.pull-quote{
  margin: 2.6em 0;
  padding-left: clamp(20px, 2.4vw, 34px);
  border-left: 2px solid var(--accent);
  font-size: clamp(20px, 1.9vw, 27px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.45;
  color: var(--off-white);
}
.pull-quote cite{
  display: block; margin-top: 18px;
  font-family: var(--sans); font-style: normal;
  font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--grey-dim);
}

.prose figure{ margin: 2.4em 0; }
.prose figure img{ width: 100%; background: var(--charcoal-2); }
.prose figcaption{
  margin-top: 12px;
  font-family: var(--sans); font-size: 11.5px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--grey-dim);
}

/* Caja de puntos clave: resumen escaneable para quien no lee entero. */
.key-points{
  margin: 2.6em 0;
  border: 1px solid var(--line-strong);
  border-left: 2px solid var(--accent);
  background: var(--surface-tint);
  padding: clamp(22px, 2.6vw, 34px);
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.65;
}
.key-points h4{
  font-family: var(--display); text-transform: uppercase;
  font-size: 12px; letter-spacing: 0.18em; color: var(--accent);
  margin-bottom: 16px;
}
.key-points li{ padding-left: 24px; }
.key-points li::before{
  content: ''; position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px; border: 1px solid var(--accent); background: transparent;
}

/* ================= CIERRE Y RELACIONADOS ================= */
.article-cta{
  margin-top: clamp(56px, 7vw, 88px);
  border: 1px solid var(--line-strong);
  padding: clamp(30px, 4vw, 56px);
  background: var(--charcoal);
  text-align: center;
}
.article-cta h3{ font-size: clamp(22px, 2.3vw, 32px); margin: 18px 0 16px; }
.article-cta p{ color: var(--grey); max-width: 44ch; margin: 0 auto 30px; line-height: 1.7; }
.article-cta .eyebrow{ justify-content: center; }

.related{
  border-top: 1px solid var(--line);
  padding: clamp(56px, 7vw, 96px) 0 clamp(64px, 8vw, 120px);
}
.related h2{ font-size: clamp(22px, 2.2vw, 30px); margin-bottom: clamp(32px, 4vw, 52px); }

/* ================= FOCO VISIBLE ================= */
.blog-filter:focus-visible,
.page-link:focus-visible,
.post-card a:focus-visible,
.article-share a:focus-visible,
.prose a:focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

/* ================= RESPONSIVE ================= */
@media (max-width: 1180px){
  .article-layout{
    grid-template-columns: minmax(0, var(--reading));
  }
  .article-rail{
    position: static;
    flex-direction: row; flex-wrap: wrap; align-items: center; gap: 20px 32px;
    border-top: 1px solid var(--line); padding-top: 20px;
    margin-bottom: 8px;
  }
  .article-rail-block{ border-top: none; padding-top: 0; }
}

@media (max-width: 900px){
  .post-featured{ grid-template-columns: 1fr; }
  .post-featured-body{ margin-left: 0; margin-top: -48px; margin-right: clamp(0px, 4vw, 40px); }
}

@media (max-width: 620px){
  .post-grid{ grid-template-columns: 1fr; }
  .post-featured-body{ margin-top: -32px; margin-right: 0; }
  .blog-filters{ gap: 8px; }
  .blog-filter{ padding: 9px 15px; letter-spacing: 0.12em; }
}

/* ================= MOVIMIENTO REDUCIDO ================= */
@media (prefers-reduced-motion: reduce){
  .post-featured-media img,
  .post-card-media img,
  .post-card::before{ transition: none; }
  .reveal{ opacity: 1; transform: none; transition: none; }
}