/*
 * Giving Fund
 * ==================================================
 * Page styles for template-giving-fund.php. Loaded only on that template
 * (see inc/giving-fund.php). Everything is scoped to .gf-* classes.
 */

/* The shared -0.35em pull-up lets the "t" of "put" touch the sub-title,
   since this title starts directly beneath it. */
.gf-hero .title {
	margin-top: -0.2em;
}

.gf-hero-lead {
	font-size: 1.6em;
	line-height: 1.4em;
	letter-spacing: 2px;
}

.gf-video {
	position: relative;
	padding-top: 56.25%;
}

.gf-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.gf-quote {
	padding: 30px 35px;
	font-size: 1.75em;
}

.gf-steps-section {
	background: #0f0f0f;
}

.gf-border {
	max-width: 420px;
}

.gf-border-center {
	max-width: 420px;
	margin-left: auto;
	margin-right: auto;
}

.gf-shield {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 82px;
	height: 89px;
	margin: 0 auto 25px;
	/* Lifts the digit to the shield's optical centre (about 43% down, as in
	   the design) rather than the box centre, since the pointed base makes
	   the shape read top-heavy. */
	padding-bottom: 20px;
	box-sizing: border-box;
	background: url("../images/shield.svg") center / contain no-repeat;
	color: var(--primary);
	font-family: var(--secondary-font);
	font-size: 3em;
	/* Playfair defaults to old-style figures, where 1 and 2 sit at x-height
	   and 3 drops below the baseline, so no single offset centres them all. */
	font-variant-numeric: lining-nums;
	line-height: 1;
}

.gf-step-title {
	font-weight: 400;
	letter-spacing: 2px;
	margin: 0 auto 20px;
	max-width: 280px;
}

.gf-step-text {
	font-size: 0.875em;
	line-height: 1.75em;
	max-width: 320px;
	margin: 0 auto;
}

/* markings.svg reads much heavier on white than on black, so it is faded
   back on a pseudo-element to match the light pattern in the design. */
.gf-markings-light {
	position: relative;
}

.gf-markings-light:before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: url("../images/markings.svg") center center / 75% no-repeat;
	opacity: 0.35;
	pointer-events: none;
}

.gf-markings-light > * {
	position: relative;
}

.gf-collage {
	position: relative;
	max-width: 460px;
	margin-left: auto;
	padding-bottom: 20px;
}

.gf-collage-main {
	display: block;
	width: 60%;
	margin-left: auto;
	aspect-ratio: 272 / 436;
	object-fit: cover;
	object-position: 78% center;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 83%);
}

.gf-collage-flag {
	position: absolute;
	left: 0;
	bottom: 20px;
	width: 48%;
	aspect-ratio: 220 / 288;
	object-fit: cover;
	object-position: 45% center;
	clip-path: polygon(0 17%, 100% 0, 100% 100%, 0 100%);
}

/* Story
   The picture is tilted in 3D. The perspective projection magnifies the near
   (left) edge and pulls the far edge in, so the rendered image sits left of
   its layout box: it overhangs its column on the left and leaves dead space
   before the text on the right. The translate puts it back in the middle.

   The shift that centres it is width * sin(2 * angle) / (8 * perspective),
   so as a percentage of the image it tracks the image's own width. One value
   covers the two-column layout, where the image is a steady ~40% of the
   container, but stacked it runs the full width and the percentage climbs
   with the viewport, so each breakpoint below carries its own. Each value is
   the midpoint of its band: measured, that keeps the image within 4px of
   centre everywhere except the widest stacked sizes, where it reaches 7px. */
.gf-story-media {
	perspective: 500px;

	@media (width < 960px) {
		margin-bottom: 5vw !important;
		max-width: 600px;
		margin: 0 auto;
	}
}

.gf-story-media img {
	display: block;
	transform: translateX(3.6%) rotateY(10deg);
}

/* Dropping the spacer column handed this side the full remainder of the row,
   which ran the body copy out to about 95 characters a line. The cap holds it
   near 80, the measure the section had before, without giving the width back
   to a gap. Two-column only: stacked, the text matches the image's width. */
.gf-story-body {
	max-width: 620px;
}

.gf-stone {
	background-color: #0f0f0f;
	background-size: cover;
	background-position: center top;
}

.uk-section-dark.gf-action-section {
	background: transparent;
}

/* Black only below the midpoint, so the stone shows through the slant's top
   corner while the bottom corner still meets the black footer. */
.uk-section-dark.gf-banner {
	background: linear-gradient(to bottom, transparent 50%, var(--dark) 50%);
}

.gf-card {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	padding: 40px;
	background: var(--dark);
	border: 1px solid var(--primary);
	border-radius: 10px;
}

.gf-card + .gf-card {
	margin-top: 40px;
}

.gf-label {
	color: var(--white);
	letter-spacing: 0.5px;
	margin: 0 0 8px;
}

.gf-org {
	color: var(--primary);
	font-size: 2.2em;
	font-weight: 700;
	line-height: 1.2em;
}

.gf-location {
	color: rgba(255, 255, 255, 0.5);
	font-size: 1.25em;
	margin-top: 10px;
}

.gf-stat {
	min-width: 180px;
	padding: 25px 20px;
	text-align: center;
	background: #0f0f0f;
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 8px;
}

.gf-stat .gf-label {
	margin-bottom: 12px;
}

.gf-stat-value {
	color: var(--primary);
	font-size: 2.6em;
	font-weight: 700;
	line-height: 1em;
}

.gf-detail {
	color: var(--primary);
	font-size: 1.25em;
	line-height: 1.4em;
	margin: 0;
}

.gf-balance {
	text-wrap: balance;
}

/* Narrow enough that the title wraps after "Your" as in the design, so the
   field doesn't need a hard line break. */
.gf-banner-title {
	max-width: 11em;
	margin-left: auto;
	margin-right: auto;
}

@media only screen and (max-width: 959px) {
	.gf-collage {
		margin: 20px auto 0;
	}

	/* Stacked from here down, so the image runs the full container width and
	   needs a much larger share of its own width to stay centred. */
	.gf-story-media img {
		transform: translateX(6.9%) rotateY(10deg);
	}

	/* Overrides UIkit's uk-grid-margin, which is the gutter (30px) once the
	   columns wrap. Note the root is 14px here, so 2rem is 28px. */
	.gf-story-body {
		max-width: none;
		margin-top: 2rem;
	}
}

@media only screen and (max-width: 767px) {
	.gf-story-media img {
		transform: translateX(5.3%) rotateY(10deg);
	}

	.hero .sub-title {
		margin-bottom: 20px;
	}

	.gf-hero-lead {
		font-size: 1.3em;
	}

	.gf-quote {
		padding: 20px 25px;
		font-size: 1.4em;
	}

	.gf-card {
		padding: 25px;
	}

	.gf-org {
		font-size: 1.75em;
	}

	.gf-stat {
		min-width: 0;
		padding: 20px 10px;
	}

	.gf-stat-value {
		font-size: 2em;
	}
}

@media only screen and (max-width: 639px) {
	.gf-story-media img {
		transform: translateX(4.1%) rotateY(10deg);
	}
}

@media only screen and (max-width: 479px) {
	.gf-story-media img {
		transform: translateX(2.7%) rotateY(10deg);
	}

	.gf-stat-value {
		font-size: 1.6em;
	}
}