/* about.css — complementa estilos.css para reproducir la estructura FIDE y 4 bloques */

/* Ajustes hero */
.hero-news { margin-top: 1rem; border-radius: 12px; min-height: 180px; background-size: cover; background-position: center; color: #fff; }
.hero-news .overlay { border-radius:12px; background: linear-gradient(180deg, rgba(0,0,0,0.45), rgba(0,0,0,0.12)); }

/* Main layout: aprovechar .main-grid de estilos.css; reforzar espacios */
.main-grid { gap: 1.6rem; align-items: start; }

/* Lista de noticias: grid flexible */
.news-list-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }

/* Card resumen */
.news-block .summary { display:flex; gap:12px; align-items:flex-start; }
.summary-thumb { width:120px; height:90px; object-fit:cover; border-radius:8px; flex-shrink:0; }
.summary-body h3 { margin:0 0 6px 0; font-size:1.05rem; font-family: 'Merriweather', serif; }
.summary-body .muted { margin:6px 0 8px 0; color:var(--muted); }

/* Botón Leer más estilo similar a links/ghost buttons */
.read-more { background: transparent; border: 1px solid rgba(11,11,11,0.06); padding: 8px 12px; border-radius:8px; cursor:pointer; font-weight:700; }

/* Contenido completo del artículo (oculto por defecto) */
.article-full { display:none; margin-top:12px; }
.article-full.expanded { display:block; background:#fff; padding:16px; border-radius:10px; box-shadow: var(--shadow); }
.article-hero { width:100%; height:320px; object-fit:cover; border-radius:8px; margin:12px 0; }

/* Close button simple */
.close-article { display:inline-block; background:transparent; border:0; color:var(--muted); font-weight:700; margin-bottom:8px; cursor:pointer; }

/* Sidebar "Más en el tema" */
.related-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.related-list li a { display:flex; gap:10px; align-items:center; text-decoration:none; color:inherit; }
.related-list img { width:72px; height:50px; object-fit:cover; border-radius:6px; }

/* responsive: en pantallas anchas, dos columnas (contenido + sidebar) */
@media (min-width:720px) {
  .main-grid { grid-template-columns: 1fr 340px; }
  .news-list-grid { grid-template-columns: 1fr; }
  .article-hero { height:360px; }
}

/* si quieres mostrar los 4 bloques en 2 columnas */
@media (min-width:980px) {
  .news-list-grid { grid-template-columns: 1fr; } /* dejamos 1 columna con stacked + expand; si prefieres 2x2, cambia a repeat(2,1fr) */
}

/* Pequeños toques */
.card { transition: transform .18s ease, box-shadow .18s ease; }
.card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(11,11,11,0.08); }

/* Accesibilidad: focus visible */
.read-more:focus, .close-article:focus, .related-list a:focus { outline: 3px solid rgba(212,175,55,0.12); outline-offset:3px; border-radius:6px; }

/* --- Mobile menu fixes: asegurar que el overlay cubra y no deje ver/mezclar texto --- */
.mobile-menu {
  z-index: 9999;                    /* siempre por delante del header y del contenido */
  top: 64px;                        /* si quieres que no cubra el header; pon 0 si quieres cubrirlo */
  left: 0;
  right: 0;
  background: rgba(11,11,11,0.98);  /* casi opaco para ocultar el hero debajo */
  padding: 1.2rem;
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .18s var(--fast), transform .18s var(--fast);
}

/* estado abierto (ya lo tienes, esto es para asegurar z-index también) */
.mobile-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* limpiar la lista y espaciar los enlaces para que no se apilen feo */
.mobile-menu nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-menu nav li {
  margin: .5rem 0;
}
.mobile-menu nav a {
  display: block;
  font-size: 1.05rem;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  padding: .35rem 0;
}