/* Ads: separate styles for homepage ad slot(s)
   - Desktop: leaderboard-sized slot matching site container width
   - Mobile: single medium rectangle (300x250) with reserved space to avoid CLS
*/

.ad-section{padding:1rem 0;background:transparent}
.ad-container{max-width:var(--nav-max-width);margin:0 auto;padding:0 1rem}

/* Single responsive ad slot (leaderboard on desktop, medium rectangle on mobile) */
.ad-single{display:flex;align-items:center;justify-content:center}
.ad-slot{width:100%;background:var(--color-cards);border:1px solid rgba(15,23,42,0.04);display:flex;align-items:center;justify-content:center;overflow:hidden}
/* Reserve a 90px tall strip for leaderboards on desktop */
.ad-slot.leader{height:90px;max-width:100%}
.ad-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;color:rgba(15,23,42,0.6);font-weight:600;padding:0 1rem}

/* make the slot visually centered and capped so it doesn't become massive on very wide screens */
.ad-slot.leader{max-width:calc(var(--nav-max-width));}

/* Mobile: switch to a medium rectangle (taller) and cap width to common ad widths */
@media (max-width:720px){
  .ad-slot.leader{height:250px;max-width:320px}
}

/* Small screens between mobile and desktop keep a slightly taller bar */
@media (min-width:721px) and (max-width:1100px){
  .ad-slot.leader{height:90px;max-width:720px}
}

/* Utility: hidden note for editing */
.ad-note{font-size:.9rem;color:rgba(15,23,42,0.6);margin-top:.6rem;text-align:center}