/* =========================================================
   Destacado — Front Test (Refactor)
========================================================= */

.informe-front-test .informe-destacado {
  max-width: var(--max-width-container); /* 1320px */
  margin: var(--space-5) auto var(--space-12); /* 20px auto 48px */
  padding: 0; /* padding removido */
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: var(--space-4); /* 16px */
}

/* Variantes: mismo contenido, distinto peso visual (qué columna es "big") */
.informe-front-test .informe-destacado.informe-destacado--big_left {
  grid-template-columns: 2fr 1fr 1fr;
}
.informe-front-test .informe-destacado.informe-destacado--big_center {
  grid-template-columns: 1fr 2fr 1fr;
}
.informe-front-test .informe-destacado.informe-destacado--big_right {
  grid-template-columns: 1fr 1fr 2fr;
}

/* Destacada V1: col1 main (ancho), col2 y col3 listas */
.informe-front-test .informe-destacado.informe-destacado--destacada-v1 {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Destacada V2: mismo grid que V1 (main izquierda) */
.informe-front-test .informe-destacado.informe-destacado--destacada-v2 {
  grid-template-columns: 2fr 1fr 1fr;
}

/* Destacada V3: main al centro */
.informe-front-test .informe-destacado.informe-destacado--destacada-v3 {
  grid-template-columns: 1fr 2fr 1fr;
}

.informe-front-test .informe-destacado__col {
  padding: 0;
}

.informe-front-test .informe-destacado__col--left {
  border-right: 1px solid var(--color-border-list); /* #e6e6e6 */
  padding-right: var(--space-5); /* 20px */
}

.informe-front-test .informe-destacado__col--right {
  border-left: 1px solid var(--color-border-list); /* #e6e6e6 */
  padding-left: var(--space-5); /* 20px */
}

/* Meta etiqueta - Estilos de informe-post-card__meta / __category (política, etc.) */
.informe-front-test .informe-destacado-meta {
  margin-bottom: 0; /* Igual que .informe-post-card__meta */
}

.informe-front-test .informe-destacado-meta__sep {
  margin: 0 0.35em;
  opacity: 0.7;
}

.informe-front-test .informe-destacado-meta__cat {
  display: inline-block;
  font-family: MarcinAntB, sans-serif; /* = .informe-post-card__category */
  font-size: var(--fs-meta);           /* .6875rem - 11px */
  line-height: var(--lh-excerpt);      /* 1.27 */
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);      /* .0125rem */
  font-weight: var(--fw-meta);         /* 500 */
  color: var(--sde-color-primary);     /* = __category - naranja/primary */
}

/* Fecha - Unificado con post-card__date (sin margin propio) */
.informe-front-test .informe-destacado-date {
  font-family: MarcinAntB, sans-serif; /* El País */
  font-size: var(--fs-meta);         /* .6875rem - 11px */
  line-height: var(--lh-excerpt);    /* 1.27 */
  text-transform: uppercase;
  letter-spacing: var(--ls-meta);    /* .0125rem */
  color: var(--color-meta);          /* #666 */
  margin: 0; /* Sin margen - igual que post-card__date */
}
.informe-front-test .informe-destacado-date time { font: inherit; color: inherit; }

/* Miniatura en listas - Unificado con post-card__image */
.informe-front-test .informe-destacado-thumb,
.informe-front-test .informe-destacado-list .informe-destacado-thumb {
  margin-bottom: .8125rem; /* 13px - igual que post-card__image */
  overflow: hidden;
}

