/* ==========================================================================
   /reformation/ — Martin Luther, the English Bible, and Britain's foundations
   Companion stylesheet for page-reformation.php.

   Same house pattern as /bible/ and /word-of-god/: the template carries its
   own inline styles so the parent Ignition theme's cascade cannot reach them,
   and this file handles what inline styles cannot — the theme overrides it
   loses to, image sizing, and everything responsive.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Full bleed + base font
   -------------------------------------------------------------------------- */
body.ref-page .gcc-site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

.ref {
	font-family: 'Montserrat', sans-serif;
}

/* --------------------------------------------------------------------------
   2. Headings the theme would otherwise repaint navy.

   The hero and the "Why it still matters" panel are both white-on-dark; the
   theme's sitewide navy heading rule would make them invisible. Same bug that
   hit /bible-cause-and-effect/.
   -------------------------------------------------------------------------- */
body.ref-page .gcc-site-main .ref .ref-hero h1,
body.ref-page .gcc-site-main .ref .ref-matters h2 {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   3. Links — match the theme's specificity or they render in sitewide blue.
   -------------------------------------------------------------------------- */
body.ref-page .gcc-site-main .ref a {
	color: #E31E24;
	text-decoration: none;
}

body.ref-page .gcc-site-main .ref a:hover {
	color: #B31419;
}

body.ref-page .gcc-site-main .ref a:focus-visible {
	outline: 2px solid #E31E24;
	outline-offset: 3px;
}

/* Cards and buttons carry their own colour. */
body.ref-page .gcc-site-main .ref .ref-further-grid a,
body.ref-page .gcc-site-main .ref .ref-cta-row a {
	color: inherit;
	transition: background-color 140ms ease, transform 140ms ease;
}

body.ref-page .gcc-site-main .ref .ref-cta-row a:first-child {
	color: #fff;
}

body.ref-page .gcc-site-main .ref .ref-cta-row a:first-child:hover {
	background: #B31419 !important;
	color: #fff;
}

body.ref-page .gcc-site-main .ref .ref-cta-row a:last-child:hover {
	background: #0D1B2A !important;
	color: #fff;
}

body.ref-page .gcc-site-main .ref .ref-further-grid a:hover {
	background: #F2E2C4 !important;
	transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   4. Images
   -------------------------------------------------------------------------- */
.ref .ref-pic {
	display: block;
}

.ref .ref-hero-pic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ref .ref-hero-pic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Luther sits right of centre; keep him in frame as the crop tightens. */
	object-position: 70% center;
	display: block;
}

/* --------------------------------------------------------------------------
   5. Body copy — lists inherit the theme's spacing otherwise.
   -------------------------------------------------------------------------- */
body.ref-page .gcc-site-main .ref ul {
	list-style: disc;
}

body.ref-page .gcc-site-main .ref .ref-matters ul li {
	margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   6. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.ref .ref-timeline-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		gap: 26px 20px !important;
	}

	.ref .ref-inst-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.ref .ref-further-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 900px) {
	/* Hero: the left-to-right scrim assumes a wide canvas. On a phone it has
	   to run top-to-bottom or the white copy sits on bare photograph. */
	.ref .ref-hero {
		min-height: 0 !important;
	}

	.ref .ref-hero-scrim {
		background: linear-gradient(180deg, rgba(13,27,42,0.55) 0%, rgba(13,27,42,0.9) 55%) !important;
	}

	.ref .ref-hero-pic img {
		object-position: 62% center;
	}

	.ref .ref-hero-copy {
		padding: 200px 24px 40px !important;
		max-width: none !important;
	}

	.ref .ref-hero h1 {
		font-size: clamp(32px, 8vw, 48px) !important;
	}

	.ref .ref-timeline {
		padding: 32px 24px !important;
	}

	/* The New World section is a two-column split; stack it, copy first. */
	.ref .ref-newworld-grid {
		grid-template-columns: 1fr !important;
		gap: 22px !important;
	}

	.ref .ref-matters {
		margin-top: 44px !important;
		padding: 40px 24px !important;
	}

	.ref .ref-body {
		padding-top: 44px !important;
	}

	.ref .ref-cta > div {
		padding: 28px 24px !important;
	}
}

@media (max-width: 620px) {
	.ref .ref-timeline-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.ref .ref-inst-grid,
	.ref .ref-further-grid {
		grid-template-columns: 1fr !important;
	}

	.ref .ref-cta-row {
		flex-direction: column;
	}

	.ref .ref-cta-row a {
		text-align: center;
	}
}

/* --------------------------------------------------------------------------
   7. Print
   -------------------------------------------------------------------------- */
@media print {
	.ref .ref-cta,
	.ref .ref-further {
		display: none !important;
	}
}