/* /public_html/assets/css/ui-hover-card.css */

.ui-hover-card {
  --ui-hover-card-accent: #38bdf8;
  --ui-hover-card-arrow-x: 50%;
  position: fixed;
  z-index: 30050;
  box-sizing: border-box;
  width: min(19rem, calc(100vw - 24px));
  padding: .82rem .9rem .88rem;
  border: 1px solid color-mix(in srgb, var(--ui-hover-card-accent) 64%, rgba(255, 255, 255, .2));
  border-radius: 1rem;
  color: #f8fafc;
  background:
    linear-gradient(145deg,
      color-mix(in srgb, var(--ui-hover-card-accent) 16%, rgba(8, 15, 31, .96)),
      rgba(5, 11, 25, .97) 72%);
  box-shadow:
    0 18px 46px rgba(0, 0, 0, .42),
    0 0 26px color-mix(in srgb, var(--ui-hover-card-accent) 24%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .07);
  backdrop-filter: blur(18px) saturate(1.18);
  -webkit-backdrop-filter: blur(18px) saturate(1.18);
  opacity: 0;
  transform: translateY(5px) scale(.985);
  transform-origin: center bottom;
  transition: opacity .14s ease, transform .14s ease;
  pointer-events: none;
}

.ui-hover-card[hidden] {
  display: none !important;
}

.ui-hover-card.is-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.ui-hover-card::after {
  content: '';
  position: absolute;
  left: var(--ui-hover-card-arrow-x);
  width: .72rem;
  height: .72rem;
  border-right: 1px solid color-mix(in srgb, var(--ui-hover-card-accent) 54%, rgba(255, 255, 255, .14));
  border-bottom: 1px solid color-mix(in srgb, var(--ui-hover-card-accent) 54%, rgba(255, 255, 255, .14));
  background: color-mix(in srgb, var(--ui-hover-card-accent) 10%, rgba(6, 13, 28, .98));
}

.ui-hover-card[data-placement='top']::after {
  bottom: -.39rem;
  transform: translateX(-50%) rotate(45deg);
}

.ui-hover-card[data-placement='bottom'] {
  transform-origin: center top;
}

.ui-hover-card[data-placement='bottom']::after {
  top: -.39rem;
  transform: translateX(-50%) rotate(225deg);
}

.ui-hover-card__topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .65rem;
  margin-bottom: .52rem;
  color: color-mix(in srgb, var(--ui-hover-card-accent) 78%, white);
  font-size: .72rem;
  font-weight: 850;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.ui-hover-card__topline > span {
  display: inline-flex;
  align-items: center;
  gap: .38rem;
  min-width: 0;
}

.ui-hover-card__time {
  flex: 0 0 auto;
  color: rgba(226, 232, 240, .82);
  font-size: .72rem;
  font-weight: 750;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

.ui-hover-card__title {
  margin: 0;
  color: #fff;
  font-size: 1.02rem;
  font-weight: 850;
  line-height: 1.15;
  text-wrap: balance;
}

.ui-hover-card__meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: .32rem .55rem;
  margin-top: .55rem;
  padding-top: .55rem;
  border-top: 1px solid color-mix(in srgb, var(--ui-hover-card-accent) 24%, rgba(255, 255, 255, .1));
}

.ui-hover-card__meta > span {
  color: rgba(148, 163, 184, .92);
  font-size: .7rem;
  font-weight: 750;
  letter-spacing: .045em;
  text-transform: uppercase;
}

.ui-hover-card__meta > strong {
  min-width: 0;
  color: rgba(241, 245, 249, .94);
  font-size: .82rem;
  font-weight: 760;
  overflow-wrap: anywhere;
}

.ui-hover-card__status {
  display: inline-flex;
  align-items: center;
  gap: .36rem;
  width: fit-content;
  margin-top: .64rem;
  padding: .28rem .52rem;
  border: 1px solid color-mix(in srgb, var(--ui-hover-card-accent) 52%, transparent);
  border-radius: 999px;
  color: color-mix(in srgb, var(--ui-hover-card-accent) 72%, white);
  background: color-mix(in srgb, var(--ui-hover-card-accent) 14%, transparent);
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: .045em;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .ui-hover-card {
    transition: none !important;
  }
}