/* View (detail) pages readability fix
   Applies to Papers/Products/Issues detail pages (view.php).
   Many blocks use inline styles, so we use !important where needed.
*/

.page-view .a4,
.page-view article.a4 {
  color: var(--text) !important;
}

/* Two-column summary boxes on papers detail */
.page-view article.a4 section {
  background: rgba(0,0,0,0.32) !important;
  border: 1px solid rgba(255,255,255,0.18) !important;
  border-radius: 16px !important;
}

.page-view article.a4 section h3 {
  color: rgba(255,255,255,0.96) !important;
  font-size: 18px !important;
  letter-spacing: -0.01em;
}

.page-view article.a4 section p {
  color: rgba(255,255,255,0.92) !important;
  font-size: 17px !important;
  line-height: 1.85 !important;
}

/* The excerpt box in papers used var(--muted) and 14px */
.page-view article.a4 section p[style*="var(--muted)"] {
  color: rgba(255,255,255,0.88) !important;
}

/* Main content blocks (summary/content) */
.page-view article.a4 > div[style*="white-space:pre-wrap"],
.page-view article.a4 > p,
.page-view article.a4 > div {
  color: rgba(255,255,255,0.94) !important;
}

.page-view article.a4 > div[style*="white-space:pre-wrap"] {
  font-size: 18px !important;
  line-height: 1.9 !important;
}

.page-view article.a4 a {
  color: rgba(255,255,255,0.95) !important;
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.page-view article.a4 a:hover {
  color: var(--accent) !important;
}

/* Responsive embeds (YouTube/Vimeo) */
.video-embed{position:relative;width:100%;max-width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:14px;border:1px solid var(--border);background:rgba(0,0,0,.25)}
.video-embed iframe{position:absolute;inset:0;width:100% !important;height:100% !important}
@media (max-width:520px){
  .video-embed{border-radius:12px}
}