/*
 * Bible Lessons — public month viewer.
 * Uses the parish theme tokens (navy / blue / gold / wash / line) so it reads as
 * part of the existing site rather than a new design.
 * Readability first: lesson images keep their aspect ratio and are never cropped.
 */

.htog-bible {
	margin: 0 0 56px;
	padding: 32px 0 0;
	border-top: 1px solid var(--line, #dce3e8);
}

.htog-bible-heading {
	margin: 0 0 18px;
	font-family: Georgia, serif;
	font-weight: 400;
	font-size: clamp(1.6rem, 3vw, 2.4rem);
	color: var(--navy, #102c4c);
}

/* Year selector ---------------------------------------------------------- */

.htog-bible-years {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
}

.htog-bible-years a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 18px;
	border: 1px solid var(--line, #dce3e8);
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 650;
	text-decoration: none;
	color: var(--navy, #102c4c);
	background: #fff;
}

.htog-bible-years a:hover {
	border-color: var(--gold, #996e24);
}

.htog-bible-years a.is-current {
	background: var(--navy, #102c4c);
	border-color: var(--navy, #102c4c);
	color: #fff;
}

/* Stage ------------------------------------------------------------------ */

.htog-bible-stage {
	margin: 0 0 22px;
}

.htog-bible-slides {
	list-style: none;
	margin: 0;
	padding: 0;
}

.htog-bible-slide[hidden] {
	display: none;
}

.htog-bible-figure {
	margin: 0;
	background: var(--wash, #f3f5f6);
	border: 1px solid var(--line, #dce3e8);
	border-radius: 6px;
	padding: 14px;
	text-align: center;
}

.htog-bible-image {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
	border: 1px solid var(--line, #dce3e8);
	background: #fff;
	/* No fixed aspect ratio and no object-fit: the supplied lesson artwork is never
	   cropped, stretched or letterboxed. */
}

.htog-bible-caption {
	margin: 14px auto 0;
	max-width: 70ch;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--ink, #1d3046);
}

.htog-bible-caption:empty {
	display: none;
}

.htog-bible-title {
	display: block;
	font-weight: 650;
	color: var(--navy, #102c4c);
}

.htog-bible-note {
	display: block;
	color: var(--muted, #526277);
}

/* Previous / Next -------------------------------------------------------- */

.htog-bible-nav {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 14px;
	margin-top: 18px;
}

.htog-bible-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	padding: 10px 20px;
	background: #fff;
	color: var(--navy, #102c4c);
	border: 1px solid #b7c5d1;
	border-radius: 5px;
	font-size: 0.92rem;
	font-weight: 650;
	cursor: pointer;
}

.htog-bible-step:hover:not(:disabled) {
	border-color: var(--navy, #102c4c);
}

.htog-bible-step:disabled {
	opacity: 0.45;
	cursor: default;
}

.htog-bible-current {
	margin: 0;
	text-align: center;
	font-size: 0.95rem;
	color: var(--muted, #526277);
}

.htog-bible-month {
	display: block;
	font-family: Georgia, serif;
	font-size: clamp(1.25rem, 2.4vw, 1.8rem);
	line-height: 1.2;
	color: var(--navy, #102c4c);
}

.htog-bible-position {
	display: block;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.htog-bible-full {
	margin: 14px 0 0;
	text-align: center;
}

.htog-bible-full-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 0.9rem;
	font-weight: 650;
}

/* Month buttons ---------------------------------------------------------- */

.htog-bible-months {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 10px;
}

.htog-bible-month-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 6px 4px;
	background: #fff;
	border: 1px solid var(--line, #dce3e8);
	border-radius: 4px;
	font-size: 0.82rem;
	font-weight: 650;
	color: var(--navy, #102c4c);
	cursor: pointer;
}

.htog-bible-month-button:hover:not(.is-empty) {
	border-color: var(--gold, #996e24);
}

.htog-bible-month-button[aria-current="true"] {
	background: var(--navy, #102c4c);
	border-color: var(--navy, #102c4c);
	color: #fff;
}

.htog-bible-month-button.is-empty {
	background: var(--wash, #f3f5f6);
	border-style: dashed;
	color: #8b97a4;
	font-weight: 400;
	cursor: default;
}

.htog-bible-hint-months,
.htog-bible-none {
	margin: 0 0 18px;
	font-size: 0.82rem;
	color: var(--muted, #526277);
}

/* Full-size viewer (native dialog, same lightweight pattern as the gallery) */

.htog-bible-viewer {
	width: min(1200px, calc(100vw - 24px));
	max-height: calc(100vh - 24px);
	padding: 0;
	border: 1px solid var(--line, #dce3e8);
	border-radius: 8px;
	background: #fff;
	color: var(--ink, #1d3046);
	overflow: auto;
}

.htog-bible-viewer::backdrop {
	background: #0b223ccc;
}

.htog-bible-viewer-bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 16px;
	border-bottom: 1px solid var(--line, #dce3e8);
	position: sticky;
	top: 0;
	background: #fff;
	z-index: 1;
}

.htog-bible-viewer-bar span {
	font-size: 0.9rem;
	font-weight: 650;
	color: var(--navy, #102c4c);
}

.htog-bible-viewer-close,
.htog-bible-viewer-nav button {
	min-height: 44px;
	padding: 8px 16px;
	background: #fff;
	border: 1px solid #b7c5d1;
	border-radius: 5px;
	font-size: 0.88rem;
	font-weight: 650;
	color: var(--navy, #102c4c);
	cursor: pointer;
}

.htog-bible-viewer-figure {
	margin: 0;
	padding: 16px;
	text-align: center;
}

.htog-bible-viewer-figure img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin-inline: auto;
}

.htog-bible-viewer-figure figcaption {
	margin: 12px auto 0;
	max-width: 80ch;
	font-size: 0.9rem;
	color: var(--muted, #526277);
}

.htog-bible-viewer-nav {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 0 16px 16px;
}

/* Smaller screens -------------------------------------------------------- */

@media (max-width: 900px) {
	.htog-bible-months {
		grid-template-columns: repeat(6, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.htog-bible {
		margin-bottom: 40px;
		padding-top: 24px;
	}

	.htog-bible-figure {
		padding: 8px;
	}

	.htog-bible-nav {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"current current"
			"prev next";
		row-gap: 12px;
	}

	.htog-bible-current {
		grid-area: current;
	}

	.htog-bible-step[data-bible-prev] {
		grid-area: prev;
	}

	.htog-bible-step[data-bible-next] {
		grid-area: next;
	}

	.htog-bible-step {
		padding-inline: 12px;
		width: 100%;
	}

	.htog-bible-months {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}

	.htog-bible-years a {
		padding-inline: 14px;
	}
}

@media (max-width: 350px) {
	.htog-bible-months {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media print {
	.htog-bible-nav,
	.htog-bible-months,
	.htog-bible-years,
	.htog-bible-full,
	.htog-bible-hint-months {
		display: none;
	}

	.htog-bible-slide[hidden] {
		display: block;
	}

	.htog-bible-figure {
		border: 0;
		padding: 0;
		break-inside: avoid;
	}
}