/* Featured KVKs trên trang chủ.
   Cùng ngôn ngữ hình ảnh với /kvk/ (accent tím #8b5cf6, số dùng tabular-nums,
   badge lifecycle đỏ) nhưng ít thông tin hơn: không kingdom chip, không
   date range, không profile coverage — trang chủ chỉ cần đủ để bấm vào. */

.landing-kvk-head {
  display: flex;
  align-items: flex-end;
  gap: 1.5rem;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.landing-kvk-head h2 {
  margin: 0 0 .35rem;
}

.landing-kvk-lede {
  max-width: 56ch;
  margin: 0;
  color: var(--tblr-secondary-color);
}

.landing-kvk-grid {
  display: grid;
  gap: 1rem;
  padding: 0;
  margin: 0;
  list-style: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.landing-kvk-card {
  display: flex;
  position: relative;
  flex-direction: column;
  height: 100%;
  padding: 1.1rem 1.25rem 1.15rem;
  /* Hình chữ nhật: bo góc nhẹ, không bo tròn kiểu pill. */
  border: 1px solid var(--tblr-border-color);
  border-radius: 6px;
  background: var(--tblr-bg-surface);
  transition: border-color .15s ease, box-shadow .15s ease;
}

.landing-kvk-card::before {
  position: absolute;
  top: -1px;
  right: -1px;
  left: -1px;
  height: 2px;
  border-radius: 6px 6px 0 0;
  background: #8b5cf6;
  opacity: 0;
  content: "";
  transition: opacity .15s ease;
}

.landing-kvk-card:hover {
  border-color: color-mix(in srgb, var(--tblr-border-color) 45%, #8b5cf6 55%);
  box-shadow: 0 10px 28px rgba(0, 0, 0, .14);
}

.landing-kvk-card:hover::before {
  opacity: 1;
}

.landing-kvk-card:focus-within {
  outline: 2px solid #8b5cf6;
  outline-offset: 2px;
}

.landing-kvk-card .stretched-link:focus-visible {
  outline: none;
}

/* ------------------------------------------------------------------ head -- */

.landing-kvk-top {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  justify-content: space-between;
}

.landing-kvk-story {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--tblr-secondary-color);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.3;
  text-transform: uppercase;
}

.landing-kvk-code {
  margin: .15rem 0 0;
  font-size: 1.4rem;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.landing-kvk-state {
  flex: 0 0 auto;
  padding: .18rem .5rem;
  border-radius: 4px;
  color: var(--tblr-red);
  background: color-mix(in srgb, var(--tblr-red) 14%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tblr-red) 32%, transparent);
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* ------------------------------------------------------------------ body -- */

.landing-kvk-started {
  margin: .15rem 0 0;
  color: var(--tblr-secondary-color);
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.landing-kvk-stats {
  display: grid;
  gap: .3rem 1rem;
  margin: .9rem 0 0;
  padding-top: .8rem;
  border-top: 1px solid var(--tblr-border-color);
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
}

.landing-kvk-stats dt {
  color: var(--tblr-secondary-color);
  font-size: .78rem;
  font-weight: 500;
  white-space: nowrap;
}

.landing-kvk-stats dd {
  margin: 0;
  text-align: right;
  font-size: .82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* Badge freshness + CTA cùng một hàng, giống footer card của /kvk/.
   Style chép lại ở đây thay vì load kvk-catalog.css: trang chủ chỉ cần đúng
   một badge, không cần kéo cả stylesheet của trang catalog. */
.landing-kvk-foot {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: space-between;
  margin-top: auto;
  padding-top: .9rem;
}

.landing-kvk-fresh {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}

.landing-kvk-fresh::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.landing-kvk-fresh.is-fresh {
  color: var(--tblr-green);
  background: color-mix(in srgb, var(--tblr-green) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tblr-green) 32%, transparent);
}

.landing-kvk-fresh.is-outdated {
  color: var(--tblr-yellow);
  background: color-mix(in srgb, var(--tblr-yellow) 13%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tblr-yellow) 32%, transparent);
}

.landing-kvk-cta {
  color: #8b5cf6;
  font-size: .82rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.landing-kvk-card:hover .landing-kvk-cta {
  text-decoration: underline;
}

/* ------------------------------------------------------------ responsive -- */

@media (max-width: 991.98px) {
  .landing-kvk-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 575.98px) {
  .landing-kvk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .landing-kvk-head {
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .landing-kvk-card,
  .landing-kvk-card::before {
    transition: none;
  }
}

/* ------------------------------------------------------------ live border --
   Viền sáng chạy quanh card cho KVK vừa cập nhật trong LIVE_WINDOW
   (core/featured_kvk.py quyết định, không phải CSS).

   Xoay một conic-gradient bằng `rotate` — thuộc tính animate được ở mọi trình
   duyệt. Bản trước animate custom property qua @property, gọn hơn nhưng phụ
   thuộc Houdini nên Firefox cũ chỉ hiện cung tĩnh. Vành 2px có được bằng cách
   tô kín rồi trừ content-box bằng mask-composite. */

.landing-kvk-beam {
  position: absolute;
  z-index: 0;
  inset: -1px;
  overflow: hidden;
  padding: 2px;
  border-radius: 7px;
  filter: drop-shadow(0 0 3px color-mix(in srgb, var(--tblr-green) 45%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  /* Không chắn click: stretched-link phải phủ được toàn card. */
  pointer-events: none;
}

.landing-kvk-beam::before {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Vuông và đủ rộng để cung sáng phủ tới góc card khi xoay. */
  width: 210%;
  aspect-ratio: 1;
  background: conic-gradient(
    transparent 0deg,
    transparent 265deg,
    color-mix(in srgb, var(--tblr-green) 25%, transparent) 288deg,
    var(--tblr-green) 312deg,
    color-mix(in srgb, var(--tblr-green) 45%, #ffffff) 330deg,
    transparent 360deg
  );
  content: "";
  translate: -50% -50%;
  animation: kvk-live-spin 4s linear infinite;
}

@keyframes kvk-live-spin {
  to {
    rotate: 360deg;
  }
}

/* KHÔNG đặt position/z-index lên con của card: stretched-link neo ::after vào
   ancestor có position gần nhất, nên chỉ cần .landing-kvk-foot thành relative
   là vùng click co lại còn mỗi footer. Vành sáng đã mask chỉ còn 2px ở mép và
   pointer-events:none nên không cần nâng nội dung lên trên. */

/* Cố ý KHÔNG tắt theo prefers-reduced-motion: máy dev bật "reduce motion" của
   Windows nên vành sáng đứng im, mà đây là tín hiệu chính của section. Nếu sau
   này cần tôn trọng lại thiết lập đó thì thêm block reduce ở đây và cho
   rotate một góc tĩnh. */

/* Chip kingdom id — cùng cách trình bày với card của /kvk/: màu trung tính,
   không dùng màu trại, vì card không mang thông tin kingdom nào thuộc trại nào. */
.landing-kvk-kingdoms {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  /* .85rem: kế thừa khoảng cách của dòng đếm vương quốc vừa bỏ, vì chip giờ là
     phần tử đầu tiên ngay dưới mã KVK. */
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
}

.landing-kvk-kingdoms li {
  padding: .05rem .35rem;
  border-radius: 4px;
  color: var(--tblr-secondary-color);
  background: var(--tblr-bg-surface-secondary);
  box-shadow: inset 0 0 0 1px var(--tblr-border-color);
  font-size: .72rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.landing-kvk-kingdoms li.is-more {
  background: transparent;
  box-shadow: none;
}

/* Nút "Xem tất cả KVK": nền đặc theo accent tím của KVK.
   Ghi đè biến của Tabler thay vì set color/background trực tiếp, để hover,
   active và focus-ring đi theo cùng một cơ chế với các nút khác. Tabler có sẵn
   btn-outline-purple nhưng là #ae3ec9, lệch hue với accent #8b5cf6 đang dùng
   cho card, link CTA và mục KVK Data trên nav. */
.btn-kvk {
  --tblr-btn-color: #ffffff;
  --tblr-btn-bg: #8b5cf6;
  --tblr-btn-border-color: #8b5cf6;
  --tblr-btn-hover-color: #ffffff;
  --tblr-btn-hover-bg: #7c3aed;
  --tblr-btn-hover-border-color: #7c3aed;
  --tblr-btn-active-color: #ffffff;
  --tblr-btn-active-bg: #6d28d9;
  --tblr-btn-active-border-color: #6d28d9;
  --tblr-btn-focus-shadow-rgb: 139, 92, 246;
}