/* Centred image variants (no float). The Size picker maps the
   "Center" cell of each row to one of these classes — they need
   `display: block; margin: auto` to actually centre, otherwise a
   width:50% image just hugs the left edge of the line box and the
   admin's "50% Center" selection appears identical to "50% Left". */
.full_width_image {
	width: 100%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.two_third_image {
	width: 67%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.half_image {
	width: 50%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.third_image {
	width: 33%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.quarter_image {
	width: 25%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.twenty_image {
	width: 20%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}
.ten_image {
	width: 10%;
	height: auto;
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.two_third_image_left {
	width: 67%;
	height: auto;
	float: left;
	padding: 0px;
	padding-right: 10px;
}
.half_image_left {
	width: 50%;
	height: auto;
	float: left;
	padding: 0px;
	padding-right: 10px;
}
.third_image_left {
	width: 33%;
	height: auto;
	float: left;
	padding: 0px;
	padding-right: 10px;
}
.quarter_image_left {
	width: 25%;
	height: auto;
	float: left;
	padding: 0px;
	padding-right: 10px;
}
.twenty_image_left {
	width: 20%;
	height: auto;
	float: left;
	padding: 0px;
	padding-right: 10px;
}
.ten_image_left {
	width: 10%;
	height: auto;
	float: left;
	padding: 0px;
	padding-right: 10px;
}

.two_third_image_right {
	width: 67%;
	height: auto;
	float: right;
	padding: 0px;
	padding-left: 10px;
}
.half_image_right {
	width: 50%;
	height: auto;
	float: right;
	padding: 0px;
	padding-left: 10px;
}
.third_image_right {
	width: 33%;
	height: auto;
	float: right;
	padding: 0px;
	padding-left: 10px;
}
.quarter_image_right {
	width: 25%;
	height: auto;
	float: right;
	padding: 0px;
	padding-left: 10px;
}
.twenty_image_right {
	width: 20%;
	height: auto;
	float: right;
	padding: 0px;
	padding-left: 10px;
}
.ten_image_right {
	width: 10%;
	height: auto;
	float: right;
	padding: 0px;
	padding-left: 10px;
}



img.two_third_image_left  {
	padding-right: 10px !important;
}
img.half_image_left  {
	padding-right: 10px !important;
}
img.third_image_left  {
	padding-right: 10px !important;
}
img.quarter_image_left  {
	padding-right: 10px !important;
}
img.twenty_image_left  {
	padding-right: 10px !important;
}
img.ten_image_left  {
	padding-right: 10px !important;
}

img.two_third_image_right  {
	padding-left: 10px !important;
}
img.half_image_right  {
	padding-left: 10px !important;
}
img.third_image_right  {
	padding-left: 10px !important;
}
img.quarter_image_right  {
	padding-left: 10px !important;
}
img.twenty_image_right  {
	padding-left: 10px !important;
}
img.ten_image_right  {
	padding-left: 10px !important;
}




/* ──────────────────────────────────────────────────────────────
   Article & newsletter body content — shared with the BS5 layout
   block of the same name in _meta.html.erb. Scoped to .page-content
   so the rules don't leak into navbars / dropdowns / sitewide
   widget lists that the parish theme styles separately.

   Lists: BS3 themes routinely zero out list-style for nav menus and
   forget to restore it for body prose, so we re-establish a real
   list marker, indent, and a tinted background block.

   Images: catch the legacy case where an admin pasted an <img> with
   no size class, no width, and no inline style — those render at
   the file's intrinsic pixel size, which is almost always wildly
   too big in modern parish columns. Images that already carry a
   size class (.full_width_image, .half_image, etc.) or any explicit
   width attribute keep full control.
   ────────────────────────────────────────────────────────────── */
.page-content ul,
.page-content ol {
	background-color: rgba(0, 0, 0, .025);
	border-left: 3px solid rgba(0, 0, 0, .08);
	border-radius: 6px;
	padding: 14px 16px 14px 36px;
	margin: 0 0 20px;
}
.page-content ul li,
.page-content ol li {
	margin-bottom: 6px;
	line-height: 1.6;
}
.page-content ul li:last-child,
.page-content ol li:last-child { margin-bottom: 0; }
.page-content ul ul,
.page-content ol ol,
.page-content ul ol,
.page-content ol ul {
	background: transparent;
	border-left: 0;
	padding: 6px 0 6px 20px;
	margin: 6px 0;
}
.page-content ul  { list-style: disc outside; }
.page-content ol  { list-style: decimal outside; }
.page-content ul ul { list-style: circle outside; }
.page-content ul ul ul { list-style: square outside; }

.page-content blockquote {
	border-left: 4px solid #888;
	background-color: rgba(0, 0, 0, .03);
	padding: 14px 18px;
	margin: 0 0 20px;
	border-radius: 0 6px 6px 0;
	color: #495057;
	font-style: italic;
}
.page-content blockquote p:last-child { margin-bottom: 0; }

.page-content img {
	max-width: 100%;
	height: auto;
}
.page-content img:not([class]):not([width]):not([style*="width"]) {
	display: block;
	width: 100%;
	height: auto;
	margin: 16px auto;
	border-radius: 4px;
}
.page-content img.img-fluid:not([width]):not([style*="width"]),
.page-content img.img-responsive:not([width]):not([style*="width"]) {
	width: 100%;
	height: auto;
}

@media (max-width: 767px) {

	.full_width_image {
		width: 100%;
	}
	.two_third_image {
		width: 67%;
	}
	.half_image {
		width: 50%;
	}
	.third_image {
		width: 33%;
	}
	.quarter_image {
		width: 30%;
	}
	.twenty_image {
		width: 30%;
	}
	.ten_image {
		width: 30%;
	}

	.two_third_image_left {
		width: 67%;
	}
	.half_image_left {
		width: 50%;
	}
	.third_image_left {
		width: 33%;
	}
	.quarter_image_left {
		width: 30%;
	}
	.twenty_image_left {
		width: 30%;
	}
	.ten_image_left {
		width: 30%;
	}

	.two_third_image_right {
		width: 67%;
	}
	.half_image_right {
		width: 50%;
	}
	.third_image_right {
		width: 30%;
	}
	.quarter_image_right {
		width: 30%;
	}
	.twenty_image_right {
		width: 30%;
	}
	.ten_image_right {
		width: 30%;
	}


}