/* Ordinary article cards only; loaded after the optional mobile arrangement.
   The .p token keeps specificity above inline provider-grid image rules. */
.blogP > article.p.articleIndexCard { container-type: inline-size; }
.blogP > article.p.articleIndexCard > .pI,
.blogP.is-list > article.p.articleIndexCard > .pI {
  height: auto;
  aspect-ratio: 16 / 9;
  align-self: start;
  background: var(--contentBg-alt);
}
.blogP:not(.is-list) > article.p.articleIndexCard > .pI { width: 100%; }
.blogP > article.p.articleIndexCard .pI a.thumbnail,
.blogP.is-list > article.p.articleIndexCard .pI a.thumbnail {
  display: block;
  position: relative;
  width: 100%;
  height: 100%;
  padding: 0;
  aspect-ratio: 16 / 9;
}
.blogP > article.p.articleIndexCard .pI img,
.blogP > article.p.articleIndexCard:hover .pI img,
.blogP > article.p.articleIndexCard .pI a.thumbnail:hover img,
.blogP.is-list > article.p.articleIndexCard .pI img,
.blogP.is-list > article.p.articleIndexCard:hover .pI img,
.blogP.is-list > article.p.articleIndexCard .pI a.thumbnail:hover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  transform: none;
}
.articleIndexCard .articleInfo {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin-top: auto;
}
.blogP article.p.articleIndexCard .articleInfo > .pF.items {
  flex: 1;
  min-width: 0;
  margin: 0;
  padding-top: 0;
  flex-wrap: wrap;
}
.blogP article.p.articleIndexCard .articleInfo .author-meta {
  flex-wrap: wrap;
  min-width: 0;
}
.articleIndexCard .articleInfo .author-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.articleIndexCard .articleInfo .time { white-space: nowrap; }
.articleIndexCard .articleInfo > .tag.addl {
  position: relative;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: var(--themeC-alt);
  box-shadow: none;
}
/* Visual icon stays compact; the 44px touch target is drawn by .addb and does not grow the row. */
.articleIndexCard .articleInfo .addl label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: var(--contentBd-radius);
  cursor: pointer;
}
.articleIndexCard .articleInfo .addl label::before,
.articleIndexCard .articleInfo .addl label::after { content: none; display: none; }
.articleIndexCard .articleInfo .addl svg { width: 18px; height: 18px; }
/* Preserve the native keyboard/change behavior used by the bookmark runtime. */
.articleIndexCard .articleInfo .addb {
  display: block;
  position: absolute;
  top: -8px;
  left: -8px;
  width: 44px;
  height: 44px;
  margin: 0;
  opacity: 0;
  z-index: 3;
  cursor: pointer;
}
.articleIndexCard .articleInfo .addb:checked ~ label { color: var(--themeLink); }
.articleIndexCard .articleInfo .addb:focus-visible ~ label {
  outline: 2px solid var(--themeLink);
  outline-offset: -2px;
}
@media (hover: hover) and (pointer: fine) {
  .articleIndexCard .articleInfo .addl:hover label {
    background: var(--contentBg-alt);
    color: var(--themeLink);
  }
}
/* Compact list rows scale with the column: thumbnail, title and spacing move together.
   Container units keep the proportions correct at every PC width, not only at breakpoints. */
@media (min-width: 641px) {
  .blogP.is-list > article.p.articleIndexCard {
    gap: 16px;
    padding: 14px 16px;
  }
  .blogP.is-list > article.p.articleIndexCard > .pI {
    width: clamp(112px, 32cqw, 220px);
    min-width: 0;
    max-width: none;
  }
  .blogP.is-list > article.p.articleIndexCard .pT .name {
    font-size: clamp(0.98rem, 0.8rem + 0.55cqw, 1.15rem);
    line-height: 1.4;
    margin: 0 0 6px;
  }
  .blogP.is-list > article.p.articleIndexCard .pS { margin: 0 0 8px; }
  .blogP.is-list > article.p.articleIndexCard .pS .snippet {
    font-size: 0.86rem;
    -webkit-line-clamp: 2;
  }
  .blogP article.p.articleIndexCard .articleInfo { row-gap: 6px; }
  /* Narrow columns keep the title and metadata; the snippet would only add empty height. */
  @container (max-width: 560px) {
    .blogP.is-list > article.p.articleIndexCard .pS { display: none; }
    .blogP article.p.articleIndexCard .articleInfo .read-time,
    .blogP article.p.articleIndexCard .articleInfo .author-meta .meta-sep:nth-last-child(2) { display: none; }
  }
}
.blogP article.p.articleIndexCard .articleInfo .p-cat-badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 640px) {
  .mobilePostList .postStream.blogP { --mobileThumb: clamp(104px, 33vw, 144px); }
  .mobilePostList .postStream > article.p.articleIndexCard {
    min-height: 0;
    align-items: start;
    row-gap: 4px;
    column-gap: 14px;
    padding: 14px 0 4px;
  }
  .mobilePostList .postStream > article.p.articleIndexCard > .pC { display: contents; }
  .mobilePostList .postStream > article.p.articleIndexCard .pT {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
  }
  .mobilePostList .postStream > article.p.articleIndexCard .pT .name {
    font-size: 16px;
    line-height: 1.4;
    margin: 0;
  }
  .mobilePostList .postStream > article.p.articleIndexCard > .pI {
    grid-column: 2;
    grid-row: 1;
    width: var(--mobileThumb);
    height: auto;
    aspect-ratio: 16 / 9;
    align-self: start;
  }
  .mobilePostList .postStream > article.p.articleIndexCard .pI img,
  .mobilePostList .postStream.blogP > article.p.articleIndexCard:hover .pI img,
  .mobilePostList .postStream.blogP > article.articleIndexCard .pI a.thumbnail:hover img {
    object-fit: contain;
    transform: none;
  }
  .mobilePostList .postStream > article.p.articleIndexCard .articleInfo {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
  .mobilePostList .postStream > article.p.articleIndexCard .articleInfo .mobileMeta {
    flex: 1;
    min-width: 0;
    flex-wrap: nowrap;
  }

  /* Bordered card rows (Median UI card language) for the compact mobile list;
     covers article indexes and provider detail alike via the shared body class. */
  body.mobilePostList .postStream.blogP {
    gap: 10px;
  }
  body.mobilePostList .postStream > article.p.articleCard,
  body.mobilePostList .postStream > article.p.articleCard:last-child {
    border: var(--contentBd-line) solid var(--themeBd-color);
    border-radius: var(--contentBd-radiusA);
    background: var(--contentBg);
    box-shadow: 0 1px 3px var(--shadow-sm);
    padding: 12px;
    column-gap: 12px;
  }
  body.mobilePostList .postStream > article.p.articleCard:hover {
    border-color: color-mix(in srgb, var(--themeLink) 35%, var(--themeBd-color));
  }
}

/* Grid cards fall back to one column when the content column is too narrow for two.
   The container query is measured on the grid wrapper, so it tracks the real column,
   not the viewport. */
.blogP:not(.is-list) {
  container-type: inline-size;
}
@container (max-width: 520px) {
  .blogP:not(.is-list) > article.p.articleIndexCard {
    width: 100%;
  }
}