/* Upgrade banner shown in place of ~half the ad slots after the trial ends.
   Fills the whole ad frame (width/height 100%) and scales its content to the
   available space, so it works on leaderboards, MPUs and large native slots. */
.catblock-upgrade {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 100% !important;
  height: 100% !important;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid #e0b9b4;
  border-radius: 8px;
  background: #fff5f4;
  cursor: pointer;
  text-decoration: none !important;
  overflow: hidden;
  container-type: inline-size;
}
.catblock-upgrade * { box-sizing: border-box; }
.catblock-up-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
}
.catblock-up-logo {
  width: 40px;
  height: 40px;
  flex: none;
  object-fit: contain;
  pointer-events: none;
}
.catblock-up-text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.25;
  min-width: 0;
}
.catblock-up-title {
  font: 700 16px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #e23b2e;
}
.catblock-up-sub {
  font: 400 13px/1.3 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #6b6560;
}
.catblock-up-btn {
  flex: none;
  font: 700 13px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: #fff;
  background: #e23b2e;
  border-radius: 999px;
  padding: 9px 16px;
  white-space: nowrap;
}
.catblock-upgrade:hover .catblock-up-btn { background: #c1271c; }

/* Narrow slots (e.g. 300px MPU/skyscraper): shrink but keep the full message. */
@container (max-width: 336px) {
  .catblock-up-logo { width: 34px; height: 34px; }
  .catblock-up-title { font-size: 15px; }
  .catblock-up-sub { font-size: 12px; }
  .catblock-up-btn { padding: 8px 14px; font-size: 12px; }
}
/* Short slots (e.g. 728x90 / 970x90 leaderboards): single row, drop subtitle. */
@container (max-height: 120px) {
  .catblock-up-inner { flex-wrap: nowrap; }
  .catblock-up-text { text-align: left; }
  .catblock-up-sub { display: none; }
}
/* Tiny banners (mobile 320x50): keep only logo + button. */
@container (max-height: 70px) {
  .catblock-up-text { display: none; }
}
