/* /whats-new (P905 b, D901, frames web-whats-new and web-post): the release list and a post, on the guides' hero
   (guides.css) and the landing tokens. Laptop: image left, eyebrow, title, summary, Read the post. Phone: an 88 px
   image beside the title, date and summary, as the Studio's What's new list. */

.wn-shell { max-width: 960px; }
.wn-shell--post { max-width: 800px; }
.wn-hero { padding-bottom: 0; }
.wn-lede { max-width: 620px; }
.wn-sec { padding-block: 32px clamp(64px, 8vw, 120px); }

.wn-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lp-line); }
.wn-item { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 40px; align-items: start; padding-block: 32px; border-bottom: 1px solid var(--lp-line); }
.wn-item__img,
.wn-post__img {
  display: flex; justify-content: center; overflow: hidden; aspect-ratio: 1;
  border: 1px solid var(--lp-line); border-radius: 16px;
  background: radial-gradient(120% 90% at 50% 0%, #4a0f22, #16161b 70%);
}
.wn-item__img img { width: 64%; height: auto; margin-top: 14%; border-radius: 10px 10px 0 0; border: 1px solid var(--lp-line-strong); border-bottom: 0; }
.wn-eyebrow { margin: 6px 0 12px; font: 13px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-3); }
.wn-item__title { max-width: none; margin: 0; font: 600 clamp(22px, 2.4vw, 32px)/1.2 var(--lp-font); letter-spacing: -0.01em; }
.wn-item__title a { color: var(--lp-ink); text-decoration: none; }
.wn-item__title a:hover { text-decoration: underline; text-underline-offset: 4px; }
.wn-item__summary { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--lp-ink-2); }
.wn-more { display: inline-block; margin-top: 14px; font-weight: 600; color: var(--lp-hot); text-decoration: none; }

.wn-post__eyebrow { color: var(--lp-hot); }
.wn-post__title .lp-display { font-size: clamp(48px, 7vw, 96px); line-height: 0.92; }
.wn-post__lead { max-width: none; margin-top: 20px; }
.wn-post__img { aspect-ratio: 16 / 9; margin: 28px 0 0; }
.wn-post__img img { width: auto; height: 90%; margin-top: 5%; border-radius: 14px 14px 0 0; border: 1px solid var(--lp-line-strong); border-bottom: 0; }
.wn-post__body p { margin: 24px 0 0; font-size: 18px; line-height: 1.65; color: var(--lp-ink-2); }
.wn-post__cta { margin-top: 28px; }
.wn-pager { display: flex; justify-content: space-between; gap: 16px; margin-top: 24px; padding: 24px 0 clamp(48px, 6vw, 96px); border-top: 1px solid var(--lp-line); }
.wn-step { display: grid; gap: 6px; color: var(--lp-ink); text-decoration: none; }
.wn-step--next { margin-left: auto; text-align: right; }
.wn-step__tag { font: 11px var(--lp-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--lp-ink-3); }
.wn-step__name { font-size: 17px; font-weight: 600; }
.wn-step:hover .wn-step__name { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 640px) {
  .wn-lede, .wn-more, .wn-eyebrow time ~ span { display: none; }
  .wn-sec { padding-top: 16px; }
  .wn-list { margin-inline: calc(var(--lp-gutter) * -1); }
  .wn-item { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 16px var(--lp-gutter); }
  .wn-item__img { border-radius: 12px; }
  .wn-item__img img { border-radius: 6px 6px 0 0; }
  .wn-item__text { display: flex; flex-direction: column; }
  .wn-item__title { order: -1; font-size: 18px; line-height: 1.25; }
  .wn-eyebrow { margin: 4px 0 0; font: 15px var(--lp-font); letter-spacing: 0; text-transform: none; }
  .wn-item__summary { margin-top: 4px; font-size: 15px; line-height: 1.45; }
  .wn-post__img { aspect-ratio: 4 / 3; }
  .wn-post__body p { font-size: 16px; }
}