/**
 * Mobile feed presentation inspired by the information density of Google Discover.
 * Loaded only on feed-style pages at <= 48rem. Vazirmatn remains defined by main.css.
 */

@media (max-width: 48rem) {
  body.home .site-main,
  body.archive .site-main,
  body.search .site-main {
    padding-block-start: 0.75rem;
  }

  .home-layout {
    gap: 1rem;
  }

  .reading-group {
    gap: 0.75rem;
  }

  .reading-group .post-card {
    overflow: hidden;
    padding: 0 0 1rem;
    border: 1px solid color-mix(in srgb, var(--cogi-color-border) 78%, transparent);
    border-radius: 1rem;
    background: var(--cogi-color-surface);
    content-visibility: auto;
    contain-intrinsic-size: 26rem;
  }

  .reading-group .post-card:last-child {
    border-block-end: 1px solid color-mix(in srgb, var(--cogi-color-border) 78%, transparent);
  }

  .reading-group .post-card::before {
    content: none;
  }

  .reading-group .post-card .post-card__body {
    gap: 0;
  }

  .reading-group .post-card .post-card__media {
    order: 0;
    width: 100%;
    border-radius: 0;
    background: color-mix(in srgb, var(--cogi-color-border-soft) 70%, var(--cogi-color-surface));
  }

  .reading-group .post-card .post-card__header {
    order: 1;
    padding: 0.9rem 1rem 0;
  }

  .reading-group .post-card .post-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin: 0;
    font-size: 1.18rem;
    font-weight: 780;
    line-height: 1.55;
    text-wrap: pretty;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .reading-group .post-card .post-card__title a {
    display: block;
  }

  .reading-group .post-card .post-card__excerpt {
    display: none;
  }

  .reading-group .post-card .post-card__meta {
    order: 2;
    width: 100%;
    margin: 0;
    padding: 0.6rem 1rem 0;
    gap: 0.45rem;
    justify-content: flex-start;
  }

  .reading-group .post-card .post-card__meta-info {
    gap: 0.5rem;
  }

  .reading-group .post-card .meta-sep,
  .reading-group .post-card .post-card__read {
    display: none;
  }

  .reading-group .post-card .topic-label,
  .reading-group .post-card time {
    font-size: 0.75rem;
    line-height: 1.5;
  }

  .reading-group .post-card time {
    color: var(--cogi-color-text-muted);
  }

  .feed-header {
    gap: 0.5rem;
    margin-block-end: 1rem;
    padding-block-end: 0.75rem;
  }

  .feed-header__title {
    font-size: 1.45rem;
    line-height: 1.4;
  }

  .feed-header__lead {
    font-size: 0.875rem;
    line-height: 1.75;
  }

  .feed-sentinel {
    min-height: 2.5rem;
    padding-block: 1rem 2rem;
  }

  .feed-pagination {
    margin-block-start: 0.25rem;
  }

  body.home .home-top {
    gap: 0.75rem;
    margin-block-end: 0.75rem;
  }

  body.home .home-topics {
    gap: var(--cogi-space-5);
    margin-block: var(--cogi-space-5);
  }

  body.home .home-lead {
    gap: 0;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--cogi-color-border) 78%, transparent);
    border-radius: 1rem;
    background: var(--cogi-color-surface);
  }

  body.home .home-lead__media {
    border-radius: 0;
  }

  body.home .home-lead__body {
    gap: 0.45rem;
    padding: 0.9rem 1rem 1rem;
  }

  body.home .home-lead__title {
    font-size: 1.35rem;
    font-weight: 820;
    line-height: 1.5;
  }

  body.home .home-lead__excerpt {
    display: none;
  }

  body.home .home-lead__meta .meta-sep,
  body.home .home-lead__meta span:last-child {
    display: none;
  }

  body.home .yh-main .reading-group {
    padding: 12px 12px 4px;
    border-radius: 16px;
    background: var(--cogi-color-surface);
  }

  body.home .yh-main .reading-group .post-card {
    border: 0;
    border-radius: 0;
    background: transparent;
    contain-intrinsic-size: auto 8rem;
  }

  body.home .yh-main .reading-group > .section-title {
    position: static;
    width: auto;
    height: auto;
    margin: 0 0 8px;
    overflow: visible;
    clip: auto;
    white-space: normal;
    font-size: 1.2rem;
  }

  body.home .home-top__latest > .section-title,
  body.home .reading-group > .section-title {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  body.home .reading-group .post-card .post-card__excerpt {
    display: none;
  }
}

@media (max-width: 30rem) {
  .reading-group .post-card .post-card__title {
    font-size: 1.1rem;
  }
}