/* título y subtítulo */
#title-block-header {
  margin-bottom: 0px;
}

/* “see all links” estilo */
.about-links.subtitle {
  font-family: "Red Hat Text";
}

/* enlaces sociales: contenedor */
.about-entity .about-links {
  justify-content: center !important;
  column-gap: 0em !important;
  font-size: 1.2em !important;
}

/* enlaces sociales: cada uno */
.about-entity .about-link {
  padding: 0.25em 0.25em !important;
  border: none !important;
}

/* área principal “about” */
.about-entity {
  background-color: var(--spc-bg-1);
  padding: 3em 0em 3em 0em !important;
  margin: 0em 2em 0em 2em;
  border-radius: 5px;
}

/* ————— Reglas para pantallas medianas (~992px) ————— */
@media screen and (max-width: 991.98px) {
  /* grid de “lately” se convierte en flex-wrap */
  #lately .grid {
    display: flex;
    flex-wrap: wrap;
  }

  /* ítems listados como blog, conferencias, etc. */
  #blog, #talks, #publications, #projects {
    flex-basis: 40% !important;
    flex-grow: 1;
  }

  /* enlace sociales: tamaño */
  .about-entity .about-links {
    font-size: 1.2em !important;
  }
}

/* ————— Reglas para pantallas pequeñas (≤ 576px) ————— */
@media screen and (max-width: 576px) {
  /* grid de sección “about-me” flexible */
  #about-me .grid {
    display: flex;
    flex-wrap: wrap;
  }

  /* grid de “lately” flexible también */
  #lately .grid {
    display: flex;
    flex-wrap: wrap;
  }

  /* los listados ocupan todo el ancho */
  #blog, #talks, #publications, #projects {
    flex-basis: 100% !important;
  }

  /* tamaño de enlaces sociales en móvil */
  .about-entity .about-links {
    font-size: 1em !important;
  }

  /* ajustar el área “about” para que los elementos se apilen verticalmente */
  .about-entity {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    padding-left: 1em !important;
    padding-right: 1em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* contenido de texto dentro de “about” */
  .about-entity .entity-contents,
  .about-entity .about-contents {
    order: 1 !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
  }

  /* imagen dentro de “about” */
  .about-entity .about-image {
    order: 2 !important;
    margin-top: 1.5em !important;
    width: 90% !important;
    max-width: 20em !important;
    padding: 0 !important;
  }

  img.about-image {
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }

  /* — ajustar los grids de contenido para que colapsen en una sola columna — */
  .grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 1.5em !important;
  }

  .grid > .g-col-6 {
    width: 100% !important;
  }

  /* asegurar el orden visual si se necesita que la imagen vaya debajo */
  .grid > .g-col-6:nth-child(2) {
    order: 2 !important;
  }
  .grid > .g-col-6:nth-child(1) {
    order: 1 !important;
  }

  /* evitar que algún contenedor interfiera con los márgenes laterales */
  .about-entity,
  .about-entity .grid {
    padding-left: 1em !important;
    padding-right: 1em !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}