/*
 * Blog: post lists (/blog/ and the two category pages), post pages, the "Subscribe to Our
 * Mailing List" block and its popup. Positions follow the original at 1440/1920 (desktop),
 * 820 (tablet, up to 1000px) and 390 (mobile, up to 750px).
 */

/* ---------- Subscribe block + popup ---------- */
.subscribe { position: relative; z-index: 1; }
.subscribe__title {
  --fs-min: 16;
  --fs-max: 35;
  font-size: calc(var(--fs-min) * 1px + (var(--fs-max) - var(--fs-min)) *
    (clamp(320px, 100vw, 1920px) - 320px) / 1600);
  width: 33.5vw;
  font-weight: 400;
  line-height: normal;
  color: var(--yellow);
}
.subscribe__open {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 137px;
  height: 46px;
  margin-top: 21px;
  border: 0;
  border-radius: 24px;
  background: var(--yellow);
  color: var(--black);
  font: 700 16px/1.4 "Poppins", var(--ff);
  cursor: pointer;
  transition: background-color .2s ease;
}
.subscribe__open:hover { background: #fff; }

.subscribe-dialog {
  width: 459px;
  max-width: calc(100vw - 40px);
  padding: 15px 23px 18px;
  border: 0;
  background: var(--white);
  color: var(--black);
}
.subscribe-dialog::backdrop { background: rgba(0, 0, 0, .69); }
.subscribe-dialog__close {
  position: absolute;
  top: 20px;
  right: 20px;
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--black);
  cursor: pointer;
}
.subscribe-dialog__form {
  display: grid;
  grid-template-columns: 250px 104px;
  gap: 0 29px;
  align-items: center;
  margin-top: 0;
  padding-top: 15px;
}
.subscribe-dialog__form input {
  height: 40px;
  padding: 0 12px;
  border: 1px solid #c7c7c7;
  background: transparent;
  color: var(--black);
  font: 300 14px/1.4 var(--ff);
}
.subscribe-dialog__form input::placeholder { color: #000; opacity: .6; }
.subscribe-dialog__form button[type="submit"] {
  justify-content: center;
  height: 42px;
  border: 0;
  background: var(--black);
  color: var(--white);
  font: 400 16px/1.4 var(--ff);
  cursor: pointer;
}
.subscribe-dialog__form button[type="submit"]:hover { background: #323232; }
.subscribe-dialog__status { grid-column: 1 / -1; min-height: 20px; padding-top: 8px; font-size: 14px; }
.subscribe-dialog__status.is-error { color: #c00000; }

@media (max-width: 750px) {
  .subscribe-dialog { width: 335px; padding: 15px 17px 18px; }
  .subscribe-dialog__form { grid-template-columns: 182px 76px; gap: 0 13px; }
}

/* ---------- Post lists ---------- */
.blog {
  position: relative;
  padding: 640px 0 263px;
  background: var(--black);
}
.blog__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.blog__feed, .blog__monthly, .blog .subscribe { position: relative; z-index: 1; }
.blog .blog__monthly {
  position: absolute;
  top: 249px;
  left: 51.2%;
  width: 39.5%;
}
.blog__monthly-title {
  font-family: var(--ff-regular);
  font-size: calc(17px + 40 * (clamp(320px, 100vw, 1920px) - 320px) / 1600);
  font-weight: 400;
  line-height: 1;
  color: var(--yellow);
}
.blog__monthly-link { display: block; width: 31.4vw; margin: 53px 0 0 5px; }
.blog__monthly-link h2 { font-family: var(--ff-regular); font-size: 26px; font-weight: 400; line-height: normal; color: var(--white); }
.blog__monthly-link:hover h2 { color: var(--yellow); }

.blog__feed {
  width: 65.4%;
  margin: 0 auto;
  padding: 0 20px 20px;
}
.blog__feed > * { max-width: 1060px; margin-left: auto; margin-right: auto; }
.blog__cats { height: 80px; padding-top: 19px; }
.blog__cats-list { display: flex; gap: 40px; }
.blog__cats-menu { display: none; }
.blog__cats a { font-size: 35px; line-height: 43px; color: var(--white); }
.blog__cats a.is-active { color: var(--yellow); }
.blog__cats a:hover { color: var(--blue); }
.blog__cats-list li:first-child a, .blog__cats-menu li:first-child a { white-space: nowrap; }

.post-card {
  display: grid;
  grid-template-columns: 22.73% 1fr;
  margin-top: 20px;
}
.post-card + .post-card { margin-top: 40px; }
.post-card__media { display: block; }
.post-card__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.post-card__img--missing { background: transparent; outline: 1px solid rgba(255, 255, 255, .25); outline-offset: -1px; }
.post-card__body { padding: 24px 35px 0; min-width: 0; }
.post-card__meta { display: flex; flex-wrap: wrap; font-size: 12px; line-height: normal; color: var(--white); }
.post-card__author-line { flex-basis: 100%; margin-bottom: 2px; }
.post-card__author-line .dot { display: none; }
.dot { display: inline-block; width: 2px; height: 2px; margin: 0 8px; border-radius: 50%; background: currentColor; }
.post-card__title { font-size: 25px; font-weight: 400; line-height: normal; color: var(--yellow); }
.post-card__link { display: block; margin-top: 13px; }
.post-card__link:hover .post-card__title { text-decoration: underline; }
.post-card__excerpt { display: none; }

/* category pages: white list with bordered cards */
.blog__feed--white { background: var(--white); }
.blog__feed--white .post-card { grid-template-columns: 24.4% 1fr; border: 1px solid rgba(232, 230, 230, .75); }
.blog__feed--white .post-card + .post-card { margin-top: 19px; }
.blog__feed--white .post-card__body { padding: 25px 36px 0; }
.blog__feed--white .post-card__meta, .blog__feed--white .post-card__title { color: var(--black); }
.blog__feed--white .post-card__link { margin-top: 14px; }
.blog__feed--white .post-card__title { font-size: 28px; }
.blog__feed--white .post-card__img--missing { outline-color: rgba(0, 0, 0, .15); }

.blog .subscribe { margin: 272px 0 0 19.44%; }

@media (max-width: 1000px) {
  .blog { padding: 475px 0 309px; }
  .blog .blog__monthly { top: 160px; left: 25.6%; width: 67%; }
  .blog__monthly-title { font-size: 4.975vw; }
  .blog__monthly-link { width: 54.6vw; margin: 53px 0 0 -3px; }
  .blog__feed { width: 88.3%; }
  .post-card { grid-template-columns: 21.64% 1fr; }
  .blog__feed--white .post-card { grid-template-columns: 24% 1fr; }
  .post-card__body { padding-top: 24px; }
  .blog .subscribe { margin: 30px 0 0 6.1%; }
  .subscribe__title { width: 46.5vw; font-size: 2.675vw; }
  .post-page .subscribe__title { width: 74.4vw; }
  .subscribe__open { width: 191px; }
}

@media (max-width: 750px) {
  .blog { padding: 351px 0 52px; }
  .blog .blog__monthly { top: 134px; left: 14.4%; width: 70.5%; }
  .blog__monthly-title { width: min-content; font-size: 7.072vw; }
  .blog__monthly-link { width: 70.3vw; margin: 37px 0 0 1px; }
  .blog__monthly-link h2 { font-size: 20px; }
  .blog__feed { width: 94.6%; padding: 0; }
  .blog__cats { height: 65px; padding: 11px 18px 0; }
  .blog__cats-list { display: none; }
  .blog__cats-menu { display: block; position: relative; }
  .blog__cats-menu summary { font-size: 35px; line-height: 43px; color: var(--white); cursor: pointer; list-style: none; }
  .blog__cats-menu summary::-webkit-details-marker { display: none; }
  .blog__cats-menu summary::after {
    content: "";
    display: inline-block;
    width: 10px;
    height: 10px;
    margin: 0 0 8px 14px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  .blog__cats-menu ul {
    position: absolute;
    z-index: 2;
    top: 100%;
    left: 0;
    min-width: 240px;
    padding: 10px 18px;
    background: var(--black);
    border: 1px solid rgba(255, 255, 255, .3);
  }
  .blog__cats-menu a { font-size: 20px; line-height: 2; }

  .post-card,
  .post-card + .post-card {
    grid-template-columns: 70px 1fr;
    column-gap: 16px;
    margin: 0 18px;
    padding: 16px 0 0;
    min-height: 147px;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
  }
  .post-card__img { width: 70px; height: 70px; aspect-ratio: 1; }
  .post-card__body { display: flex; flex-direction: column; padding: 0; }
  .post-card__link { order: 1; margin: 0; }
  .post-card__title { font-size: 16px; line-height: 1.3; }
  .post-card__meta { order: 2; margin-top: 18px; }
  .post-card__author-line { display: none; }

  .blog__feed--white { background: transparent; }
  .blog__feed--white .post-card,
  .blog__feed--white .post-card + .post-card {
    display: block;
    margin: 0;
    padding: 0 18px 42px;
    border: 0;
    border-bottom: 1px solid rgba(0, 0, 0, .2);
    background: var(--white);
    background-clip: padding-box;
  }
  .blog__feed--white .post-card + .post-card { padding-top: 30px; }
  .blog__feed--white .post-card__media { margin: 0 -18px; }
  .blog__feed--white .post-card__img { width: 100%; height: auto; aspect-ratio: 4 / 3; }
  .blog__feed--white .post-card__body { padding: 0; }
  .blog__feed--white .post-card__meta { order: 0; margin-top: 39px; }
  .blog__feed--white .post-card__link { order: 1; margin-top: 27px; }
  .blog__feed--white .post-card__title { font-size: 16px; line-height: 1.4; }
  .blog__feed--white .post-card__excerpt {
    display: -webkit-box;
    order: 2;
    margin-top: 9px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--black);
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
  }
  .blog .subscribe { margin: 82px 0 0 4.36%; }
  .subscribe__title { width: 79.2vw; font-size: 5.557vw; }
  .post-page .subscribe__title { width: 76.9vw; }
  .post-card__title { display: inline; }
  .subscribe__open { width: 97px; }
}

/* ---------- Post pages ---------- */
.post-page {
  display: flex;
  flex-direction: column;
  min-height: 4468px;
  padding: 80px 0 38px;
  background: var(--black);
}
.post-layout { position: relative; }
.post {
  width: 911px;
  max-width: calc(100% - 40px);
  margin-left: max(20px, calc(50% - 493px));
  padding: 20px;
  background: var(--white);
  color: var(--black);
}
.post__head, .post__body, .post__foot { padding: 0 66px; }
.post__head { padding-top: 63px; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; line-height: 21px; }
.post__meta .dot { margin: 0 6.5px; }
.post__title { margin-top: 19px; font-size: 37px; font-weight: 700; line-height: 46px; color: var(--yellow); overflow-wrap: break-word; }
.post__updated { margin-top: 18px; font-size: 14px; line-height: 21px; }
.post__updated time { margin-left: 3px; }
.post__body { margin-top: 19px; display: flow-root; }
.post__foot { margin-top: 22px; }
.post__tags { display: flex; flex-wrap: wrap; gap: 8px 13px; margin-bottom: 28px; font-size: 14px; line-height: 17px; color: var(--white); }
.post__cats { display: flex; flex-wrap: wrap; gap: 8px 16px; padding-bottom: 22px; border-bottom: 1px solid var(--black); }
.post__cats a { font-size: 14px; line-height: 21px; color: var(--black); }
.post__cats a:hover { color: var(--yellow); }
.post::after { content: ""; display: block; height: 44px; }

/* Article content (converted Wix rich content) */
.rich { font-size: 18px; line-height: 27px; overflow-wrap: break-word; }
.rich p, .rich h2, .rich h3, .rich h4 { min-height: 27px; }
.rich p:empty { min-height: 27px; }
.rich h2, .rich h3, .rich h4 { font-weight: 400; color: var(--blue); }
/* The original renders rich text with pre-wrap: line breaks inside paragraphs are kept. */
.rich p, .rich li, .rich h2, .rich h3, .rich h4 { white-space: pre-wrap; }
.rich h2 { font-size: 28px; line-height: 1.2em; }
.rich h3 { font-size: 20px; line-height: 1.5em; }
.rich h4 { font-size: 20px; line-height: 1.25em; }
.rich a { color: var(--yellow); text-decoration: underline; }
.rich a:hover { color: var(--blue); }
.rich .al-center { text-align: center; }
.rich .al-right { text-align: right; }
.rich .al-justify { text-align: justify; }
.rich ul, .rich ol { margin: 0; padding-left: 32px; }
.rich ul { list-style: disc; }
.rich ol { list-style: decimal; }
.rich li { padding-left: 4px; }
.rich * + blockquote { margin-top: 15px; }
.rich blockquote {
  margin: 0 0 44px;
  padding: 8px 0 8px 18px;
  border-left: 3px solid var(--yellow);
  font-size: 24px;
  line-height: 1.25em;
}
.rich blockquote span { line-height: 1; }
.rich blockquote + blockquote { margin-top: 0; }
.rich blockquote p { min-height: 0; }
.rich hr { border: 0; border-top: 1px solid rgba(0, 0, 0, .2); margin: 20px 0; }
.figure { margin: 0 0 15px; }
.figure img, .figure__missing { display: block; width: 100%; height: auto; }
.figure__missing { border: 1px solid #c7c7c7; }
.figure--half { width: calc(50% - 20px); }
.figure[style] { width: min(100%, var(--w)); }
.figure--left { float: left; margin-right: 40px; }
.figure--right { float: right; margin-left: 40px; }
.figure figcaption { margin-top: 8px; font-size: 14px; line-height: 1.5; text-align: center; }

/* Recent posts: yellow cards right of the article */
.recent {
  position: absolute;
  top: 86px;
  right: 2.25vw;
  width: 18.4vw;
}
.recent__list { display: grid; gap: 10px; }
.recent__card {
  display: block;
  aspect-ratio: 4 / 1;
  min-height: 0;
  overflow: hidden;
  padding: 12px 16px 0;
  background: var(--yellow);
  color: var(--black);
  transition: background-color .2s ease;
}
.recent__card:hover { background: #ecd36d; }
.recent__title { font-size: 14px; font-weight: 400; line-height: 19.6px; }
.recent__date { display: inline-block; margin-top: 17px; font-size: 12px; line-height: normal; }

.post-page .subscribe { margin: auto 0 0 22.5%; padding-top: 29px; }

@media (max-width: 1000px) {
  .post-page { min-height: 0; padding: 133px 0 60px; }
  .post { width: 80%; max-width: none; margin: 0 auto; }
  .post__head, .post__body, .post__foot { padding: 0 18px; }
  .post__head { padding-top: 32px; }
  .post__author-line { flex-basis: 100%; }
  .post__author-line .dot { display: none; }
  .post__title { margin-top: 18px; }
  .recent { position: static; width: 80%; margin: 49px auto 0; }
  .recent__list { grid-template-columns: 1fr 1fr; }
  .post-page .subscribe { margin: 40px 0 0 10.1%; padding: 0; }
}

@media (max-width: 750px) {
  .post-page { padding: 103px 0 60px; }
  .post { width: 91.3%; padding: 0; }
  .post__head { padding-top: 31px; }
  .post__meta { font-size: 12px; line-height: 18px; }
  .post__title { margin-top: 9px; font-size: 26px; line-height: 36.4px; }
  .post__updated { margin-top: 9px; }
  .rich { font-size: 16px; line-height: 24px; }
  .rich p { min-height: 24px; }
  .rich blockquote { margin-left: -18px; margin-right: -2px; }
  .rich blockquote { font-size: 20px; line-height: 30px; }
  .rich h2 { font-size: 24px; }
  .rich h3, .rich h4 { font-size: 18px; }
  .rich ul, .rich ol { padding-left: 28px; }
  .figure--half, .figure[style] { float: none; width: 100%; margin: 0; }
  .recent { width: 80%; margin-top: 60px; }
  .recent__list { grid-template-columns: 1fr; }
  .post-page .subscribe { margin-left: 11.5%; }
}