/* Styles of list/templates/list/card_list_base.html, moved out of its inline <style>. */

		/* iOS Safari: freeze body scroll while a modal is open so keyboard
		   doesn't push the background content out of view */
		body.modal-open {
		  position: fixed;
		  width: 100%;
		  top: calc(-1 * var(--scroll-y, 0px));
		  overflow-y: scroll; /* keep scrollbar gutter */
		}
		/* Give modals extra bottom breathing room when the virtual keyboard appears */
		@supports (-webkit-touch-callout: none) {
		  .modal-dialog {
		    margin-bottom: env(keyboard-inset-height, env(safe-area-inset-bottom, 16px));
		  }
		}

			#parallax-bg {
				position: fixed;
				inset: 0;
				width: 100%;
				height: calc(100% + 40px); /* 20px above + 20px below */
				z-index: -3;
				isolation: isolate; /* prevent stacking context interference with modals */
				background-position: center;
				background-repeat: no-repeat;
				background-size: cover;
				transition: background 0.5s ease;
				transform: translateY(-15px); /* shift up */
			  }
			  body {
			    padding-bottom: env(safe-area-inset-bottom, 0px);
			  }

			@media (max-width: 768px) {
				#parallax-bg {
				height: 125%; /* oversize a bit more for safety */
				transform: translateY(-20px); /* shift up */
    			background-origin: border-box; /* or just remove this line */
				}
			}

			  #main-content {
				position: relative;
				z-index: 1;
				padding-top: 3rem;
				padding-bottom: 3rem;
			  }


				/* Main fills remaining space */
				#page-main {
				flex: 1;                     /* takes all vertical space */
				display: flex;
				flex-direction: column;
				}