/*
  components.css
  ------------------
  Propósito: estilos reutilizables para componentes de la UI.
  - `.links` y sus `a`: tarjetas de enlace que aparecen en la rejilla principal.
  - Cursor personalizado (cursorHover) y comportamiento hover.
  - Reglas para asegurar que el texto herede el color al hacer hover (iconos y texto).

  Tips:
  - Para cambiar el cursor de hover, edita la ruta en `cursor: url('../cursors/cursorHover.cur')`.
  - Si algún texto no cambia en hover, inspecciona en DevTools si hay una regla con más especificidad.
*/
.links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  justify-items: stretch;
}

.links a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #2C1740;
  color: #F4DFFF;
  text-decoration: none;
  padding: 1rem;
  border-radius: 12px;
  font-weight: bold;
  transition: all 0.3s ease;
  border: 2.5px solid #C897FF;
  font-size: 1rem;
  text-align: center;
  box-shadow: 0 0 5px #C897FF;
}

/* show custom hover cursor for links and buttons */
.links a,
button {
  cursor: url('../cursors/cursorHover.cur'), pointer;
}

.links a img {
  width: 38px;
  height: 38px;
  filter: brightness(0) saturate(100%) invert(86%) sepia(10%) saturate(400%) hue-rotate(240deg);
}

.links a:hover img {
  filter: brightness(0);
}

.links a:hover {
  background-color: #D319A4;
  color: rgb(0, 0, 0);
  border: 2.5px solid #F24BD3;
  box-shadow: 0 0 10px #F24BD3;
}

/* Mobile tweaks: centrar y agrandar el botón de comisiones en pantallas pequeñas */
@media (max-width: 899px) {
  .left-column .links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.8rem;
    width: 100%;
  }

  .left-column .links a {
    width: 100%;
    max-width: 100%;
    padding: 1.18rem 1rem;
    font-size: 1.10rem;
    justify-content: center;
    box-sizing: border-box;
  }

  /* Asegurar que la descripción no se desborde y esté centrada */
  .left-column .desc {
    text-align: center;
    margin: 0.4rem auto 0.8rem auto;
    max-width: 420px;
  }

  /* En móvil, el right-grid debe colapsar a una columna para evitar apilamiento raro */
  .right-grid {
    display: block;
  }
}

/* Ajustes para la vista de escritorio: poner los links a la derecha en columna única */
@media (min-width: 900px) {
  .right-column .links {
    grid-template-columns: 1fr;
  }

  /* El botón de comisiones en la columna izquierda debe ocupar todo el ancho */
  .left-column .links,
  .left-column .links a {
    width: 100%;
  }

  .left-column {
    align-items: center;
    /* centrar avatar y botones */
  }

  .left-column .links a {
    display: flex;
    justify-content: center;
    padding: 1.2rem;
    box-sizing: border-box;
  }

  /* Mejorar centrado y tamaño del botón y la descripción en desktop */
  .left-column .profile-pic {
    margin: 0 auto 0.6rem auto;
    /* centrar imagen */
    width: 140px;
    /* reducir tamaño foto para desktop */
    height: 140px;
  }

  .left-column .title {
    text-align: center;
    width: 100%;
    font-size: 2.5rem;
  }

  .left-column .desc {
    text-align: center;
    /* centrar el texto descriptivo bajo la foto */
    max-width: 340px;
    margin: 0.15rem auto 0.3rem auto;
    /* reducir margen inferior para acercar el botón */
    font-size: 1.2rem;
    line-height: 1.3rem;
  }

  /* Forzar que el contenedor de links de la izquierda sea columna y que el botón ocupe más espacio */
  .left-column .links {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    /* reducir gap para acercar botón a comisiones título */
    width: 100%;
  }

  /* Empujar la sección de comisiones al fondo usando margin-top: auto */
  .commission-section {
    margin-top: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    align-items: center;
  }

  .commission-section .section-title {
    width: 100%;
    text-align: center;
  }

  .left-column .links a {
    min-height: 60px;
    /* altura consistente con botones de derecha */
    padding: 1rem 1.2rem;
    /* mismo padding que botones de derecha */
    font-size: 1.12rem;
    border-radius: 12px;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 380px;
    /* mismo ancho máximo que botones de derecha */
  }

  /* Asegurar que el botón de comisiones hereda el ancho completo */
  .commission-section .links {
    width: 100%;
    max-width: 380px;
    /* limitar ancho para que sea consistente */
    margin: 0 auto;
    /* centrar si es menor al contenedor */
  }

  /* Right grid: dividir redes | portafolios en dos columnas */
  .right-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.2rem;
    /* aumentar separación vertical entre columnas */
    align-items: start;
    row-gap: 2rem;
    /* separar más verticalmente */
  }

  .right-grid .col {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    align-items: center;
    /* centrar cada sección internamente */
    justify-content: flex-start;
    /* alinear al inicio para flexibilidad */
  }

  /* Cada .col tendrá sus links en una columna vertical centrada */
  .right-grid .col .links {
    grid-template-columns: 1fr;
    width: 100%;
    max-width: 380px;
  }

  /* Asegurar que los botones de la derecha tengan altura similar al botón de comisiones */
  .right-grid .col .links a {
    min-height: 60px;
    padding: 1rem 1.2rem;
  }

  /* Agregar separación adicional entre secciones (redes y portafolios) */
  .social-col {
    margin-top: 1rem;
    /* separar más visualmente la columna de redes */
  }

  .portfolio-col {
    margin-top: 1rem;
    /* separar más visualmente la columna de portafolios */
  }

  /* Aumentar legibilidad en desktop para enlaces y títulos */
  .section-title {
    font-size: 1.45rem;
  }

  .links a {
    font-size: 1.12rem;
    padding: 1.05rem;
  }
}

/* Ensure link text inherits and changes on hover */
.links a span,
.links a strong {
  color: inherit;
  transition: color 0.2s ease;
}

.links a:hover span,
.links a:hover strong {
  color: #000000 !important;
}

.section-title {
  font-size: 1.6rem;
  color: #F4DFFF;
  border-bottom: 3px solid #C897FF;
  margin: 0.5rem 0 0.3rem 0;
  /* reducir margen para ahorrar espacio en columna izquierda */
}

/* Ajustes móviles: separar títulos y botones para evitar que queden pegados en pantallas pequeñas */
@media (max-width: 899px) {
  .section-title {
    margin-bottom: 0.9rem;
    /* espacio extra entre título y botones */
  }

  .links {
    gap: 1rem;
    /* aumentar separación entre botones en móvil */
  }
}

footer {
  margin-top: 0.8rem;
  font-size: 0.9rem;
  color: #D1B0F9;
}