/* ==========================================================================
   /passport/ — the lion, the unicorn and the Lion of Judah
   Companion stylesheet for page-passport.php.

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

body.pp-page .gcc-site-main {
	max-width: none;
	width: 100%;
	margin: 0;
	padding: 0;
	overflow-x: hidden;
}

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

/* --------------------------------------------------------------------------
   Headings on dark panels. The theme paints headings navy sitewide, which
   would make these invisible against their own background.
   -------------------------------------------------------------------------- */
body.pp-page .gcc-site-main .pp .pp-hero h1,
body.pp-page .gcc-site-main .pp .pp-judah h2 {
	color: #fff !important;
}

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

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

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

body.pp-page .gcc-site-main .pp .pp-further-grid a,
body.pp-page .gcc-site-main .pp .pp-cta-row a {
	color: inherit;
	transition: background-color 140ms ease, transform 140ms ease;
}

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

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

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

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

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

.pp .pp-hero-pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 340px;
}

.pp .pp-judah-pic {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.pp .pp-judah-pic img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* The lion is left of centre; keep him in frame as the crop tightens. */
	object-position: 30% center;
}

body.pp-page .gcc-site-main .pp ul {
	list-style: disc;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1000px) {
	.pp .pp-glance-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

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

@media (max-width: 900px) {
	/* Hero: stack, copy first, artwork below it uncovered. */
	.pp .pp-hero-grid {
		grid-template-columns: 1fr !important;
	}

	.pp .pp-hero-copy {
		padding: 44px 24px 32px !important;
		order: 1;
	}

	.pp .pp-hero-pic {
		order: 2;
	}

	.pp .pp-hero-pic img {
		min-height: 0 !important;
		height: 260px !important;
	}

	.pp .pp-hero h1 {
		font-size: clamp(28px, 7vw, 42px) !important;
	}

	/* Lion band: the left-to-right scrim assumes width. On a phone it has to
	   run top-to-bottom, or the white copy sits on bare photograph. */
	.pp .pp-judah-scrim {
		background: linear-gradient(180deg, rgba(13,27,42,0.35) 0%, rgba(13,27,42,0.93) 48%) !important;
	}

	.pp .pp-judah-copy {
		max-width: none !important;
		padding: 190px 24px 44px !important;
	}

	.pp .pp-judah-pic img {
		object-position: 34% top;
	}

	.pp .pp-glance,
	.pp .pp-conclusion {
		padding: 40px 24px !important;
	}

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

@media (max-width: 620px) {
	.pp .pp-glance-grid,
	.pp .pp-further-grid {
		grid-template-columns: 1fr !important;
	}

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

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

@media print {
	.pp .pp-cta-row,
	.pp .pp-further {
		display: none !important;
	}
}