.elementor-15710 .elementor-element.elementor-element-96e76d2 > .elementor-widget-container{padding:0px 0px 120px 0px;}.elementor-15710 .elementor-element.elementor-element-96e76d2 .elementor-loop-container{grid-auto-rows:1fr;}.elementor-15710 .elementor-element.elementor-element-96e76d2 .e-loop-item > .elementor-section, .elementor-15710 .elementor-element.elementor-element-96e76d2 .e-loop-item > .elementor-section > .elementor-container, .elementor-15710 .elementor-element.elementor-element-96e76d2 .e-loop-item > .e-con, .elementor-15710 .elementor-element.elementor-element-96e76d2 .e-loop-item .elementor-section-wrap  > .e-con{height:100%;}.elementor-15710 .elementor-element.elementor-element-96e76d2 .elementor-pagination{text-align:center;}body:not(.rtl) .elementor-15710 .elementor-element.elementor-element-96e76d2 .elementor-pagination .page-numbers:not(:first-child){margin-left:calc( 10px/2 );}body:not(.rtl) .elementor-15710 .elementor-element.elementor-element-96e76d2 .elementor-pagination .page-numbers:not(:last-child){margin-right:calc( 10px/2 );}body.rtl .elementor-15710 .elementor-element.elementor-element-96e76d2 .elementor-pagination .page-numbers:not(:first-child){margin-right:calc( 10px/2 );}body.rtl .elementor-15710 .elementor-element.elementor-element-96e76d2 .elementor-pagination .page-numbers:not(:last-child){margin-left:calc( 10px/2 );}:root{--page-title-display:none;}.elementor-widget .tippy-tooltip .tippy-content{text-align:center;}@media(max-width:1024px){.elementor-15710 .elementor-element.elementor-element-96e76d2{--grid-columns:2;}}@media(max-width:767px){.elementor-15710 .elementor-element.elementor-element-96e76d2{--grid-columns:1;}}/* Start custom CSS *//*
  HONGKAI Blog Knowledge Center — Section 05, dynamic route
  Use this file INSTEAD of the card CSS inside section-05-latest-articles-html-widget.html
  when the article list is an Elementor Pro Loop Grid, so dates, read time, author and
  pagination come from the real WordPress post objects.

  Setup
  1. Wrap the Loop Grid in a Container with CSS Class: hkblog-loop
  2. Loop item template Container CSS Class: hkblog-loop__card
  3. Inside the loop item, give the widgets these CSS Classes:
       Featured Image      -> hkblog-loop__media
       Post Terms / Meta   -> hkblog-loop__category
       Post Title (h3)     -> hkblog-loop__title
       Post Excerpt        -> hkblog-loop__excerpt
       Post Info (date/    -> hkblog-loop__meta
         read time/author)
       Related solution    -> hkblog-loop__related
       Read arrow button   -> hkblog-loop__read
  4. Load this file from the page template Custom CSS or Site Settings -> Custom CSS.

  Everything is scoped to .hkblog-loop. Do not widen these body.elementor-page-15710s to .elementor *.
*/

.hkblog-loop {
  --hkblog-loop-ink: #172033;
  --hkblog-loop-muted: #667085;
  --hkblog-loop-blue: #1677c8;
  --hkblog-loop-blue-dark: #0f5d9e;
  --hkblog-loop-line: #dce3ea;
  --hkblog-loop-light: #f5f7fa;
  background: var(--hkblog-loop-light);
  font-family: "Roboto", Arial, sans-serif;
}

/* ---------- Grid ---------- */

.hkblog-loop .elementor-loop-container {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 22px !important;
}

/* ---------- Card shell ---------- */

.hkblog-loop .hkblog-loop__card {
  display: flex !important;
  min-width: 0;
  min-height: 100%;
  flex-direction: column !important;
  gap: 0 !important;
  overflow: hidden;
  padding: 0 !important;
  background: #ffffff;
  border: 1px solid var(--hkblog-loop-line);
  border-radius: 10px;
  transition: border-color 180ms ease, transform 180ms ease;
}

.hkblog-loop .hkblog-loop__card:hover {
  border-color: #99b8d0;
  transform: translateY(-2px);
}

/* ---------- Featured image ---------- */

.hkblog-loop .hkblog-loop__media,
.hkblog-loop .hkblog-loop__media .elementor-widget-container,
.hkblog-loop .hkblog-loop__media figure,
.hkblog-loop .hkblog-loop__media a {
  display: block;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}

.hkblog-loop .hkblog-loop__media {
  height: 214px;
  overflow: hidden;
  background: #eef2f6;
  border-bottom: 1px solid var(--hkblog-loop-line);
}

