/*!
 * pelotapasto.com — pp-mp-gallery.css (v4.7)
 * Alcance: Página pública de Galería (CPT: pp_mp_gallery)
 *
 * Cierre visual 2026-03-06
 * - Header/navbar integrado al fondo del sitio solo en galería.
 * - Hero corregido: ratio en imagen, caption fuera de la caja visual.
 * - Separación header → hero estabilizada.
 * - Desktop: grilla justified intacta.
 * - Mobile: columna única, hero-image full bleed y fotos completas a ancho contenedor.
 * - Ajuste final mobile: texto del hero alineado con la grilla y mayor gap vertical.
 * - Sin tocar PHP, Media Plane ni Control Panel.
 */

@layer reset, tokens, base, wordpress, components, layouts, utilities, overrides;

@layer tokens {
  body.single-pp_mp_gallery {
    --pp-gallery-rule: color-mix(in srgb, var(--pp-gallery-ink-strong) 18%, transparent);
    --pp-gallery-rule-strong: color-mix(in srgb, var(--pp-gallery-ink-strong) 28%, transparent);
    --pp-gallery-surface-soft: color-mix(in srgb, var(--pp-gallery-ink-strong) 4%, transparent);
    --pp-gallery-link-hover: color-mix(in oklch, var(--pp-gallery-link), var(--pp-gallery-ink-strong) 20%);
    --pp-gallery-block-pad-inline: var(--pp-gutter, 24px);
    --pp-gallery-mobile-inline: 18px;
    --pp-gallery-mobile-gap: 12px;
  }
}

@layer base {
  body.single-pp_mp_gallery {
    background: var(--pp-gallery-page-bg);
    color: var(--pp-gallery-ink);
  }

  body.single-pp_mp_gallery .pp-frame {
    background: var(--pp-gallery-page-bg);
    padding-block-start: clamp(0.25rem, 0.15rem + 0.35vw, 0.65rem);
    padding-block-end: clamp(2rem, 1.5rem + 1.4vw, 3.25rem);
  }

  body.single-pp_mp_gallery :where(a) {
    color: inherit;
  }

  body.single-pp_mp_gallery :where(img) {
    display: block;
    max-inline-size: 100%;
  }

  body.single-pp_mp_gallery :where(figure) {
    margin: 0;
  }
}

@layer wordpress {
  body.single-pp_mp_gallery :where(.alignwide) {
    max-inline-size: var(--pp-gallery-wide);
    margin-inline: auto;
  }

  body.single-pp_mp_gallery :where(.alignfull) {
    inline-size: 100%;
    max-inline-size: none;
  }

  body.single-pp_mp_gallery :where(figcaption, .wp-element-caption) {
    color: var(--pp-gallery-ink-strong);
    opacity: var(--pp-caption-opacity, 0.82);
  }
}

