/* The news blog (/blogs/news, /blogs/news/<handle>), the shape the store's
   Garage blog and article templates rendered with their extra blocks off:
   a three-column card grid
   with natural-height images on the index, and on the article the
   full-bleed image with the white card overlapping it. Tokens from
   np-chrome.css :root; the stepped container mirrors np-home.css. */
.np-news .np-container {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 990px) {
  .np-news .np-container { max-width: 1000px; padding-left: 32px; padding-right: 32px; }
}
@media (min-width: 1300px) {
  .np-news .np-container { max-width: 1300px; }
}

.np-news { padding-bottom: 80px; }
.np-news__title {
  margin: 68px 0 44px;
  padding-left: 28px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--np-charcoal);
  line-height: 1.1;
}
.np-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px 16px;
  padding: 0 28px;
}
.np-news-card { min-width: 0; }
.np-news-card__photo { display: block; margin-bottom: 18px; }
.np-news-card__photo img { display: block; width: 100%; height: auto; }
.np-news-card__date,
.np-article__date {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--np-ink-soft);
}
.np-news-card__title { margin: 12px 0 10px; font-size: 26px; font-weight: 600; line-height: 1.3; }
.np-news-card__title a { color: var(--np-charcoal); text-decoration: none; }
.np-news-card__title a:hover { text-decoration: underline; }
.np-news-card__blurb { margin: 0; font-size: 15px; line-height: 1.5; color: var(--np-ink); }
.np-news__empty { padding: 24px 28px; color: var(--np-ink-soft); }

/* the article: the image full-bleed at 100vw, the card riding 96px up over it */
.np-news--article { padding-bottom: 0; }
.np-article__hero { width: 100%; height: 1000px; max-height: 70vw; overflow: hidden; background: var(--np-charcoal); }
.np-article__hero img { display: block; width: 100%; height: 100%; object-fit: cover; }
.np-article__card {
  position: relative;
  margin: -96px 0 0;
  padding: 36px 220px 64px;
  background: #fff;
  min-height: 300px;
}
.np-article__card--flat { margin-top: 0; padding-top: 48px; }
.np-article__title {
  margin: 20px 0 22px;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.25;
  text-transform: uppercase;
  color: var(--np-charcoal);
}
.np-article__share { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; font-size: 16px; color: var(--np-charcoal); }
.np-article__share a { color: var(--np-charcoal); display: inline-flex; }
.np-article__share a:hover { color: var(--np-red); }
.np-article__body { font-size: 15px; line-height: 1.6; color: var(--np-ink); }
.np-article__body p { margin: 0 0 14px; }
.np-article__body a { color: var(--np-red); }
.np-article__foot { margin-top: 30px; padding-top: 48px; border-top: 1px solid var(--np-border); text-align: center; }
.np-article__back { display: inline-flex; align-items: center; gap: 8px; color: var(--np-red); font-size: 15px; font-weight: 500; text-decoration: underline; }
.np-article__back:hover { color: var(--np-red-dark); }

@media (max-width: 1299.98px) {
  .np-article__card { padding-left: 120px; padding-right: 120px; }
}
@media (max-width: 989.98px) {
  .np-news__title { margin: 44px 0 28px; padding-left: 0; font-size: 32px; }
  .np-news__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; }
  .np-news-card__title { font-size: 22px; }
  .np-article__card { padding: 28px 24px 48px; }
  .np-article__title { font-size: 30px; }
}
@media (max-width: 749.98px) {
  .np-news__grid { grid-template-columns: 1fr; }
  .np-article__hero { max-height: 90vw; }
  .np-article__card { margin-top: -48px; padding: 24px 16px 40px; }
  .np-article__title { font-size: 26px; }
}