/* Placeholder styles for ad slots — fixed heights to avoid CLS */

.ad-slot {
  width: 100%;
  display: block;
  margin: 1.25rem 0;
}

.ad-placeholder {
  width: 100%;
  max-width: 336px;           /* safe upper bound for 336x280 */
  height: 280px;              /* fixed height -> no layout jump */
  margin-inline: auto;
  border: 1px dashed #c9c9c9;
  background: repeating-linear-gradient(
    45deg, #f7f7f7, #f7f7f7 10px, #f0f0f0 10px, #f0f0f0 20px
  );
  display: grid;
  place-items: center;
  font: 600 12px/1 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #777;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-radius: 8px;
  box-shadow: 0 0 0 1px #eee inset;
}


/* In-content block (desktop) */
.ad-in-content .ad-placeholder {
  max-width: 900px;
  height: 250px;
}

/* Below recipe: desktop wide, mobile compact */
.ad-below-recipe .ad-placeholder {
  max-width: 728px;
  height: 90px;               /* desktop */
}
@media (max-width: 768px) {
  .ad-below-recipe .ad-placeholder {
    max-width: 320px;
    height: 100px;            /* mobile */
  }
}

/* List interstitials — slightly smaller to keep card rhythm */
.ad-list .ad-placeholder {
  max-width: 336px;
  height: 250px;
}

@media (min-width: 1024px) {
  .ad-list .ad-placeholder {
    max-width: 100%;   /* тянем на всю ширину колонки */
    height: 250px;      /* классический wide-баннер */
  }
}

/* Affiliate banner inside ad-placeholder */
.ad-placeholder[data-format="affiliate"] {
  background: none;
  border: 0;
  box-shadow: none;
  padding: 0;
  display: block;      /* вместо grid */
  overflow: hidden;    /* чтобы img не вылезал */
}

.ad-placeholder[data-format="affiliate"] a {
  display: block;
  width: 100%;
  height: 100%;
}

.ad-placeholder[data-format="affiliate"] img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;   /* без искажений, заполняет поле */
}