/**
 * AD SLOTS — Estilos consolidados para todos los contenedores de publicidad
 * 
 * Ubicaciones:
 * - Sidebar (single, archive, home)
 * - Content (debajo del contenido en single)
 * - Opinion (home sidebar)
 * - Municipales
 * 
 * @package InformeDigital
 */

/* ==========================================================
   VARIABLES DE PUBLICIDAD
========================================================== */
:root {
    --ad-slot-bg: repeating-linear-gradient(
        45deg,
        #F2F2F2,
        #D8D8D8 6px,
        #F2F2F2 6px,
        #F2F2F2 8px
    );
    --ad-slot-bg-size: 100% 400px;
    --ad-slot-padding: 16px;
    --ad-slot-gap: 24px;
    --ad-slot-min-height: 250px;
}

/* ==========================================================
   BASE: Estilos comunes para todos los ad-slots
========================================================== */
.informe-sidebar-ad-slot,
.informe-content-ad-slot,
.informe-opinion-ad-slot,
.muni-ad-slot {
    display: flex;
    flex-direction: column;
    gap: var(--ad-slot-gap);
    background: var(--ad-slot-bg);
    background-size: var(--ad-slot-bg-size);
    padding: var(--ad-slot-padding);
    box-sizing: border-box;
}

/* ==========================================================
   SIDEBAR AD SLOT (Single/Archive)
========================================================== */
.informe-sidebar-ad {
    padding: 0;
}

.informe-sidebar-ad-slot {
    /* Hereda estilos base */
}

/* ==========================================================
   CONTENT AD SLOT (Debajo del contenido en Single)
========================================================== */
.informe-single-ad-below-content {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid #e6e6e6;
}

.informe-content-ad-slot {
    /* Hereda estilos base */
}

/* ==========================================================
   OPINION AD SLOT (Home sidebar - Opinión)
========================================================== */
.informe-opinion-ad-slot {
    position: sticky;
    top: 20px;
}

/* ==========================================================
   MUNICIPALES AD SLOT
========================================================== */
.muni-ad-slot {
    position: sticky;
    top: 20px;
}

/* ==========================================================
   ITEMS DENTRO DE AD-SLOTS
   Por defecto: width auto para permitir centrado
========================================================== */
.informe-sidebar-ad-slot .ia-ad,
.informe-sidebar-ad-slot .ia-ad-item,
.informe-content-ad-slot .ia-ad,
.informe-content-ad-slot .ia-ad-item,
.informe-opinion-ad-slot .ia-ad,
.informe-opinion-ad-slot .ia-ad-item,
.muni-ad-slot .ia-ad,
.muni-ad-slot .ia-ad-item {
    margin-bottom: 0; /* Reset margin, usar gap del padre */
    max-width: 100%;
}

/* Imágenes responsivas dentro de ads */
.informe-sidebar-ad-slot img,
.informe-content-ad-slot img,
.informe-opinion-ad-slot img,
.muni-ad-slot img {
    max-width: 100%;
    height: auto;
}

/* Placeholder temporal */
.informe-ad-placeholder {
    text-align: center;
    color: #999;
    font-size: .875rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ==========================================================
   RESPONSIVE: TABLET (max-width: 1024px)
========================================================== */
@media (max-width: 1024px) {
    .informe-opinion-ad-slot,
    .muni-ad-slot {
        position: static;
        min-height: var(--ad-slot-min-height);
        align-items: center; /* Centrar items en tablet */
        justify-content: center;
    }
    
    /* Items centrados - ancho automático */
    .informe-opinion-ad-slot .ia-ad,
    .informe-opinion-ad-slot .ia-ad-item,
    .muni-ad-slot .ia-ad,
    .muni-ad-slot .ia-ad-item {
        width: auto;
        max-width: 100%;
    }
}

/* ==========================================================
   RESPONSIVE: MOBILE (max-width: 768px)
========================================================== */
@media (max-width: 768px) {
    .informe-sidebar-ad-slot,
    .informe-content-ad-slot,
    .informe-opinion-ad-slot,
    .muni-ad-slot {
        min-height: var(--ad-slot-min-height);
        align-items: center; /* Centrar items en mobile */
        justify-content: center;
    }
    
    /* Items centrados - ancho automático */
    .informe-sidebar-ad-slot .ia-ad,
    .informe-sidebar-ad-slot .ia-ad-item,
    .informe-content-ad-slot .ia-ad,
    .informe-content-ad-slot .ia-ad-item,
    .informe-opinion-ad-slot .ia-ad,
    .informe-opinion-ad-slot .ia-ad-item,
    .muni-ad-slot .ia-ad,
    .muni-ad-slot .ia-ad-item {
        width: auto;
        max-width: 100%;
    }
}