/*
 * Estilos para la página Funciones y Dependencias
 *
 * Este archivo contiene la maquetación para la sección superior de la
 * plantilla `page-funciones-y-dependencias.php`. Se utiliza una
 * cuadrícula responsive que coloca el contenido textual a la izquierda
 * y la imagen a la derecha. En dispositivos pequeños la disposición
 * se convierte en una única columna para mejorar la legibilidad.
 */

/* Distribución de la sección hero: dos columnas. La primera ocupa el
   espacio disponible y la segunda se ajusta automáticamente al ancho
   de la imagen (hasta 648px). */
.page-funciones .hero-funciones {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: center;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

@media (max-width: 1024px) {
  .page-funciones .hero-funciones {
    grid-template-columns: 1fr;
    text-align: center;
  }
}

.page-funciones .hero-funciones__text h1 {
  margin: 0 0 1rem;
  font-size: 2.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.page-funciones .hero-funciones__text p {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  opacity: .9;
}


/* Contenedor para la línea inferior con ícono y texto. */
.page-funciones .hero-funciones__location {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.page-funciones .hero-funciones__location-icon img {
  width: 24px;
  height: 24px;
  display: block;
}

.page-funciones .hero-funciones__location-text {
  font-size: 0.9rem;
  opacity: 0.8;
}

.page-funciones .hero-funciones__image img {
  width: 100%;
  max-width: 648px;
  height: 750px;
  object-fit: cover;
  /* Align the image crop to the top so the top portion remains visible */
  object-position: top center;
  border-radius: 1rem;
  display: block;
}

/* Ajustes para dispositivos pequeños: espaciar los elementos */
@media (max-width: 640px) {
  .page-funciones .hero-funciones {
    gap: 1.5rem;
  }
  .page-funciones .hero-funciones__text h1 {
    font-size: 2rem;
  }
  .page-funciones .hero-funciones__text p {
    font-size: .95rem;
  }
}