/* Blog: the Resources feed and the post pages (post/<slug>.html), measured from the original's Wix Blog widgets
   (desktop at 1280px; the media query is the Wix mobile layout, a 320px-wide page). */
:root { --ff-title: wfont_d7c576_198f101186bb49d7b079e62cd741f76d, sans-serif; --ff-text: wfont_529f55_499e67b99baf4257872cecc7ddcadabe, Poppins, sans-serif;
  --navy: rgb(12, 26, 66); --card-bd: rgba(232, 230, 230, .75); --rule: rgba(0, 0, 0, .2); }

/* ---------------------------------------------------------------- shared bits: post meta, icons, like heart */
.pm { position: relative; display: flex; align-items: flex-start; height: 37px; margin-bottom: 12px; }
.pm-av { flex: none; width: 32px; height: 32px; margin-top: 2.5px; border-radius: 50%; overflow: hidden; }
.pm-av svg { width: 100%; height: 100%; }
.pm-tx { display: flex; flex-direction: column; margin-left: 10px; font: 12px/19px var(--ff-text); white-space: nowrap; }
.pm-when { display: flex; align-items: center; }
.pm-dot { flex: none; width: 2px; height: 2px; margin: 0 8px; border-radius: 50%; background: currentColor; }
.pm-more { position: absolute; right: -6.5px; top: 9px; width: 19px; height: 19px; }
.pm-more svg, .like svg, .ist .ic svg, .sh svg { display: block; width: 19px; height: 19px; fill: currentColor; }
.like { margin-left: auto; width: 19px; height: 19px; }
.like svg { fill: none; stroke: rgb(232, 74, 67); }
.ist { display: inline-flex; align-items: center; }
.ist .ic { margin-right: 6px; }
.ist + .ist { margin-left: 18px; }

