/* ============================================================
   Plantillas de listado y detalle (F4): blog, testimonios,
   herramientas, talleres, newsletter. docs/02 §4.
   ============================================================ */
@layer templates {
  /* --- Barra de filtros y chips --- */
  .listing-bar { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-md); align-items: center; margin-bottom: var(--s-xl); }
  .chips { display: flex; flex-wrap: wrap; gap: var(--s-sm); }
  a.chip { text-decoration: none; transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
  a.chip:hover { border-color: var(--c-ink); color: var(--c-ink); }
  .search { display: flex; gap: var(--s-sm); min-width: min(100%, 340px); }
  .search .input { min-height: 40px; }
  .empty-state { display: grid; gap: var(--s-sm); padding: var(--s-2xl) 0; max-width: 46rem; }
  .empty-state h2 { font-size: var(--fs-h3); }
  .pagination { display: flex; gap: var(--s-sm); align-items: center; justify-content: center; margin-top: var(--s-xl); flex-wrap: wrap; }
  .pagination__info { color: var(--c-gray); font-family: var(--f-mono); font-size: var(--fs-meta); }
  .post-meta { color: var(--c-gray); font-family: var(--f-mono); font-size: var(--fs-meta); letter-spacing: 0.04em; }

  /* --- Blog --- */
  .post-featured { display: grid; gap: var(--s-xl); align-items: center; margin-bottom: var(--s-2xl); }
  @media (min-width: 1024px) { .post-featured { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-3xl); } }
  .post-featured__body { display: grid; gap: var(--s-md); }
  .post-featured__body h2 { font-size: var(--fs-h2); }
  .post-featured__body h2 a, .post-card h3 a { text-decoration: none; }
  .post-featured__body h2 a:hover, .post-card h3 a:hover { text-decoration: underline; text-decoration-color: var(--c-red-line); }
  .post-grid { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
  .post-card { display: grid; align-content: start; background: var(--c-surface-1); border: 1px solid var(--c-line); clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--cut-md)), calc(100% - var(--cut-md)) 100%, 0 100%); }
  .post-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
  .post-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
  .post-card:hover .post-card__media img { transform: scale(1.04); }
  .post-card__body { display: grid; gap: var(--s-sm); padding: var(--s-lg); }
  .post-card h3 { font-size: var(--fs-h4); }
  .post-card .text-muted { font-size: var(--fs-small); }

  .reading-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-header) + 1); pointer-events: none; }
  .reading-progress span { display: block; height: 100%; width: 100%; background: var(--c-red); transform-origin: left; transform: scaleX(0); }
  .article__head { padding-block: clamp(3rem, 2rem + 4vw, 5rem) var(--s-xl); }
  .article__head .container { display: grid; gap: var(--s-md); }
  .article__head h1 { font-size: var(--fs-h1); }
  .article__cover { margin-bottom: var(--s-2xl); }
  .article__layout { display: grid; gap: var(--s-xl); padding-bottom: var(--s-section); }
  @media (min-width: 1100px) {
    .article__layout { grid-template-columns: 220px minmax(0, 1fr) 140px; gap: var(--s-2xl); align-items: start; }
    .article__toc, .article__share { position: sticky; top: 6rem; }
  }
  .article__toc ol { list-style: none; margin: var(--s-sm) 0 0; padding: 0; display: grid; gap: 0.5rem; font-size: var(--fs-small); }
  .article__toc a { color: var(--c-ink-2); text-decoration: none; display: flex; gap: 0.5rem; }
  .article__toc a span { font-family: var(--f-mono); color: var(--c-red-line); }
  .article__toc a:hover { color: var(--c-ink); }
  .article__body { max-width: 70ch; }
  .article__share { display: grid; gap: 0.5rem; align-content: start; font-size: var(--fs-small); }

  /* --- Newsletter --- */
  .newsletter { display: grid; gap: var(--s-xl); align-items: center; }
  @media (min-width: 1024px) { .newsletter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
  .newsletter h2 { font-size: var(--fs-h2); margin-block: var(--s-sm); }
  .newsletter__form { display: grid; gap: var(--s-md); }
  .newsletter__row { display: flex; gap: var(--s-sm); flex-wrap: wrap; }
  .newsletter__row .input { flex: 1 1 220px; }

  /* --- Testimonios --- */
  .testimonials { display: grid; gap: var(--s-lg); grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); }
  .testimonial { margin: 0; display: grid; gap: var(--s-md); align-content: start; padding: var(--s-xl) var(--s-lg); background: var(--c-surface-1); border-left: 2px solid var(--c-red-line); }
  .testimonial blockquote { margin: 0; font-family: var(--f-serif); font-style: italic; font-size: var(--fs-quote); line-height: 1.45; }
  .testimonial__author { display: flex; gap: var(--s-md); align-items: center; font-size: var(--fs-small); }
  .testimonial__photo { width: 56px; height: 56px; flex: none; overflow: hidden; clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 0 100%); }
  .testimonial__photo img { width: 100%; height: 100%; object-fit: cover; }

  /* --- Herramientas --- */
  .tool-card__tags { display: flex; flex-wrap: wrap; gap: var(--s-xs); }
  .tool-card h3 a { text-decoration: none; }
  .section--red-band { background: var(--c-red); --frame-bg: var(--c-red); }
  .section--red-band .eyebrow { color: var(--c-ink); }
  .section--red-band .eyebrow::before { background: var(--c-ink); }
  .feature-band { display: grid; gap: var(--s-lg); align-items: center; }
  @media (min-width: 900px) { .feature-band { grid-template-columns: minmax(0, 1fr) auto; } }
  .feature-band h2 { font-size: var(--fs-h2); margin-block: var(--s-sm); }
  .feature-band p { max-width: var(--measure); }
  .feature-band__cta { --btn-border: var(--c-ink); --btn-bg: transparent; }
  .feature-band__cta:hover { --btn-bg: var(--c-ink); --btn-fg: var(--c-red-hover); }

  /* --- Talleres --- */
  .workshops { display: grid; gap: var(--s-lg); }
  .workshop-card { display: grid; gap: var(--s-lg); padding: var(--s-xl) var(--s-lg); background: var(--c-surface-1); border: 1px solid var(--c-line); }
  @media (min-width: 1024px) { .workshop-card { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
  .workshop-card__code { font-family: var(--f-display); font-stretch: var(--display-stretch); font-weight: 900; font-size: clamp(2.5rem, 2rem + 2vw, 3.75rem); line-height: 0.9; color: transparent; -webkit-text-stroke: 1px var(--c-red-line); }
  .workshop-card h2, .workshop-card h3 { font-size: var(--fs-h3); }
  .workshop-card dl { margin: 0; display: grid; gap: var(--s-sm); font-size: var(--fs-small); }
  .workshop-card dt { font-family: var(--f-mono); font-size: var(--fs-meta); text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-gray); }
  .workshop-card dd { margin: 0 0 var(--s-sm); color: var(--c-ink-2); }
  .editions { display: grid; gap: var(--s-sm); }
  .edition { display: grid; gap: 0.3rem; padding: var(--s-md); border: 1px solid var(--c-line-strong); }
  .edition__date { font-family: var(--f-mono); font-size: var(--fs-small); }
  .edition__meta { color: var(--c-ink-2); font-size: var(--fs-small); }
  .edition--full { opacity: 0.6; }
}

