/* Generated split from dual.css + convenios.css
   File: preparacion.css
*/

/* ===== Preparación en el CECNSR ===== */
.prep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.9rem, 2vw, 1.2rem);
  margin-top: 0.8rem;
}



.prep-card {
  background: #fff;
  border: 1px solid var(--pi-line);
  border-radius: 16px;
  padding: clamp(0.8rem, 2vw, 1rem);
  box-shadow: 0 8px 22px rgba(16, 24, 40, 0.06);
}



.prep-media {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 0.6rem;
  margin-bottom: 0.7rem;
}



/* Imagen principal ocupa izquierda completa */
.prep-media .main {
  grid-column: 1;
  grid-row: 1 / span 2;
}



/* Miniaturas a la derecha, una arriba y otra abajo si existen */
.prep-media .thumb:nth-of-type(2) {
  grid-column: 2;
  grid-row: 1;
}


.prep-media .thumb:nth-of-type(3) {
  grid-column: 2;
  grid-row: 2;
}



/* Fallback: si solo hay 1 foto, que ocupe todo el bloque */
.prep-media:has(.main):not(:has(.thumb)) {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}



.prep-media img {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 12px;
  border: 1px solid var(--pi-line);
  object-fit: cover;
  aspect-ratio: 16 / 10; /* proporción agradable para la principal */
}


.prep-media .thumb {
  aspect-ratio: 1 / 1;
}

 /* miniaturas cuadradas */

.prep-media img:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}



.prep-title {
  margin: 0 0 0.25rem;
  color: var(--cecns-wine);
  font-size: 1.05rem;
  line-height: 1.25;
}


.prep-text {
  color: #374151;
  margin: 0;
}



/* Interacción agradable para la galería */
.prep-media {
  cursor: pointer;
}


.prep-media img {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}


.prep-media img:focus {
  outline: 3px solid var(--cecns-gold);
  outline-offset: 2px;
}


.prep-media img[aria-current="true"] {
  box-shadow: 0 0 0 3px rgba(255, 195, 0, 0.5);
}