/* ===== Job — teaser dentro de vista en grid (4 por fila) =====
   Una sola imagen por nodo (no se ocultan extras). Se aumenta el tamaño
   en móviles ajustando el nº de columnas del grid de la vista. */

/* Layout simple del teaser (sin columnas internas) */
article.node--type-job.node--view-mode-teaser {
  display: block;
  margin: 0;
}

/* El header no ocupa espacio visual adicional */
article.node--type-job.node--view-mode-teaser > header { margin: 0; }

/* Wrapper de contenido sin alterar el flujo */
article.node--type-job.node--view-mode-teaser .node__content { display: contents; }

/* Ocultar cuerpo/resumen si el view mode aún lo imprime */
article.node--type-job.node--view-mode-teaser .field--name-body { display: none; }

/* --- Tarjeta visual de la imagen a ancho completo --- */
.node--type-job.node--view-mode-teaser .field--name-field-media-image {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;      /* proporción coherente en todas las resoluciones */
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  border: 1px solid rgba(0,0,0,.06);
}

/* El enlace ocupa todo el contenedor (área clicable completa) */
.node--type-job.node--view-mode-teaser .field--name-field-media-image > a {
  display: block;
  width: 100%;
  height: 100%;
}

/* La imagen cubre la tarjeta manteniendo el recorte */
.node--type-job.node--view-mode-teaser .field--name-field-media-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .3s ease;
}

/* Hover suave en punteros finos */
@media (hover:hover) and (pointer:fine){
  article.node--type-job.node--view-mode-teaser:hover
  .field--name-field-media-image img { transform: scale(1.02); }
}

/* Fallback si no hay soporte de aspect-ratio */
@supports not (aspect-ratio: 4 / 3) {
  .node--type-job.node--view-mode-teaser .field--name-field-media-image {
    height: 0; padding-bottom: 75%;
  }
}

/* ===== Responsive del GRID de la vista (más grande en móviles) =====
   Sobrescribe el width inline (25%) que inyecta Views para .cols-4 */
@media (max-width: 1024px) {
  .views-view-grid.horizontal.cols-4 .views-col { width: 33.3333% !important; } /* 3 por fila */
}
@media (max-width: 760px) {
  .views-view-grid.horizontal.cols-4 .views-col { width: 50% !important; }      /* 2 por fila */
}
@media (max-width: 480px) {
  .views-view-grid.horizontal.cols-4 .views-col { width: 100% !important; }     /* 1 por fila */
}

/* (Opcional) Gutter consistente entre columnas de la vista */
/*
.views-view-grid.horizontal.cols-4 .views-col { padding: 0 .5rem; box-sizing: border-box; }
.view-content.row { margin-left: -.5rem; margin-right: -.5rem; }
*/



/*-----------------------------------------------------------------*/


/* ===== Job (view mode full) – layout 2 columnas ===== */
article.node--type-job.node--view-mode-full .node__content {
  display: grid;
  grid-template-columns: minmax(280px, 420px) 1fr; /* izq: fotos | dcha: texto */
  gap: clamp(12px, 2vw, 24px);
  align-items: start;
}

/* ZONA IZQUIERDA: galería */
.node--type-job.node--view-mode-full .field--name-field-job-images.field__items {
  display: grid;
  grid-template-columns: repeat(2, 1fr); /* miniaturas en 2 columnas */
  gap: 8px;
}

/* Primera imagen destacada (ancho completo) */
.node--type-job.node--view-mode-full
.field--name-field-job-images.field__items > .field__item:first-child {
  grid-column: 1 / -1;
}

/* Tarjetas de imagen */
.node--type-job.node--view-mode-full .field--name-field-media-image {
  position: relative;
  width: 100%;
  height: 300px;
  border-radius: 10px;
  overflow: hidden;
  background: #eee;
  border: 1px solid rgba(0, 0, 0, .06);
}

/* Aspect ratio: grande panorámica, miniaturas cuadradas */
.node--type-job.node--view-mode-full
.field--name-field-job-images.field__items > .field__item:first-child
.field--name-field-media-image { aspect-ratio: 16 / 9; }

.node--type-job.node--view-mode-full
.field--name-field-job-images.field__items > .field__item:not(:first-child)
.field--name-field-media-image { aspect-ratio: 1 / 1; }

@supports not (aspect-ratio: 1 / 1) {
  .node--type-job.node--view-mode-full .field--name-field-media-image { height: 0; }
  .node--type-job.node--view-mode-full
  .field--name-field-job-images.field__items > .field__item:first-child
  .field--name-field-media-image { padding-bottom: 56.25%; }
  /* 16:9 */
  .node--type-job.node--view-mode-full
  .field--name-field-job-images.field__items > .field__item:not(:first-child)
  .field--name-field-media-image { padding-bottom: 100%; }
  /* 1:1 */
}

/* Imagen dentro de la tarjeta */
.node--type-job.node--view-mode-full .field--name-field-media-image img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform .28s ease;
  cursor: zoom-in; /* indica que abre lightbox */
}
@media (hover: hover) and (pointer: fine) {
  article.node--type-job.node--view-mode-full
  .field--name-field-media-image:hover img { transform: scale(1.02); }
}

/* ZONA DERECHA: categoría arriba, body debajo */
.node--type-job.node--view-mode-full .field--name-field-job-category {
  grid-column: 2;
  margin: 2px 0 6px;
}
.node--type-job.node--view-mode-full .field--name-field-job-category a {
  display: inline-block;
  font-size: .9rem;
  padding: 6px 10px;
  line-height: 1;
  border-radius: 999px;
  color: #5a3d2b;
  text-decoration: none;
  background: rgba(176, 137, 104, .14);
  border: 1px solid rgba(176, 137, 104, .28);
}

/* Body ocupa toda la columna derecha */
.node--type-job.node--view-mode-full .field--name-body {
  grid-column: 2;
  color: #2b2b2b;
  font-size: clamp(1rem, .98rem + .2vw, 1.06rem);
  line-height: 1.7;
}
.node--type-job.node--view-mode-full .field--name-body > * { margin: 0 0 1em; }
.node--type-job.node--view-mode-full .field--name-body > *:last-child { margin-bottom: 0; }
.node--type-job.node--view-mode-full .field--name-body img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  display: block;
}

/* Responsive: apilar en móvil (fotos arriba) */
@media (max-width: 860px) {
  article.node--type-job.node--view-mode-full .node__content {
    grid-template-columns: 1fr;
  }
  .node--type-job.node--view-mode-full .field--name-field-job-category,
  .node--type-job.node--view-mode-full .field--name-body {
    grid-column: 1;
  }
  .node--type-job.node--view-mode-full .field--name-field-job-images.field__items {
    grid-template-columns: repeat(3, 1fr); /* miniaturas más pequeñas en móvil ancho */
  }
}