/* Shared article identity on the blog index and related reading cards. */
.gladia-site :is(.kw-blog-page, .gladia-related) .kw-topic-card .kw-topic-cover {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  container-type: inline-size;
  background: #101113;
  background-clip: padding-box;
}

.gladia-site :is(.kw-blog-page, .gladia-related) .kw-topic-cover > .kw-cover-topic {
  position: absolute;
  z-index: 1;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 28px 20px 16px;
  color: #fff;
  font-family: var(--kuwork-font-sans);
  font-size: clamp(22px, 7.2cqw, 34px);
  font-weight: 500;
  line-height: 1.42;
  letter-spacing: -.025em;
  text-align: center;
  pointer-events: none;
}

.gladia-site :is(.kw-blog-page, .gladia-related) .kw-cover-topic > span {
  display: block;
  white-space: nowrap;
}

.gladia-site :is(.kw-blog-page, .gladia-related) .kw-topic-cover--light > .kw-cover-topic {
  color: #171b24;
}

@media (max-width: 374px) {
  .gladia-site :is(.kw-blog-page, .gladia-related) .kw-topic-cover > .kw-cover-topic {
    padding-inline: 12px;
    font-size: 7.4cqw;
    gap: 3px;
  }
}

/* Do not depend on legacy listing-only image positioning on article pages. */
.gladia-site :is(.kw-blog-page, .gladia-related) .kw-topic-cover > img {
  position: absolute !important;
  inset: 0 !important;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* English overlay must fill its cover; the legacy max-width shifted it left. */
html[lang="en"] .gladia-site :is(.kw-blog-page, .gladia-related) .kw-topic-cover > .kw-cover-topic {
  max-width: none;
  padding-block: 22px;
}