/* ================================================================
   GALERÍA MÓVIL DE FICHAS DE PLAN — "peek" + contador por foto
   + reordenamiento móvil: Fotos antes que Quickinfo

   Aplica a las 200 fichas de planes/*.html (estructura común:
   .plan-detail__layout > .plan-detail__main + .plan-detail__sidebar,
   con .plan-gallery/.plan-gallery__item dentro de main y
   .plan-quickinfo dentro de sidebar). Ámbito exclusivamente
   móvil/tablet (<960px, mismo corte que Motion V1) — en >=960px
   ninguna regla de este archivo aporta nada, la galería mosaico de
   escritorio queda intacta.

   El reordenamiento lo ejecuta js/plan-gallery-mobile.js, que mueve
   la .plan-section con la galería para que sea hijo directo de
   .plan-detail__layout. Por eso los selectores de galería van
   calificados con ".plan-detail" (ancestro común estable, presente
   tanto antes como después de mover el nodo) en vez de con
   ".plan-detail__main", y ganan por especificidad sobre las reglas
   equivalentes de css/styles.css sin depender del orden de carga.
================================================================ */

@media (max-width: 959px) {

  .plan-detail .plan-gallery {
    display: flex;
    overflow-x: auto;
    overflow-y: visible;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: auto; /* el desplazamiento lo controla el gesto del usuario, no JS */
    gap: var(--space-sm);
    border-radius: 0;
    scrollbar-width: none;
    position: relative;
  }
  .plan-detail .plan-gallery::-webkit-scrollbar {
    display: none;
  }

  /* Todas las fotos con el mismo tamaño (se abandona la distinción
     "principal" del mosaico de escritorio): 82% de ancho deja un peek
     de la siguiente foto de ~19-20% — con margen por encima del
     threshold:0.15 del IntersectionObserver de Motion V1
     (js/motion-v1.js). Con un peek menor (probado: 86% de ancho ->
     ~13.7% de peek) la foto que asoma queda por DEBAJO del umbral y
     nunca se marca "is-visible" con el simple scroll vertical de la
     página: se ve como un hueco transparente en vez de una foto.
     Medido en Chrome real. La galería se adapta a Motion V1, nunca al
     revés — motion-v1.js no se toca. */
  .plan-detail .plan-gallery__item,
  .plan-detail .plan-gallery__item.plan-gallery__item--main {
    flex: 0 0 82%;
    grid-column: unset;
    grid-row: unset;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    height: 240px;
    border-radius: var(--radius-xl);
  }

  /* Sin esto, la ÚLTIMA foto no puede desplazarse hasta que su borde
     izquierdo llegue al del contenedor (no hay más contenido a la
     derecha que "empuje"): el navegador se detiene antes, dejando a la
     vista la cola de la penúltima foto — y con ella, su propio
     contador junto al de la última a la vez.

     Importante: este hueco se resuelve con MARGIN en el último item,
     no con PADDING en el contenedor .plan-gallery. Un padding-right en
     el propio contenedor flex reduce su content-box, y flex-basis:82%
     de TODOS los items se recalcula contra ese ancho ya reducido — el
     peek real acababa siendo ~45% en vez de ~19-20% (confirmado en
     Chrome real: cada foto medía 82% de un contenedor ya encogido por
     su propio padding, no 82% del ancho visible real). El margin en el
     :last-child no tiene ese efecto colateral: añade hueco después de
     la última foto sin alterar el content-box que usan las demás para
     calcular su propio 82%. */
  .plan-detail .plan-gallery__item:last-child {
    margin-right: calc(100% - 82%);
  }

  /* Contador: un badge por foto (ver js/plan-gallery-mobile.js), no un
     badge único externo. .plan-gallery__item ya es position:relative +
     overflow:hidden por defecto (css/styles.css:3046), así que cada
     badge queda anclado y recortado dentro de SU PROPIA foto. Al
     desplazar la galería, el badge viaja de forma nativa con su foto:
     cuando una foto ocupa el espacio principal, su propio badge es el
     único visible — nunca puede leerse como perteneciente a la foto
     vecina que asoma. */
  .plan-detail .plan-gallery__counter {
    display: block;
    position: absolute;
    bottom: 0.65rem;
    right: 0.65rem;
    background: rgba(17, 24, 20, 0.62);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    padding: 0.24rem 0.6rem;
    border-radius: 999px;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    pointer-events: none;
    z-index: 2;
  }

  /* ---------------- REORDENAMIENTO: Fotos antes que Quickinfo ----------------
     js/plan-gallery-mobile.js mueve la .plan-section que contiene la
     galería para que pase a ser hijo directo de .plan-detail__layout,
     justo antes de .plan-detail__sidebar, y le añade esta clase
     mientras dura el modo móvil. .plan-detail__sidebar ya tiene
     order:-1 (css/styles.css); con -2 la galería queda delante de él,
     y por tanto delante de Quickinfo.

     .plan-detail__layout ya aplica gap:var(--space-2xl) entre sus
     hijos directos (css/styles.css:2837) — se anula el margin/padding/
     border propios de .plan-section para no sumar un espaciado doble
     encima del gap del grid. */
  .plan-detail__layout > .plan-section.mv1-hoisted-gallery {
    order: -2;
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    /* Bug clásico de CSS Grid: un item de grid tiene min-width:auto por
       defecto, así que sin esto la pista del grid se infla hasta el
       ancho intrínseco del contenido de la galería (scrollWidth de
       varios miles de px, al ser un flex con overflow-x) en vez de
       limitarse a 1fr. .plan-detail__main ya tenía este mismo fix
       aplicado (css/styles.css:2841) para el caso general; aquí hace
       falta también para el nuevo hijo directo del grid. Sin esto,
       overflow-x de página muy por encima de 1000px a 390/400px de
       viewport. */
    min-width: 0;
  }

}

/* Oculto por defecto: solo existe visualmente en el rango móvil de
   arriba. En desktop la galería mosaico no necesita contador. */
.plan-gallery__counter {
  display: none;
}