/* /v11/css/layout.css */
/* Δ: estructura estable + aislamiento para animaciones + correcciones iOS */

/* Logo */
img.logo{
  width:100%;
  max-width:260px;
  height:auto;
  margin:.6rem auto .4rem;
  display:block;
  flex-shrink:0;
}

/* Contenedor principal */
.program-section,
#programSection{
  width:100%;
  max-width:600px;

  /* Espaciado interno consistente */
  padding:.22rem .85rem;

  display:flex;
  flex-direction:column;
  gap:.52rem;

  /* Previene overflow lateral */
  min-width:0;

  /* Δ: aislamiento para evitar repaints/reflows en animaciones */
  contain:layout paint style;
}

/* HERO */
#heroWrap{
  display:block;
  min-width:0;
  contain:layout paint style;
  flex-shrink:0; /* Δ evita que se aplaste en iPad/iPhone XS */
}

/* Próximos */
#upcomingList{
  display:flex;
  flex-direction:column;
  gap:.52rem;

  min-width:0;
  contain:layout paint style;

  flex-shrink:0; /* Δ evita colapso por cálculo de vh */
}

/* Footer */
.footer-info{
  width:100%;
  max-width:600px;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:.32rem;

  padding:.48rem;
  padding-bottom:env(safe-area-inset-bottom);

  flex-wrap:wrap;
  gap:8px;

  text-align:center;
  min-width:0;

  flex-shrink:0; /* Δ iOS: evita que el footer desaparezca en landscape */
}


/* --- iOS PWA / iPhone XS / móviles pequeños --- */
@media (display-mode:standalone) and (max-width:600px){
  img.logo{
    max-width:230px;
    margin:.5rem auto .3rem;
  }

  .program-section,
  #programSection{
    padding:.18rem .75rem;
    gap:.46rem;
  }

  #upcomingList{
    gap:.46rem;
  }

  .footer-info{
    margin-top:.28rem;
    padding:.44rem;
    padding-bottom:env(safe-area-inset-bottom);
    gap:6px;
  }
}


/* --- iPad Landscape (se controla un poquito el espaciado) --- */
@media (min-width:768px) and (orientation:landscape){
  .program-section,
  #programSection{
    padding:.28rem .9rem;
  }

  #upcomingList{
    gap:.5rem;
  }
}