/* Blog: post list, category pages and posts. Desktop numbers are the Wix blog's measurements. */

.blog-wrap { padding-bottom: 0; }
.blog-col { background: #fff; padding: 0 20px 40px; min-height: 600px; }
.blog-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; }
.blog-nav a, .blog-nav span { font: 400 15px/21px var(--open); color: #333; text-decoration: none; cursor: pointer; white-space: nowrap; }
.blog-nav a:hover, .blog-nav a[aria-current] { color: #3c9fd6; }
.blog-more { position: relative; margin-left: auto; }
.blog-more > span { display: block; width: 24px; height: 24px; color: #333; }
.blog-more > span svg { width: 100%; height: 100%; }
.blog-more ul { display: none; position: absolute; z-index: 20; top: 100%; right: -8px; background: #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .15);
  padding: 10px 16px; min-width: 220px; flex-direction: column; align-items: flex-start; gap: 0; }
.blog-more ul a { display: block; padding: 6px 0; }
.blog-more:hover ul, .blog-more:focus-within ul { display: flex; }

/* post tiles (blog list + category pages) */
.ptiles { display: grid; }
/* category pages: cards (picture, title, summary), like the Wix category pages */
.pcats { display: grid; }
.pcat { background: #fff; border: 1px solid rgba(242, 242, 242, .68); display: flex; flex-direction: column; }
.pcat-img { display: block; aspect-ratio: 1; overflow: hidden; }
.pcat-img img, .pcat-img .ptile-blank { width: 100%; height: 100%; object-fit: cover; display: block; background: #888; }
.pcat-body { position: relative; }
.pcat h2 { font: 400 26px/normal var(--avenir); font-weight: 800; color: #333; }
.pcat h2 a { color: inherit; text-decoration: none; }
.pcat h2 a:hover { color: #3c9fd6; }
.pcat p { font: 400 16px/24px var(--open); color: #333; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.blog-empty { text-align: center; padding: 120px 20px; }
.blog-empty .be-h { font: 800 26px/1.3 var(--avenir); color: #333; }
.blog-empty p + p { margin-top: 10px; font: 400 16px/24px var(--open); color: #333; }
.ptile { position: relative; overflow: hidden; }
.ptile a { display: block; position: relative; color: #fff; text-decoration: none; aspect-ratio: 1; }
.ptile img, .ptile-blank { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #888; }
.ptile-shade { position: absolute; inset: 0; background: rgba(0, 0, 0, .35); transition: background .2s; }
.ptile a:hover .ptile-shade { background: rgba(0, 0, 0, .5); }
.ptile h2 { position: absolute; left: 30px; right: 30px; bottom: 76px; font: 800 26px/31px var(--avenir); color: #fff;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ptile-rule { position: absolute; left: 30px; right: 30px; bottom: 62px; height: 1px; background: rgba(255, 255, 255, .6); }

/* a single post */
.post { border: 1px solid rgba(242, 242, 242, .68); }
.post-meta { font: 400 14px/21px var(--open); color: #333; }
.post h1 { font: 800 40px/50px var(--avenir); color: #333; }
.post-body { font: 400 18px/27px var(--open); color: #333; overflow-wrap: break-word; }
.post-body p.gap { height: 27px; }
.post-body h2, .post-body h3, .post-body h4 { font: 800 24px/1.35 var(--avenir); margin: 8px 0 4px; }
.post-body h3, .post-body h4 { font-size: 20px; }
.post-body ul, .post-body ol { padding-left: 1.3em; margin: 0; }
.post-body a { color: #3c9fd6; }
.post-body a.hashtag { text-decoration: none; }
.post-body figure { margin: 0; }
.post-body figure img { width: 100%; height: auto; }
.post-body .post-video { width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; display: block; }
.post-body .post-embed { width: 100%; height: 161px; border: 0; display: block; }
.post-body blockquote { border-left: 3px solid #3c9fd6; padding-left: 18px; font-style: italic; }
.post-cats { font: 400 14px/21px var(--open); color: #333; }
.post-cats a { color: #333; }
.post-share { list-style: none; margin: 0; padding: 0; display: flex; gap: 30px; align-items: center; border-top: 1px solid rgba(51, 51, 51, .2); border-bottom: 1px solid rgba(51, 51, 51, .2); }
.post-share a, .post-share button { display: block; width: 19px; height: 19px; color: #333; }
.post-share svg { width: 100%; height: 100%; }
.post-share button.copied { color: #3c9fd6; }
.recent { position: relative; }
.recent h2 { font: 400 18px/27px var(--open); color: #333; }
.recent-all { position: absolute; right: 0; top: 0; font: 400 14px/27px var(--open); color: #333; text-decoration: none; }
.recent-list { display: grid; }
.pcard { border: 1px solid rgba(242, 242, 242, .68); background: #fff; }
.pcard-img { display: block; aspect-ratio: 289 / 162; overflow: hidden; background: #888; }
.pcard-img img, .pcard-img .ptile-blank { width: 100%; height: 100%; object-fit: cover; position: static; display: block; }
.pcard h3 { font: 800 18px/22px var(--avenir); color: #333; padding: 24px 24px 60px; }
.pcard h3 a { color: inherit; text-decoration: none; }
.pcard h3 a:hover { color: #3c9fd6; }

@media (min-width: 1000px) {
  .blog-nav { height: 80px; padding-top: 30px; }
  .blog-nav ul { gap: 0 40px; flex-wrap: nowrap; padding-right: 16px; }
  .ptiles { grid-template-columns: repeat(2, 454px); gap: 32px; margin-top: 20px; }
  .pcats { grid-template-columns: repeat(2, 454px); gap: 32px; margin-top: 20px; }
  .pcat { height: 804px; }
  .pcat-body { height: 350px; padding: 62px 30px 0 31px; }
  .pcat h2 { max-height: 62px; overflow: hidden; }
  .pcat p { margin-top: 10px; }
  .pcat-body::after { content: ""; position: absolute; left: 31px; right: 30px; top: 290px; border-top: 1px solid rgba(51, 51, 51, .2); }
  .post { margin-top: 20px; padding: 63px 100px 60px; }
  .post h1 { margin-top: 18px; }
  .post-body { margin-top: 21px; }
  .post-cats { margin-top: 24px; }
  .post-share { margin-top: 26px; height: 66px; padding-top: 0; }
  .recent { margin-top: 60px; }
  .recent-list { grid-template-columns: repeat(3, 291px); gap: 34px; margin-top: 20px; }
}

@media (max-width: 999.98px) {
  .blog-col { padding: 0 14px 30px; }
  .blog-nav { padding: 14px 0; overflow-x: auto; scrollbar-width: none;
    /* fade at the right edge shows there are more categories to swipe to */
    -webkit-mask-image: linear-gradient(to right, #000 85%, transparent); mask-image: linear-gradient(to right, #000 85%, transparent); }
  .blog-nav::-webkit-scrollbar { display: none; }
  .blog-nav ul { flex-wrap: nowrap; gap: 0 22px; white-space: nowrap; }
  .blog-more { margin-left: 0; }
  .blog-more > span { display: none; }
  .blog-more ul, .blog-more:hover ul, .blog-more:focus-within ul { display: flex; position: static; flex-direction: row; box-shadow: none; padding: 0; min-width: 0; gap: 0 22px; background: none; }
  .blog-more ul a { padding: 0; }
  .ptiles { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .pcats { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
  .pcat-body { padding: 16px 18px 20px; }
  .pcat h2 { font-size: 22px; line-height: 1.25; }
  .pcat p { margin-top: 8px; font-size: 15px; line-height: 22px; }
  .ptile h2 { left: 20px; right: 20px; bottom: 52px; font-size: 22px; line-height: 27px; }
  .ptile-rule { left: 20px; right: 20px; bottom: 40px; }
  .post { padding: 22px 16px 26px; border: 0; }
  .post h1 { font-size: 30px; line-height: 1.2; margin-top: 10px; }
  .post-body { margin-top: 16px; font-size: 17px; line-height: 1.6; }
  .post-body p.gap { height: 1em; }
  .post-cats { margin-top: 18px; }
  .post-share { margin-top: 18px; padding: 18px 0; }
  .recent { margin-top: 30px; }
  .recent-list { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; margin-top: 14px; }
  .pcard h3 { padding: 16px 16px 22px; }
}