/* Blog index only. Mobile reading density, 2026-10-08.
   Keep desktop layout, editorial artwork and the shared navigation intact. */
@media (max-width: 760px) {
  .gladia-site .gladia-page.kw-blog-page {
    --blog-gutter: 48px;
    --blog-width: 560px;
  }

  .kw-blog-page .kw-blog-masthead { padding-top: 16px; }

  .gladia-site .kw-blog-page .gladia-blog-hero {
    padding: 24px 0;
  }

  .gladia-site .kw-blog-page .gladia-blog-hero > p {
    max-width: none;
    margin: 16px auto 0;
    font-size: 15px;
    line-height: 1.6;
    text-wrap: balance;
  }

  .kw-blog-page .kw-blog-mobile-lead { display: block; }
  /* Intentional line breaks provide the pause on mobile. */
  .kw-blog-page .kw-blog-inline-pause { display: none; }

  .gladia-site .kw-blog-page .gladia-filters {
    gap: 4px;
    padding: 0 0 16px;
    scroll-padding-inline: 0;
  }

  .kw-blog-page .kw-blog-content { padding: 24px 0 0; }

  .gladia-site .kw-blog-page .gladia-grid { row-gap: 32px; }

  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card .gladia-card-cover {
    aspect-ratio: 16 / 9;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card .gladia-card-cover > img {
    /* Current six abstract covers have central subjects; crop evenly. */
    object-position: 50% 50%;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) :is(.gladia-grid, .gladia-related-grid) .gladia-card > :is(h2, h3) {
    min-height: 0;
    margin: 16px 0 8px;
    font-size: 18px;
    line-height: 1.4;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) :is(.gladia-grid, .gladia-related-grid) .gladia-card > p {
    padding-bottom: 16px;
    font-size: 15px;
    line-height: 1.6;
  }
}

@media (max-width: 374px) {
  .gladia-site .gladia-page.kw-blog-page { --blog-gutter: 40px; }
}

/* Narrow layouts and touch devices never inherit sticky mouse-hover motion.
   Keyboard focus outlines from blog-hero.css remain available. */
@media (max-width: 760px), (hover: none), (pointer: coarse) {
  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card:is(:hover, :focus-visible, :active) {
    transform: none;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card:is(:hover, :focus-visible, :active) .gladia-card-cover {
    box-shadow: none;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card:is(:hover, :focus-visible, :active) .gladia-card-cover > img {
    transform: none !important;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card > .gladia-card-more > span {
    transform: none !important;
  }

  .gladia-site :is(.kw-blog-page, .gladia-related) .gladia-card:active .gladia-card-cover {
    border-color: rgb(20 24 30 / 24%);
  }
}