/*
General
 */

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

/* Overview / Share Challenge headings — Display cut, not the Text cut Base.css's
   generic h1-h6 rule defaults every heading to. */
.PageContentInner h2 {
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     24px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   24px;
	margin:                        0;
}

/*
Actions Row — back arrow and the Menu component, both .FEIconButton (Base.css). The
negative margin-inline pulls the 40px hit areas back so the 24px icons themselves line
up with the gutter, matching the correction .NavigationList already makes.
 */
.ChallengeActionsArea {
	align-items:                   center;
	display:                       flex;
	justify-content:               space-between;
	margin-bottom:                 24px;
	margin-inline:                 -8px;
}

.ChallengeBackButtonIcon {
	background-color:              currentColor;
	mask:                          url("/Images/IconBackArrow.svg") no-repeat center / contain;
}

/*
Heading
 */
.ChallengeHeadingArea {
	margin-bottom:                 16px;
}

.ChallengeTitle {
	font-family:                   var(--Typeface02-FontFamily);
	font-size:                     32px;
	font-variation-settings:       var(--Typeface02-FontVariationSettings);
	line-height:                   32px;
	margin-bottom:                 4px;
}

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

/*
Thumbnail

Raster override exported from Sketch at 1280x705 (2x of the 640px max content width) as
WebP — see LocalTemp/ChallengeAndCampaignDetailPlan.md §6.8. The 24px corner radius is
already baked into the file's alpha; border-radius is still set here so the shape
survives a future re-export without corners.
 */
.ChallengeThumbnailArea {
	margin-bottom:                 16px;
}

.ChallengeThumbnail {
	aspect-ratio:                  327 / 180;
	border-radius:                 24px;
	display:                       block;
	height:                        auto;
	object-fit:                    cover;
	width:                         100%;
}

/*
Challenge Status Area
 */
.ChallengeStatusArea {
	--ChallengerOneTheme-Color:    var(--Colors-Secondary-Accent01);
	--ChallengerTwoTheme-Color:    var(--Colors-Secondary-Accent03);

	margin-bottom:                 27px;
}

.ChallengeStatusChallengers {
	--Typeface-FontWght:           700;

	display:                       flex;
	font-family:                   var(--Typeface01-FontFamily);
	font-size:                     18px;
	font-variation-settings:       var(--Typeface01-FontVariationSettings);
	font-weight:                   var(--Typeface-FontWght);
	justify-content:               space-between;
	line-height:                   20px;
	margin-bottom:                 10px;
}

.ChallengeStatusChallengerOne {
	--ChallengerTheme-Color:       var(--ChallengerOneTheme-Color);
}

.ChallengeStatusChallengerTwo {
	--ChallengerTheme-Color:       var(--ChallengerTwoTheme-Color);

	text-align:                    right;
}

.ChallengeStatusChallengerTitleText {
	color:                         var(--ChallengerTheme-Color);
}

.ChallengeStatusChallengerTitleIconArea {
	display:                       inline-block;
	margin-left:                   4px;
	padding-bottom:                1px;
	vertical-align:                bottom;
}

.ChallengeStatusChallengerTwo .ChallengeStatusChallengerTitleIconArea {
	margin-left:                   0;
	margin-right:                  4px;
}

.ChallengeStatusChallengerTitleIcon {
	display:                       block;
}

.ChallengeStatusChallengerDetails {
	--Typeface-FontWght:           700;

	font-size:                     18px;
	line-height:                   20px;
}

.ChallengeStatusChallengerTwo .ChallengeStatusChallengerDetails {
	text-align:                    right;
}

.ChallengeStatusMeterArea {
	margin-bottom:                 8px;
}

.ChallengeStatusMeter {
	border-radius:                 6px;
	display:                       flex;
	gap:                           4px;
	height:                        12px;
	overflow:                      hidden;
}

.ChallengeStatusMeterChallenger {
	flex:                          1 1 var(--Meter-FlexBasis, 50%);
}

.ChallengeStatusMeterChallenger[style*="--Meter-FlexBasis: 0%;"] {
	display:                       none;
}

.ChallengeStatusMeterChallengerOne {
	background-color:              var(--ChallengerOneTheme-Color);
}

.ChallengeStatusMeterChallengerTwo {
	background-color:              var(--ChallengerTwoTheme-Color);
}

/*
Dates Area
 */
.ChallengeDatesArea {
	display:                       flex;
	flex-wrap:                     wrap;
	font-size:                     14px;
	gap:                           24px;
	justify-content:               space-between;
	line-height:                   18px;
}

.ChallengeDateText {
	--Typeface-FontWght:           700;

	font-weight:                   var(--Typeface-FontWght);
}

/*
Join Challenge
 */
.ChallengeJoinArea {
	margin-bottom:                 23px;
}

.ChallengeJoinButton {
	width:                         100%;
}

/*
Description Area
 */
.ChallengeDescriptionArea {
	font-size:                     16px;
	line-height:                   24px;
	margin-bottom:                 24px;
}

.ChallengeDescriptionArea h2 {
	margin-bottom:                 8px;
}

/*
Organization Information
 */
.ChallengeOrganizationInformation {
	display:                       flex;
	gap:                           40px;
}

.ChallengeOrganizationInformation .OrganizationImageArea {
	flex:                          0 0 148px;
}

.ChallengeOrganizationInformation .OrganizationImage {
	aspect-ratio:                  148 / 81;
	border-radius:                 12px;
	display:                       block;
	object-fit:                    cover;
	width:                         100%;
}

.ChallengeOrganizationInformation .OrganizationContentArea {
	font-size:                     14px;
	line-height:                   18px;
	padding:                       7px 0 5px;
}

.ChallengeOrganizationInformation .OrganizationTitle {
	--Typeface-FontWght:           700;

	font-weight:                   var(--Typeface-FontWght);
}

/*
Share Challenge
 */
.ChallengeShareArea {
	margin-top:                    40px;
}

.ChallengeShareArea h2 {
	margin-bottom:                 24px;
}

.ChallengeShareLinkButton {
	width:                         100%;
}

/*
Social Row — Facebook and X open a share intent for this page.
 */
.ChallengeSocialArea {
	display:                       flex;
	gap:                           40px;
	justify-content:               center;
	margin-top:                    40px;
}

.ChallengeSocialLink {
	border-radius:                 100%;
	color:                         #ffffff;
	display:                       block;
	transition:                    var(--InteractiveTransitionDuration);
}

.ChallengeSocialLink:hover,
.ChallengeSocialLink:focus-visible {
	color:                         var(--Colors-Brand-Primary);
	outline:                       none;
}

/* Icon-only social buttons don't want the external-link marker Base.css appends. */
.ChallengeSocialLink[target="_blank"]::after {
	display:                       none;
}

.ChallengeSocialIcon {
	display:                       block;
	height:                        42px;
	width:                         42px;
}

.ChallengeSocialIcon.IconFacebook {
	background-color:              currentColor;
	mask:                          url("/Images/IconFacebook.svg") no-repeat center / contain;
}

.ChallengeSocialIcon.IconX {
	background-color:              currentColor;
	mask:                          url("/Images/IconX.svg") no-repeat center / contain;
}