/*
General
 */
main h3 {
	font-size:                     24px;
	line-height:                   25px;
	margin:                        0;
}

/*
Hero
 */
.HeroInner {
	display:                       flex;
	justify-content:               center;
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
}

.HeroInnerContent {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding:                       38px var(--Viewport-InlinePadding) 0;
	text-align:                    center;
}

.HeroInnerContent h1 {
	--Typeface-FontWght:           800;
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     64px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	font-weight:                   800;
	line-height:                   57px;
	margin:                        0;
}

.HeroInnerContent p {
	font-size:                     14px;
	line-height:                   21px;
	margin:                        16px 0 0;
}

/*
Featured Challenges
 */
.FeaturedChallengesInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
}

/* Currently has no content — the Featured Challenges heading is not in the design. */
.FeaturedChallengesInnerContent {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
}

.FeaturedChallengesCarouselItems {
	display:                       flex;
	gap:                           0 16px;
	overflow-x:                    scroll;
	overflow-y:                    hidden; /* this is a shortcut, Slack FE Dev channel has a better fix) */
	padding-inline:                var(--Viewport-InlinePadding);
	scroll-padding-inline:         var(--Viewport-InlinePadding);
	/* Change to 'x mandatory' with JS after DOMContentLoaded to prevent random snap bug */
	scroll-snap-type:              none;
	scroll-snap-type:              x mandatory;

	/* Hide scroll bar in Firefox */
	scrollbar-width:               none;
}

/* Hide scroll bar in Chrome, Safari, Opera */
.FeaturedChallengesCarouselItems::-webkit-scrollbar {
	display:                       none;
}

/* Above Content-MaxWidth the track is centred with visible side padding, so a
   card sitting at the scroll edge is hard-clipped rather than trailing off the
   way it does against the viewport edge below that width. Fade each edge so it
   reads as an intentional fade instead. */
@media (min-width: 1440px) {
	.FeaturedChallengesCarouselItems {
		-webkit-mask-image:            linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
		mask-image:                    linear-gradient(to right, transparent, black 16px, black calc(100% - 16px), transparent);
	}
}

.FeaturedChallengesCarouselItem {
	color:                         inherit;
	display:                       block;
	/* 327px matches the source art exactly (327x180); on a mobile viewport that is the
	   full content width (--Viewport-InlinePadding on each side), so one card fills the
	   screen rather than being cropped. */
	flex:                          0 0 min(327px, calc(100vw - 2 * var(--Viewport-InlinePadding)));
	outline:                       unset;
	scroll-snap-align:             start;
	text-decoration:               unset;
	transition:                    0.25s;
}

.FeaturedChallengesCarouselItem:focus-visible {
	text-decoration:               underline;
}

/*
The image fills the entire area rather than sitting as an icon on a themed background.
It is a single file per Settings.Challenge type today (Images/ChallengeType*.webp,
exported raster art per LocalTemp/ChallengeAndCampaignDetailPlan.md §6.8's convention —
the source Sketch symbols are illustrated bitmaps, not vector); once challenges support
uploads this becomes the uploaded image, with the same file serving as the fallback for
a type with no upload.
 */
.FeaturedChallengesCarouselItemImageArea {
	aspect-ratio:                  327 / 180;
	border-radius:                 24px;
	overflow:                      hidden;
	transition:                    inherit;
}

.FeaturedChallengesCarouselItem:focus-visible .FeaturedChallengesCarouselItemImageArea {
	box-shadow:                    inset 0 0 4px rgba(255,255,255,0.3);
}

.FeaturedChallengesCarouselItemImage {
	display:                       block;
	height:                        100%;
	object-fit:                    cover;
	width:                         100%;
}

.FeaturedChallengesCarouselItemTitle {
	--Typeface-FontWght:           600;
	font-size:                     18px;
	font-weight:                   var(--Typeface-FontWght);
	line-height:                   22px;
	margin-block:                  15px 0;
}

.FeaturedChallengesCarouselItemCreatedBy {
	color:                         #CCD5E2;
	font-size:                     14px;
	font-weight:                   500;
	line-height:                   18px;
}

/*
Challenges + Campaigns

Mirrored blocks: Challenges reads left-aligned in Accent01 (#97D700), Campaigns
right-aligned in Accent03 (#00C389). Buttons pair the section colour with
Colors-Secondary-Accent02 as text, which is dark enough to read on both.

Both images are raster overrides in Sketch (illustrated artwork, not vector), exported
as WebP the same way the Challenge/Campaign Detail thumbnails were — see
LocalTemp/ChallengeAndCampaignDetailPlan.md §6.8. They replace what was previously an
unresolved design placeholder (a red-tinted box labeled "Image will go here.").
 */
.ChallengesInner,
.CampaignsInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
	padding-top:                   40px;
}

.ChallengesInner {
	padding-top:                   24px;
}

.ChallengesInnerContent,
.CampaignsInnerContent {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
}

.CampaignsInnerContent {
	text-align:                    right;
}

