/* Frontend media-unit slots (filter-safe naming — no ad/ads/advert tokens) */

.site-unit {
  display: block;
  width: 100%;
  margin: 1rem 0;
  text-align: center;
}

.site-unit__inner {
  display: inline-block;
  max-width: 100%;
  min-height: 0;
  vertical-align: top;
  width: 100%;
}

/* Preview placeholders (admin has not pasted live embed yet) */
.site-unit-preview {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding: 1rem 1.1rem;
  border-radius: 10px;
  border: 1px dashed color-mix(in srgb, #0f766e 45%, #94a3b8);
  background:
    linear-gradient(135deg, color-mix(in srgb, #0f766e 10%, #f8fafc), color-mix(in srgb, #0369a1 8%, #f1f5f9));
  color: #0f172a;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.site-unit-preview--wide { min-height: 90px; max-width: 728px; }
.site-unit-preview--box { min-height: 250px; max-width: 336px; }
.site-unit-preview--tall { min-height: 280px; max-width: 300px; }
.site-unit-preview--clip { min-height: 200px; max-width: 640px; aspect-ratio: 16 / 9; }

.site-unit-preview__badge {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: color-mix(in srgb, #0f766e 18%, transparent);
  color: #0f766e;
}

.site-unit-preview__brand {
  font-size: 1.05rem;
  font-weight: 800;
  line-height: 1.3;
}

.site-unit-preview__slot {
  font-size: 0.86rem;
  font-weight: 600;
  color: #334155;
}

.site-unit-preview__hint {
  margin: 0.25rem 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  color: #64748b;
  max-width: 28rem;
}

.site-unit-frame {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  background: transparent;
}

.site-unit--preview .site-unit__inner {
  width: 100%;
}

.site-unit--site_top {
  margin: 0.75rem auto 0.25rem;
  padding: 0 1rem;
}

.site-unit--site_bottom {
  margin: 1.25rem auto 0.5rem;
  padding: 0 1rem;
}

.site-unit--sidebar {
  margin: 0 0 1rem;
}

.site-unit--sidebar .site-unit__inner {
  width: 100%;
}

.site-unit--after_content {
  margin: 1.5rem 0 1rem;
}

.site-unit--in_article,
.site-unit--in-article {
  margin: 1.75rem auto;
  padding: 0.5rem 0;
  clear: both;
}

.site-unit--video_preroll {
  margin: 0;
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(8, 10, 14, 0.88);
}

.site-unit--video_preroll .site-unit__inner {
  width: min(100%, 640px);
  max-height: 100%;
  overflow: auto;
}

.site-unit-preplay {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 1rem;
  background: rgba(8, 10, 14, 0.92);
  color: #f5f5f5;
}

.site-unit-preplay__slot {
  width: min(100%, 640px);
  text-align: center;
}

.site-unit-preplay__actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.site-unit-preplay__skip {
  appearance: none;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 0.88rem;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  cursor: pointer;
}

.site-unit-preplay__skip:disabled {
  opacity: 0.55;
  cursor: default;
}

.site-unit-preplay__skip:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.16);
}

.single-post__cover--has-video {
  position: relative;
}

.single-post__cover-inner {
  position: relative;
}