/* ==========================================================================
   /bible/ — "Christianity Changed Britain"
   Companion stylesheet for page-bible.php.

   The markup keeps the deck's inline styles (generated by
   designs/bible-page/build-bible-page.py, re-coloured to the GCC brand and
   set in Montserrat). Those stay inline so the parent Ignition theme's
   cascade cannot reach them.

   This file only does what inline styles cannot: heading colours the theme
   would otherwise override, image sizing, and the responsive behaviour the
   deck has none of — it was authored at a fixed 1400px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Full bleed. The theme's main wrapper constrains width and adds padding.
   -------------------------------------------------------------------------- */
body.gcc-bb-page .gcc-site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   2. Headings.

   Same trap as the Cause & Effect page: the theme styles headings navy
   sitewide via a type selector, which beats the colour the deck sets on its
   own wrapper. Here the deck DOES set a colour inline on each heading, so
   inline wins — except inside the closing section, which is white-on-navy
   and would otherwise render navy-on-navy. Scope the override there.
   -------------------------------------------------------------------------- */
.gcc-bb .gcc-bb-closing h3,
.gcc-bb .gcc-bb-closing blockquote,
.gcc-bb .gcc-bb-closing p {
	color: inherit !important;
}

.gcc-bb .gcc-bb-closing h3 {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   3. Images
   -------------------------------------------------------------------------- */
.gcc-bb .gcc-bb-pic {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
}

.gcc-bb .gcc-bb-pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The hero <picture> has to fill the grid cell it shares with the overlay. */
.gcc-bb .gcc-bb-hero .gcc-bb-pic {
	grid-column: 1;
	grid-row: 1;
	height: 520px;
}

/* --------------------------------------------------------------------------
   4. Links
   -------------------------------------------------------------------------- */
/* The theme sets link colour via `body.gcc-redesigned .gcc-site-main a`,
   which outranks a plain `.gcc-bb a` — so in-body links rendered in the
   sitewide blue rather than this page's red. Match that specificity. The
   CTA cards were unaffected: they carry their colour inline. */
body.gcc-bb-page .gcc-site-main .gcc-bb a {
	color: #E31E24;
}

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

body.gcc-bb-page .gcc-site-main .gcc-bb .gcc-bb-cta a:hover {
	color: #E31E24;
}

.gcc-bb .gcc-bb-hero-cta:hover {
	background: #B31419 !important;
	color: #fff !important;
}

.gcc-bb a:focus-visible {
	outline: 2px solid #E31E24;
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   5. Responsive.

   The deck was authored at a fixed 1400px with hardcoded three- and
   four-column grids and 64px side padding. All of it needs unpicking below
   about 900px.
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
	.gcc-bb .gcc-bb-hero h1 {
		font-size: clamp(30px, 5.2vw, 56px) !important;
	}

	.gcc-bb .gcc-bb-timeline {
		grid-template-columns: 1fr !important;
		gap: 28px !important;
		padding: 36px 32px !important;
	}
}

@media (max-width: 900px) {
	/* Rows stack, copy first — the deck alternates the copy column, so
	   without this the reading order flips section to section. */
	.gcc-bb .gcc-bb-row {
		display: flex !important;
		flex-direction: column !important;
	}

	.gcc-bb .gcc-bb-row > * {
		order: 2;
	}

	.gcc-bb .gcc-bb-row > .gcc-bb-copy {
		order: 1;
		padding: 32px 24px !important;
	}

	/* Stacked images have no column to take their height from. */
	.gcc-bb .gcc-bb-row .gcc-bb-pic,
	.gcc-bb .gcc-bb-row .gcc-bb-pic img {
		height: 240px !important;
	}

	.gcc-bb .gcc-bb-row > div[style*="position:relative"] .gcc-bb-pic,
	.gcc-bb .gcc-bb-row > div[style*="position:relative"] .gcc-bb-pic img {
		height: 300px !important;
	}

	/* Hero: the deck's left-weighted white scrim assumes a wide canvas. On a
	   phone the text needs the whole width and a solid backing to stay
	   readable over the photo. */
	.gcc-bb .gcc-bb-hero,
	.gcc-bb .gcc-bb-hero > * {
		grid-template-rows: auto !important;
		height: auto !important;
	}

	.gcc-bb .gcc-bb-hero .gcc-bb-pic,
	.gcc-bb .gcc-bb-hero .gcc-bb-pic img {
		height: 300px !important;
	}

	.gcc-bb .gcc-bb-hero > div:nth-child(2) {
		display: none !important;   /* the horizontal white gradient */
	}

	.gcc-bb .gcc-bb-hero > div:last-child {
		position: static !important;
		padding: 28px 24px 36px !important;
		background: #faf7f1;
	}

	.gcc-bb .gcc-bb-hero > div:last-child > div {
		max-width: none !important;
	}

	/* Timeline: four abreast becomes two. */
	.gcc-bb .gcc-bb-timeline > div:last-child {
		grid-template-columns: 1fr 1fr !important;
		gap: 24px 16px !important;
	}

	.gcc-bb .gcc-bb-timeline > div:last-child > div:first-child {
		display: none !important;   /* the connecting hairline */
	}

	/* Generic padding relief for the full-width blocks. */
	.gcc-bb .gcc-bb-closing {
		padding: 40px 24px !important;
	}

	.gcc-bb > div[style*="padding:48px 64px"] {
		padding: 36px 24px !important;
	}

	.gcc-bb .gcc-bb-cta {
		padding: 32px 24px !important;
	}

	.gcc-bb .gcc-bb-cta > div {
		gap: 28px !important;
	}
}

@media (max-width: 520px) {
	.gcc-bb .gcc-bb-timeline > div:last-child {
		grid-template-columns: 1fr !important;
	}

	.gcc-bb .gcc-bb-cta > div {
		flex-direction: column;
		gap: 22px !important;
	}
}

/* --------------------------------------------------------------------------
   6. Print
   -------------------------------------------------------------------------- */
@media print {
	.gcc-bb .gcc-bb-cta,
	.gcc-bb .gcc-bb-hero-cta {
		display: none !important;
	}
}