.ChallengesImage,
.CampaignsImage {
	display:                       block;
	height:                        auto;
	margin-bottom:                 22px;
	width:                         100%;
}

.ChallengesImage {
	margin-bottom:                 8px;
}

.Challenges h2,
.Campaigns h2 {
	--Typeface-FontWght:           700;
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     54px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	font-weight:                   700;
	line-height:                   42px;
	margin:                        0;
}

.Challenges h2 {
	color:                         var(--Colors-Secondary-Accent01);
}

.Campaigns h2 {
	color:                         var(--Colors-Secondary-Accent03);
}

.Challenges p,
.Campaigns p {
	font-size:                     16px;
	line-height:                   24px;
	margin:                        12px 0 0;
}

.ChallengesButton,
.CampaignsButton {
	--ThisButton-Color:            var(--Colors-Secondary-Accent02);

	margin-top:                    24px;
}

.ChallengesButton {
	--ThisButton-BackgroundColor:  var(--Colors-Secondary-Accent01);
}

.CampaignsButton {
	--ThisButton-BackgroundColor:  var(--Colors-Secondary-Accent03);
}

/*
Donations Raised

The cloud graphic bleeds past the readable column at every width (455px wide,
drawn for a 375px frame) rather than scaling to fill it. Sizing is a fixed pixel
box like the page background gradients, so it renders at one size and stays
centered instead of stretching; overflow-x: hidden on the section clips it at the
true viewport edge on narrow screens and reveals more of it as the page grows,
never scaling past its natural size.

Centering uses flex justify-content rather than margin-inline: auto. When a fixed-
width box is wider than its container, auto margins do not split the overflow
evenly -- the browser anchors the box at the start edge and lets all of the
overflow hang off the end, so it reads as left-aligned rather than centered.
Flex centering does not have that failure mode.
 */
.DonationsRaised {
	overflow-x:                    hidden;
	padding-block:                 60px 0;
}

.DonationsRaisedInner {
	display:                       flex;
	justify-content:               center;
	position:                      relative;
}

.DonationsRaisedCloud {
	display:                       block;
	flex-shrink:                   0;
	height:                        321px;
	object-fit:                    cover;
	width:                         456px;
}

.DonationsRaisedContent {
	left:                          50%;
	position:                      absolute;
	text-align:                    center;
	top:                           50%;
	transform:                     translate(-50%, -50%);
	white-space:                   nowrap;
}

.DonationsRaisedTotal {
	--Typeface-FontWght:           700;
	color:                         #ffffff;
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     48px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	font-weight:                   700;
	line-height:                   48px;
}

.DonationsRaisedLabel {
	--Typeface-FontWght:           700;
	color:                         var(--Colors-Brand-Primary);
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     32px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	font-weight:                   700;
	line-height:                   32px;
	margin-top:                    8px;
}

/*
Featured Organization
 */
.FeaturedOrganizationInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
	padding-top:                   80px;
}
.FeaturedOrganizationInnerContent {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
}

/* baseline rather than center: the heading (25px line-height) and the link (24px)
   are close but not identical, so centering their boxes reads as slightly
   misaligned where aligning their text baselines does not. */
.FeaturedOrganizationHeadingRow {
	align-items:                   baseline;
	column-gap:                    8px;
	display:                       flex;
	justify-content:               space-between;
	margin-bottom:                 17px;
}

.FeaturedOrganizationViewAllLink {
	color:                         var(--Colors-Brand-Primary);
	font-size:                     16px;
	line-height:                   24px;
	text-decoration:               underline;
	white-space:                   nowrap;
}

.FeaturedOrganizationImageArea {
	align-items:                   center;
	aspect-ratio:                  372 / 140;
	background-color:              #ffffff;
	border:                        1px solid #E3E3E3;
	border-radius:                 16px;
	color:                         #000000;
	display:                       block;
	justify-content:               center;
	max-width:                     372px;
	overflow:                      hidden;
	padding-inline:                var(--Viewport-InlinePadding);
}

.FeaturedOrganizationImage {
	height:                        100%;
	object-fit:                    cover;
	width:                         100%;
}

.FeaturedOrganizationTitle {
	font-size:                     14px;
	line-height:                   20px;
	margin-top:                    15px;
}

/*
Learn More
 */
.LearnMoreInner {
	margin-inline:                 auto;
	max-width:                     var(--Content-MaxWidth);
	padding-top:                   42px;
}

.LearnMoreInnerContent {
	margin-inline:                 auto;
	max-width:                     calc(var(--ReadableContent-MaxWidth) + 2 * var(--Viewport-InlinePadding));
	padding-inline:                var(--Viewport-InlinePadding);
}

.LearnMoreImageArea {
	align-items:                   center;
	aspect-ratio:                  654 / 390;
	border-radius:                 16px;
	color:                         #000000;
	display:                       block;
	justify-content:               center;
	max-width:                     372px;
	overflow:                      hidden;
}

.LearnMoreImage {
	height:                        100%;
	object-fit:                    cover;
	width:                         100%;
}