/* Blog breakpoints and reduced motion. */

@media (max-width: 980px) {
  .me-blog-layout,
  .me-blog-layout--solo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "side"
      "main";
    gap: 14px;
  }
  .me-blog-side {
    position: static;
    max-width: 100%;
    padding: 12px;
  }
  .me-blog-side__label { margin: 0 4px 8px; }
  .me-blog-side__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 6px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    padding-bottom: 2px;
    -webkit-overflow-scrolling: touch;
  }
  .me-landing .me-blog-side__item {
    flex: none;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 999px;
    background: #f6f4f1;
    white-space: nowrap;
  }
  .me-landing .me-blog-side__item.is-on { background: var(--me-tint); }
  .me-blog-grid,
  .me-blog-grid--related { grid-template-columns: minmax(0, 1fr); }
  .me-post .me-article-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: 100%;
    max-width: 100%;
    gap: 16px;
  }
  .me-post .me-article-layout__main,
  .me-post .me-article-toc {
    order: 0;
    position: static;
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
  }
  .me-landing .me-post-content img,
  .me-post-content figure,
  .me-post-content table,
  .me-post-content .wp-block-image {
    max-width: 100% !important;
    height: auto !important;
  }
}
@media (max-width: 720px) {
  .me-blog-head__row {
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px 12px;
  }
  .me-blog-head__title { font-size: 22px; }
  .me-blog-card__media { height: 240px; }
  .me-post-head__title { font-size: 24px; }
  .me-post-content { font-size: 16.5px; }
  .me-post-content h2 { font-size: 22px; }
  .me-post-content h3 { font-size: 18px; }
  .me-post-cover { border-radius: 14px; }
  .me-landing .me-post-cover img { max-height: 220px; }
  .me-post-cta { padding: 22px 18px; }
  .me-blog-body,
  .me-post-related { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .me-blog-card,
  .me-blog-card__media img { transition: none; }
  .me-blog-card:hover { transform: none; }
}