/* ==========================================================================
   /church-without-walls/ — companion stylesheet for
   page-church-without-walls.php.
   ========================================================================== */
body.cww-page .gcc-site-main { max-width:none; width:100%; margin:0; padding:0; overflow-x:hidden; }
.cww { font-family:'Montserrat', sans-serif; }

/* The theme paints every heading navy; these two sit on navy panels. */
body.cww-page .gcc-site-main .cww .cww-hero h1,
body.cww-page .gcc-site-main .cww .cww-join h2 { color:#fff !important; }

/* Links — match the theme's specificity or they fall back to sitewide blue. */
body.cww-page .gcc-site-main .cww a { color:#E31E24; text-decoration:none; }
body.cww-page .gcc-site-main .cww a:hover { color:#B31419; }
body.cww-page .gcc-site-main .cww a:focus-visible { outline:2px solid #E31E24; outline-offset:3px; }
/* Inside the navy panel red-on-navy is unreadable — go white + underline. */
body.cww-page .gcc-site-main .cww .cww-join p a { color:#fff; text-decoration:underline; }
/* White is right on navy, but it left the link with no hover state at all —
   the generic red hover above is outranked here. Warm it instead. */
body.cww-page .gcc-site-main .cww .cww-join p a:hover { color:#F2E2C4; }
body.cww-page .gcc-site-main .cww .cww-further-grid a,
body.cww-page .gcc-site-main .cww .cww-cta-row a { color:inherit; transition:background-color 140ms ease, transform 140ms ease; }
body.cww-page .gcc-site-main .cww .cww-cta-row a { color:#fff; }
body.cww-page .gcc-site-main .cww .cww-cta-row a:first-child:hover { background:#B31419 !important; }
body.cww-page .gcc-site-main .cww .cww-cta-row a:last-child:hover { background:#fff !important; color:#0D1B2A !important; }
body.cww-page .gcc-site-main .cww .cww-further-grid a:hover { background:#F2E2C4 !important; transform:translateY(-2px); }

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

/* Hero image sits behind the copy. The source is only 991px wide (a 2021
   phone photo) so it is stretched on a wide screen — acceptable here because
   the navy scrim covers most of it and softness is not noticeable. */
.cww .cww-hero { min-height:360px; display:flex; align-items:center; }
.cww .cww-hero .cww-pic { position:absolute; inset:0; display:block; width:100%; height:100%; }
.cww .cww-hero .cww-pic img { width:100%; height:100%; object-fit:cover; display:block;
	/* The gazebo and the group sit left of centre — keep them in frame. */
	object-position:40% center; }

@media (max-width: 1000px) {
	.cww .cww-stat-grid,
	.cww .cww-further-grid { grid-template-columns:repeat(2,minmax(0,1fr)) !important; }
	.cww .cww-when-grid { grid-template-columns:1fr 1fr !important; gap:22px !important; }
}
@media (max-width: 900px) {
	/* A left-to-right scrim assumes width. On a phone it has to run top to
	   bottom or the copy sits on bare photograph and stops being readable. */
	.cww .cww-hero-scrim {
		background:linear-gradient(180deg, rgba(13,27,42,0.50) 0%, rgba(13,27,42,0.93) 58%) !important;
	}
	.cww .cww-hero { min-height:0; }
	.cww .cww-hero > div { padding-top:170px !important; padding-bottom:56px !important; }
	.cww .cww-hero .cww-pic img { object-position:42% top; }
	.cww .cww-hero h1 { font-size:clamp(30px,7.5vw,42px) !important; }
	.cww .cww-when > div { padding:28px 24px !important; }
	.cww .cww-body { padding-top:44px !important; }
	.cww .cww-join > div { padding:36px 26px !important; }
}
@media (max-width: 620px) {
	.cww .cww-when-grid,
	.cww .cww-stat-grid,
	.cww .cww-further-grid { grid-template-columns:1fr !important; }
	.cww .cww-cta-row { flex-direction:column; }
	.cww .cww-cta-row a { text-align:center; }
}
@media print { .cww .cww-further, .cww .cww-cta-row { display:none !important; } }