/* ==========================================================================
   blog hub — Figma "Blog — 1440"
   ========================================================================== */

@layer pages {
  .blog-head__aside { display: grid; gap: var(--s-5); align-content: end; }
  @media (min-width: 64em) {
    .blog-head .page-head__title { grid-column: 1 / span 7; }
    .blog-head__aside { grid-column: 8 / -1; padding-bottom: 0.6rem; justify-self: end; width: min(100%, 28rem); }
    .blog-head__aside .page-head__intro { grid-column: auto; padding: 0; }
  }

  /* Search pill. */
  .search {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    min-height: 3rem;
    padding: 4px 4px 4px 1.25rem;
    border-radius: var(--radius-pill);
    background: var(--surface);
    box-shadow: inset 0 0 0 1px var(--line);
    transition: box-shadow var(--d-fast) ease;
  }
  .search:focus-within { box-shadow: inset 0 0 0 1px var(--ink), 0 0 0 4px var(--tint); }
  .search__input { flex: 1; min-width: 0; min-height: 2.5rem; border: 0; background: transparent; font-size: 1rem; appearance: none; color: var(--ink); }
  .search__input::placeholder { color: var(--mute); opacity: 1; }
  .search__input:focus-visible { outline: none; }
  .search__input::-webkit-search-cancel-button { appearance: none; }
  .search__submit { display: grid; place-items: center; flex: none; width: var(--target); height: var(--target); border-radius: var(--radius-pill); background: var(--inverse); color: var(--on-inverse); transition: background-color var(--d-fast) ease, transform var(--d-press) var(--ease-out); }
  .search__submit:active { transform: scale(0.95); }
  .search__submit .icon { width: 18px; height: 18px; }
  @media (hover: hover) and (pointer: fine) { .search__submit:hover { background: var(--inverse-hover); } }

  /* Featured lead. */
  .post-card--lead .cover { aspect-ratio: 16 / 10; border-radius: var(--radius-lg); }
  .post-card--lead .cover__line { font-size: clamp(2.5rem, 13cqi, 8rem); }
  .post-card__cta { justify-self: start; margin-top: var(--s-2); pointer-events: none; }
  @media (hover: hover) and (pointer: fine) {
    .post-card--lead .post-card__link:hover .post-card__title { text-decoration: none; }
    .post-card--lead .post-card__link:hover .post-card__cta { background: var(--inverse-hover); }
  }

  /* Topics + library. */
  .blog-tools { margin-bottom: var(--s-7); }
  .filter__result { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); margin-top: calc(var(--s-5) * -1); margin-bottom: var(--s-6); font-size: var(--fs-sm); color: var(--ink-2); }
  .blog-library__rss { margin-top: var(--s-7); }
}