/* Welcome announcement and staff-login dialogs.
   Kept separate from the shared site stylesheet so their viewport layout
   cannot affect normal pages or other modal components. */
#welcome-popup-modal,
#login-modal,
#news-detail-modal {
  position: fixed !important;
  inset: 0 !important;
  width: 100dvw;
  height: 100dvh;
  min-height: 100dvh;
  max-width: 100vw;
  box-sizing: border-box;
}

#welcome-popup-modal.active,
#login-modal.active,
#news-detail-modal.active {
  align-items: center !important;
  justify-content: center !important;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 20px !important;
}

#welcome-popup-modal .modal-container,
#login-modal .modal-container,
#news-detail-modal .modal-container {
  flex: 0 0 auto;
  margin: auto;
  max-height: calc(100dvh - 40px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
}

#welcome-popup-modal .popup-carousel-container {
  max-height: calc(100dvh - 120px) !important;
}

@media (max-width: 768px) {
  #welcome-popup-modal.active,
  #login-modal.active,
  #news-detail-modal.active {
    padding: 12px !important;
  }

  #welcome-popup-modal .modal-container,
  #login-modal .modal-container,
  #news-detail-modal .modal-container {
    width: 100% !important;
    max-width: calc(100vw - 24px) !important;
    max-height: calc(100dvh - 24px) !important;
  }

  #welcome-popup-modal .popup-carousel-container {
    height: min(68dvh, 520px) !important;
    max-height: min(68dvh, 520px) !important;
  }
}