/*!
 * pp-single.v3_14.css
 * pelotapasto — Single (bogey)
 *
 * v3_14 (2026-02-26)
 * - MP Gallery (pp_mp_gallery): libera contenedores reales (pp-frame/wrap/pp-content/pp-single-body/pp-wrap)
 *   y define grilla editorial responsive.
 * - Corrige bloque duplicado / sintaxis rota introducida en iteraciones previas.
 * - Mantiene norma full-bleed en mobile para hero/medios + MP Gallery.
 * - No toca tipografía ni tokens globales.
 */

/* ==========================================================================
   1) HERO — WIDE (desktop baseline) + caption
   ========================================================================== */

.pp-single .pp-single-hero {
  margin: 0;
  padding: 0;
}

.pp-single .pp-single-hero-media {
  margin: 0;
  max-width: 100%;
  overflow: hidden;
}

.pp-single .pp-single-hero-media img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.pp-single .pp-single-hero-caption {
  margin-top: var(--pp-caption-gap, 8px);
  opacity: var(--pp-caption-opacity, 0.82);
}

.pp-single .pp-single-hero {
  margin-bottom: 6px;
}

/* ==========================================================================
   2) HEADER — Título
   ========================================================================== */

.pp-single .pp-single-header {
  margin: 0;
  padding: 0;
}

.pp-single .pp-single-title {
  margin: 0;
}

.pp-single .pp-single-body {
  margin-top: 4px;
}

.pp-single .pp-single-title {
  margin-bottom: 6px;
}

/* Deck */

.pp-single .pp-single-excerpt {
  margin: 0.35em auto 1.6em;
  max-width: 44ch;
}

/* ==========================================================================
   4) PROSA EDITORIAL
   ========================================================================== */

.pp-single .entry-content.pp-prose {
  font-size: var(--pp-prose-font-size, inherit);
  line-height: var(--pp-prose-leading, inherit);
  text-align: left;
  -webkit-hyphens: manual;
  -ms-hyphens: manual;
  hyphens: manual;
}

@media (min-width: 720px) {
  .pp-single .entry-content.pp-prose {
    text-align: justify;
    text-justify: inter-word;

    -webkit-hyphens: var(--pp-prose-hyphens, manual);
    -ms-hyphens: var(--pp-prose-hyphens, manual);
    hyphens: var(--pp-prose-hyphens, manual);
  }
}

.pp-single .entry-content.pp-prose p {
  text-wrap: pretty;
}

.pp-single .entry-content.pp-prose > *:first-child {
  margin-top: 0;
}

/* ==========================================================================
   WRAPS — autoridad de layout
   ========================================================================== */

.pp-single .pp-wrap {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;

  /* v3_11 — ajuste de caja de lectura (New Yorker measure) */
  max-width: clamp(62ch, 66ch, 68ch);
}

/* Hero en WIDE */
.pp-single .pp-single-hero .pp-wrap {
  max-width: var(--pp-wide-max);
}

