/* ==========================================================================
   MP360 · Jacarandá — presentación institucional de Agostini

   Composición portada de `.gallery-callout`
   (preview-entrada-fiel/src/app/index.css + referencia-agostini/page.jsx):
   collage a la izquierda en dos filas de dos —la primera alineada abajo, la
   segunda arriba, la 1.ª y la 4.ª más angostas— y contenido a la derecha, con
   tipografía protagonista y aire amplio.

   Se conserva la estructura y las proporciones. Cambian la paleta y la
   tipografía, que son las de Jacarandá.

   NO se conservó el recuadro superpuesto sobre las imágenes: no había un dato
   institucional real para ponerle. Se retiró, no se ocultó.
   ========================================================================== */

.mp360-surface--agostini .mp360-surface__dialog {
  background: var(--sf-oscuro);
  color: #FEFEFE;
}

.mp360-agostini {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  padding: var(--sf-pad);
  overflow: hidden;
}

.mp360-agostini__col { flex: 1; min-width: 0; }

/* --------------------------------------------------------------------------
   Collage

   El desplazamiento lateral de la referencia (`left: -10vw`) es lo que hace
   que las imágenes se salgan del marco y la composición respire. Acá se
   reduce, porque el marco es un diálogo y no el viewport entero.
   -------------------------------------------------------------------------- */
.mp360-agostini__col--collage {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
  /* Última red: si alguna vez el collage volviera a pedir más ancho del que
     tiene, se recorta acá y no se sale del diálogo. */
  overflow: hidden;
}

.mp360-agostini__row {
  position: relative;
  left: -3.5vw;
  display: flex;
  width: 100%;
  gap: 1rem;
  min-width: 0;
  min-height: 0;
}

.mp360-agostini__row:nth-child(1) { align-items: flex-end; }
.mp360-agostini__row:nth-child(2) { align-items: flex-start; }

/* `min-width: 0` y `min-height: 0` no son decorativos: sin ellos el mínimo
   automático de un item flex que contiene una imagen es el ancho intrínseco de
   esa imagen —acá 1122px—, así que el collage se negaba a achicarse y en
   apaisado se desbordaba del diálogo hasta 2254px de ancho. */
.mp360-agostini__img {
  position: relative;
  margin: 0;
  flex: 1 1 0%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-media);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.06);
}

.mp360-agostini__img--1,
.mp360-agostini__img--4 { flex: 0.75; }

.mp360-agostini__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  -webkit-user-drag: none;
  user-select: none;
}

/* --------------------------------------------------------------------------
   Contenido institucional — tipografía protagonista, como en la referencia
   -------------------------------------------------------------------------- */
.mp360-agostini__copy {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-right: calc(var(--sf-cierre) + 0.5rem);
}

/* El titular pasó de dos palabras a una frase. `text-wrap: balance` reparte
   los renglones en vez de dejar uno largo y una palabra suelta, y el
   `max-width` en `ch` fija una longitud de linea comoda de leer: sin el, en
   escritorio la frase se estiraba a todo el ancho de su columna. */
.mp360-agostini__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: #FEFEFE;
  text-wrap: balance;
  max-width: 20ch;
}

.mp360-agostini__text {
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  line-height: 1.55;
  color: rgba(254, 254, 254, 0.76);
  max-width: 42ch;
}

/* ==========================================================================
   Una columna — la referencia apila las dos zonas

   `index.css` @media (max-width: 1000px):
       .container { flex-direction: column; }
       .gallery-callout-row { left: 0; }
       .gallery-callout-img-content { display: none; }

   El ORDEN del DOM manda: en el recurso la columna del collage es la primera
   y la del texto la segunda, asi que al apilarse el collage queda ARRIBA. La
   version anterior invertia ese orden con `order` y ademas escondia la segunda
   fila por debajo de 600px: quedaban dos imagenes y un vacio negro enorme.
   Nada de eso esta en el recurso.
   ========================================================================== */
@media (max-width: 999.98px) {
  /* Alto NATURAL. El armazon compartido le da a todas las superficies una
     altura fija (`min(80dvh, 760px)`), que a otras les sirve porque su
     contenido la llena. Aca no: el collage y tres parrafos miden ~490px de
     675, y el resto quedaba como el vacio negro de la captura. El tope sigue
     siendo el marco, asi que si el contenido crece hay un unico scroll. */
  .mp360-surface--agostini .mp360-surface__dialog {
    height: auto;
    max-height: 100%;
  }

  .mp360-agostini {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 1.5rem;
    /* Alto natural y UN solo scroll deliberado si el contenido no entra. Sin
       min-height artificiales: eran las que dejaban el vacio negro. */
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .mp360-agostini__col { flex: 0 0 auto; }

  /* Orden del recurso: collage y despues el texto. */
  .mp360-agostini__col--collage { order: 1; }
  .mp360-agostini__col--copy { order: 2; }

  .mp360-agostini__row { left: 0; }

  /* El titulo necesita aire respecto del borde superior del dialogo, y el
     cierre necesita el suyo: el collage arranca despues de esa banda. */
  .mp360-agostini__col--collage { padding-top: calc(var(--sf-cierre) + 0.75rem); }

  .mp360-agostini__copy {
    padding-right: 0;
    padding-bottom: 0.5rem;
    gap: 1rem;
  }
}

/* Vertical estrecho: se conservan las CUATRO imagenes, que es lo que hace el
   recurso. Lo unico que cede es la escala del texto. */
@media (max-width: 599.98px) {
  .mp360-agostini { gap: 1.25rem; padding: 1rem; }
  .mp360-agostini__col--collage { gap: 0.75rem; }
  .mp360-agostini__row { gap: 0.75rem; }
  .mp360-agostini__text { font-size: 0.9375rem; }
}

/* Apaisado corto: el alto es el recurso escaso y el collage vuelve al costado.
   Aca SI cede cantidad, porque dos imagenes de 5:4 en 312px de alto piden mas
   ancho que el dialogo entero. Es una decision de espacio real, no un recorte
   arbitrario como el que habia en vertical. */
@media (orientation: landscape) and (max-height: 560px) {
  .mp360-agostini {
    flex-direction: row;
    gap: 1.25rem;
    padding: 1rem;
    overflow: hidden;
  }

  .mp360-agostini__col { flex: 1 1 0%; min-width: 0; }
  .mp360-agostini__col--copy { order: 0; }
  .mp360-agostini__col--collage { order: 1; padding-top: 0; }
  .mp360-agostini__row { left: 0; gap: 0.625rem; height: 100%; align-items: stretch; }
  .mp360-agostini__col--collage { gap: 0.625rem; }

  .mp360-agostini__row:nth-child(2),
  .mp360-agostini__img--1 { display: none; }

  .mp360-agostini__img--2 {
    flex: 1 1 0%;
    aspect-ratio: auto;
    height: 100%;
    max-height: 100%;
  }
  .mp360-agostini__title { font-size: clamp(1.125rem, 2.4vw, 1.5rem); }
  .mp360-agostini__text { font-size: 0.875rem; line-height: 1.45; }
  .mp360-agostini__copy { gap: 0.75rem; padding-right: calc(var(--sf-cierre) + 0.5rem); }
}