/* Cards, the blog and what came out of the WordPress editor: every site with `wordpress_urls`. */
/* Cards */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.card-grid--2 { grid-template-columns: repeat(2, 1fr); }
.article-card { display: flex; flex-direction: column; height: 100%; border: 1px solid #eee; background: #fff; }
.article-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.article-card .button { border-radius: 0; }
.article-card h3 { flex: 1; margin: 0; padding: 16px 16px 24px; font-size: 24px; line-height: 1.15; }

/* Blog */
.blog-layout { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 32px; align-items: start; }
.blog-side { padding: 16px; background: var(--dark); color: #fff; font-size: 14px; }
.blog-side h2 { margin: 16px 0 8px; color: #fff; font-size: 20px; }
.blog-side h2:first-child { margin-top: 0; }
.blog-side ul { margin: 0; padding: 0; list-style: none; }
.blog-side li { margin-bottom: 8px; }
.blog-side a { display: block; color: #fff; }
.blog-side a.is-active { color: var(--brand); }
.blog-side span { color: #a9b7c0; font-size: 13px; }
.blog-side .depth-1 { padding-left: 12px; }
.blog-side .depth-2 { padding-left: 24px; }
.post { display: flex; flex-direction: column; max-width: 860px; margin-inline: auto; padding: 0 16px 32px; font-size: 16px; }
.post__cover { order: -1; width: 100%; max-height: 520px; object-fit: contain; background: var(--dark); }
.post__header { position: relative; padding: 32px 0 16px 110px; text-align: left; }
.post__icon { position: absolute; left: 0; top: 32px; width: 80px; height: auto; }
.post__header h1 { font-size: 32px; }
.post__meta { font-size: 13px; }
.post__tags a { color: var(--dark); font-weight: 600; text-decoration: underline; }
.post__body img { max-width: 100%; height: auto; border-radius: 0; }
.post__cover { border-radius: 0; }
.post__body .btn { display: inline-block; margin: 0 8px 8px 0; padding: 12px 24px; background: var(--dark); color: #fff; font-size: 13px; font-weight: 600; letter-spacing: 2px; text-decoration: none; text-transform: uppercase; }
.post__body .btn-secondary { background: var(--brand); }
.post__body .btn-info { background: var(--teal); }
.post__body .btn-outline-info { background: #fff; color: var(--teal); box-shadow: inset 0 0 0 2px var(--teal); }
.post__body iframe { max-width: 100%; }
.post__body .alignleft { float: left; margin: 0 16px 8px 0; }
.post__body .alignright { float: right; margin: 0 0 8px 16px; }
.post__body .aligncenter { display: block; margin-inline: auto; }
.post__body .wp-block-columns { display: flex; gap: 16px; }
.post__body .wp-block-gallery, .post__body .gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.post__body .wp-block-gallery figure, .post__body .gallery figure { margin: 0; }
.post__body figure { margin: 0 0 16px; }
.post__body figcaption { font-size: 14px; font-style: italic; }

@media (max-width: 900px) {
  .card-grid, .card-grid--2 { grid-template-columns: 1fr; }
  .blog-layout { grid-template-columns: minmax(0, 1fr); }
  .post__header { padding-left: 0; }
  .post__icon { display: none; }
  .post__body .wp-block-columns { flex-direction: column; }
  .post__body .wp-block-gallery, .post__body .gallery { grid-template-columns: repeat(2, 1fr); }
}