/* Blog pages: the article column on the left and the list of articles on the
   right. At 980px and below the list moves into the site menu, which slides in
   from the right (see the site menu in /styles.css). Loaded after /styles.css
   and uses its tokens. */

/* The language picker is filled by script; without it there's nothing to pick. */
:root:not(.blog-js) #blogLang {
  display: none
}

/* Layout */

.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 56px;
  align-items: start;
  padding: 28px 0 56px
}

.blog-main {
  min-width: 0
}

/* Article list: a sticky panel on the right. The site menu's own parts (its
   head and links) only show when it's the slide-in menu. */

@media(min-width:981px) {
  .site-drawer.blog-sidebar {
    display: block;
    position: sticky;
    top: 24px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 20px;
    padding: 20px 16px
  }

  .blog-sidebar .drawer-head,
  .blog-sidebar .drawer-nav {
    display: none
  }
}

.blog-list-heading {
  padding: 0 10px 10px
}

.blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px
}

.blog-list a {
  display: grid;
  gap: 3px;
  padding: 10px 10px;
  border-radius: 12px;
  transition: background .2s
}

.blog-list a:hover {
  background: #1b202c
}

.blog-list a[aria-current="page"] {
  background: #1d2230;
  box-shadow: inset 0 0 0 1px var(--line)
}

.blog-list-title {
  font-weight: 750;
  line-height: 1.3
}

.blog-list a[aria-current="page"] .blog-list-title {
  color: var(--orange)
}

.blog-list time {
  color: #8e96a8;
  font-size: .82rem;
  font-weight: 600
}

/* Article */

.blog-post {
  max-width: 44rem
}

.blog-eyebrow:hover {
  color: #fff
}

.blog-post-head h1,
.blog-home-head h1 {
  font-size: clamp(2.3rem, 5vw, 3.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  margin: 12px 0 16px;
  text-wrap: balance
}

.blog-summary {
  margin: 0 0 14px;
  font-size: clamp(1.08rem, 2vw, 1.25rem);
  color: var(--muted);
  max-width: 40rem
}

.blog-meta {
  margin: 0;
  color: #8e96a8;
  font-size: .9rem;
  font-weight: 650
}

.blog-body {
  margin-top: 30px;
  font-size: 1.07rem;
  line-height: 1.75;
  color: #dde2eb
}

.blog-body> :first-child {
  margin-top: 0
}

.blog-body h2 {
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  line-height: 1.2;
  letter-spacing: -.02em;
  margin: 1.9em 0 .55em;
  color: var(--text);
  text-wrap: balance
}

.blog-body h3 {
  font-size: 1.2rem;
  line-height: 1.3;
  margin: 1.6em 0 .4em;
  color: var(--text)
}

.blog-body p,
.blog-body ul,
.blog-body ol {
  margin: 0 0 1.15em
}

.blog-body ul,
.blog-body ol {
  padding-left: 1.3em
}

.blog-body li {
  margin: .4em 0
}

.blog-body li::marker {
  color: var(--orange)
}

.blog-body strong {
  color: var(--text);
  font-weight: 750
}

.blog-body a {
  color: #ff9b4e;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px
}

.blog-body a:hover {
  color: #fff
}

.blog-body img {
  width: 100%;
  height: auto;
  border-radius: 18px;
  border: 1px solid var(--line)
}

.blog-body p:has(> img:only-child) {
  margin: 1.6em 0
}

.blog-body blockquote {
  margin: 1.5em 0;
  padding: 2px 0 2px 18px;
  border-left: 3px solid var(--blue);
  color: var(--muted)
}

.blog-body hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 2em 0
}

.blog-body code {
  background: #1b202c;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: .1em .35em;
  font-size: .92em
}

/* Blog home */

.blog-home-head {
  margin-bottom: 30px
}

.blog-cards {
  display: grid;
  gap: 20px
}

.blog-card-link {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 24px;
  align-items: center;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 14px;
  transition: .2s
}

.blog-card-link:hover {
  transform: translateY(-3px);
  border-color: #596177
}

.blog-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 1200 / 630;
  object-fit: cover;
  border-radius: 14px
}

.blog-card-text {
  min-width: 0;
  padding-right: 10px
}

.blog-card time {
  color: #8e96a8;
  font-size: .85rem;
  font-weight: 650
}

.blog-card h2 {
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  margin: 6px 0 8px;
  text-wrap: balance
}

.blog-card p {
  margin: 0 0 12px;
  color: var(--muted)
}

.blog-card-more {
  color: #ff9b4e;
  font-weight: 800;
  font-size: .92rem
}

/* Ready to play */

.blog-cta {
  border-top: 1px solid var(--line)
}

.blog-cta h2 {
  font-size: clamp(2rem, 4vw, 3rem)
}

.blog-cta .store-badges {
  justify-content: center;
  margin-top: 24px
}

/* Narrow screens: the article list moves into the site menu, under its links */

@media(max-width:980px) {
  .blog-layout {
    grid-template-columns: minmax(0, 1fr);
    padding-top: 16px
  }

  .blog-sidebar .drawer-nav {
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line)
  }
}

@media(max-width:700px) {
  .blog-card-link {
    grid-template-columns: 1fr;
    gap: 14px
  }

  .blog-card-text {
    padding: 0 6px 6px
  }
}

@media(max-width:640px) {
  .blog-post-head h1,
  .blog-home-head h1 {
    font-size: clamp(2rem, 9vw, 2.6rem)
  }

  .blog-body {
    font-size: 1.03rem
  }
}

@media(prefers-reduced-motion:reduce) {

  .blog-card-link,
  .blog-list a {
    transition: none !important
  }

  .blog-card-link:hover {
    transform: none
  }
}