/* Reserve the same space as the future creative before any provider loads.
   Container queries account for the desktop sidebar and narrow mobile shells. */
.ad-slot {
  container-type: inline-size;
  width: 100%;
  min-width: 0;
  margin: 24px auto;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.ad-slot-label {
  display: block;
  color: var(--pp-muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 10px;
  text-align: center;
}

.ad-slot-stage {
  display: grid;
  place-items: center;
  min-height: 250px;
}

.ad-slot .ad-slot-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 250px;
  height: 250px;
  min-height: 250px;
  max-width: 100%;
  box-sizing: border-box;
  gap: 12px;
  padding: 18px;
  border: 1px dashed #bccbc4;
  border-radius: 0;
  background: #f3f5f4;
  text-align: center;
}

.ad-slot-content strong,
.ad-slot-content p { margin: 0; }

.ad-slot .ad-slot-content strong { font-size: .875rem; }
.ad-slot .ad-slot-content p { color: var(--pp-muted); font-size: .8125rem; line-height: 1.5; }

/* The consent loader reveals a live slot and selects one supported size from
   its actual available width before requesting an ad. Never clip or resize a
   loaded creative to the placeholder's dimensions. */
.ad-slot-live[hidden] { display: none; }

.ad-slot-live .ad-slot-stage {
  display: block;
  width: 100%;
  min-height: 0;
  text-align: center;
}

.ad-slot .ad-slot-provider {
  display: inline-block;
  padding: 0;
  border: 0;
  margin: 0;
  vertical-align: top;
}

.ad-slot-provider[data-ad-size="250x250"] { width: 250px; height: 250px; }
.ad-slot-provider[data-ad-size="300x250"] { width: 300px; height: 250px; }
.ad-slot-provider[data-ad-size="728x90"] { width: 728px; height: 90px; }

.ad-slot-footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px 24px;
  margin-top: 20px;
  padding-inline: 12px;
  color: var(--pp-muted);
  font-size: .8125rem;
  text-align: center;
}

.ad-slot-footer a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
}

/* The creative is outside question, answer, map and submit cards. Keep normal
   document flow and room between the last quiz action and this placement. */
.ad-slot-session,
.ad-slot-review { margin-block: 48px 24px; }

/* Reading slots sit between complete content blocks. Their container query
   retains the 250px square fallback inside a genuinely narrow article. */
.ad-slot-reading { margin-block: 48px; }

@container (min-width: 300px) {
  .ad-slot .ad-slot-content { width: 300px; }
}

@container (min-width: 728px) {
  .ad-slot-stage { min-height: 90px; }
  .ad-slot .ad-slot-content {
    width: 728px;
    height: 90px;
    min-height: 90px;
    gap: 4px;
    padding: 10px 24px;
  }
}

@media (max-width: 360px) {
  /* A 320px phone has room for a standard 300px unit when shell gutters are
     released for this standalone stage. Other content retains its gutters. */
  .home-ad-wrap,
  [data-ad-placement="DASHBOARD_AFTER_SUMMARY"],
  .practice-session > .shell > .ad-slot-session,
  .practice-session > .shell > .ad-slot-review,
  .exam-run-page > .shell > .ad-slot-session,
  .exam-results-page > .shell > .ad-slot-session,
  .exam-results-page > .shell > .ad-slot-review {
    width: calc(100vw - 20px);
    max-width: none;
    margin-inline: calc((100% - (100vw - 20px)) / 2);
  }
}