/* ══════════════════════════════════════
   noticias.css
   Grid de noticias con fotos estilo
   medellin.edu.co
══════════════════════════════════════ */

.noticias-section {
  padding: var(--sp-3xl) 0;
}

/* ── Grid ── */
.news-grid {
  display: grid;
  grid-template-columns: 3fr 2fr;
  grid-template-rows: 310px 290px;
  gap: 8px;
}

/* ── Card base ── */
.news-card {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  cursor: pointer;
  display: block;
  text-decoration: none;
}
.news-card:hover .news-photo { transform: scale(1.04); }

/* Card grande ocupa 2 filas */
.news-card--big { grid-row: 1 / 3; }

/* ── Fotos (backgrounds de color mientras no hay imgs reales) ── */
.news-photo {
  width: 100%;
  height: 100%;
  transition: transform .45s ease;
  position: relative;
}
.news-photo--1 {
  background: linear-gradient(160deg, #1a3a2a 0%, #2d6a4f 30%, #74c69d 100%);
}
.news-photo--2 {
  background: linear-gradient(160deg, #1b263b 0%, #415a77 50%, #778da9 100%);
}
.news-photo--3 {
  background: linear-gradient(160deg, #0d3b6e 0%, #1565c0 60%, #42a5f5 100%);
}
.news-photo--4 {
  background: linear-gradient(160deg, #370617 0%, #9d0208 50%, #dc2f02 100%);
}

/* Emoji ilustración dentro de la foto */
.news-illus {
  position: absolute;
  font-size: 4rem;
  bottom: 20px;
  right: 20px;
  opacity: .18;
  pointer-events: none;
  line-height: 1;
}
.news-card--big .news-illus { font-size: 8rem; }

/* Overlay degradado */
.news-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,.88) 0%,
    rgba(0,0,0,.12) 55%,
    transparent 100%
  );
}

/* ── Cuerpo de la noticia (sobre la foto) ── */
.news-body {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 1.4rem 1.6rem;
  z-index: 2;
}
.news-card--big .news-body {
  padding: 2rem 2.2rem;
}

.news-cats {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .4rem;
}
.news-cat {
  font-size: .68rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
}
.news-cat-sep {
  font-size: .68rem;
  color: rgba(255,255,255,.4);
}

/* Línea naranja bajo las categorías */
.news-cat-line {
  width: 28px;
  height: 2.5px;
  background: var(--c-naranja);
  margin-bottom: .55rem;
  border-radius: 2px;
}

.news-title {
  font-family: var(--f-display);
  font-size: 1rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.3;
  text-shadow: 0 1px 8px rgba(0,0,0,.4);
}
.news-card--big .news-title {
  font-size: 1.4rem;
}

.news-date {
  font-size: .7rem;
  color: rgba(255,255,255,.5);
  margin-top: .5rem;
}