/**
 * repositorio-territorio.css
 * Programa #7 "Universidad - Territorio" — Scoped CSS para:
 *   1. Bloque de íconos ODS (.ods-bloque / .ods-grid)
 *   2. Fichas de proyecto (.repositorio-territorio / .proyecto-territorio)
 *
 * TODO el CSS está scoped bajo .ods-bloque o .repositorio-territorio.
 * No toca el resto de .entry-content. Igual patrón que unidad-estudios.css.
 * Reusa tokens CSS del tema: var(--main-orange-color), var(--main-green-color), etc.
 */

/* =============================================================================
   BLOQUE ODS — Banner + grid de íconos
   Neutraliza .main-default .entry-content img {width:100%;margin:24px 0;display:block}
   ============================================================================= */

.ods-bloque .ods-grid,
.proyecto-ods {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 16px 0;
}

/* Mata el bullet diamante naranja que el tema aplica a li::before */
.ods-bloque .ods-grid li::before,
.proyecto-ods li::before {
  content: none !important;
}

/* Íconos ODS — override obligatorio con !important (igual que unidad-estudios.css) */
.ods-bloque .ods-grid img,
.proyecto-ods img {
  width: 64px !important;
  height: auto !important;
  margin: 0 !important;
  border-radius: 0 !important;
  display: block !important;
}

/* Banner ODS — ancho completo, margen superior antes de la grilla */
.ods-banner {
  width: 100% !important;
  height: auto !important;
  margin: 24px 0 8px !important;
  border-radius: 8px !important;
  display: block !important;
}

/* =============================================================================
   FICHAS DE PROYECTO — Tarjeta con header naranja + datos + descripción + ODS
   ============================================================================= */

.proyecto-territorio {
  border: 1px solid #e8ebec;
  border-radius: 12px;
  margin: 0 0 28px;
  overflow: hidden;
}

.proyecto-header {
  background: var(--main-orange-color, #e37604);
  color: #fff;
  padding: 16px 20px;
}

.proyecto-tipo {
  display: inline-block;
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  opacity: .95;
}

.proyecto-header .proyecto-titulo {
  color: #fff !important;
  margin: 6px 0 4px !important;
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.3;
}

.proyecto-periodo {
  display: block;
  font-size: .85rem;
  opacity: .9;
}

/* Ficha de datos en grid responsive */
.proyecto-ficha {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
  margin: 18px 20px;
}

.proyecto-ficha dt {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--main-green-color, #01a499);
  margin: 0;
}

.proyecto-ficha dd {
  margin: 2px 0 0;
  color: var(--main-dark-grey-color, #394049);
}

.proyecto-descripcion {
  margin: 0 20px 16px;
}

.proyecto-ods {
  margin: 0 20px 18px;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 600px) {
  .proyecto-ficha {
    grid-template-columns: 1fr;
  }

  .ods-bloque .ods-grid img,
  .proyecto-ods img {
    width: 52px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Reservado: no hay transiciones actualmente */
}