/* ---------------------------------------------------------------- the feed (Resources page) */
.bfeed { padding-top: 20px; }
.bcard { position: relative; width: 1060px; height: 385.5px; margin: 0 auto 32px; border: 1px solid var(--card-bd); background: #fff; color: #000; }
.bc-img { position: absolute; left: -1px; top: -1px; width: 514px; height: 385.5px; overflow: hidden; }
.bc-img img, .bc-img picture { display: block; width: 100%; height: 100%; object-fit: cover; }
.bc-body { position: absolute; left: 512px; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; padding: 24px 36px; }
.bcard.no-img .bc-body { left: 0; }
.bc-t { margin: 1px 0 0; padding-bottom: 12px; font: 18px/normal var(--ff-title); font-weight: 400; }
.bc-t a:hover { color: rgb(1, 191, 202); }
.bc-x { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; font: 16px/24px var(--ff-text); }
.bc-f { display: flex; align-items: flex-start; margin-top: auto; padding-top: 15px; border-top: 1px solid var(--rule); font: 12px/18px var(--ff-text); }
.bc-f .like { margin-top: -.4px; }
.bc-st span + span { margin-left: 16px; }
.bc-ist { display: none; }

/* ---------------------------------------------------------------- post page */
.post-sec { background: #fff; }
.post-page { width: 980px; margin: 0 auto; padding: 0 20px 21px; color: #000; }
.post-bar { display: flex; align-items: center; height: 80px; font: 14px/19.6px var(--ff-text); }
.post-bar .m-bar { display: none; }
.post { margin-top: 20px; border: 1px solid var(--card-bd); background: #fff; padding: 60px 99px; }
.pm-post { height: 32px; margin: 0; }
.pm-post .pm-av { margin-top: 0; }
.pm-post .pm-tx { flex-direction: row; align-items: center; margin: 5.5px 0 0 12px; font-size: 14px; line-height: 21px; }
.pm-post .pm-when::before { content: ""; width: 2px; height: 2px; margin: 0 6.6px; border-radius: 50%; background: currentColor; }
.pm-post .pm-dot { margin: 0 6.6px; }
.pm-post .pm-more { right: -4.5px; top: 6.5px; }
/* posts by a member without a public profile: no avatar or name, the row is the height of the "more" button */
.pm-post.no-author { height: 24px; }
.pm-post.no-author .pm-tx { margin: 1.5px 0 0; }
.pm-post.no-author .pm-when::before { display: none; }
.pm-post.no-author .pm-more { top: 2.5px; }
.post-title { margin: 18px 0 20px; font: 30px/37px var(--ff-title); font-weight: 400; color: var(--navy); }
.post-body { display: flow-root; font: 18px/27px var(--ff-text); }
.post-body .rp, .post-body .rh { margin: 0; white-space: break-spaces; overflow-wrap: break-word; }
.post-body .rh { font: 28px/39.2px var(--ff-title); font-weight: 400; color: var(--navy); }
.post-body .rh > span { display: block; }
/* Wix Ricos headings keep a minimum height (h2 36px), which shows on one-line mobile headings */
.post-body h1.rh { min-height: 42px; }
.post-body h2.rh { min-height: 36px; }
.post-body h3.rh { min-height: 30px; }
.post-body .fsz { font-size: var(--fs); }
.post-body a { text-decoration: underline; }
.post-body strong { font-weight: 700; }
.rimg { width: var(--w); max-width: 100%; margin: 0 auto; }
.post-body > .rimg:first-child { margin-top: 14px; }
.rimg img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar); }
.post-foot { margin-top: 20px; }
.pf-share { display: flex; height: 66px; padding-top: 23px; border-top: 1px solid var(--rule); }
.sh { display: block; width: 19px; height: 19px; padding: 0; border: 0; background: none; color: #000; cursor: pointer; }
.sh + .sh { margin-left: 30px; }
.pf-stats { display: flex; align-items: flex-start; height: 40px; padding-top: 18px; border-top: 1px solid var(--rule); font: 14px/21px var(--ff-text); }
.pf-stats .bc-st span + span { margin-left: 22px; }
.pf-stats .like { margin-top: 1px; }
.recent { margin-top: 30px; }
.recent-head { display: flex; justify-content: space-between; height: 27px; }
.recent-head h2 { margin: 0; font: 18px/27px var(--ff-text); font-weight: 400; }
.recent-head a { font: 14px/21px var(--ff-text); }
.recent-track { display: grid; grid-template-columns: repeat(3, 290.7px); justify-content: space-between; margin-top: 20px; }
.rcard { height: 313.5px; border: 1px solid var(--card-bd); background: #fff; }
.rc-img { display: block; height: 162.4px; overflow: hidden; }
.rc-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rc-body { padding: 24px 24px 0; }
.rc-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; height: 68px; margin: 0; font: 18px/normal var(--ff-title); font-weight: 400; color: var(--navy); }
.rc-f { display: flex; align-items: center; height: 34px; padding-top: 15px; border-top: 1px solid var(--rule); font: 12px/18px var(--ff-text); }
.recent-dots, .rcard.clone { display: none; }
.comments { margin-top: 30px; border: 1px solid var(--card-bd); background: #fff; padding: 60px 99px 68px; }
.comments h2 { margin: 4px 0 0; font: 16px/16px var(--ff-title); font-weight: 400; }
.comments hr { height: 0; margin: 20px 0 0; border: 0; border-bottom: 1px solid var(--rule); }
.comments .cbox { height: 58px; margin-top: 36px; padding: 16px; border: 1px solid rgba(0, 0, 0, .3); font: 16px/24px var(--ff-text); }

@media (max-width: 750px) {
  /* feed: square photo cards with the text over a dark veil */
  .bfeed { padding-top: 0; }
  .bcard { width: 320px; height: 320px; margin: 0 0 12px; border: 0; background: #000; color: #fff; }
  .bc-img { left: 0; top: 0; width: 320px; height: 320px; }
  .bc-body { left: 0; padding: 24px 18px; background: rgba(0, 0, 0, .55); }
  .bcard .pm-av { display: none; }
  .bcard .pm-tx { margin-left: 0; }
  .bcard .pm { margin-bottom: 0; }
  .bc-t { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: auto 0 16px; padding: 0; font-size: 14px; line-height: 22px; }
  .bc-x, .bc-st { display: none; }
  .bc-ist { display: flex; }
  .bc-f { border-top-color: rgba(255, 255, 255, .2); margin-top: 0; }
  .bc-ist .ist span:last-child { margin-top: 1px; }

  /* post page */
  .post-page { width: auto; padding: 0 0 1px; }
  .post-bar { height: 50px; padding: 0 18px; background: rgb(1, 191, 202); color: #fff; font-size: 14px; line-height: 20px; }
  .post-bar .m-bar { display: block; }
  .post { margin-top: 0; border: 0; padding: 32px 18px; }
  .pm-post { height: 36px; }
  .pm-post .pm-av { margin-top: 2px; }
  .pm-post .pm-tx { flex-direction: column; align-items: flex-start; margin: 0 0 0 12px; font-size: 12px; line-height: 18px; }
  .pm-post .pm-when::before { display: none; }
  .pm-post .pm-dot { margin: 0 6.4px; }
  .pm-post .pm-more { right: -4.5px; top: 8.5px; }
  .pm-post.no-author { height: 24px; }
  .pm-post.no-author .pm-tx { margin: 3px 0 0; }
  .pm-post.no-author .pm-more { top: 2.5px; }
  .post-title { margin: 8px 0 20px; font-size: 16px; line-height: 20px; }
  .post-body { font-size: 14px; line-height: 21px; }
  .post-body .rh { font-size: 16px; line-height: 20px; }
  .rimg { max-width: 284px; }
  .pf-stats { padding-top: 19px; font-size: 14px; }
  .pf-stats .bc-st { display: none; }
  .pf-stats .bc-ist { display: flex; }
  .pf-stats .ist + .ist { margin-left: 22px; }
  .pf-stats .like { margin-top: 0; }
  .recent-head { padding: 0 18px; }
  .recent-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 36px; scrollbar-width: none; }
  .recent-track::-webkit-scrollbar { display: none; }
  .rcard, .rcard.clone { display: block; flex: none; width: 248px; height: 287.5px; border: 0; scroll-snap-align: center; }
  .rc-img { height: 140px; }
  .rc-body { padding: 24px 24px 0; }
  .recent-dots { display: flex; justify-content: center; gap: 6px; margin-top: 18px; }
  .recent-dots span { width: 6px; height: 6px; border-radius: 50%; background: #000; opacity: .2; }
  .recent-dots span.on { background: rgb(1, 191, 202); opacity: 1; }
  .comments { margin-top: 48px; border: 0; padding: 0 0 34px; }
  .comments::before { content: ""; display: block; border-bottom: 1px solid var(--rule); }
  .comments h2 { margin: 21px 20px 0; font-size: 14px; line-height: 14px; }
  .comments hr { margin-top: 21px; }
  .comments .cbox { height: 58px; margin: 20px 20px 0; padding: 17.5px 16px; font-size: 14px; line-height: 21px; }
}