/* /blogg/assets/css/styles.css */

/* ==========================================================================
   1) LISTADO DE POSTS
   ========================================================================== */

.page-blogg .blog-list{
  max-width:800px;
  margin:0 auto;
}

.page-blogg .blog-list h1{
  font-size:clamp(1.9rem,3vw,2.3rem);
  margin-bottom:1rem;
}

.page-blogg .blog-posts{
  list-style:none;
  margin:0;
  padding:0;
  display:grid;
  gap:18px;
}

.page-blogg .blog-post-item article{
  background:var(--card);
  border:1px solid rgba(255,255,255,.08);
  border-radius:16px;
  padding:18px 20px;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}

.page-blogg .blog-post-item article:hover{
  transform:translateY(-3px);
  border-color:var(--brand);
  box-shadow:0 0 0 2px var(--ring) inset,0 8px 20px rgba(0,0,0,.35);
}

.page-blogg .blog-post-thumb{
  width:100%;
  max-height:220px;
  object-fit:cover;
  border-radius:12px;
  margin-bottom:10px;
}

.page-blogg .blog-post-date{
  margin:0 0 8px;
  font-size:.85rem;
  color:var(--muted);
}

.page-blogg .blog-post-excerpt{
  margin:0 0 10px;
  color:var(--muted);
  font-size:.95rem;
}

.page-blogg .blog-post-tags a{
  font-size:.8rem;
  margin-right:.35rem;
}


/* ==========================================================================
   2) PÁGINA DE ARTÍCULO
   ========================================================================== */

/* Sección global del artículo */
.section-blog-article{
  padding-top:0;
  padding-bottom:60px;
}

.page-blogg .blog-article{
  margin:0 auto;
}

/* Cabecera del artículo */
.page-blogg .blog-article-header h1{
  font-size:clamp(2rem,3.2vw,2.5rem);
  margin-bottom:.4rem;
}

.page-blogg .blog-article-date{
  margin:0 0 6px;
  font-size:.9rem;
  color:var(--muted);
}

.page-blogg .blog-article-tags{
  margin:0 0 10px;
  font-size:.85rem;
}

.page-blogg .blog-article-tags a{
  margin-right:.35rem;
}

/* Contenido principal del artículo */
.page-blogg .blog-article-content img{
  max-width:100%;
  height:auto;
  border-radius:12px;
  display:block;
  margin:1rem auto;
}


/* ==========================================================================
   3) HERO DEL ARTÍCULO (IMAGEN FULL WIDTH)
   ========================================================================== */

.page-blogg .blog-hero{
  width:100%;
  margin:0;
}

.page-blogg .blog-hero-img{
  display:block;
  width:100%;
  max-height:420px;   /* ajustable */
  object-fit:cover;
  border-radius:0;
}


/* ==========================================================================
   4) LAYOUT PRINCIPAL + SIDEBAR
   ========================================================================== */
   
.blog-article-content h2 {
  margin-top: 80px;
}

.page-blogg .blog-layout{
  display:grid;
  grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);
  gap:32px;
  align-items:flex-start;
  margin-top:24px;
}

.page-blogg .blog-main{
  min-width:0;
}

.page-blogg .blog-sidebar{
  min-width:0;
}

/* Bloques de la sidebar (aprovecha .card global) */
.page-blogg .sidebar-block{
  margin-bottom:16px;
}

.page-blogg .sidebar-block h2{
  margin-top:0;
  margin-bottom:.4rem;
  font-size:1rem;
}


/* ==========================================================================
   5) TABLAS (ESTILO FONSI.ES)
   ========================================================================== */

.page-blogg table{
  margin-top:40px;
  width:100%;
  background-color:#222;
  color:#fff;
  border:1px solid #444;
  border-radius:8px;
  overflow:hidden;
  border-spacing:0;
  border-collapse:collapse;
  box-shadow:0 4px 8px rgba(0,0,0,.3);
}

.page-blogg table th{
  background-color:#fff;
  color:#222;
  padding:14px;
  font-weight:bold;
  text-transform:uppercase;
  border-bottom:3px solid #0073aa;
  border-right:1px solid #ddd;
  letter-spacing:.5px;
}

.page-blogg table th:last-child{
  border-right:none;
}

.page-blogg table td{
  padding:14px;
  border-bottom:1px solid #444;
  border-right:1px solid #444;
  transition:background .3s ease-in-out;
}

.page-blogg table td:last-child{
  border-right:none;
}

.page-blogg table tr:nth-child(even){
  background-color:#292929;
}

.page-blogg table tr:hover{
  background-color:#333;
  transform:scale(1.02);
  transition:all .2s ease-in-out;
}

.page-blogg table td:hover{
  background-color:#383838;
}


/* ==========================================================================
   6) RESPONSIVE
   ========================================================================== */

@media (max-width:960px){
  .page-blogg .blog-layout{
    grid-template-columns:1fr;
  }
}