/* Shared guide cards and the hub's navigation. Article styles stay in guide.css. */
@layer page {
  .guide-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .guide-card__credit { position: absolute; right: .4rem; bottom: .4rem; padding: .15rem .35rem; border-radius: var(--radius); background: rgb(255 255 255 / .9); color: var(--ink-2); font-size: .65rem; }
  .guide-card__title a { text-decoration: none; }
  .guide-card__title a:focus-visible { text-decoration: underline; text-underline-offset: .14em; }
  .guides__cluster { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }
  .guides__useful { margin-top: var(--sp-7); }
  .guides__useful h2 { margin-bottom: var(--sp-4); font-size: var(--fs-xl); }
  .guides__essentials { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 64em) { .guides__essentials { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-width: 699px) {
    .guide-cards { grid-template-columns: minmax(0, 1fr); }
    .guide-card { display: grid; grid-template-columns: 88px minmax(0, 1fr); min-height: 88px; align-items: start; }
    .guide-card__media { width: 88px; height: 88px; aspect-ratio: 1; }
    .guide-card__media::before { width: 3.5rem; }
    .guide-card__media svg { width: 2.5rem; height: 2.5rem; }
    .guide-card__body { align-self: stretch; gap: var(--sp-1); padding: var(--sp-3); }
    .guide-card__title { font-size: var(--fs-m); line-height: 1.35; }
    .guide-card__category { font-size: .7rem; }
    .guide-card__summary { display: none; }
    .guide-card__date { font-size: .7rem; padding-top: 0; }
    .guide-card__credit { font-size: .55rem; right: .2rem; bottom: .2rem; }
    .guides__jump .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-inline: contain; padding-bottom: var(--sp-2); }
    .guides__jump .chips > li { flex: none; }
  }
}