/*
 * Estilos específicos para la plantilla de Galeria de Eventos.
 * Este archivo define la apariencia de la sección inferior
 * compuesta por un bloque blanco, tarjetas de documentos,
 * una tarjeta verde para normativa vigente y un bloque
 * de portal de transparencia con botones personalizados.
 */

.ge-extra {
  background: #fff;
  border-radius: 20px;
  padding: 2rem;
  margin: 3rem auto;
  width: min(100% - 48px, var(--container-max));
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.ge-extra-title {
  font-family: var(--font-title);
  color: var(--color-accent);
  font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.8rem);
  font-weight: 700;
  margin: 0 0 0.4rem;
}

.ge-extra-desc {
  font-family: var(--font-body);
  color: var(--color-weak);
  font-size: 1rem;
  margin: 0 0 1.5rem;
  max-width: 60ch;
}

/* Grid para las tarjetas */
.ge-cards {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-bottom: 2rem;
}

.ge-card {
  background: #F2F2F2;
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 1rem;
  color: var(--color-text);
  min-height: 160px;
}

.ge-card-icon img {
  width: 32px;
  height: 32px;
  display: block;
}

.ge-card-content {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.ge-card-text {
  margin: 0;
  color: var(--color-weak);
  font-size: 0.95rem;
}

.ge-card-cta {
  margin-top: auto;
  /* El botón ocupa toda la anchura disponible de la tarjeta y
     se limita a 264px según el Figma.  También centramos
     horizontalmente su contenido. */
  width: 100%;
  max-width: 264px;
  align-self: flex-start;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 0.4rem;
  background: var(--color-accent);
  color: #fff;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.9rem;
  transition: 0.18s ease-in-out;

  /*
   * Espacio inferior: añadimos un margen inferior para que el botón
   * no quede a ras del borde de la tarjeta.  Esto crea un pequeño
   * espacio visual bajo el botón, replicando el diseño de Figma.
   */
  margin-bottom: 0.5rem;
}
.ge-card-cta:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.ge-card-cta svg {
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/* Tarjeta verde para normativa vigente */
.ge-green-card {
  background: var(--color-secondary);
  border-radius: 18px;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  color: #fff;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

.ge-green-title {
  margin: 0 0 0.25rem;
  font-family: var(--font-title);
  font-size: 1.25rem;
  font-weight: 700;
  /* El título de la tarjeta verde debe ser blanco para contrastar
     adecuadamente sobre el fondo verde oscuro. */
  color: #fff;
}

/*
 * Aseguramos que el título de la tarjeta verde permanezca en
 * color blanco dentro de la plantilla de Normativa Municipal.
 * Esta regla tiene mayor especificidad que la definida en el
 * bloque <style> del template, por lo que no se verá
 * sobreescrita por el color naranja aplicado a los <h3> globales.
 */
.galeria-eventos .ge-green-title {
  color: #fff !important;
}

.ge-green-desc {
  margin: 0;
  font-family: var(--font-body);
  font-size: 0.95rem;
  /* El texto de la tarjeta verde es blanco con una ligera
     opacidad para diferenciarlo del título. */
  color: rgba(255,255,255,0.88);
  max-width: 50ch;
}

.ge-green-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  background: #fff;
  color: var(--color-secondary);
  /* El botón de descarga debe ser más largo y alto (283×63 px aprox.).
     Para que se adapte a diferentes tamaños de pantalla se define un
     ancho mínimo y altura mínima, además de un borde circular. */
  min-width: 283px;
  min-height: 63px;
  padding: 0 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none;
  white-space: nowrap;
  transition: 0.18s ease-in-out;
}
.ge-green-btn:hover {
  filter: brightness(0.95);
}
.ge-green-btn img {
  /* Ajustamos el tamaño del ícono PDF conforme al diseño de Figma
     (aproximadamente 45×56 px).  Al ampliar las dimensiones
     aseguramos que el ícono no se vea aplastado dentro del botón. */
  width: 45px;
  height: 56px;
  display: block;
}

/* Portal de transparencia */
.ge-portal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
}

.ge-portal-title {
  margin: 0 0 0.35rem;
  font-family: var(--font-title);
  color: var(--color-accent);
  font-size: 1.25rem;
  font-weight: 700;
}

.ge-portal-desc {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-weak);
  font-size: 0.95rem;
  max-width: 60ch;
}

/*
 * Contenedor de los botones naranjos del portal de transparencia.
 * Por defecto se dispone en fila para que los botones se ubiquen
 * uno al lado del otro.  En pantallas pequeñas el contenedor se
 * envuelve según sea necesario.
 */
.ge-portal-links {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1rem;
}

/*
 * Cada botón naranja se compone de dos líneas de texto.  Se
 * establece un tamaño mínimo (264×63 px aprox.) y un borde
 * totalmente redondeado para replicar el diseño de Figma.  Al
 * utilizar flex-direction: column se apilan las dos líneas
 * dentro del botón.
 */
.ge-portal-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  background: var(--color-accent);
  color: #fff;
  padding: 0.9rem 1.3rem;
  border-radius: 999px;
  min-width: 264px;
  min-height: 63px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  font-weight: 600;
}
.ge-portal-link:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
}
.ge-portal-link-small {
  font-size: 0.7rem;
  opacity: 0.8;
}
.ge-portal-link-large {
  font-size: 0.95rem;
  line-height: 1.2;
}
.ge-portal-link svg {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  stroke: #fff;
  fill: none;
  stroke-width: 2;
}

/*
 * Ajustes de responsividad para pantallas pequeñas.  Estos estilos
 * garantizan que los textos y botones no se desborden fuera de la
 * pantalla en móviles de ancho reducido.  Se eliminan los límites
 * máximos en los textos y se ajustan los botones a la anchura
 * disponible.
 */
@media (max-width: 500px) {
  .ge-extra-desc,
  .ge-portal-desc,
  .ge-green-desc {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  /* Botón de la tarjeta verde ocupa toda la anchura disponible en móviles
     estrechos y no tiene ancho mínimo */
  .ge-green-btn {
    width: 100%;
    min-width: 0;
  }
  /* Los botones del portal se apilan a ancho completo en dispositivos
     estrechos */
  .ge-portal-link {
    width: 100%;
    min-width: 0;
  }
  .ge-portal-links {
    flex-direction: column;
  }
}

/* Ajustes responsive */
@media (max-width: 768px) {
  .ge-green-card {
    flex-direction: column;
    align-items: flex-start;
  }
  .ge-green-btn {
    margin-top: 0.75rem;
  }
  .ge-portal {
    flex-direction: column;
    align-items: flex-start;
  }
  .ge-portal-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .ge-portal-link {
    width: auto;
    margin-right: 0.5rem;
  }
}