/*
Theme Name: InfoRegión
Theme URI: https://www.inforegion.com.ar
Description: Identidad de InfoRegión sobre Kadence. Sitio provisorio durante la interrupción del servicio.
Author: InfoRegión
Template: kadence
Version: 1.1
Text Domain: inforegion
*/

:root {
  --ir-rojo: #C4161C;
  --ir-rojo-oscuro: #8E1015;
  --ir-tinta: #1A1A1A;
  --ir-gris: #6B6B6B;
  --ir-linea: #E3E1DE;
}

/* ============ FRANJA DE AVISO (temporal) ============ */
.ir-franja-aviso {
  background: #FBF3E4;
  border-bottom: 1px solid #E8DAB9;
  color: #6B4E14;
  font-size: 0.82rem;
  line-height: 1.5;
  padding: 9px 20px;
  text-align: center;
}
.ir-franja-aviso strong { color: #8A5A00; }

/* ============ CABECERA: logo centrado ============ */
.site-branding .site-title,
.site-branding .site-description { display: none !important; }

#main-header .site-header-row,
#main-header .site-header-main-section-left,
#main-header .site-header-main-section-center,
#main-header .site-header-main-section-right {
  justify-content: center !important;
}

#main-header .site-header-row-container-inner {
  padding-top: 18px;
  padding-bottom: 18px;
}

.site-branding img,
.site-header-item .custom-logo {
  max-height: 106px;
  width: auto;
}

/* La cabecera no lleva borde: la barra roja del menú hace de remate */
#main-header { border-bottom: none; }

/* ============ BARRA DE SECCIONES, EN ROJO A TODO EL ANCHO ============ */
.ir-barra-secciones {
  background: var(--ir-rojo-oscuro);
  border-bottom: 3px solid var(--ir-rojo);
}

.ir-barra-secciones .ir-secciones-inner {
  margin: 0 auto;
  max-width: 1290px;
  padding: 0 20px;
}

.ir-barra-secciones ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  justify-content: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ir-barra-secciones li { margin: 0; }

.ir-barra-secciones a {
  color: #FFFFFF;
  display: block;
  font-size: 0.83rem;
  font-weight: 600;
  letter-spacing: 0.055em;
  padding: 13px 15px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color .15s ease;
}

.ir-barra-secciones a:hover,
.ir-barra-secciones .current-menu-item > a,
.ir-barra-secciones .current-cat > a {
  background: var(--ir-rojo);
  color: #FFFFFF;
}

/* El menú original de Kadence queda oculto: usamos la barra roja */
#main-header .header-navigation,
#main-header .site-header-item-main-navigation { display: none !important; }

@media (max-width: 767px) {
  .ir-barra-secciones a { font-size: 0.76rem; padding: 10px 10px; }
  .site-branding img, .site-header-item .custom-logo { max-height: 65px; }
}

/* ============ PORTADA Y LISTADOS ============ */
.entry-taxonomies a,
.loop-entry .entry-taxonomies a {
  color: var(--ir-rojo) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.loop-entry .entry-title {
  letter-spacing: -0.015em;
  line-height: 1.2;
}

.loop-entry .entry-title a:hover { color: var(--ir-rojo); }

.entry-meta .posted-on { color: var(--ir-gris); }

/* Título de las páginas de sección */
.entry-hero .entry-title,
.page-title h1,
.archive .entry-hero h1 {
  border-bottom: 3px solid var(--ir-rojo);
  display: inline-block;
  letter-spacing: 0.03em;
  padding-bottom: 8px;
  text-transform: uppercase;
}

/* ============ NOTA ============ */
.single .entry-content a:not(.button):not(.wp-block-button__link) {
  color: var(--ir-rojo-oscuro);
  text-underline-offset: 2px;
}

/* ============ PIE ============ */
.site-footer { border-top: 3px solid var(--ir-rojo); }

/* ============ AJUSTES DE PORTADA ============ */

/* Kadence deja una franja gris vacia arriba del listado: fuera */
.home .entry-hero-container-inner,
.blog .entry-hero-container-inner,
.archive .entry-hero-container-inner .hero-section-overlay { background: transparent; }

.home .entry-hero-container-inner,
.blog .entry-hero-container-inner { display: none; }

.home #inner-wrap > .content-container,
.blog #inner-wrap > .content-container { padding-top: 30px; }

/* Logo un poco mas presente, como en la portada historica */
.site-branding img,
.site-header-item .custom-logo { max-height: 106px; }

/* Aire entre la barra roja y el contenido */
.ir-barra-secciones + * { margin-top: 0; }

/* Tarjetas del listado: separacion clara y foto con proporcion pareja */
.loop-entry .post-thumbnail img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
  width: 100%;
}

.loop-entry .entry-content-wrap { padding-top: 14px; }

/* Titulo de la nota, mas peso editorial */
.loop-entry .entry-title { font-weight: 700; }

/* ============================================================
   PORTADA: bloque central arriba, resto debajo
   ============================================================ */

