/* Page introduction and hero crop */
.news-intro {
  width: min(100%, 54rem);
  margin: 0 auto;
  color: var(--color-text-muted);
  text-align: center;
}

.header-image img { object-position: center 35%; }

.news-page-intro { margin-bottom: var(--space-4); text-align: center; }

/* News articles and images */
.news-section {
  margin-bottom: var(--space-4);
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}

.news-section time {
  display: block;
  margin-bottom: 0.75rem;
  color: var(--color-brand-dark);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.news-section.has-images {
  display: grid;
  gap: var(--space-4);
}

.news-section .text-content,
.news-section .image-content { min-width: 0; }

.news-section .text-content {
  width: 100%;
  max-width: 42rem;
}

/* One image: text and one prominent image share the available desktop width. */
.news-section.one-image { grid-template-columns: minmax(0, 1fr); }

/* Two images: the text and each image receive a dedicated desktop column. */
.news-section.two-images { grid-template-columns: minmax(0, 1fr); }

.news-section.one-image .image-content,
.news-section.two-images .image-content { display: block; }

.news-section.one-image .text-content { max-width: 34rem; }
.news-section.two-images .text-content { max-width: 29rem; }

/* Text-only news sections use the full padded content width. */
.news-section:not(.has-images) .text-content {
  width: 100%;
  max-width: none;
}

/* Three or more images: keep the text above an even image gallery. */
.news-section.image-gallery { display: block; }

.news-section.image-gallery .text-content {
  width: 100%;
  max-width: none;
}

.news-section.image-gallery .image-content {
  display: grid;
  width: 100%;
  margin-top: var(--space-4);
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-3);
}

/* Keep prepared image slots out of the layout until their src is supplied. */
.news-section .image-content[hidden] { display: none !important; }

.news-section .image-content img {
  width: 100%;
  max-width: none;
  height: auto;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  object-fit: cover;
}

/* A single image remains prominent without becoming a shallow banner. */
.news-section.one-image .image-content img { aspect-ratio: 5 / 4; }

/* Two-image sections use taller, matching photo-card proportions. */
.news-section.two-images .image-content img { aspect-ratio: 4 / 5; }

/* Gallery tiles are slightly taller while remaining compact in four columns. */
.news-section.image-gallery .image-content img { aspect-ratio: 5 / 4; }

.news-section h2 { margin-bottom: 0.6rem; font-size: clamp(1.25rem, 1.8vw, 1.5rem); }
.news-section p { margin-bottom: 0; color: var(--color-text-muted); }

/* Responsive image layouts */
@media (min-width: 48rem) {
  .news-section.image-gallery .image-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 64rem) {
  .news-section.one-image {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
    align-items: center;
  }

  .news-section.two-images {
    grid-template-columns: minmax(0, 1fr) repeat(2, minmax(0, 0.85fr));
    align-items: center;
  }

  .news-section.image-gallery .image-content {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Exactly three images fill the gallery row without a fourth empty column. */
  .news-section.image-gallery.three-images .image-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}