/* Header comparte cama WIDE */
.pp-single .pp-single-header .pp-wrap {
  max-width: var(--pp-wide-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

/* Separación vertical macro */
.pp-single .pp-single-hero {
  margin: 0 0 var(--pp-hero-to-header-gap) 0;
}

.pp-single .pp-single-header {
  margin: 0 0 var(--pp-section-gap) 0;
}

.pp-single .pp-single-body {
  margin: 0;
}

/* ==========================================================================
   HEADER EDITORIAL
   ========================================================================== */

.pp-single .pp-single-title {
  text-align: center;
  margin: 0 0 10px 0;
  max-width: none;

  font-size: clamp(58px, 4.44vw, 72px);
  line-height: 1.08;
  letter-spacing: 0.01em;
}

/* Bajada */

.pp-single .pp-single-body .pp-single-excerpt {
  font-weight: 300;
  font-size: clamp(19px, 0.98rem + 0.28vw, 20.5px);
  line-height: 1.40;
  opacity: 0.94;
  text-align: left;
  text-wrap: pretty;
  margin: 0 0 1.9rem 0;
}

/* ==========================================================================
   3A) MP GALLERY — Liberar ancho del contenedor (solo single pp_mp_gallery)
   Motivo: en este single el contenido vive dentro de wrappers (pp-frame / wrap / pp-content / pp-wrap)
   con max-width editorial. Si no se liberan, la grilla no puede crecer aunque .pp-mp-gallery tenga
   max-width propio.
   ========================================================================== */

body.single-pp_mp_gallery .pp-frame,
body.single-pp_mp_gallery .wrap,
body.single-pp_mp_gallery .pp-content,
body.single-pp_mp_gallery .pp-single-body,
body.single-pp_mp_gallery .pp-wrap {
  max-width: none;
  width: 100%;
}

/* ==========================================================================
   3) MP GALLERY — Grid editorial (pp_mp_gallery single)
   Markup:
   - wrapper: .pp-mp-gallery[data-prefix]
   - items: figure.pp-mp-item > img
   ========================================================================== */

body.single-pp_mp_gallery .pp-mp-gallery[data-prefix] {
  /* La galería debe vivir en un ancho editorial amplio (≈1600px) */
  max-width: 1600px;
  margin: 0 auto;
  padding-left: clamp(14px, 2vw, 28px);
  padding-right: clamp(14px, 2vw, 28px);

  display: grid;

  /* Retícula de archivo (responsive) */
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: clamp(14px, 1.1vw, 20px);

  align-items: start;
}

body.single-pp_mp_gallery figure.pp-mp-item {
  /* Tile uniforme (SIN crop): todas las celdas miden igual; la imagen se contiene */
  margin: 0;
  aspect-ratio: var(--pp-mp-tile-ar, 3 / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden; /* seguridad: evita desbordes */

  /* Performance (300+): el navegador puede omitir pintura fuera de viewport */
  content-visibility: auto;
  contain-intrinsic-size: 300px 200px;
}

body.single-pp_mp_gallery figure.pp-mp-item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain; /* clave: no recorta */
}
/* ------------------------------------------------------------------
   Hardening del grid:
   cualquier hijo directo de la galería ES un tile (aunque cambie markup)
------------------------------------------------------------------ */

body.single-pp_mp_gallery .pp-mp-gallery[data-prefix] > * {
  aspect-ratio: var(--pp-mp-tile-ar, 3 / 2);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;

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

/* Imagen siempre contenida */
body.single-pp_mp_gallery .pp-mp-gallery[data-prefix] > * img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Evita que algún item “decida” crecer solo */
body.single-pp_mp_gallery .pp-mp-gallery[data-prefix] > * {
  align-self: stretch !important;
}/* ==========================================================================
   MOBILE
   ========================================================================== */

@media (max-width: 760px) {
  /* MP Gallery: full-bleed controlado (mantiene gutter) */
  body.single-pp_mp_gallery .pp-mp-gallery[data-prefix] {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .pp-single {
    overflow-x: clip;
  }

  /* =========================================================
     MOBILE — Full-bleed (norma editorial)
     - Hero y medios expandida rompen la caja y llegan a borde de viewport.
     - Caption permanece dentro de la cama editorial.
     ========================================================= */

  /* Primitive: controlled breakout */
  .pp-single .pp-breakout {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  /* Hero media full-bleed */
  .pp-single .pp-single-hero-media {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .pp-single .pp-single-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    max-width: none;
  }

  /* Caption del hero: vuelve a la cama editorial + se pega a la imagen */
  .pp-single .pp-single-hero-caption {
    max-width: var(--pp-wide-max);
    margin-top: 0.35rem; /* v3_13: más cerca del hero en mobile */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--pp-gutter, 16px);
    padding-right: var(--pp-gutter, 16px);
  }

  /* Medios expandida dentro de la prosa (bloque editorial) */
  .pp-single .pp-media-editorial--expanded,
  .pp-single .pp-media-editorial__frame--expanded,
  .pp-single .entry-content.pp-prose .alignwide,
  .pp-single .entry-content.pp-prose .alignfull {
    width: 100vw;
    max-width: none;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

  .pp-single .pp-single-hero .pp-wrap {
    width: 100%;
    max-width: var(--pp-wide-max);
    margin-left: auto;
    margin-right: auto;
  }

  .pp-single .pp-single-title {
    font-size: clamp(2.45rem, 1.85rem + 4vw, 3.05rem);
    line-height: 0.95;
  }

  .pp-single .pp-single-excerpt {
    font-size: 1.05em;
    font-style: italic;
    line-height: 1.35;
    margin: 0.55em 0 1em;
    text-align: center;
  }
}