.ssp-placement { width: 100%; min-width: 0; }
.ssp-placement[hidden] { display: none !important; }

/* Keep page spacing outside the legacy template. Only an active SDK render
   receives it, so fallback retains its original layout and closing leaves no gap. */
.ssp-placement--banner[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
  padding: .5rem 0;
}
.ssp-placement--article-top[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
  margin-bottom: .5rem;
}
.ssp-placement[data-ssp-format="icon"][data-ssp-status="mounted"]:has(> [data-ssp-render-root]),
.ssp-placement[data-ssp-format="text"][data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
  margin-bottom: 1rem;
}
.ssp-placement--article-bottom[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
  padding-bottom: 0;
}
.ssp-placement--article-bottom[data-ssp-status="mounted"]:has(> [data-ssp-render-root])::after {
  content: "";
  display: block;
  height: 1px;
  background: #444;
  margin: 1.5rem 0 1rem;
}
.ssp-placement--schedule-top[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 153, 31, .36);
}
/* A schedule banner occupies one of the original two desktop columns, even
   when the response contains only one creative or a carousel. Multiple static
   creatives share the row; keep SDK nodes intact for per-item reporting. */
.ssp-placement--schedule-top > [data-ssp-render-root] {
  width: calc((100% - 24px) / 2);
  min-width: 0;
}
.ssp-placement--schedule-top > [data-ssp-render-root]:has([data-ssp-banner-item]:nth-child(2)) {
  width: 100%;
}
.ssp-placement--schedule-top [data-ssp-banner-list] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px !important;
}
.ssp-placement--schedule-top [data-ssp-banner-list]:has(> [data-ssp-banner-item]:nth-child(2)) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ssp-placement--schedule-top [data-ssp-media-wrap] {
  min-width: 0;
  overflow: hidden;
  border-radius: 8px;
}
.ssp-placement--banner [data-ssp-banner-list] {
  gap: .5rem !important;
}
.ssp-placement[data-ssp-format="text"] [data-ssp-grid] {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  column-gap: .5rem !important;
  row-gap: 1rem !important;
}
.ssp-placement[data-ssp-format="text"] [data-ssp-grid-text] {
  min-width: 0;
  box-sizing: border-box;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Article links have their own dotted underline, and SDK text defaults to a
   dark color. Restore the old button treatment only within these two widgets. */
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text] {
  color: inherit !important;
  font: inherit !important;
  padding: .5rem 0 !important;
  border: 1px solid #5e5c5c;
  border-radius: 4px;
}
:where(body.theme-white) .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text] {
  border-color: #ccc;
}
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text]:hover {
  color: #1abc9c !important;
  border-color: #1abc9c;
}
/* Text ads have no image beneath the disclosure. Match their outlined buttons
   and retain the SDK's label typography. */
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] > [data-ssp-label] {
  background: transparent !important;
  color: inherit !important;
  border: 1px solid #5e5c5c;
  padding: 1px 4px !important;
}
:where(body.theme-white) .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] > [data-ssp-label] {
  border-color: #ccc;
}
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] a::after,
.post-content .ssp-placement[data-ssp-format="icon"] > [data-ssp-render-root] a::after {
  content: none !important;
}
.post-content .ssp-placement[data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-grid-caption],
.post-content .ssp-placement[data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-description] {
  color: inherit !important;
}
/* Reserve only the edge occupied by SDK chrome. Labels expose their position
   as inline styles; close buttons also expose a dedicated position attribute. */
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] {
  --ssp-text-top: 0px;
  --ssp-text-right: 0px;
  --ssp-text-bottom: 0px;
  --ssp-text-left: 0px;
}
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-grid-item]:nth-child(2))):has(:where([data-ssp-label][style*="top: 6px;"])) { --ssp-text-top: 24px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-grid-item]:nth-child(2))):has(:where([data-ssp-label][style*="bottom: 6px;"])) { --ssp-text-bottom: 24px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-grid-item]:nth-child(2))):has(:where([data-ssp-label][style*="top: 50%;"][style*="left: 6px;"])) { --ssp-text-left: 40px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-grid-item]:nth-child(2))):has(:where([data-ssp-label][style*="top: 50%;"][style*="right: 6px;"])) { --ssp-text-right: 40px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-close-button-position^="top"])) { --ssp-text-top: 40px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-close-button-position^="bottom"])) { --ssp-text-bottom: 40px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-close-button-position="left"])) { --ssp-text-left: 40px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(:where([data-ssp-close-button-position="right"])) { --ssp-text-right: 40px; }
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid] {
  box-sizing: border-box;
  padding: var(--ssp-text-top) var(--ssp-text-right) var(--ssp-text-bottom) var(--ssp-text-left);
}
/* A single creative keeps its original button dimensions. Overlay the original
   SDK label on its top border without moving DOM nodes or event handlers.
   Multiple creatives keep their shared label at the SDK-configured edge. */
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]) {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  column-gap: .5rem;
  box-sizing: border-box;
  padding: var(--ssp-text-top) var(--ssp-text-right) var(--ssp-text-bottom) var(--ssp-text-left);
}
/* The raised label also needs clearance below a top-left close button. */
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]):has(> [data-ssp-close-button-position="top-left"]) {
  --ssp-text-top: 44px;
}
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]) > [data-ssp-grid] {
  grid-column: 1 / -1;
  grid-row: 1;
  padding: 0;
}
.post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-label] {
  position: static !important;
  inset: auto !important;
  transform: translateY(-50%) !important;
  grid-column: 1;
  grid-row: 1;
  align-self: start;
  justify-self: start;
  margin: 0 4px;
  background: #fff !important;
}
:where(body.theme-white) .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-label] {
  background: #fafafa !important;
}
:where(body.theme-dark) .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-label] {
  background: #2c2a2a !important;
}

