/* Styles for templates/ad_sponsored_slot.html -- loaded by that partial itself so it
   looks right on any page that includes it (Chart, Delhi Chart, Forum, ...) without
   each host page needing to already load chart.css or any other page-specific sheet. */

.smr-sponsored-heading {
    text-align: center;
    font-weight: 700;
    font-size: clamp(0.7rem, 2.2vw, 0.8rem);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888;
    margin-bottom: 8px;
}
.smr-sponsored-slot {
    /* Fixed reserved height so the responsive "auto" ad unit popping in doesn't shift
       layout below it (CLS) -- shrinks on narrow screens where AdSense's own responsive
       sizing picks a shorter unit. */
    width: 100%;
    min-height: 280px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #f8f9fa;
    border: 1px solid #e9ecef;
    border-radius: 8px;
}
@media (max-width: 480px) {
    .smr-sponsored-slot { min-height: 100px; }
}
/* The slot is a flex container, so the <ins> would shrink to its (empty) content width and
   AdSense would see availableWidth=0 ("No slot size for availableWidth=0") -- make it fill
   the slot instead. */
.smr-sponsored-slot .adsbygoogle {
    flex: 1 1 100%;
    width: 100%;
}