.hkblog-loop .hkblog-loop__media img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  border-radius: 0 !important;
  object-fit: cover;
}

/* Portrait or diagram-style featured images: add hkblog-loop__media--contain */
.hkblog-loop .hkblog-loop__media--contain img {
  padding: 18px;
  object-fit: contain;
}

/* ---------- Text block ---------- */

.hkblog-loop .hkblog-loop__card > .e-con-inner,
.hkblog-loop .hkblog-loop__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0;
  padding: 24px;
}

.hkblog-loop .hkblog-loop__category,
.hkblog-loop .hkblog-loop__category a {
  margin: 0 0 14px !important;
  color: var(--hkblog-loop-blue) !important;
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace !important;
  font-size: 0.76rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase;
}

.hkblog-loop .hkblog-loop__title,
.hkblog-loop .hkblog-loop__title a {
  margin: 0 0 10px !important;
  color: var(--hkblog-loop-ink) !important;
  font-size: 1.35rem !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
  letter-spacing: -0.02em !important;
}

.hkblog-loop .hkblog-loop__title a:hover {
  color: var(--hkblog-loop-blue) !important;
}

.hkblog-loop .hkblog-loop__excerpt {
  margin: 0 !important;
  color: var(--hkblog-loop-muted) !important;
  font-size: 0.9rem !important;
  line-height: 1.6 !important;
}

/* ---------- Post meta: real WordPress modified date, read time, author ---------- */

.hkblog-loop .hkblog-loop__meta {
  margin-top: auto !important;
  padding-top: 14px;
  color: var(--hkblog-loop-muted) !important;
  font-size: 0.68rem !important;
}

.hkblog-loop .hkblog-loop__meta .elementor-post-info__item {
  color: inherit !important;
  font-size: inherit !important;
}

.hkblog-loop .hkblog-loop__meta .elementor-icon-list-icon i {
  font-size: 12px !important;
}

/* ---------- Footer links ---------- */

.hkblog-loop .hkblog-loop__links {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: end;
  gap: 14px !important;
  margin-top: 18px !important;
  padding-top: 18px !important;
  border-top: 1px solid var(--hkblog-loop-line);
}

.hkblog-loop .hkblog-loop__related a {
  color: var(--hkblog-loop-blue) !important;
  font-size: 0.78rem !important;
  font-weight: 700 !important;
}

.hkblog-loop .hkblog-loop__related .hkblog-loop__related-label {
  display: block;
  color: var(--hkblog-loop-muted);
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Hide the whole related row when the ACF field is empty */
.hkblog-loop .hkblog-loop__related:empty,
.hkblog-loop .hkblog-loop__related:has(> .elementor-widget-container:empty) {
  display: none;
}

.hkblog-loop .hkblog-loop__read a,
.hkblog-loop .hkblog-loop__read .elementor-button {
  display: grid !important;
  width: 38px;
  height: 38px;
  place-items: center;
  padding: 0 !important;
  color: #ffffff !important;
  background: var(--hkblog-loop-blue) !important;
  border-radius: 50% !important;
}

.hkblog-loop .hkblog-loop__read a:hover,
.hkblog-loop .hkblog-loop__read .elementor-button:hover {
  background: var(--hkblog-loop-blue-dark) !important;
}

/* ---------- Pagination ---------- */

.hkblog-loop .elementor-pagination {
  margin-top: 32px;
  font-family: "Roboto Mono", "SFMono-Regular", Consolas, monospace;
  font-size: 0.8rem;
}

.hkblog-loop .elementor-pagination .page-numbers {
  display: inline-grid;
  min-width: 40px;
  height: 40px;
  place-items: center;
  padding: 0 10px;
  color: var(--hkblog-loop-ink);
  background: #ffffff;
  border: 1px solid var(--hkblog-loop-line);
  border-radius: 8px;
}

.hkblog-loop .elementor-pagination .page-numbers.current {
  color: #ffffff;
  background: var(--hkblog-loop-blue);
  border-color: var(--hkblog-loop-blue);
}

.hkblog-loop .elementor-pagination .page-numbers:hover:not(.current) {
  border-color: #99b8d0;
}

/* ---------- Responsive ---------- */

@media (max-width: 1024px) {
  .hkblog-loop .elementor-loop-container {
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 767px) {
  .hkblog-loop .elementor-loop-container {
    grid-template-columns: 1fr !important;
  }

  .hkblog-loop .hkblog-loop__media {
    height: 205px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hkblog-loop .hkblog-loop__card {
    transition-duration: 0.01ms !important;
  }
}/* End custom CSS */