.ir-portada { padding-bottom: 40px; }

/* --- Bloque central --- */
.ir-centrales {
  display: grid;
  gap: 26px;
  grid-template-columns: 2fr 1fr;
  margin-bottom: 34px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--ir-linea);
}

.ir-central-lado {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.ir-nota { margin: 0; }

.ir-nota-foto {
  display: block;
  overflow: hidden;
  background: #F2F1EF;
}

.ir-nota-foto img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform .3s ease;
}

.ir-nota-foto:hover img { transform: scale(1.02); }

.ir-nota-principal .ir-nota-foto img { aspect-ratio: 16 / 9; object-fit: cover; }
.ir-nota-lateral .ir-nota-foto img { aspect-ratio: 16 / 10; object-fit: cover; }

.ir-nota-texto { padding-top: 12px; }

.ir-nota-seccion {
  color: var(--ir-rojo);
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  text-decoration: none;
  text-transform: uppercase;
}

.ir-nota-seccion:hover { color: var(--ir-rojo-oscuro); }

.ir-nota-titulo {
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.18;
  margin: 0 0 8px;
}

.ir-nota-titulo a { color: var(--ir-tinta); text-decoration: none; }
.ir-nota-titulo a:hover { color: var(--ir-rojo); }

.ir-nota-principal .ir-nota-titulo { font-size: clamp(1.6rem, 3vw, 2.3rem); }
.ir-nota-lateral .ir-nota-titulo { font-size: 1.08rem; }
.ir-nota-grilla .ir-nota-titulo { font-size: 1.12rem; }

.ir-nota-bajada {
  color: #4A4A4A;
  font-size: 1rem;
  line-height: 1.55;
  margin: 0 0 8px;
}

.ir-nota-fecha {
  color: var(--ir-gris);
  font-size: 0.78rem;
}

/* --- Resto de las notas --- */
.ir-titulo-bloque {
  border-bottom: 3px solid var(--ir-rojo);
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  margin: 0 0 22px;
  padding-bottom: 7px;
  text-transform: uppercase;
}

.ir-grilla {
  display: grid;
  gap: 30px 26px;
  grid-template-columns: repeat(3, 1fr);
}

.ir-nota-grilla .ir-nota-foto img { aspect-ratio: 16 / 10; object-fit: cover; }

