/* CF San Pedro — Modal de noticia completa (sin enlace externo).
   Reutiliza las variables/tokens de css/style.css. */

.news-modal-overlay {
  position: fixed; inset: 0; z-index: 210;
  background: rgba(10,17,26,0.7);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  opacity: 0; pointer-events: none;
  transition: opacity 0.2s ease;
}
.news-modal-overlay.show { opacity: 1; pointer-events: auto; }

.news-modal-box {
  position: relative;
  width: 90vw; height: 90vh;
  max-width: 1000px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 20px 60px rgba(10,17,26,0.35);
  display: flex; flex-direction: column;
  overflow: hidden;
  transform: translateY(12px);
  transition: transform 0.2s ease;
}
.news-modal-overlay.show .news-modal-box { transform: translateY(0); }

.news-modal-back {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 6px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--stadium-gray);
  font-family: var(--font-display); font-weight: 700; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--primary);
  background: var(--surface-container-low);
}
.news-modal-back:hover { color: var(--secondary); }

.news-modal-scroll { flex: 1; overflow-y: auto; }

.news-modal-image-wrap {
  width: 100%; max-height: 360px; overflow: hidden;
  background: var(--surface-container);
}
.news-modal-image { width: 100%; height: 100%; max-height: 360px; object-fit: cover; display: block; }

.news-modal-body { padding: 28px 32px 40px; max-width: 760px; margin: 0 auto; }
.news-modal-date {
  display: block; font-size: 13px; color: var(--outline);
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px;
}
.news-modal-title {
  font-family: var(--font-display); font-weight: 800; color: var(--primary);
  font-size: 26px; line-height: 1.25; margin: 0 0 20px;
}
.news-modal-content {
  font-size: 15px; line-height: 1.7; color: var(--on-surface-variant);
  white-space: pre-line;
  margin: 0;
}

body.news-modal-open { overflow: hidden; }

@media (max-width: 640px) {
  .news-modal-box { width: 92vw; height: 88vh; }
  .news-modal-image-wrap { max-height: 220px; }
  .news-modal-image { max-height: 220px; }
  .news-modal-body { padding: 22px 20px 32px; }
  .news-modal-title { font-size: 20px; }
  .news-modal-content { font-size: 14px; }
}