/* ============================================================
   Imágenes en blanco y negro que toman color al pasar el mouse
   (idea de Stitch: grayscale + contrast-125 → color, transición de 700 ms,
   leve acercamiento). Solo con mouse: en pantallas táctiles no hay forma de
   revelar el color, así que ahí se muestran a color.
   Excepciones (pedido de mig): el slider del inicio y las imágenes dentro de
   los artículos del blog (portada y cuerpo).
   ============================================================ */
@layer templates {
  @media (hover: hover) and (pointer: fine) {
    .shape-frame__photo img,
    .post-card__media img,
    .mega-card__img img,
    .testimonial__photo img {
      filter: grayscale(1) contrast(1.25);
      transition: filter 700ms var(--ease-out), transform 700ms var(--ease-out);
    }
    .shape-frame:hover .shape-frame__photo img,
    .post-card:hover .post-card__media img,
    .post-featured:hover .shape-frame__photo img,
    .mega-card:hover .mega-card__img img,
    .testimonial:hover .testimonial__photo img,
    .service:hover .shape-frame__photo img,
    .split:hover .shape-frame__photo img,
    :is(.shape-frame, .post-card, .post-featured, .mega-card, .testimonial, .service, .split):focus-within img {
      filter: none;
      transform: scale(1.05);
    }
    .post-card__media, .mega-card__img { overflow: hidden; }

    /* Excepciones: a color siempre y sin efecto */
    .hero-slide img,
    .article__cover img,
    .article__body img {
      filter: none !important;
      transform: none !important;
      transition: none !important;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    .shape-frame__photo img, .post-card__media img, .mega-card__img img, .testimonial__photo img { transition: filter 1ms; transform: none !important; }
  }
}