/* /v5/css/layout.css
   Contenedores principales: logo, sección de programas y footer.
*/

img.logo{
  width:100%;
  max-width:260px;
  height:auto;
  margin:.6rem auto .4rem;
  display:block;
}

.program-section,
#programSection{
  width:100%;
  max-width:600px;
  padding:.22rem .85rem;
  display:flex;
  flex-direction:column;
  gap:.52rem;          /* un poco menos de espacio vertical */
  min-width:0;
}

#heroWrap{ display:block; min-width:0; contain:layout paint; }

#upcomingList{
  display:flex; flex-direction:column;
  gap:.52rem;          /* acompaña el gap general */
  min-width:0; contain:layout paint;
}

.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;
}

/* PWA instalada: ajustes sutiles en mobile */
@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; }
}