@layer components {
  body.single-pp_mp_gallery .pp-gallery-hero-title {
    margin: 0;
    color: var(--pp-gallery-ink-strong);
    font-family: var(--pp-font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 1.8rem + 2.6vw, 4rem);
    line-height: 0.95;
    letter-spacing: 0.01em;
    text-wrap: balance;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-date {
    margin: 0 0 0.45rem;
    color: var(--pp-gallery-accent);
    font-family: var(--pp-font-ui);
    font-size: clamp(0.8rem, 0.75rem + 0.16vw, 0.92rem);
    letter-spacing: 0.03em;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-meta {
    margin: 0;
    color: var(--pp-gallery-ink);
    font-family: var(--pp-font-reading);
    font-size: clamp(1rem, 0.94rem + 0.22vw, 1.08rem);
    line-height: 1.45;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-deck {
    margin: 0;
    color: var(--pp-gallery-ink-strong);
    font-family: var(--pp-font-reading);
    font-size: clamp(1rem, 0.92rem + 0.28vw, 1.14rem);
    line-height: 1.48;
    font-style: italic;
    text-wrap: pretty;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-link,
  body.single-pp_mp_gallery a.pp-gallery-hero-link,
  body.single-pp_mp_gallery a.pp-gallery-hero-link:link,
  body.single-pp_mp_gallery a.pp-gallery-hero-link:visited {
    color: var(--pp-gallery-ink-strong);
    text-decoration: none;
    border: none;
    transition: color 160ms ease;
  }

  body.single-pp_mp_gallery a.pp-gallery-hero-link:is(:hover, :focus-visible) {
    color: var(--pp-gallery-link);
    border: none;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-link:focus-visible {
    outline: 1px solid currentColor;
    outline-offset: 2px;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-figure {
    display: block;
    margin: 0;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-figure > img {
    display: block;
    inline-size: 100%;
    aspect-ratio: var(--pp-gallery-hero-media-ratio);
    block-size: auto;
    object-fit: cover;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-caption {
    display: block;
    margin-block-start: var(--pp-caption-gap, 8px);
    color: var(--pp-gallery-ink-strong);
    opacity: var(--pp-caption-opacity, 0.82);
    text-align: end;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-media-empty {
    aspect-ratio: var(--pp-gallery-hero-media-ratio);
    border: 1px solid var(--pp-gallery-rule-strong);
    background: var(--pp-gallery-surface-soft);
  }

  body.single-pp_mp_gallery .pp-mp-photo {
    position: relative;
    display: block;
    overflow: hidden;
    background: transparent;
    flex: 0 0 auto;
    text-decoration: none;
  }

  body.single-pp_mp_gallery .pp-mp-photo > img {
    display: block;
    inline-size: 100%;
    block-size: 100%;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    transform: none;
  }

  body.single-pp_mp_gallery .pp-mp-gallery-grid--empty {
    margin: 0;
    padding-block: 1rem;
    color: var(--pp-gallery-ink);
    font-family: var(--pp-font-reading);
  }
}

@layer layouts {
  body.single-pp_mp_gallery .pp-mp-wide > .pp-mp-wide-inner {
    max-inline-size: var(--pp-gallery-wide);
    margin-inline: auto;
    padding-inline: var(--pp-gallery-block-pad-inline);
  }

  body.single-pp_mp_gallery .pp-gallery-hero {
    margin: 0 0 clamp(1rem, 0.7rem + 0.8vw, 1.4rem);
    container-type: inline-size;
  }

  body.single-pp_mp_gallery .pp-gallery-hero > .pp-mp-wide-inner {
    background: var(--pp-gallery-page-bg);
    padding-block: var(--pp-gallery-hero-pad-block);
  }

  body.single-pp_mp_gallery .pp-gallery-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pp-gallery-hero-gap);
    align-items: stretch;
  }

  @container (min-width: 52rem) {
    body.single-pp_mp_gallery .pp-gallery-hero-grid {
      grid-template-columns: minmax(18rem, 0.34fr) minmax(0, 0.66fr);
      gap: clamp(1.25rem, 1rem + 0.9cqi, 1.75rem);
    }
  }

  body.single-pp_mp_gallery .pp-gallery-hero-text {
    min-inline-size: 0;
  }

  body.single-pp_mp_gallery .pp-gallery-hero-text-inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(0.35rem, 0.25rem + 0.18vw, 0.55rem);
    min-block-size: 100%;
    color: var(--pp-gallery-ink);
  }

  body.single-pp_mp_gallery .pp-gallery-hero-media {
    min-inline-size: 0;
    padding-inline-end: 0;
    align-self: start;
  }

  body.single-pp_mp_gallery .pp-gallery-hero > .pp-mp-wide-inner::after {
    content: "";
    display: block;
    block-size: 1px;
    background: var(--pp-gallery-rule);
    margin-block-start: clamp(1.2rem, 1rem + 0.8vw, 2rem);
  }

  body.single-pp_mp_gallery .pp-mp-gallery-grid-section {
    margin: 0;
  }

  body.single-pp_mp_gallery .pp-mp-gallery-grid-section > .pp-mp-wide-inner {
    padding-block-end: 0;
  }

  body.single-pp_mp_gallery .pp-mp-gallery-pro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--pp-jg-gap);
  }

  body.single-pp_mp_gallery .pp-mp-photo {
    /* contain removed — was causing layout collapse before JS init */
  }

  @media (max-width: 820px) {
    body.single-pp_mp_gallery .pp-frame {
      padding-block-start: 0.25rem;
      padding-block-end: 1.5rem;
    }

    body.single-pp_mp_gallery .pp-gallery-hero {
      margin-block-end: 1.25rem;
      container-type: normal;
    }

    body.single-pp_mp_gallery .pp-gallery-hero > .pp-mp-wide-inner {
      padding-inline: 0;
      padding-block: 0 1.25rem;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-grid {
      display: block;
      width: 100%;
      max-width: none;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-text {
      display: block;
      width: 100%;
      max-width: none;
      min-inline-size: 0;
      padding-inline: var(--pp-gallery-mobile-inline);
      margin: 0 0 1rem;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-text-inner {
      display: flex;
      width: 100%;
      max-width: none;
      min-inline-size: 0;
      min-block-size: auto;
      gap: 0.55rem;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-text-inner > * {
      max-width: none;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-title {
      max-inline-size: none;
      width: 100%;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-meta,
    body.single-pp_mp_gallery .pp-gallery-hero-deck {
      max-inline-size: none;
      width: 100%;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-media {
      display: block;
      width: 100%;
      max-width: none;
      min-inline-size: 0;
      padding-inline: 0;
      margin-inline: 0;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-figure {
      width: 100%;
      max-width: none;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-figure > img {
      inline-size: 100%;
      width: 100%;
      max-inline-size: none;
      aspect-ratio: auto;
      height: auto;
      object-fit: contain;
    }

    body.single-pp_mp_gallery .pp-gallery-hero-caption {
      padding-inline: var(--pp-gallery-mobile-inline);
      text-align: end;
    }

    body.single-pp_mp_gallery .pp-gallery-hero > .pp-mp-wide-inner::after {
      margin-inline: var(--pp-gallery-mobile-inline);
      margin-block-start: 1.25rem;
    }

    body.single-pp_mp_gallery .pp-mp-wide > .pp-mp-wide-inner {
      padding-inline: 0;
    }

    body.single-pp_mp_gallery .pp-mp-gallery-grid-section > .pp-mp-wide-inner {
      padding-inline: var(--pp-gallery-mobile-inline);
    }

    body.single-pp_mp_gallery .pp-mp-gallery-pro {
      display: block;
      gap: 0;
    }

    body.single-pp_mp_gallery .pp-mp-photo {
      display: block;
      inline-size: 100% !important;
      width: 100% !important;
      block-size: auto !important;
      height: auto !important;
      margin: 0 0 var(--pp-gallery-mobile-gap) 0;
      overflow: visible;
      contain: none;
      content-visibility: visible;
    }

    body.single-pp_mp_gallery .pp-mp-photo:last-child {
      margin-block-end: 0;
    }

    body.single-pp_mp_gallery .pp-mp-photo > img {
      display: block;
      inline-size: 100%;
      width: 100%;
      block-size: auto !important;
      height: auto !important;
      max-inline-size: 100%;
      max-block-size: none;
      object-fit: contain;
      object-position: center;
    }
  }
}

@layer overrides {
  body.single-pp_mp_gallery :where(.pp-header, .pp-header__inner, .pp-header__row--top, #masthead, .site-header, .site-footer) {
    background: var(--pp-gallery-page-bg);
    color: var(--pp-gallery-ink-strong);
  }

  body.single-pp_mp_gallery .pp-header__row--primary {
    background: var(--pp-gallery-page-bg) !important;
    border-top-color: var(--pp-gallery-rule) !important;
    border-bottom-color: var(--pp-gallery-rule) !important;
  }

  body.single-pp_mp_gallery .pp-header__row--primary::before,
  body.single-pp_mp_gallery .pp-header__row--primary::after {
    content: none !important;
  }

  body.single-pp_mp_gallery :where(.pp-header__brand) {
    color: var(--pp-gallery-accent) !important;
  }

  body.single-pp_mp_gallery :where(.pp-header__menu a, .site-footer a) {
    color: var(--pp-gallery-link) !important;
  }

  body.single-pp_mp_gallery :where(.pp-header__menu a):is(:hover, :focus-visible),
  body.single-pp_mp_gallery :where(.site-footer a):is(:hover, :focus-visible) {
    color: var(--pp-gallery-accent) !important;
  }

  body.single-pp_mp_gallery a.pp-gallery-hero-link,
  body.single-pp_mp_gallery a.pp-gallery-hero-link:link,
  body.single-pp_mp_gallery a.pp-gallery-hero-link:visited {
    color: var(--pp-gallery-ink-strong) !important;
    text-decoration: none !important;
    border: none !important;
  }

  body.single-pp_mp_gallery a.pp-gallery-hero-link:hover,
  body.single-pp_mp_gallery a.pp-gallery-hero-link:focus-visible {
    color: var(--pp-gallery-link) !important;
  }
}

@layer components {

/* ─────────────────────────────────────────
   AUTO-LOAD: sentinel, spinner, progress
   ───────────────────────────────────────── */

/* Sentinel: invisible, solo dispara IntersectionObserver */
.pp-gallery-autoload-sentinel {
  display: block;
  height: 1px;
  width: 100%;
  pointer-events: none;
}

/* Spinner: tres dots pulsantes */
.pp-gallery-autoload-spinner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 2rem 0 1rem;
}

.pp-gallery-autoload-spinner[hidden] {
  display: none;
}

.pp-gallery-autoload-spinner__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pp-gallery-ink, #262626);
  opacity: 0.3;
  animation: pp-dot-pulse 1.2s ease-in-out infinite;
}

.pp-gallery-autoload-spinner__dot:nth-child(2) {
  animation-delay: 0.15s;
}

.pp-gallery-autoload-spinner__dot:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes pp-dot-pulse {
  0%, 80%, 100% { opacity: 0.15; transform: scale(0.85); }
  40% { opacity: 0.5; transform: scale(1); }
}

/* Botón manual: fallback, oculto por defecto */
.pp-gallery-load-more-wrap {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

.pp-gallery-load-more {
  background: none;
  border: 1px solid var(--pp-gallery-rule);
  color: var(--pp-gallery-ink);
  padding: 0.7rem 1.4rem;
  font-family: var(--pp-font-ui);
  font-size: 0.9rem;
  cursor: pointer;
  transition: border-color 160ms ease, color 160ms ease;
}

.pp-gallery-load-more:hover {
  border-color: var(--pp-gallery-accent);
  color: var(--pp-gallery-accent);
}

.pp-gallery-load-more[hidden] {
  display: none;
}

/* Progress counter */
.pp-gallery-progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 1.5rem;
  padding-bottom: 0.5rem;
}

.pp-gallery-progress[hidden] {
  display: none;
}

.pp-gallery-progress__num {
  font-family: var(--pp-font-ui, Inter, sans-serif);
  font-size: clamp(0.72rem, 0.68rem + 0.1vw, 0.8rem);
  color: var(--pp-gallery-ink, #262626);
  opacity: 0.5;
  letter-spacing: 0.02em;
}

.pp-gallery-progress__bar {
  width: min(200px, 50vw);
  height: 2px;
  background: var(--pp-gallery-rule, rgba(0, 0, 0, 0.1));
  border-radius: 1px;
  overflow: hidden;
}

.pp-gallery-progress__bar-fill {
  height: 100%;
  background: var(--pp-gallery-accent, var(--pp-orange, #ff6900));
  border-radius: 1px;
  transition: width 400ms ease-out;
}

/* ── Mobile: ajustes para scroll infinito ── */
@media (max-width: 820px) {
  .pp-gallery-progress {
    margin-top: 1rem;
    padding-inline: var(--pp-gallery-mobile-inline, 18px);
  }

  .pp-gallery-autoload-spinner {
    padding: 1.5rem 0 0.75rem;
  }

  .pp-gallery-load-more-wrap {
    margin-top: 1.5rem;
    padding-inline: var(--pp-gallery-mobile-inline, 18px);
  }
}

/* =====================================================
   SCROLL INDICATOR — mobile
   -----------------------------------------------------
   iOS Safari: el scrollbar del viewport vive en <html>.
   Usamos html:has() para ocultarlo solo en galerías
   y lo reemplazamos con un indicador custom.
   ===================================================== */

@media (max-width: 960px) {
  html: has(body.single-pp_mp_gallery) {
    scrollbar-width: none;
  }
  html: has(body.single-pp_mp_gallery)::-webkit-scrollbar {
    display: none;
  }
}

.pp-scroll-indicator {
  position: fixed;
  top: 0;
  right: 1px;
  width: 3.5px;
  height: 100vh;
  height: 100dvh;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

.pp-scroll-indicator__thumb {
  width: 100%;
  min-height: 44px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.45);
  will-change: transform;
}

} /* end @layer components — auto-load + scroll indicator */