/* ==========================================================================
   Ad containers. Each reserves its height so an ad arriving late never
   shifts content. Placeholder mode (local / staging) draws the slot.
   ========================================================================== */

.fcs-ad {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  width: 100%;
  margin: 0;
  padding: 0.5rem 0.5rem 0.75rem;
  border: 1px solid var(--fcs-border);
  border-radius: var(--fcs-radius);
  background: var(--fcs-surface);
  overflow: hidden;
  text-align: center;
}
.fcs-ad__label {
  align-self: flex-start;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--fcs-text-3);
}
.fcs-ad ins.adsbygoogle { width: 100%; }

/* Reserved heights (label + unit) */
.fcs-ad--rect   { min-height: 290px; }
.fcs-ad--tall   { min-height: 640px; }
.fcs-ad--fluid  { min-height: 300px; margin: 1.75em 0; }
.fcs-ad--infeed { min-height: 220px; }
.fcs-ad--auto   { min-height: 140px; }
@media (max-width: 767px) {
  .fcs-ad--tall  { min-height: 290px; }
  .fcs-ad--fluid { min-height: 280px; }
}

/* AdSense flags a slot it could not fill; collapse it fully */
.fcs-ad:has(ins[data-ad-status="unfilled"]) { display: none; }

/* Rail slots */
.fcs-rail { display: flex; flex-direction: column; gap: var(--fcs-space-5); }
@media (min-width: 1024px) {
  .fcs-rail--latest .fcs-ad, .fcs-rail--popular .fcs-ad { position: sticky; top: calc(var(--fcs-header-h) + 1rem); }
}

/* Placeholder mode */
.fcs-ad.is-placeholder { border-style: dashed; border-color: var(--fcs-border-strong); background: repeating-linear-gradient(45deg, transparent 0 10px, color-mix(in srgb, var(--fcs-border) 45%, transparent) 10px 20px); }
.fcs-ad__box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
  flex: 1;
  width: 100%;
  color: var(--fcs-text-3);
  font-size: var(--fcs-text-xs);
}
.fcs-ad__box strong { font-family: var(--fcs-font-mono); color: var(--fcs-text-2); }
.fcs-ad--rect .fcs-ad__box { max-width: 300px; min-height: 250px; }
.fcs-ad--tall .fcs-ad__box { max-width: 300px; min-height: 600px; }
@media (max-width: 767px) { .fcs-ad--tall .fcs-ad__box { min-height: 250px; } }