/*
 * SEOLateral - Estilos de Widgets
 * Versión: 1.4.0
 *
 * Línea divisora: SOLO bajo el título del widget.
 * Los artículos de la lista NO tienen separadores entre ellos.
 * --sl-list-font-weight controla bold/normal en la lista de cada widget.
 * --sl-color-hdr-bg / --sl-color-hdr-text controlan fondo y texto del título.
 */

/* ============================================================
   VARIABLES BASE
   ============================================================ */
.seolateral-widget {
    --sl-font-family:        inherit;
    --sl-font-size-title:    14px;
    --sl-list-font-weight:   600;
    --sl-color-title:        #1a1a1a;
    --sl-color-title-hover:  #555555;
    --sl-color-date:         #888888;
    --sl-color-rank-border:  #1a1a1a;
    --sl-color-rank-text:    #1a1a1a;
    --sl-color-rank-hover:   #1a1a1a;
    --sl-color-divider:      #e5e5e5;
    --sl-color-hdr-text:     #1a1a1a;
    --sl-color-hdr-bg:       transparent;
    --sl-thumb-size:         72px;
    --sl-rank-size:          36px;
    --sl-border-radius:      4px;
    font-family: var(--sl-font-family);
}

/* ============================================================
   TÍTULO DEL WIDGET — renderizado propio (sin depender del tema)
   .seolateral-hdr es el <h3> que generamos nosotros con inline styles
   en Recientes y Más Leídos. Los estilos inline tienen prioridad absoluta;
   esta regla solo añade lo que no viene inline.
   ============================================================ */
.seolateral-hdr {
    /* font-size, color, background, padding, border-bottom: vienen 100% inline */
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    1.3;
    margin:         0 0 12px 0;
}

/* Categoría usa .seolateral-cat-title — mismo reset */
.seolateral-cat-title {
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    1.3;
    margin:         0;
    padding:        0;
}

/* Fallback para themes que puedan tomar control del .widget-title interno
   (no debería ocurrir ya que no lo usamos, pero por si acaso) */
.seolateral-widget .widget-title,
.seolateral-widget h2.widgettitle,
.seolateral-widget h3.widgettitle {
    display: none !important;
}

/* ============================================================
   LISTA BASE — SIN separadores entre artículos
   ============================================================ */
.seolateral-list {
    list-style: none;
    margin:     0;
    padding:    0;
}

.seolateral-list .seolateral-item {
    display:     flex;
    align-items: flex-start;
    gap:         12px;
    padding:     10px 0;
    /* Sin border-bottom: los artículos no tienen líneas entre ellos */
}

.seolateral-list .seolateral-item:first-child {
    padding-top: 0;
}

.seolateral-list .seolateral-item:last-child {
    padding-bottom: 0;
}

/* ============================================================
   MINIATURAS
   ============================================================ */
.seolateral-thumb {
    display:       block;
    flex-shrink:   0;
    width:         var(--sl-thumb-size);
    height:        var(--sl-thumb-size);
    overflow:      hidden;
    border-radius: var(--sl-border-radius);
    background:    #f0f0f0;
}

.seolateral-thumb img {
    width:      100%;
    height:     100%;
    object-fit: cover;
    display:    block;
    transition: transform 0.2s ease;
}

.seolateral-thumb:hover img {
    transform: scale(1.05);
}

/* ============================================================
   INFORMACIÓN DEL ARTÍCULO
   ============================================================ */
.seolateral-info {
    display:         flex;
    flex-direction:  column;
    justify-content: center;
    gap:             4px;
    flex:            1;
    min-width:       0;
}

.seolateral-title {
    display:         block;
    font-size:       var(--sl-font-size-title);
    font-weight:     var(--sl-list-font-weight);
    line-height:     1.4;
    color:           var(--sl-color-title);
    text-decoration: none;
    word-wrap:       break-word;
    overflow-wrap:   break-word;
    hyphens:         auto;
}

.seolateral-title:hover,
.seolateral-title:focus {
    color:           var(--sl-color-title-hover);
    text-decoration: underline;
}

.seolateral-date {
    font-size:   0.75rem;
    color:       var(--sl-color-date);
    font-weight: 400;
}

/* ============================================================
   WIDGET: ARTÍCULOS MÁS RECIENTES
   ============================================================ */
.seolateral-list--recent .seolateral-item {
    align-items: center;
}

/* ============================================================
   WIDGET: TOP MÁS LEÍDOS
   Borde del círculo = color de hover (siempre visible y coherente).
   Al hacer hover se rellena con ese color y el número pasa a blanco.
   ============================================================ */
.seolateral-list--topread .seolateral-item {
    align-items: center;
    gap:         14px;
}

.seolateral-rank {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-shrink:     0;
    width:           var(--sl-rank-size);
    height:          var(--sl-rank-size);
    border-radius:   50%;
    border:          2px solid var(--sl-color-rank-border);
    background:      transparent;
    font-size:       0.875rem;
    font-weight:     700;
    color:           var(--sl-color-rank-text);
    line-height:     1;
    transition:      background 0.2s ease, color 0.2s ease;
}

.seolateral-list--topread .seolateral-item:hover .seolateral-rank {
    background: var(--sl-color-rank-hover);
    color:      #ffffff;
}

.seolateral-list--topread .seolateral-title {
    font-size:   var(--sl-font-size-title);
    font-weight: var(--sl-list-font-weight);
    line-height: 1.45;
}

/* ============================================================
   WIDGET: POR CATEGORÍA
   El encabezado (h3) recibe estilos 100% inline desde PHP:
   fondo de color completo O línea divisora, según configuración.
   Los artículos de la lista van sin separadores.
   ============================================================ */
.seolateral-cat-header {
    margin-bottom: 0;
}

.seolateral-cat-title {
    font-weight:    700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height:    1.3;
    /* font-size, color, bg, padding y border-bottom vienen inline desde PHP */
}

.seolateral-cat-title a:hover {
    text-decoration: underline !important;
}

.seolateral-list--category .seolateral-item {
    align-items: center;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 480px) {
    .seolateral-widget {
        --sl-thumb-size: 60px;
        --sl-rank-size:  32px;
    }
}