/* Blog archive, article page and table of contents. */
.zg-blog-archive { background: #ffffff; }
.zg-blog-archive-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 0 34px; padding: 28px 30px; border: 1px solid #f8fbf4; border-radius: 24px; background: #fff; box-shadow: 0 12px 30px rgba(37,49,41,.06); }
.zg-blog-archive-header span { color: var(--zg-primary); font-size: 12px; font-weight: 700; }
.zg-blog-archive-header h1 { margin: 4px 0 0; color: var(--zg-navy); font-size: clamp(27px,3vw,42px); }
.zg-blog-archive-header > p,
.zg-blog-archive-description { max-width: 560px; margin: 0; color: var(--zg-gray-100); font-size: 14px; line-height: 2; }
.zg-blog-archive-description p { margin: 0; }
.zg-blog-archive .zg-post-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 20px; align-items: stretch; }
.zg-blog-archive .zg-post-card { display: flex; min-width: 0; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid #f8fbf4; border-radius: 20px; background: #fff; box-shadow: 0 8px 20px rgba(37,49,41,.07); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; }
.zg-blog-archive .zg-post-card:hover { transform: translateY(-4px); border-color: rgba(130,194,110,.18); box-shadow: 0 16px 34px rgba(37,49,41,.12); }
.zg-blog-archive .zg-post-card-image { position: relative; display: block; height: 190px; aspect-ratio: auto; overflow: hidden; background: #f8fbf4; }
.zg-blog-archive .zg-post-card-image img { width: 100%; height: 100%; object-fit: cover; }
.zg-post-card-category { position: absolute; top: 14px; right: 14px; display: inline-flex; align-items: center; min-height: 27px; padding: 3px 12px; border-radius: 999px; background: rgba(255,255,255,.94); color: var(--zg-gray-100); font-size: 10px; box-shadow: 0 4px 14px rgba(37,49,41,.09); }
.zg-blog-archive .zg-post-card-body { display: flex; min-height: 245px; flex: 1; flex-direction: column; padding: 17px; }
.zg-blog-archive .zg-post-card h2 { display: -webkit-box; min-height: 57px; margin: 0 0 9px; overflow: hidden; color: var(--zg-dark-700); font-size: 16px; line-height: 1.8; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zg-blog-archive .zg-post-card p { display: -webkit-box; min-height: 48px; margin: 0; overflow: hidden; color: var(--zg-gray-100); font-size: 12px; line-height: 1.9; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zg-post-card-footer { margin-top: auto; padding-top: 14px; border-top: 1px solid #f8fbf4; }
.zg-post-card-meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--zg-gray-100); font-size: 10px; }
.zg-post-card-author { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.zg-post-card-author img { width: 25px; height: 25px; border-radius: 50%; }
.zg-post-card-author b { overflow: hidden; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.zg-post-card-meta time { white-space: nowrap; }
.zg-post-card-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 11px; color: var(--zg-primary); font-size: 12px; font-weight: 700; }
.zg-post-card-more .zg-button-icon { width: 23px; height: 23px; }
.navigation.pagination { display: flex; justify-content: center; margin-top: 42px; }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.navigation.pagination .page-numbers { display: grid; min-width: 42px; height: 42px; padding: 0 10px; place-items: center; border: 1px solid #f8fbf4; border-radius: 11px; background: #fff; color: var(--zg-navy); font-size: 12px; box-shadow: 0 6px 15px rgba(37,49,41,.05); }
.navigation.pagination .page-numbers.current,
.navigation.pagination a.page-numbers:hover { border-color: var(--zg-primary); background: var(--zg-primary); color: #fff; }

.zg-blog-single { background: #ffffff; }
.zg-blog-single .zg-single-article { padding: 36px 42px; border: 1px solid #f8fbf4; border-radius: 26px; background: #fff; box-shadow: 0 14px 40px rgba(37,49,41,.075); }
.zg-single-header { text-align: right; }
.zg-single-category { display: inline-flex; margin-bottom: 12px; padding: 5px 13px; border-radius: 999px; background: rgba(130,194,110,.075); color: var(--zg-primary); font-size: 11px; font-weight: 700; }
.zg-single-header h1 { margin: 0 0 18px; color: var(--zg-navy); font-size: clamp(29px,4vw,48px); line-height: 1.55; }
.zg-single-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; color: var(--zg-gray-100); font-size: 12px; }
.zg-single-meta > span:not(.zg-single-author), .zg-single-meta time { position: relative; padding-right: 15px; }
.zg-single-meta > span:not(.zg-single-author)::before, .zg-single-meta time::before { content: ""; position: absolute; top: 50%; right: 0; width: 5px; height: 5px; border-radius: 50%; background: var(--zg-primary); transform: translateY(-50%); }
.zg-single-author { display: inline-flex; align-items: center; gap: 8px; }
.zg-single-author img { width: 34px; height: 34px; border-radius: 50%; }
.zg-single-author b { color: var(--zg-dark-600); font-weight: 600; }
.zg-blog-single .zg-single-thumbnail { margin: 28px 0 24px; border-radius: 22px; box-shadow: none; }
.zg-blog-single .zg-single-thumbnail img { max-height: 600px; object-fit: cover; }
.zg-post-toc { margin: 0 0 30px; overflow: hidden; border: 1px solid #f8fbf4; border-radius: 18px; background: #eef5e8; }
.zg-post-toc summary { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 12px 18px; color: var(--zg-navy); cursor: pointer; list-style: none; font-weight: 700; }
.zg-post-toc summary::-webkit-details-marker { display: none; }
.zg-post-toc summary span { font-size: 15px; }
.zg-post-toc summary small { margin-right: auto; color: var(--zg-gray-100); font-size: 10px; font-weight: 400; }
.zg-post-toc summary i { display: grid; place-items: center; transition: transform .2s ease; }
.zg-post-toc[open] summary i { transform: rotate(180deg); }
.zg-post-toc nav { padding: 0 18px 17px; border-top: 1px solid #f8fbf4; }
.zg-post-toc ol { margin: 13px 0 0; padding: 0 21px 0 0; }
.zg-post-toc li { margin: 8px 0; color: var(--zg-gray-100); font-size: 12px; line-height: 1.8; }
.zg-post-toc li.is-h3 { margin-right: 18px; font-size: 11px; }
.zg-post-toc a:hover { color: var(--zg-primary); }
.zg-blog-single .zg-entry-content { color: var(--zg-dark-600); font-size: 16px; line-height: 2.15; }
.zg-blog-single .zg-entry-content h2,
.zg-blog-single .zg-entry-content h3 { scroll-margin-top: 125px; color: var(--zg-navy); }
.zg-blog-single .zg-entry-content h2 { margin: 48px 0 16px; padding-right: 14px; border-right: 4px solid var(--zg-primary); font-size: 26px; }
.zg-blog-single .zg-entry-content h3 { margin: 34px 0 13px; font-size: 21px; }
.zg-blog-single .zg-entry-content p { margin-bottom: 20px; }
.zg-blog-single .zg-entry-content blockquote { margin: 28px 0; padding: 22px 24px; border-right: 4px solid var(--zg-navy); border-radius: 14px; background: #eef5e8; color: var(--zg-navy); }
.zg-blog-single .post-navigation .nav-links > div { flex: 1; }
.zg-blog-single .post-navigation a { display: flex; min-height: 82px; flex-direction: column; justify-content: center; padding: 14px 17px; border: 1px solid #f8fbf4; border-radius: 15px; background: #fff; }
.zg-blog-single .post-navigation span { color: var(--zg-gray-100); font-size: 10px; }
.zg-blog-single .post-navigation strong { color: var(--zg-navy); font-size: 13px; }

@media (max-width: 1100px) {
  .zg-blog-archive .zg-post-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 820px) {
  .zg-blog-archive-header { display: block; padding: 22px; }
  .zg-blog-archive-header > p, .zg-blog-archive-description { margin-top: 12px; }
  .zg-blog-archive .zg-post-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 14px; }
  .zg-blog-single .zg-single-article { padding: 25px 23px; border-radius: 22px; }
}
@media (max-width: 560px) {
  .zg-blog-archive .zg-post-grid { grid-template-columns: 1fr; }
  .zg-blog-archive .zg-post-card-image { height: 205px; }
  .zg-blog-archive .zg-post-card-body { min-height: 220px; }
  .zg-blog-single .zg-single-article { padding: 19px 15px; border-radius: 18px; }
  .zg-single-header h1 { font-size: 27px; }
  .zg-single-meta { gap: 8px 12px; font-size: 10px; }
  .zg-blog-single .zg-entry-content { font-size: 15px; }
  .zg-blog-single .zg-entry-content h2 { font-size: 22px; }
  .zg-blog-single .zg-entry-content h3 { font-size: 19px; }
  .zg-blog-single .post-navigation .nav-links { flex-direction: column; }
}

/* Full-width article layout, related posts and comments. */
.zg-blog-single > .zg-container { max-width: var(--zg-container); }
.zg-blog-single .zg-single-article { width: 100%; }
.zg-related-posts { margin-top: 42px; }
.zg-related-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.zg-related-heading > div { display: flex; flex-direction: column; }
.zg-related-heading span { color: var(--zg-primary); font-size: 11px; font-weight: 700; }
.zg-related-heading h2 { margin: 4px 0 0; color: var(--zg-navy); font-size: 27px; }
.zg-related-heading > a { display: inline-flex; align-items: center; gap: 8px; color: var(--zg-primary); font-size: 12px; font-weight: 700; }
.zg-related-heading > a .zg-button-icon { width: 27px; height: 27px; }
.zg-related-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; align-items: stretch; }
.zg-related-grid .zg-post-card { display: flex; height: 100%; flex-direction: column; overflow: hidden; border: 1px solid #f8fbf4; border-radius: 19px; background: #fff; box-shadow: 0 9px 24px rgba(37,49,41,.07); }
.zg-related-grid .zg-post-card-image { position: relative; display: block; height: 175px; overflow: hidden; }
.zg-related-grid .zg-post-card-image img { width: 100%; height: 100%; object-fit: cover; }
.zg-related-grid .zg-post-card-body { display: flex; min-height: 230px; flex: 1; flex-direction: column; padding: 15px; }
.zg-related-grid .zg-post-card h2 { display: -webkit-box; min-height: 54px; margin: 0 0 7px; overflow: hidden; font-size: 15px; line-height: 1.8; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.zg-related-grid .zg-post-card p { display: -webkit-box; min-height: 45px; margin: 0; overflow: hidden; color: var(--zg-gray-100); font-size: 11px; line-height: 1.9; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

.zg-comments-area { margin-top: 46px; padding: 30px; border: 1px solid #f8fbf4; border-radius: 24px; background: #fff; box-shadow: 0 14px 38px rgba(37,49,41,.065); }
.zg-comments-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; padding-bottom: 18px; border-bottom: 1px solid #f8fbf4; }
.zg-comments-heading > div { display: flex; flex-direction: column; }
.zg-comments-heading span { color: var(--zg-primary); font-size: 11px; font-weight: 700; }
.zg-comments-heading h2 { margin: 4px 0 0; color: var(--zg-navy); font-size: 26px; }
.zg-comments-heading > a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 15px; border-radius: 10px; background: var(--zg-primary); color: #fff; font-size: 11px; font-weight: 700; box-shadow: var(--zg-red-shadow); }
.zg-comments-area .comment-list { list-style: none; margin: 0; padding: 0; }
.zg-comments-area .comment-list .children { list-style: none; margin: 14px 34px 0 0; padding: 0; }
.zg-comments-area .comment { margin: 0 0 16px; }
.zg-comments-area .comment-body { position: relative; margin: 0; padding: 20px 20px 18px; border: 1px solid #f8fbf4; border-radius: 18px; background: #ffffff; }
.zg-comments-area .comment-author { display: flex; align-items: center; gap: 10px; padding-left: 92px; }
.zg-comments-area .comment-author img { width: 48px; height: 48px; border: 3px solid #fff; border-radius: 50%; box-shadow: 0 5px 14px rgba(37,49,41,.12); }
.zg-comments-area .comment-author .fn { color: var(--zg-navy); font-size: 13px; font-style: normal; font-weight: 700; }
.zg-comments-area .comment-author .says { display: none; }
.zg-comments-area .comment-metadata { position: absolute; top: 22px; left: 20px; color: var(--zg-gray-100); font-size: 9px; }
.zg-comments-area .comment-metadata .edit-link { margin-right: 7px; }
.zg-comments-area .comment-content { margin-top: 14px; color: var(--zg-dark-600); font-size: 13px; line-height: 2; }
.zg-comments-area .comment-content p:last-child { margin-bottom: 0; }
.zg-comments-area .reply { margin-top: 12px; }
.zg-comments-area .reply a { display: inline-flex; min-height: 31px; align-items: center; padding: 0 12px; border: 1px solid rgba(130,194,110,.18); border-radius: 9px; background: #fff; color: var(--zg-primary); font-size: 10px; font-weight: 700; }
.zg-comments-area .comment-respond { margin-top: 30px; padding-top: 24px; border-top: 1px solid #f8fbf4; }
.zg-comments-area .comment-reply-title { margin: 0 0 8px; color: var(--zg-navy); font-size: 23px; }
.zg-comments-area .comment-reply-title small { margin-right: 8px; font-size: 10px; }
.zg-comment-note { margin-bottom: 20px; color: var(--zg-gray-100); font-size: 11px; }
.zg-comment-form { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.zg-comment-form > p { margin: 0; }
.zg-comment-form .comment-form-comment,
.zg-comment-form .comment-form-url,
.zg-comment-form .comment-form-cookies-consent,
.zg-comment-form .form-submit,
.zg-comment-form .logged-in-as { grid-column: 1/-1; }
.zg-comment-form label { display: flex; align-items: center; gap: 5px; margin-bottom: 7px; color: var(--zg-dark-600); font-size: 11px; font-weight: 700; }
.zg-comment-form label small { color: var(--zg-gray-100); font-weight: 400; }
.zg-comment-form input:not([type=checkbox]),
.zg-comment-form textarea { width: 100%; border: 1px solid #f8fbf4; border-radius: 12px; outline: 0; background: #fff; color: var(--zg-dark-700); transition: border-color .18s ease, box-shadow .18s ease; }
.zg-comment-form input:not([type=checkbox]) { height: 48px; padding: 0 13px; }
.zg-comment-form textarea { min-height: 150px; padding: 12px 13px; resize: vertical; }
.zg-comment-form input:focus,
.zg-comment-form textarea:focus { border-color: rgba(130,194,110,.55); box-shadow: 0 0 0 4px rgba(130,194,110,.07); }
.zg-comment-form .comment-form-cookies-consent { display: flex; align-items: center; gap: 8px; }
.zg-comment-form .comment-form-cookies-consent label { margin: 0; font-weight: 400; }
.zg-comment-submit { min-height: 48px; padding: 0 24px; border: 0; border-radius: 12px; background: var(--zg-primary); color: #fff; font-weight: 700; box-shadow: var(--zg-red-shadow); }
.zg-comments-area .navigation.comments-pagination { margin: 20px 0; }

@media (max-width: 1050px) {
  .zg-related-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 720px) {
  .zg-blog-single .zg-single-article { padding: 19px 15px; }
  .zg-related-heading { align-items: center; }
  .zg-related-heading h2 { font-size: 21px; }
  .zg-related-heading > a span { display: none; }
  .zg-related-grid { grid-template-columns: 1fr; gap: 12px; }
  .zg-related-grid .zg-post-card { display: grid; grid-template-columns: 120px minmax(0,1fr); min-height: 148px; }
  .zg-related-grid .zg-post-card-image { height: 100%; min-height: 148px; }
  .zg-related-grid .zg-post-card-body { min-height: 148px; padding: 12px; }
  .zg-related-grid .zg-post-card p,
  .zg-related-grid .zg-post-card-author { display: none; }
  .zg-comments-area { padding: 20px 14px; border-radius: 19px; }
  .zg-comments-heading { align-items: center; }
  .zg-comments-heading h2 { font-size: 20px; }
  .zg-comments-heading > a { min-height: 34px; padding-inline: 11px; }
  .zg-comments-area .comment-body { padding: 16px 13px; }
  .zg-comments-area .comment-author { padding-left: 0; }
  .zg-comments-area .comment-metadata { position: static; margin: 7px 58px 0 0; }
  .zg-comments-area .comment-list .children { margin-right: 16px; }
  .zg-comment-form { grid-template-columns: 1fr; }
  .zg-comment-form > p { grid-column: 1/-1; }
}
