/* Small interaction cues for the blog, without hiding content on load. */
.below-blog-page__grid article,
.below-blog-page__thumb img,
.below-blog-page__content h2 a,
.below-blog__post h3 a,
.below-blog__read span,
.below-article__toc a,
.below-article .entry-content .below-article__cta a {
  transition: none;
}

.below-blog-page a:focus-visible,
.below-blog__post a:focus-visible,
.below-article a:focus-visible,
.below-shell > article.type-post .entry-content a:focus-visible {
  outline: 2px solid #b63823;
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .below-blog-page__grid article {
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
  }
  .below-blog-page__thumb img { transition: transform 400ms ease; }
  .below-blog-page__content h2 a, .below-blog__post h3 a, .below-article__toc a {
    transition: color 200ms ease;
  }
  .below-shell > article.type-post .entry-content a { transition: color 200ms ease, text-decoration-color 200ms ease; }
  .below-blog__read span { display: inline-block; transition: transform 200ms ease; }
  .below-article .entry-content .below-article__cta a {
    transition: transform 200ms ease, background-color 200ms ease, box-shadow 200ms ease;
  }

  .below-blog-page__grid article:focus-within {
    transform: translateY(-4px);
    border-color: #f1b2a5;
    box-shadow: 0 18px 38px rgba(18, 26, 43, .12);
  }
  .below-blog-page__grid article:focus-within .below-blog-page__thumb img { transform: scale(1.035); }
  .below-blog__post:focus-within .below-blog__read span { transform: translateX(4px); }
  .below-article .entry-content .below-article__cta a:focus-visible { transform: translateY(-2px); }

  @media (hover: hover) {
    .below-blog-page__grid article:hover {
      transform: translateY(-4px);
      border-color: #f1b2a5;
      box-shadow: 0 18px 38px rgba(18, 26, 43, .12);
    }
    .below-blog-page__grid article:hover .below-blog-page__thumb img { transform: scale(1.035); }
    .below-blog-page__grid article:hover h2 a, .below-blog__post:hover h3 a,
    .below-article__toc a:hover { color: #b63823; }
    .below-shell > article.type-post .entry-content a:hover { color: #b63823; text-decoration-color: #b63823; }
    .below-blog__post:hover .below-blog__read span { transform: translateX(4px); }
    .below-article .entry-content .below-article__cta a:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 16px rgba(0, 0, 0, .18);
    }
  }
}

/* Microinteracciones para el archivo y las recomendaciones de lectura. */
@media (prefers-reduced-motion: no-preference) {
  .blog-archive .blog-archive__card {
    transition: transform 240ms ease, box-shadow 240ms ease, border-color 240ms ease;
  }
  .blog-archive .blog-archive__image img { transition: transform 400ms ease; }
  .blog-archive .blog-archive__card h2 a { transition: color 200ms ease; }
  .blog-archive .blog-archive__read span,
  .below-article .below-related__link span { display: inline-block; transition: transform 200ms ease; }
  .blog-archive .blog-archive__topics a,
  .blog-archive .blog-archive__pagination div a {
    transition: transform 200ms ease, color 200ms ease, border-color 200ms ease, background-color 200ms ease;
  }
  .below-article .entry-content .below-related__card {
    transition: transform 220ms ease, border-color 220ms ease, box-shadow 220ms ease;
  }
  .blog-archive .blog-archive__card:focus-within {
    transform: translateY(-3px);
    border-color: #f1b2a5;
    box-shadow: 0 15px 34px rgba(18, 26, 43, .08);
  }
  .blog-archive .blog-archive__card:focus-within .blog-archive__image img { transform: scale(1.025); }
  .blog-archive .blog-archive__card:focus-within .blog-archive__read span,
  .below-article .below-related__card:focus-visible .below-related__link span { transform: translateX(4px); }
  .below-article .entry-content .below-related__card:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(18, 26, 43, .08);
  }
  @media (hover: hover) {
    .blog-archive .blog-archive__card:hover { border-color: #f1b2a5; }
    .blog-archive .blog-archive__card:hover .blog-archive__read span,
    .below-article .below-related__card:hover .below-related__link span { transform: translateX(4px); }
    .blog-archive .blog-archive__topics a:hover,
    .blog-archive .blog-archive__pagination div a:hover { transform: translateY(-2px); border-color: #ff5a3c; color: #b63823; }
    .below-article .entry-content .below-related__card:hover { box-shadow: 0 10px 24px rgba(18, 26, 43, .08); }
  }
}
@media (prefers-reduced-motion: reduce) {
  .below-article .entry-content .below-related__card,
  .below-article .entry-content .below-related__card:hover,
  .below-article .entry-content .below-related__card:focus-visible { transition: none; transform: none; }
}