/* Metricpedia planning placeholders. These are not live ads.
   CMS integration will replace/hide content at these stable data-ad-slot keys. */
.mp-ad-placeholder{display:flex!important;align-items:center!important;justify-content:center!important;min-width:0;min-height:0;border:1px dashed #b4c5dc!important;background:#eef4fc!important;box-shadow:none!important;cursor:default!important}
.mp-ad-placeholder:hover{transform:none!important;border-color:#b4c5dc!important;box-shadow:none!important}
.mp-ad-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;width:100%;min-width:0;padding:8px;text-align:center}
.mp-ad-brand{font-weight:800!important;font-size:13px!important;letter-spacing:-.6px;color:#385d8f!important}
.mp-ad-label{font-size:12px!important;font-weight:700!important;color:#657b9c!important}
.mp-ad-id{font-size:9px!important;letter-spacing:.2px;color:#8495ab!important}
#popular .mp-ad-popular{min-height:107px;padding:4px}
#guides .mp-ad-guide{flex:1;min-height:142px;margin:0;padding:4px}
html[data-theme="dark"] .mp-ad-placeholder{background:#19283b!important;border-color:#415a79!important}
html[data-theme="dark"] .mp-ad-brand{color:#bdcde2!important}
html[data-theme="dark"] .mp-ad-label{color:#adbed6!important}
html[data-theme="dark"] .mp-ad-id{color:#91a5c0!important}

/* Category template: reserve existing card positions, never introduce banner rows. */
.category-page #featured .mp-ad-category-featured{min-height:134px;padding:7px}
.category-page #ideas .mp-ad-category-guides{min-height:235px;padding:7px;overflow:hidden}
.category-page #featured .mp-ad-category-featured .mp-ad-inner,
.category-page #ideas .mp-ad-category-guides .mp-ad-inner{height:100%}

/* Subcategory hub: third calculator card is a fixed-size advertising placeholder. */
.paint-page .paint-grid .mp-ad-subcategory{min-height:276px;padding:8px;flex-direction:column}
.paint-page .paint-grid .mp-ad-subcategory .mp-ad-inner{height:100%}

/* Individual calculator template: reserved top billboard directly after hero. */
.calculator-page .mp-calculator-top-slot{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 0 20px;
}
.calculator-page .mp-ad-billboard{
  width:min(970px,100%);
  height:250px;
  min-height:250px;
  border-radius:9px;
}
.calculator-page .mp-ad-billboard .mp-ad-inner{height:100%}
@media(max-width:700px){
  .calculator-page .mp-calculator-top-slot{margin-bottom:15px}
  .calculator-page .mp-ad-billboard{
    width:min(320px,100%);
    height:100px;
    min-height:100px;
  }
}