.informe-front-test .informe-destacado-list .informe-destacado-thumb img {
  width: 100%;
  display: block;
  height: auto;
  border-radius: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Listas laterales */
.informe-front-test .informe-destacado-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.informe-front-test .informe-destacado-list li {
  margin: 0 0 1.25rem 0;
  padding-bottom: 1.125rem;
  border-bottom: 1px solid var(--color-border-list); /* #e6e6e6 - más suave */
}

/* Título secundario (listas left/right) - Unificado con post-card__title */
.informe-front-test .informe-destacado-secondary-title,
.informe-front-test .informe-destacado-list h3 {
  margin: 0 0 8px 0; /* Igual que post-card__title */
  line-height: var(--lh-title-list); /* 1.17 */
}

.informe-front-test .informe-destacado-secondary-title a,
.informe-front-test .informe-destacado-list h3 a {
  font-family: MajritTx, serif; /* El País */
  font-size: 1.25rem;
  line-height: 1.15;
  letter-spacing: -0.018125rem;
  font-weight: 700;
  color: var(--color-black);
  text-decoration: none;
  display: inline-block;
}

.informe-front-test .informe-destacado-secondary-title a:hover,
.informe-front-test .informe-destacado-list h3 a:hover,
.informe-front-test .informe-destacado-main h2 a:hover {
  color: var(--color-title-hover);  /* #444 */
  text-decoration: underline;
}

.informe-front-test .informe-destacado-secondary-title a:focus,
.informe-front-test .informe-destacado-list h3 a:focus {
  outline: 2px solid #222;
  outline-offset: 2px;
}

/* Imagen principal - Unificado con post-card__image */
.informe-front-test .informe-destacado-main__image-wrapper {
  display: block;
  margin-bottom: .8125rem; /* 13px - igual que post-card__image */
  overflow: hidden;
}

.informe-front-test .informe-destacado-main img {
  width: 100%;
  display: block;
  height: auto;
  border-radius: 0;
  aspect-ratio: 3 / 2;
  object-fit: cover;
}

/* Título principal (main destacado) - Unificado con post-card__title */
.informe-front-test .informe-destacado-main-title,
.informe-front-test .informe-destacado-main h2 {
  margin: 0 0 8px 0; /* Igual que post-card__title */
}

.informe-front-test .informe-destacado-main-title a,
.informe-front-test .informe-destacado-main h2,
.informe-front-test .informe-destacado-main h2 a {
  font-family: MajritTx, serif; /* El País */
  font-size: 1.875rem;
  line-height: 1.07;
  letter-spacing: -0.071875rem;
  font-weight: var(--fw-title-featured);/* 700 para destacados grandes */
  color: var(--color-black);
  text-decoration: none;
}

.informe-front-test .informe-destacado-excerpt {
  font-family: MajritTxRoman, serif; /* El País */
  font-size: var(--fs-excerpt);     /* .9375rem - 15px */
  line-height: var(--lh-excerpt);   /* 1.27 */
  color: var(--color-excerpt);      /* #4a4a4a */
  margin-top: 8px;
  margin-bottom: 8px; /* Igual que post-card__excerpt */
  max-width: 680px;
}

/* Responsive */
@media (max-width: 1100px) {
  .informe-front-test .informe-destacado {
    grid-template-columns: 260px 1fr 260px;
  }
}

@media (max-width: 1024px) {
  .informe-front-test .informe-destacado {
    display: flex; /* usar mismo enfoque que mobile */
    flex-direction: column;
    gap: var(--space-8); /* 32px - consistente con mobile */
    max-width: 100%;
    width: 100%;
    padding: 0;
    margin: var(--space-5) auto var(--space-12); /* 20px auto 48px */
  }
  .informe-front-test .informe-destacado__col--center { order: 1; }
  .informe-front-test .informe-destacado__col--left { order: 2; }
  .informe-front-test .informe-destacado__col--right { order: 3; }
  /* --- AJUSTE RESPONSIVE: MAIN → COL2 → COL3 (solo order, sin tocar HTML) --- */
  /* V1/V2: main en left → left primero */
  .informe-front-test .informe-destacado.informe-destacado--destacada-v1 .informe-destacado__col--left { order: 1; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v1 .informe-destacado__col--center { order: 2; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v1 .informe-destacado__col--right { order: 3; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v2 .informe-destacado__col--left { order: 1; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v2 .informe-destacado__col--center { order: 2; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v2 .informe-destacado__col--right { order: 3; }
  /* V3: main en center → default (center 1, left 2, right 3) ya cumple MAIN → COL2 → COL3 */
  .informe-front-test .informe-destacado__col--left,
  .informe-front-test .informe-destacado__col--right {
    border: 0;
    padding: 0;
  }
}

@media (max-width: 768px) {
  /* Destacado main */
  .informe-front-test .informe-destacado-main h2,
  .informe-front-test .informe-destacado-main h2 a {
    font-size: 1.875rem;
    line-height: 1.07;
    letter-spacing: -0.0675rem;
  }
  /* Títulos columna 2 y 3 */
  .informe-front-test .informe-destacado-secondary-title a,
  .informe-front-test .informe-destacado-list h3 a {
    font-size: 1.25rem;
    line-height: 1.15;
    letter-spacing: -0.018125rem;
    font-weight: 700;
  }
  .informe-front-test .informe-destacado-list li { 
    padding: .4375rem 0 .5625rem; /* 7px 0 9px */
    border-bottom: 1px solid var(--color-border-list); /* #e6e6e6 */
  }
  
  /* Espaciado consistente en mobile - heredado de estilos base */

  /* Nuevo layout apilado y orden personalizado en mobile */
  .informe-front-test .informe-destacado {
    display: flex;
    flex-direction: column;
    gap: var(--space-8); /* 32px - espacio vertical uniforme */
    padding: 0; /* padding removido */
    margin: var(--space-5) auto 2.75rem; /* 20px auto 44px */
    max-width: 100%;
    width: 100%;
  }
  .informe-front-test .informe-destacado__col--center { order: 1; }
  .informe-front-test .informe-destacado__col--left { order: 2; }
  .informe-front-test .informe-destacado__col--right { order: 3; }
  /* V1/V2: main en left → left primero | V3: default ya correcto */
  .informe-front-test .informe-destacado.informe-destacado--destacada-v1 .informe-destacado__col--left { order: 1; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v1 .informe-destacado__col--center { order: 2; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v1 .informe-destacado__col--right { order: 3; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v2 .informe-destacado__col--left { order: 1; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v2 .informe-destacado__col--center { order: 2; }
  .informe-front-test .informe-destacado.informe-destacado--destacada-v2 .informe-destacado__col--right { order: 3; }
  .informe-front-test .informe-destacado__col { padding: 0; width: 100%; }
  /* Asegurar simetría: sin padding lateral adicional */
  .informe-front-test .informe-destacado-excerpt { max-width: 100%; }
}

/* Dark mode hook (opcional) */
@media (prefers-color-scheme: dark) {
  .informe-front-test .informe-destacado-meta__cat { color: #aaa; }
  .informe-front-test .informe-destacado-excerpt { color: #444; }
}