/* --- Paginación --- */
.ir-paginacion { margin-top: 36px; }
.ir-paginacion ul { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; list-style: none; margin: 0; padding: 0; }
.ir-paginacion a, .ir-paginacion span {
  border: 1px solid var(--ir-linea);
  display: block;
  font-size: 0.86rem;
  padding: 7px 13px;
  text-decoration: none;
}
.ir-paginacion .current { background: var(--ir-rojo); border-color: var(--ir-rojo); color: #FFF; }
.ir-paginacion a:hover { border-color: var(--ir-rojo); color: var(--ir-rojo); }

.ir-sin-notas { color: var(--ir-gris); padding: 50px 0; text-align: center; }

/* --- Adaptación a pantallas chicas --- */
@media (max-width: 991px) {
  .ir-centrales { grid-template-columns: 1fr; }
  .ir-central-lado { display: grid; gap: 22px; grid-template-columns: 1fr 1fr; }
  .ir-grilla { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 599px) {
  .ir-central-lado { grid-template-columns: 1fr; }
  .ir-grilla { grid-template-columns: 1fr; }
  .ir-nota-principal .ir-nota-titulo { font-size: 1.45rem; }
}

/* Tamaño del logo. Kadence lo fija en 200px de ancho, que es el limite real:
   por eso el alto maximo por si solo no lo agranda. */
.site-branding img,
.site-header-item .custom-logo {
  width: 288px !important;
  max-width: 288px !important;
  max-height: none !important;
  height: auto !important;
}

@media (max-width: 767px) {
  .site-branding img,
  .site-header-item .custom-logo {
    width: 228px !important;
    max-width: 60vw !important;
  }
}

/* Bajada al comienzo de la nota */
.ir-bajada {
  border-left: 3px solid var(--ir-rojo);
  color: #333;
  font-size: 1.12rem;
  font-weight: 500;
  line-height: 1.5;
  margin: 0 0 1.6em;
  padding-left: 16px;
}

/* Bajada en las tarjetas de la portada */
.ir-nota-bajada {
  color: #4A4A4A;
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0 0 8px;
}

.ir-nota-lateral .ir-nota-bajada,
.ir-nota-grilla .ir-nota-bajada { font-size: 0.88rem; }

/* ============================================================
   BLOQUE CENTRAL: que las dos laterales calcen con la principal
   ------------------------------------------------------------
   La principal se hace mas cuadrada (3:2 en vez de 16:9) y las
   laterales se estiran para repartirse exactamente el mismo alto,
   en vez de depender de una proporcion fija que nunca coincide.
   ============================================================ */
@media (min-width: 992px) {
  .ir-centrales { align-items: stretch; }

  .ir-central-principal { display: flex; }

  .ir-nota-principal {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* Mas cuadrada: recorta a los costados y gana alto */
  .ir-nota-principal .ir-nota-foto img {
    aspect-ratio: 3 / 2;
  }

  /* Las dos laterales se reparten el alto de la columna */
  .ir-central-lado {
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
  }

  .ir-nota-lateral {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* La foto absorbe el espacio sobrante: queda mas baja y ancha */
  .ir-nota-lateral .ir-nota-foto {
    flex: 1 1 auto;
    min-height: 96px;
  }

  .ir-nota-lateral .ir-nota-foto img {
    aspect-ratio: auto;
    height: 100%;
    object-fit: cover;
    width: 100%;
  }

  .ir-nota-lateral .ir-nota-texto { flex: 0 0 auto; }
}

/* Publicaciones de redes incrustadas.
   Si el script de la red no llega a cargar, el bloque igual se ve
   como una cita presentable y no como texto suelto. */
.entry-content blockquote.twitter-tweet,
.entry-content blockquote.instagram-media {
  background: #FAFAF9;
  border: 1px solid var(--ir-linea);
  border-left: 3px solid var(--ir-rojo);
  border-radius: 3px;
  margin: 1.8em auto;
  max-width: 550px;
  padding: 20px 22px;
}

.entry-content blockquote.twitter-tweet p,
.entry-content blockquote.instagram-media p {
  font-size: 1rem;
  line-height: 1.5;
  margin: 0 0 10px;
}

.entry-content blockquote.twitter-tweet a {
  color: var(--ir-rojo-oscuro);
  font-size: 0.88rem;
}

/* Cuando el script sí carga, Twitter reemplaza el bloque por un iframe:
   ahí no queremos ni el borde ni el fondo propios. */
.entry-content .twitter-tweet-rendered {
  background: none;
  border: none;
  padding: 0;
}

/* Twitter aplica sus propios margenes al renderizar: centramos el resultado */
.entry-content .twitter-tweet-rendered,
.entry-content iframe[id^="twitter-widget"],
.entry-content .instagram-media-rendered {
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-content .twitter-tweet-rendered { max-width: 550px; }

/* ============================================================
   BLOQUE DE DEPORTES: una destacada y cuatro en lista
   ============================================================ */

.ir-bloque-deportes {
  border-top: 1px solid var(--ir-linea);
  margin-top: 40px;
  padding-top: 30px;
}

.ir-titulo-bloque a {
  color: inherit;
  text-decoration: none;
}

.ir-titulo-bloque a:hover { color: var(--ir-rojo); }

.ir-deportes-grilla {
  display: grid;
  gap: 26px;
  grid-template-columns: 1.35fr 1fr;
}

.ir-nota-deporte .ir-nota-foto img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.ir-nota-deporte .ir-nota-titulo { font-size: 1.5rem; }

/* Las cuatro de la lista: miniatura al costado */
.ir-deportes-lista {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.ir-nota-lista {
  align-items: flex-start;
  border-bottom: 1px solid var(--ir-linea);
  display: grid;
  gap: 14px;
  grid-template-columns: 130px 1fr;
  padding-bottom: 16px;
}

.ir-nota-lista:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ir-lista-foto {
  display: block;
  overflow: hidden;
  background: #F2F1EF;
}

.ir-lista-foto img {
  aspect-ratio: 4 / 3;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
  transition: transform .3s ease;
}

.ir-lista-foto:hover img { transform: scale(1.03); }

.ir-nota-lista .ir-nota-titulo {
  font-size: 0.98rem;
  line-height: 1.28;
  margin: 0 0 5px;
}

.ir-nota-lista .ir-nota-fecha { font-size: 0.74rem; }

@media (max-width: 991px) {
  .ir-deportes-grilla { grid-template-columns: 1fr; }
}

@media (max-width: 599px) {
  .ir-nota-lista { grid-template-columns: 110px 1fr; }
  .ir-nota-deporte .ir-nota-titulo { font-size: 1.28rem; }
}

/* ============================================================
   CELULAR: la barra de secciones queda como simple separador
   ------------------------------------------------------------
   En pantallas chicas las nueve secciones ocupaban tres renglones
   y duplicaban el menú hamburguesa del tema. Se oculta el listado
   y queda sólo la franja roja que separa el logo del contenido.
   ============================================================ */
@media (max-width: 767px) {
  .ir-barra-secciones .ir-secciones-inner { display: none; }

  .ir-barra-secciones {
    height: 6px;
    padding: 0;
  }

  /* El menú del tema (hamburguesa) sí se muestra en celular */
  #main-header .site-header-item-main-navigation,
  #main-header .header-navigation { display: block !important; }

  /* pero no la barra de navegación de escritorio */
  #main-header .header-navigation .header-menu-container.show-in-desktop { display: none !important; }
}

/* El detalle del aviso, sólo en pantallas medianas y grandes */
@media (max-width: 767px) {
  .ir-aviso-detalle { display: none; }
  .ir-franja-aviso { padding: 8px 16px; }
}