/* ===============================
   pelotapasto — Archivo Evento (pp_mp_event)
   UI: Hub de galerías + Galería MP embebida
   v2_0 (2026-02-27)
   =============================== */

/* -------------------------------------------------
   Variables de UI (ajustables sin tocar layout)
   ------------------------------------------------- */
:root{
  --pp-mp-tile-ar: 3 / 2;
  --pp-event-gap: clamp(18px, 2.2vw, 28px);
  --pp-event-border: #e6e6e6;
  --pp-event-hover: #f7f7f7;
}

/* -------------------------------------------------
   WIDE container (proveído por single-pp_mp_event.php)
   ------------------------------------------------- */
.pp-mp-event-single .pp-mp-wide{
  max-width: 1600px;
  margin: 0 auto;
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);
}

/* =================================================
   EVENT HUB (lista de galerías del evento)
   ================================================= */

.pp-mp-event-hub{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--pp-event-gap);
  margin-top: clamp(28px, 4vw, 48px);
}

.pp-mp-event-hub__item{
  display: block;
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--pp-event-border);
  text-decoration: none;
  color: inherit;
  background: #fff;

  transition: background 160ms ease, border-color 160ms ease;
}

.pp-mp-event-hub__item:hover{
  background: var(--pp-event-hover);
  border-color: #d0d0d0;
}

.pp-mp-event-hub__title{
  display: block;
  font-family: var(--pp-font-ui, Inter, sans-serif);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.01em;
}

/* Estado sin galerías (debug controlado) */
.pp-mp-event-hub--empty{
  margin-top: 2rem;
  font-size: 14px;
  color: #777;
}

/* =================================================
   GALERÍA MP EMBEBIDA (cuando un evento tenga 1 sola)
   ================================================= */

.pp-mp-gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 2rem;
  align-items: start;
}

.pp-mp-gallery > *,
.pp-mp-item{
  margin: 0;
  aspect-ratio: var(--pp-mp-tile-ar) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden;

  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;

  align-self: stretch !important;
}

.pp-mp-gallery > * img,
.pp-mp-item img{
  display: block;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

/* -------------------------------------------------
   Mobile: full-bleed controlado
   ------------------------------------------------- */
@media (max-width: 760px){
  .pp-mp-event-single .pp-mp-wide{
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
}