/* HIPERDIARIO MOBILE 2026 */
/* Estilo editorial inspirado en El País / BBC */
/* Estructura real de tarjeta:
   .post > figure > (h4.category, a > picture > img)
   .post > div.content > (h2 > a, span.date)
*/

@media (max-width:768px){

  body{
    background:#fff !important;
  }

  /* ===== TÍTULOS DE SECCIÓN (ej. "Nuevas Noticias") ===== */
  h3.section-title{
    font-family: Georgia, 'Times New Roman', serif !important;
    font-weight: 700 !important;
    font-size: 1.4rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border-bottom: 3px solid #111 !important;
    padding-bottom: 8px !important;
    margin: 24px 0 16px 0 !important;
  }

  /* Tarjetas en grid van una por fila en móvil */
  .recent-news .col-lg-4, .recent-news .col-lg-6{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* ======================================================
     TARJETA .post -> imagen llena la tarjeta, texto encima
  ====================================================== */
  .recent-news .post{
    position: relative !important;
    display: block !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    margin-bottom: 20px !important;
    min-height: 260px !important;
  }

  /* La figura ocupa toda la tarjeta como contenedor de la imagen */
  .recent-news .post figure{
    margin: 0 !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
  }

  .recent-news .post figure a,
  .recent-news .post figure picture{
    display:block !important;
    width:100% !important;
    height:100% !important;
  }

  .recent-news .post figure img{
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    margin: 0 !important;
  }

  /* Degradado oscuro para que el texto blanco siempre se lea */
  .recent-news .post::after{
    content:"" !important;
    position:absolute !important;
    inset:0 !important;
    background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.05) 75%, rgba(0,0,0,0.35) 100%) !important;
    z-index: 1 !important;
    pointer-events: none !important;
  }

  /* Badge de categoría, arriba a la izquierda */
  .recent-news .post h4.category{
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    z-index: 2 !important;
    margin: 0 !important;
  }

  .recent-news .post h4.category a{
    display:inline-block !important;
    background:#003c7d !important;
    color:#fff !important;
    font-family: Arial, sans-serif !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 10px !important;
    border-radius: 2px !important;
    text-decoration: none !important;
  }

  /* Título y fecha, abajo, sobre el degradado */
  .recent-news .post .content{
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    padding: 16px !important;
    background: transparent !important;
  }

  .recent-news .post .content h2{
    font-family: Georgia, 'Times New Roman', serif !important;
    font-size: 1.15rem !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    margin: 0 0 6px 0 !important;
  }

  .recent-news .post .content h2 a{
    color: #fff !important;
    text-decoration: none !important;
  }

  .recent-news .post .content .date,
  .recent-news .post .content span{
    font-family: Arial, sans-serif !important;
    font-size: 0.75rem !important;
    color: #e2e2e2 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
  }

}