/* === Research page custom styling === */

/* 1. Expand usable width and reduce side margins */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl {
  max-width: 1500px !important;   /* was ~1100–1200 in theme */
  padding-left: 1rem !important;
  padding-right: 1rem !important;
}

/* 2. Justify all paragraphs and headings nicely */
.page-content,
.page-content p,
.blog-post p,
.post-content p {
  text-align: justify;
  text-justify: inter-word;
}

/* Optional: prevent captions from being too wide on small screens */
.fig-grid figcaption {
  text-align: justify;
  text-justify: inter-word;
  font-size: 0.95rem;
  color: #555;
  margin-top: 0.4rem;
  line-height: 1.35;
}

/* 3. Figure grid — three per row on wide screens, responsive below */
.fig-grid {
  display: grid;
  gap: 1rem;
}
@media (min-width: 1200px) {
  .fig-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 700px) and (max-width: 1199.98px) {
  .fig-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 699.98px) {
  .fig-grid { grid-template-columns: 1fr; }
}

.fig-grid figure {
  margin: 0;
}
.fig-grid img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

/* 4. Manual per-image scale controls for visual uniformity */
.scale-85  > img { width: 85%; margin: 0 auto; display: block; }
.scale-90  > img { width: 90%; margin: 0 auto; display: block; }
.scale-95  > img { width: 95%; margin: 0 auto; display: block; }
.scale-100 > img { width: 100%; margin: 0 auto; display: block; }
.scale-105 > img { width: 105%; margin: 0 auto; display: block; }
.scale-110 > img { width: 110%; margin: 0 auto; display: block; }