/* memorial_layout_v3.css (v3)
   Layout común de páginas (full-grid + scroll interno)
   Breakpoint único: 1100px
*/

html, body{ height:100%; margin:0; }

/* Contrato: NO scroll en body */
body{ overflow:hidden; }

/* Stage: full-grid vertical
   IMPORTANTE: height (no min-height) para que exista techo real y el overflow interno funcione */
.memorial_stage{
  display:grid;
  height:100vh;
  height:100dvh;

  /* Panel arriba + aire abajo, pero con techo real */
  grid-template-rows: minmax(0, 1fr);
  justify-items: center;
  align-items: start;
}

/* Desktop: compensar margin del shell (40px + 40px) + buffer (2px) = 82px */
@media (min-width:1100px){
  .memorial_stage{
    height: calc(100vh - 82px);
    height: calc(100dvh - 82px);
  }
}

/* Mobile: arranca arriba, negro abajo */
@media (max-width:1099px){
  .memorial_stage{
    padding: 18px 0;
  }
}

/* Panel */
.memorial_panel{
  width:100%;
  max-width:820px;

  /* El panel puede ser más bajo si el contenido es poco, pero nunca supera el stage */
  max-height: 100%;

  display:grid;
  grid-template-rows: minmax(0, 1fr);
  min-height:0;
}

/* Scroll interno (el que tiene que funcionar en móviles) */
.memorial_panel_scroll{
  overflow-y:auto;
  -webkit-overflow-scrolling: touch;
  min-height:0;
}

/* Helpers de forms */
form{ margin:0; }

/* Touch override: fuerza modo mobile aunque el viewport CSS sea grande (Android viejo) */
@media (hover: none) and (pointer: coarse){
  .memorial_stage{
    height: 100vh;
    height: 100dvh;
    padding: 18px 0;
    grid-template-rows: auto 1fr;
  }

  /* evita que reglas desktop por ancho “achiquen” el sistema */
  .memorial_panel{
    max-height: none;
  }

  /* scroll robusto: que scrollee el stage en touch */
  .memorial_stage{
    position: fixed;
    inset: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .memorial_panel_scroll{
    overflow: visible;
  }
}