/* Keep the article's single disclosure inside the first button's upper-left
   corner. Redistribute existing vertical padding instead of increasing the
   button height, and preserve the same five-column width as multiple ads. */
.post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]) {
  display: grid !important;
  width: 100%;
  max-width: 100%;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]):has(> [data-ssp-close-button-position="top-left"]) {
  --ssp-text-top: 40px;
}
.post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]) > [data-ssp-grid] {
  min-width: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child):has(> [data-ssp-label]) [data-ssp-grid-text] {
  padding: calc(.5rem + 6px) 0 calc(.5rem - 6px) !important;
}
.post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-label] {
  align-self: start;
  justify-self: start;
  transform: none !important;
  margin: 3px 0 0 4px;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #777 !important;
}
:where(body.theme-dark) .post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-label] {
  color: #aaa !important;
}
/* Reduce desktop copy without shrinking the existing line box or five-column
   button. On line-height, 1lh resolves to the parent's original line height. */
@media (min-width: 768px) {
  .post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text] {
    font-size: 14px !important;
    line-height: 1lh !important;
  }
  :where(body.theme-dark) .post-content .ssp-placement[data-ssp-slot-id="text_home_top_main_001"][data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text]:not(:hover) {
    color: #bcbcbc !important;
  }
}

/* Article typography must not displace media inside the SDK's fixed-ratio grid. */
.ssp-placement > [data-ssp-render-root] img,
.ssp-placement > [data-ssp-render-root] video {
  margin: 0;
}

