/*
 * KoloPlus — widgets/ads/ad_card · v1.1.3.009
 * Sponsored ad card with sidebar variant + debug mode.
 */

.w-ads-ad_card {
  display: flex;
  flex-direction: column;
  gap: var(--n-s-2);
  padding: var(--n-s-3);
  background: var(--n-bg-2);
  border: 1px solid var(--n-line-soft);
  border-radius: var(--n-r-md);
  text-decoration: none;
  color: inherit;
  position: relative;
  overflow: hidden;
  transition: background var(--n-dur-base) var(--n-ease),
              border-color var(--n-dur-base) var(--n-ease);
}
.w-ads-ad_card:hover {
  background: var(--n-bg-hover);
  border-color: var(--n-line);
}

/* ── Header: identity + badge ─────────────────────────────── */
.w-ads-ad_card__header {
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
}

.w-ads-ad_card__identity {
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
  flex: 1;
  min-width: 0;
}

.w-ads-ad_card__avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  background: linear-gradient(135deg, var(--n-accent), color-mix(in oklab, var(--n-accent) 60%, var(--n-warn)));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: var(--n-w-bold);
  border-radius: var(--n-r-sm);
  overflow: hidden;
}
.w-ads-ad_card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.w-ads-ad_card__avatar--round {
  border-radius: 50%;
}

.w-ads-ad_card__name {
  font-weight: var(--n-w-sem);
  color: var(--n-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-ads-ad_card__host {
  color: var(--n-text-mute);
  font-weight: var(--n-w-med);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.w-ads-ad_card__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 7px;
  border-radius: var(--n-r-pill);
  background: var(--n-bg-hover);
  color: var(--n-text-mute);
  font-weight: var(--n-w-med);
  text-transform: uppercase;
  letter-spacing: .04em;
  flex-shrink: 0;
}

/* ── Media ────────────────────────────────────────────────── */
.w-ads-ad_card__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--n-r-sm);
  background: var(--n-bg-soft);
  margin: -2px 0;
}
.w-ads-ad_card__media img,
.w-ads-ad_card__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ── Body: title + desc ───────────────────────────────────── */
.w-ads-ad_card__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.w-ads-ad_card__title {
  font-weight: var(--n-w-bold);
  color: var(--n-text);
  margin: 0;
  line-height: 1.3;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.w-ads-ad_card__desc {
  color: var(--n-text-soft);
  line-height: var(--n-lh);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── CTA ──────────────────────────────────────────────────── */
.w-ads-ad_card__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  background: var(--n-accent);
  color: var(--n-text-on-accent);
  border: none;
  border-radius: var(--n-r-pill);
  font-family: inherit;
  font-size: var(--n-fs);
  font-weight: var(--n-w-sem);
  text-decoration: none;
  align-self: flex-start;
  transition: background var(--n-dur-base) var(--n-ease);
}
.w-ads-ad_card__cta:hover {
  background: var(--n-accent-hover);
}

/* ── Debug mode ───────────────────────────────────────────── */
.w-ads-ad_card__debug {
  display: flex;
  align-items: center;
  gap: var(--n-s-2);
  padding: var(--n-s-2);
  background: var(--n-warn-soft);
  color: var(--n-warn);
  border-radius: var(--n-r-sm);
  font-family: var(--n-font-mono);
  font-weight: var(--n-w-med);
  margin-top: var(--n-s-2);
}

.w-ads-ad_card__model {
  color: var(--n-text-mute);
  font-family: var(--n-font-mono);
}