/* Estilos específicos de la página de noticias (.section base vive en layout.css). */

.noticias-main {
  max-width: 56.25rem;
  margin: 0 auto;
  padding: var(--space-6) var(--space-3) var(--space-8);
}

@media (min-width: 768px) {
  .noticias-main {
    padding: 80px var(--space-6) 120px;
  }
}

.noticias-main h1 {
  font-size: 2rem;
  margin: 0 0 var(--space-5);
}

@media (min-width: 640px) {
  .noticias-main h1 {
    font-size: 2.5rem;
  }
}

.news-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.news-item {
  overflow: hidden;
}

.news-cover {
  /* height:auto es necesario aunque haya aspect-ratio: si el atributo HTML
     height queda como valor definido (no auto), el navegador lo usa tal
     cual e ignora aspect-ratio (spec: aspect-ratio solo interviene cuando
     al menos una dimensión es auto). */
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.news-item-body {
  padding: var(--space-4);
}

@media (min-width: 640px) {
  .news-item-body {
    padding: var(--space-5);
  }
}

.news-item time {
  display: block;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* --color-accent-text: el naranja de marca falla AA sobre fondo claro (tokens.css) */
  color: var(--color-accent-text);
  margin: 0 0 var(--space-2);
}

.news-item h2 {
  font-size: 1.375rem;
  margin: 0 0 var(--space-3);
}

@media (min-width: 640px) {
  .news-item h2 {
    font-size: 1.625rem;
  }
}

.news-item > .news-item-body > p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-3);
}

.news-photo-secondary {
  margin: 0;
}

.news-photo-secondary img {
  /* Mismo motivo que .hero-media img en home.css: sin height:auto, el
     atributo HTML height se aplica literalmente en vez de escalar con el
     ancho (imagen "alargada"). */
  width: 100%;
  max-width: 15rem;
  height: auto;
  border-radius: var(--radius-md);
  display: block;
  margin: 0 auto;
}

.news-photo-secondary figcaption {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  text-align: center;
  margin-top: var(--space-2);
}