.ssp-placement[data-ssp-format="icon"] [data-ssp-grid] {
  grid-template-columns: repeat(10, minmax(0, 1fr)) !important;
}
/* The article's icon strip is a compact launcher: image plus one name. Keep
   the SDK links and controls intact, but omit its optional card-style copy. */
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-grid] {
  gap: 6px !important;
}
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-grid-media] {
  border-radius: 8px !important;
}
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-grid-caption] {
  white-space: nowrap !important;
}
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-grid-item] > [data-ssp-description],
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root] [data-ssp-grid-item] > [data-ssp-cta] {
  display: none !important;
}
/* A single icon retains the width of one original column. Its SDK chrome
   follows the image instead of the far edge of the otherwise empty row. */
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) {
  width: calc((100% - 54px) / 10);
}
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-grid] {
  grid-template-columns: minmax(0, 1fr) !important;
}
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-label] {
  inset: 4px auto auto 4px !important;
  transform: none !important;
}
.post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) > [data-ssp-close-button] {
  inset: 0 auto auto 100% !important;
  transform: translate(-8px, -50%) !important;
}
@media (max-width: 767px) {
  .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text] {
    font-size: .9rem !important;
  }
  .ssp-placement--banner [data-ssp-banner-list] {
    gap: .2rem !important;
  }
  .ssp-placement--article-bottom[data-ssp-status="mounted"]:has(> [data-ssp-render-root])::after {
    margin: 1rem 0 .5rem;
  }
  .ssp-placement[data-ssp-format="icon"] [data-ssp-grid] {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
  .post-content .ssp-placement[data-ssp-slot-id="icon_home_top_main_001"][data-ssp-format="icon"] > [data-ssp-render-root]:has(> [data-ssp-grid] > [data-ssp-grid-item]:only-child) {
    width: calc((100% - 24px) / 5);
  }
}
@media (max-width: 414px) {
  .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text] {
    font-size: .75rem !important;
  }
}
@media (max-width: 375px) {
  .post-content .ssp-placement[data-ssp-format="text"] > [data-ssp-render-root] [data-ssp-grid-text] {
    font-size: .65rem !important;
  }
}
@media (max-width: 820px) {
  .sports-page .ssp-placement--banner[data-ssp-page-key="sports_live_room_bottom"] [data-ssp-banner-list] {
    gap: .2rem !important;
  }
  .sports-page .ssp-placement--banner[data-ssp-page-key="sports_live_room_bottom"][data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
    padding-bottom: 0;
  }
}
@media (max-width: 720px) {
  .ssp-placement--schedule-top > [data-ssp-render-root] {
    width: 100%;
  }
  .ssp-placement--schedule-top [data-ssp-banner-list]:has(> [data-ssp-banner-item]:nth-child(2)) {
    grid-template-columns: minmax(0, 1fr);
  }
  .ssp-placement--schedule-top [data-ssp-banner-list] {
    gap: 9px !important;
  }
  .ssp-placement--schedule-top [data-ssp-media-wrap] {
    border-radius: 5px;
  }
  .ssp-placement--schedule-top[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
    margin-top: 20px;
    padding-top: 0;
    border-top: 0;
  }
}

/* The sports shell owns the current PC/H5 columns, gaps and image radii.
   Reuse them only for its three SSP placements; legacy nodes keep their CSS. */
body.schedule-page .ssp-placement:is(.ssp-placement--schedule-top, [data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"]) > [data-ssp-render-root] {
  width: calc((100% + var(--sports-ad-gap)) / var(--sports-ad-columns) - var(--sports-ad-gap));
  min-width: 0;
}
body.schedule-page .ssp-placement:is(.ssp-placement--schedule-top, [data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"]) > [data-ssp-render-root]:has([data-ssp-banner-item]:nth-child(2)) {
  width: 100%;
}
body.schedule-page .ssp-placement:is(.ssp-placement--schedule-top, [data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"]) [data-ssp-banner-list] {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sports-ad-gap) !important;
}
body.schedule-page .ssp-placement:is(.ssp-placement--schedule-top, [data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"]) [data-ssp-banner-list]:has(> [data-ssp-banner-item]:nth-child(2)) {
  grid-template-columns: repeat(var(--sports-ad-columns), minmax(0, 1fr));
}
body.schedule-page .ssp-placement:is(.ssp-placement--schedule-top, [data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"]) [data-ssp-media-wrap] {
  min-width: 0;
  overflow: hidden;
  border-radius: var(--sports-ad-radius);
}
body.schedule-page .ssp-placement:is([data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"])[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
  margin-top: 24px;
  padding: 0;
}
@media (max-width: 820px) {
  body.schedule-page .ssp-placement:is([data-ssp-page-key="sports_live_list_bottom"], [data-ssp-page-key="sports_live_room_bottom"])[data-ssp-status="mounted"]:has(> [data-ssp-render-root]) {
    margin-top: 10px;
  }
}