/* Reserve complete ad slots before first paint, including labels and padding.
   Pending, blocked and unfilled ads retain exactly the same space. */
.ccf-event-ad-frame {
  --ccf-event-ad-height: 300px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 100%;
  height: calc(var(--ccf-event-ad-height) + 34px);
  min-height: calc(var(--ccf-event-ad-height) + 34px);
  max-height: calc(var(--ccf-event-ad-height) + 34px);
  margin: 14px 0 26px;
  padding: 6px;
  border: 1px solid #e6e9ee;
  border-radius: 6px;
  background: #f7f8fa;
  overflow: hidden;
}
.ccf-event-ad__label {
  flex: 0 0 16px;
  height: 16px;
  margin: 0;
  color: #737c87;
  font: 11px/16px Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ccf-event-ad__space {
  box-sizing: border-box;
  flex: 0 0 var(--ccf-event-ad-height);
  width: 100%;
  max-width: 970px;
  height: var(--ccf-event-ad-height);
  min-height: var(--ccf-event-ad-height);
  max-height: var(--ccf-event-ad-height);
  overflow: hidden;
}
/* Match carcruisefinder's original top banner: 345px mobile, 280px desktop. */
.ccf-event-ad--banner {
  height: 345px;
  min-height: 345px;
  max-height: 345px;
  padding: 13px 6px 14px;
  gap: 2px;
}
.ccf-event-ad--banner .ccf-event-ad__label {
  flex-basis: 14px;
  height: 14px;
  line-height: 14px;
}
.ccf-event-ad--multiplex {
  --ccf-event-ad-height: 600px;
}
@media (min-width: 769px) {
  .ccf-event-ad--banner {
    --ccf-event-ad-height: 250px;
    height: 280px;
    min-height: 280px;
    max-height: 280px;
    padding: 6px;
  }
}
@media (min-width: 768px) {
  .ccf-event-ad--multiplex {
    --ccf-event-ad-height: 450px;
  }
}