/**
 * @file
 * Estructura de página: contenedores, secciones y rejillas.
 */

.site {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.site-main {
  flex: 1;
}

.site-main:focus {
  outline: none;
}

.container {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

.container--narrow {
  width: min(100% - 2 * var(--gutter), var(--container-narrow));
}

.section {
  padding-block: var(--space-section);
}

.section--muted {
  background: var(--color-surface-muted);
}

/* Páginas interiores: contenido + barra lateral opcional */
.layout {
  display: grid;
  gap: var(--space-12);
  padding-block: var(--space-12) var(--space-section);
}

@media (min-width: 960px) {
  .layout--with-sidebar {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
}

/* Drupal siempre deja un contenedor de mensajes vacío: solo ocupa espacio
   cuando hay un mensaje visible. */
.site-main__messages {
  padding-top: 0;
}

.site-main__messages:has([data-drupal-messages] > div:not(.hidden), .messages) {
  padding-top: var(--space-6);
}

.site-main__messages [data-drupal-messages-fallback].hidden {
  display: none;
}

/* Rejillas de listados (vistas) */
.view-id-nuestros_servicios .view-content,
.view-id-otros .view-content {
  display: grid;
  gap: clamp(1rem, 0.75rem + 1vw, 2rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}

.view-id-nuestros_servicios .view-content {
  grid-template-columns: repeat(auto-fit, minmax(min(100% / 2 - 0.5rem, 230px), 1fr));
}

.view-id-actualidad .view-content,
.view-id-boletines_informativos .view-content {
  display: grid;
  gap: var(--space-6);
}

@media (min-width: 720px) {
  .view-id-actualidad.view-display-id-page_1 .view-content {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1100px) {
  .view-id-actualidad.view-display-id-page_1 .view-content {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}