/*
 * Mobile banner (m-* slots) - single source of truth for how a mobile banner looks.
 *
 * Used by the live banners  : _components/home-blocks.php (home), _components/mobile-list-hero.php (hubs/lists)
 * and by every preview      : _components/mobile-banner-preview.php
 *   (/admin/mobile-banners, /admin/banner-ad/{id}, /me/banners, /me/banners/creative|confirm, /me/banners/{id}/edit)
 * Markup: _components/mobile-banner-slide.php  |  live preview updates: js/mobile-banner-preview.js
 *
 * Rule (all m-* slots are the same):
 *   box   = content width (viewport - 40px) x 114px, radius 12px, #eaf2fd
 *   copy  = title/subtitle present -> copy on the left, image on the right at 40% (object-fit: cover, centered)
 *   image = no copy -> image fills 100% of the box (object-fit: cover, centered), no tag
 *   tag   = shown only above the copy
 *
 * Selectors keep the `.itm` ancestor (same specificity as before they moved out of itm.css).
 * Admin / PC pages wrap the preview in `.itm` (they do not load itm.css, so nothing else applies).
 */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700;800&family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

.itm .itm-block-banner {
  position: relative;
  height: 114px;
  border-radius: 12px;
  background: #eaf2fd;
  overflow: hidden;
  /* inherited values pinned to what the live mobile page computes,
     so admin / PC hosts (bootstrap etc.) render the banner identically */
  box-sizing: border-box;
  font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: normal;
  letter-spacing: normal;
  word-break: normal;
  white-space: normal;
  text-align: left;
  text-transform: none;
  color: #17212e;
  -webkit-font-smoothing: antialiased;
}

.itm .itm-block-banner *,
.itm .itm-block-banner *::before,
.itm .itm-block-banner *::after {
  box-sizing: border-box;
}

.itm .itm-block-banner .itm-banner-slide {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.itm .itm-block-banner .itm-banner-slide[hidden] {
  display: none;
}

.itm .itm-block-banner .itm-copy {
  padding: 14px;
  min-width: 0;
}

.itm .itm-block-banner .itm-copy small {
  /* !important: admin.css forces `small { font-size: 13px !important }` on admin previews */
  font-size: 9px !important;
  color: var(--itm-blue, #1246A3);
  font-weight: 800;
}

.itm .itm-block-banner .itm-copy strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
  margin: 5px 0;
  color: #17334f;
}

.itm .itm-block-banner img {
  width: 40%;
  height: 100%;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
}

/* no copy -> the image fills the whole box */
.itm .itm-block-banner .itm-banner-slide.is-image-only img {
  width: 100%;
}

.itm .itm-block-banner .itm-banner-dots {
  position: absolute;
  left: 14px;
  bottom: 9px;
  display: flex;
  gap: 4px;
}

.itm .itm-block-banner .itm-banner-dots button {
  width: 5px;
  height: 5px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c8d9f3;
}

.itm .itm-block-banner .itm-banner-dots button.is-active {
  background: var(--itm-blue, #1246A3);
}

/* ---------------------------------------------------------------------------
 * Preview frame (admin / corporate). Renders the banner above at the real size.
 *   default            : 100% of the container (mobile pages place it in a 20px-gutter column = real width)
 *   [data-mbn-vw=N]    : fixed width for a phone N px wide (N - 40px), used on desktop admin pages
 *   .mbn-fit wrapper   : scales the fixed-width frame down uniformly when the container is narrower
 * ------------------------------------------------------------------------- */
.itm.mbn-preview {
  display: block;
  background: transparent;
}

.itm.mbn-preview[data-mbn-vw] { width: calc(var(--mbn-vw, 390px) - 40px); }
.itm.mbn-preview[data-mbn-vw="360"] { --mbn-vw: 360px; }
.itm.mbn-preview[data-mbn-vw="390"] { --mbn-vw: 390px; }
.itm.mbn-preview[data-mbn-vw="430"] { --mbn-vw: 430px; }

/* elements a preview keeps for live updates but the live banner would not render */
.itm.mbn-preview .itm-block-banner [hidden] {
  display: none !important;
}

.itm.mbn-preview .mbn-empty {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
  text-align: center;
  font-size: 12px;
  line-height: 1.45;
  color: #8995a1;
}

.mbn-fit {
  position: relative;
  max-width: 100%;
  overflow: hidden;
}

.mbn-fit > .itm.mbn-preview {
  transform-origin: 0 0;
}

.mbn-caption {
  margin: 6px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: #8995a1;
}