.zhtc-blog-grid { --zhtc-ink: #17202b; --zhtc-blue: #084f9b; --zhtc-sky: #eaf4ff; --zhtc-line: #d9e1e9; --zhtc-text: #536170; width: min(100% - 40px, 1240px); margin: 0 auto; padding: clamp(56px, 8vw, 112px) 0; color: var(--zhtc-ink); font-family: inherit; }
.zhtc-blog-grid *, .zhtc-blog-grid *::before, .zhtc-blog-grid *::after { box-sizing: border-box; }
.zhtc-blog-grid__header { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(250px, .7fr); gap: 36px; align-items: end; margin-bottom: 38px; padding-bottom: 28px; border-bottom: 1px solid var(--zhtc-line); }
.zhtc-blog-grid__eyebrow { margin: 0 0 9px; color: var(--zhtc-blue); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.zhtc-blog-grid__title { margin: 0; color: var(--zhtc-ink); font-size: clamp(2.3rem, 5vw, 4.8rem); font-weight: 800; letter-spacing: -.055em; line-height: .98; }
.zhtc-blog-grid__intro { max-width: 440px; margin: 0 0 2px auto; color: var(--zhtc-text); font-size: 1.06rem; line-height: 1.65; }
.zhtc-blog-grid__filters { display: flex; gap: 9px; overflow-x: auto; margin: 0 0 32px; padding: 0 1px 8px; scrollbar-width: thin; }
.zhtc-blog-grid__filter { flex: 0 0 auto; border: 1px solid var(--zhtc-line); border-radius: 999px; padding: 10px 16px; background: #fff; color: var(--zhtc-ink); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; transition: background .18s ease, color .18s ease, border-color .18s ease; }
.zhtc-blog-grid__filter:hover, .zhtc-blog-grid__filter:focus-visible, .zhtc-blog-grid__filter.is-active { border-color: var(--zhtc-blue); background: var(--zhtc-blue); color: #fff; }
.zhtc-blog-grid__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 2.2vw, 28px); }
/* Some page builders add clearfix pseudo-elements to every grid container. In a CSS grid,
   those become a visible first grid item. Explicitly remove them for this isolated component. */
.zhtc-blog-grid__grid::before, .zhtc-blog-grid__grid::after { display: none !important; content: none !important; }
/* Avada injects this empty modal trigger directly into content blocks. It must never become a grid item. */
.zhtc-blog-grid__grid > .fusion-modal-text-link { display: none !important; }
.zhtc-blog-grid__card { display: flex; min-width: 0; flex-direction: column; overflow: hidden; border: 1px solid var(--zhtc-line); border-radius: 14px; background: #fff; box-shadow: 0 4px 14px rgba(23,32,43,.035); transition: box-shadow .2s ease, transform .2s ease; }
.zhtc-blog-grid__card:hover { box-shadow: 0 17px 38px rgba(23,32,43,.13); transform: translateY(-4px); }
.zhtc-blog-grid__card[hidden] { display: none; }
.zhtc-blog-grid__image-link { display: block; overflow: hidden; background: var(--zhtc-sky); }
.zhtc-blog-grid__image { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .45s ease; }
.zhtc-blog-grid__card:hover .zhtc-blog-grid__image { transform: scale(1.035); }
.zhtc-blog-grid__placeholder { display: grid; width: 100%; aspect-ratio: 16 / 10; place-items: center; background: linear-gradient(135deg, #063b76, #0d67bd); color: #fff; font-size: clamp(2rem, 4vw, 3.4rem); font-weight: 900; letter-spacing: -.08em; }
.zhtc-blog-grid__content { display: flex; flex: 1; flex-direction: column; padding: 24px; }
.zhtc-blog-grid__meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; color: var(--zhtc-blue); font-size: .7rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.zhtc-blog-grid__meta span + span { color: #7a8794; }
.zhtc-blog-grid__meta span + span::before { display: inline-block; width: 3px; height: 3px; margin: 0 8px 2px 0; border-radius: 50%; background: #a7b4c0; content: ''; }
.zhtc-blog-grid__card-title { margin: 0 0 12px; color: var(--zhtc-ink); font-size: clamp(1.25rem, 2vw, 1.58rem); font-weight: 800; letter-spacing: -.028em; line-height: 1.16; }
.zhtc-blog-grid__card-title a { color: inherit; text-decoration: none; }
.zhtc-blog-grid__excerpt { display: -webkit-box; overflow: hidden; margin: 0 0 23px; color: var(--zhtc-text); font-size: .95rem; line-height: 1.6; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.zhtc-blog-grid__read-more { display: inline-flex; gap: 8px; align-items: center; width: fit-content; margin-top: auto; color: var(--zhtc-blue); font-size: .84rem; font-weight: 800; text-decoration: none; }
.zhtc-blog-grid__read-more span { font-size: 1.1rem; transition: transform .18s ease; }.zhtc-blog-grid__read-more:hover span { transform: translateX(3px); }
.zhtc-blog-grid__empty { margin: 0; padding: 38px 0; border-top: 1px solid var(--zhtc-line); color: var(--zhtc-text); }
.zhtc-blog-grid a:focus-visible, .zhtc-blog-grid__filter:focus-visible { outline: 3px solid rgba(8,79,155,.3); outline-offset: 3px; }
@media (max-width: 860px) { .zhtc-blog-grid__header { grid-template-columns: 1fr; gap: 16px; }.zhtc-blog-grid__intro { margin-left: 0; }.zhtc-blog-grid__grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 580px) { .zhtc-blog-grid { width: min(100% - 28px, 1240px); }.zhtc-blog-grid__grid { grid-template-columns: 1fr; }.zhtc-blog-grid__content { padding: 22px; } }
@media (prefers-reduced-motion: reduce) { .zhtc-blog-grid *, .zhtc-blog-grid *::before, .zhtc-blog-grid *::after { transition-duration: .01ms !important; } }