/* AFRC homepage — hero lockup.
 *
 * The dark photo hero: brand mark + tagline (left) and the social rail
 * (right). The site nav is the shared .afrc-topbar (header.php) in its
 * .afrc-has-hero overlay mode — this section has no nav of its own.
 * Design tokens + box-sizing reset are global (base.css). */

.afrc-hero-main {
	position: relative;
	min-height: 640px;
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, .75fr);
	align-items: center;
	gap: 48px;
	padding: 70px clamp(24px, 4vw, 56px) 88px;
	background-image:
		linear-gradient(180deg, rgba(0,12,48,.74) 0%, rgba(0,22,84,.50) 22%, rgba(18,48,112,.16) 48%, rgba(18,48,112,.06) 68%, rgba(0,27,104,.24) 100%),
		radial-gradient(ellipse at 55% 55%, rgba(255,214,150,.20), rgba(255,214,150,.07) 24%, rgba(255,214,150,0) 46%),
		radial-gradient(ellipse at 18% 48%, rgba(0,12,48,.46), rgba(0,12,48,.10) 36%, rgba(0,12,48,0) 56%),
		radial-gradient(ellipse at 95% 35%, rgba(0,12,48,.26), rgba(0,12,48,0) 46%),
		linear-gradient(90deg, rgba(5,25,74,.24), rgba(5,25,74,.03) 48%, rgba(5,25,74,.16)),
		var(--afrc-hero-image, url("../../images/afrc-rugby-team-tokyo-hero.webp"));
	background-size: cover;
	background-position: var(--afrc-hero-focus-x, 38%) var(--afrc-hero-focus-y, 50%);
	filter: contrast(1.09) saturate(1.14);
}

@media (min-width: 1041px) {
	.afrc-hero-main {
		background-attachment: scroll, scroll, scroll, scroll, scroll, scroll;
	}
}

.afrc-hero-main:after {
	content: "";
	position: absolute;
	inset: auto 0 0;
	height: 190px;
	background: linear-gradient(0deg, rgba(7,31,95,.60), rgba(7,31,95,0));
	pointer-events: none;
}

.afrc-hero-mark {
	position: absolute;
	z-index: 2;
	left: clamp(24px, 4vw, 70px);
	top: 78px;
	max-width: min(860px, 76vw);
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 18px;
	color: #fff;
	text-decoration: none;
	text-shadow: 0 12px 30px rgba(0,0,0,.32);
}

.afrc-hero-mark img {
	width: clamp(70px, 6.25vw, 103px);
	height: auto;
	object-fit: contain;
	transform: translateY(-6px);
	filter: drop-shadow(0 14px 24px rgba(0,0,0,.22)) drop-shadow(0 0 18px rgba(42,91,190,.20));
	opacity: .96;
}

.afrc-hero-mark-text {
	display: block;
	min-width: 0;
}

.afrc-hero-mark h1 {
	display: block;
	margin: 0;
	font-size: clamp(23px, 2.35vw, 35px);
	line-height: 1.14;
	padding-bottom: .08em;
	font-weight: 700;
	font-style: normal;
	letter-spacing: -.01em;
	text-transform: none;
	color: #f4ead0;
	background: linear-gradient(95deg, #ffffff 0%, #ffffff 34%, #f8ddb8 50%, #ffffff 66%, #ffffff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.afrc-hero-mark em {
	display: block;
	margin-top: 10px;
	color: rgba(255,255,255,.94);
	font-size: clamp(11px, 1vw, 14px);
	font-style: normal;
	font-weight: 500;
	line-height: 1.4;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	text-shadow: 0 8px 22px rgba(0,0,0,.36);
}

.afrc-hero-social {
	position: absolute;
	z-index: 3;
	right: clamp(24px, 4vw, 56px);
	top: 62px;
	display: flex;
	align-items: center;
	gap: 8px;
	color: rgba(255,255,255,.58);
	font-size: 10px;
	font-weight: 650;
	letter-spacing: .20em;
	text-transform: uppercase;
	opacity: .88;
}

.afrc-hero-social:before {
	content: "";
	width: 24px;
	height: 1px;
	background: rgba(255,255,255,.26);
}

.afrc-hero-social a {
	width: 31px;
	height: 31px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255,255,255,.11);
	border-radius: 50%;
	color: rgba(255,255,255,.82);
	text-decoration: none;
	background: rgba(255,255,255,.045);
	transition: background-color 200ms ease, border-color 200ms ease, transform 200ms ease, opacity 200ms ease;
}

.afrc-hero-social a:hover {
	background: rgba(255,255,255,.10);
	border-color: rgba(255,255,255,.22);
	transform: translateY(-1px);
	opacity: 1;
}

.afrc-hero-social svg {
	width: 16px;
	height: 16px;
	display: block;
	margin: 0;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.afrc-hero-social a[aria-label="Facebook"] svg {
	fill: currentColor;
	stroke: none;
}

@media (max-width: 1040px) {
	.afrc-hero-mark {
		display: none;
	}

	.afrc-hero-main {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.afrc-hero-social {
		display: none;
	}
}

@media (min-width: 761px) and (max-width: 1040px) {
	.afrc-hero-main {
		min-height: 560px;
		grid-template-columns: 1fr;
		padding: 110px 32px 110px;
		background-position: var(--afrc-hero-focus-x, 42%) var(--afrc-hero-focus-y, 50%);
		overflow: hidden;
	}

	.afrc-hero-mark {
		display: grid !important;
		left: 32px;
		right: 32px;
		top: 118px;
		max-width: calc(100vw - 64px);
		grid-template-columns: auto minmax(0, 1fr);
		gap: 14px;
		align-items: center;
	}

	.afrc-hero-mark img {
		width: 70px;
		transform: translateY(-4px);
	}

	.afrc-hero-mark em {
		margin-top: 7px;
		font-size: 14px;
		white-space: normal;
		max-width: 46ch;
	}

	.afrc-hero-social {
		display: none !important;
	}
}

@media (max-width: 760px) {
	html,
	body {
		max-width: 100%;
		overflow-x: hidden;
	}

	.afrc-hero-main {
		min-height: 590px;
		grid-template-columns: 1fr;
		padding: 104px 18px 96px;
		background-position: var(--afrc-hero-focus-x, 42%) var(--afrc-hero-focus-y, 50%);
		overflow: hidden;
	}

	.afrc-hero-mark {
		display: grid !important;
		left: 18px;
		right: 18px;
		top: 86px;
		max-width: calc(100vw - 36px);
		grid-template-columns: auto minmax(0, 1fr);
		gap: 10px;
		align-items: center;
	}

	.afrc-hero-mark img {
		width: 52px;
		transform: translateY(-3px);
	}

	.afrc-hero-mark em {
		margin-top: 5px;
		font-size: 12px;
		line-height: 1.32;
		white-space: normal;
		max-width: 31ch;
	}

	.afrc-hero-social {
		display: none !important;
	}
}

@media (max-width: 680px) {
	.afrc-hero-main {
		gap: 30px;
		padding-top: 88px !important;
	}

	.afrc-hero-mark {
		top: 94px !important;
	}
}

@media (max-width: 430px) {
	.afrc-hero-main {
		min-height: 560px;
		padding-top: 98px;
		background-position: var(--afrc-hero-focus-x, 43%) var(--afrc-hero-focus-y, 50%);
	}

	.afrc-hero-mark {
		top: 82px;
		gap: 9px;
	}

	.afrc-hero-mark img {
		width: 46px;
	}

	.afrc-hero-mark em {
		font-size: 11px;
		max-width: 29ch;
	}
}


/* Subpage heroes keep the shared photo/social treatment, but center the page title near the top and hide the large crest/subtitle. */
.afrc-hero-main--subpage {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.afrc-hero-main--subpage .afrc-hero-mark {
	left: 50%;
	top: var(--afrc-hero-title-top, clamp(118px, 17vh, 190px));
	transform: translateX(-50%);
	width: min(920px, calc(100% - 48px));
	max-width: none;
	display: block;
	text-align: center;
}

.afrc-hero-main--subpage .afrc-hero-mark img,
.afrc-hero-main--subpage .afrc-hero-mark em {
	display: none;
}

.afrc-hero-main--subpage .afrc-hero-mark h1 {
	display: inline-block;
	padding-bottom: .08em;
	font-size: clamp(48px, 6vw, 92px);
	font-weight: 900;
	line-height: 1.06;
}


.afrc-hero-main--page-the-team {
	background-image:
		linear-gradient(180deg, rgba(0, 15, 61, .62) 0%, rgba(0, 27, 104, .34) 32%, rgba(0, 27, 104, .18) 58%, rgba(0, 15, 61, .74) 100%),
		linear-gradient(90deg, rgba(0, 15, 61, .48), rgba(0, 27, 104, .10) 46%, rgba(0, 15, 61, .40)),
		var(--afrc-hero-image);
	filter: contrast(1.04) saturate(1.08);
}

.afrc-hero-main--page-the-team:after {
	background: linear-gradient(0deg, rgba(0, 15, 61, .72), rgba(0, 27, 104, 0));
}

@media (max-width: 700px) {
	.afrc-hero-main--subpage .afrc-hero-mark {
		top: clamp(96px, 15vh, 140px);
	}

	.afrc-hero-main--subpage .afrc-hero-mark h1 {
		font-size: clamp(38px, 12vw, 58px);
	}
}

.afrc-hero-tiles {
	position: absolute;
	z-index: 3;
	left: 50%;
	bottom: var(--afrc-hero-tiles-bottom, clamp(58px, 10vh, 110px));
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: repeat(3, minmax(190px, 1fr));
	gap: clamp(10px, 1.4vw, 18px);
	width: min(920px, calc(100% - 48px));
}

.afrc-hero-tile {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 68px;
	padding: 14px 18px;
	border: 1px solid rgba(255, 255, 255, .20);
	border-radius: 8px;
	background: rgba(2, 15, 48, .68);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .22);
	color: #fff;
	-webkit-backdrop-filter: blur(8px) saturate(.95);
	backdrop-filter: blur(8px) saturate(.95);
}

.afrc-hero-tile span {
	font-size: 24px;
	line-height: 1;
}

.afrc-hero-tile strong {
	font-family: var(--afrc-font-body);
	font-size: clamp(14px, 1.05vw, 17px);
	font-weight: 850;
	line-height: 1.18;
	letter-spacing: 0;
	text-align: center;
}

@media (max-width: 760px) {
	.afrc-hero-tiles {
		bottom: clamp(34px, 7vh, 58px);
		grid-template-columns: 1fr;
		width: min(420px, calc(100% - 32px));
		gap: 8px;
	}

	.afrc-hero-tile {
		min-height: 50px;
		padding: 10px 14px;
	}
}

/* Minimal stat row variant for subpage hero highlights. */
.afrc-hero-tiles {
	bottom: var(--afrc-hero-tiles-bottom, clamp(64px, 11vh, 118px));
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0;
	width: min(980px, calc(100% - 48px));
	color: #fff;
	text-shadow: 0 10px 28px rgba(0, 0, 0, .48);
}

.afrc-hero-tile {
	position: relative;
	min-height: 0;
	padding: 0 clamp(14px, 2vw, 28px);
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
}

.afrc-hero-tile + .afrc-hero-tile::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 4px;
	height: 4px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .72);
	transform: translate(-50%, -50%);
}

.afrc-hero-tile span {
	font-size: 20px;
}

.afrc-hero-tile strong {
	font-size: clamp(15px, 1.18vw, 19px);
	font-weight: 850;
	white-space: nowrap;
}

@media (max-width: 760px) {
	.afrc-hero-tiles {
		bottom: clamp(34px, 7vh, 58px);
		flex-direction: column;
		gap: 8px;
		width: min(420px, calc(100% - 32px));
	}

	.afrc-hero-tile {
		padding: 0;
	}

	.afrc-hero-tile + .afrc-hero-tile::before {
		display: none;
	}
}

/* Club-only hero lockup. */
.afrc-hero-main--club {
	display: block;
}

.afrc-hero-club-lockup {
	position: absolute;
	z-index: 3;
	left: 50%;
	top: clamp(116px, 17vh, 184px);
	width: min(1040px, calc(100% - 48px));
	text-align: center;
	color: #fff;
	text-shadow: 0 18px 44px rgba(0, 0, 0, .48);
	transform: translateX(-50%) translateY(18px);
	opacity: 0;
	animation: afrcClubHeroTextIn .95s cubic-bezier(.2, .72, .2, 1) .18s forwards;
}

.afrc-hero-club-lockup h1 {
	display: inline-block;
	padding-bottom: .12em;
	font-family: var(--afrc-font-heading);
	font-size: clamp(44px, 5.8vw, 92px);
	font-weight: 900;
	line-height: 1.08;
	letter-spacing: 0;
	background: linear-gradient(100deg, #fff 0%, #fff 42%, #f8ddb8 56%, #fff 72%, #fff 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.afrc-hero-club-lockup span {
	display: block;
	margin-top: clamp(10px, 1.35vw, 18px);
	color: rgba(255, 255, 255, .94);
	font-family: var(--afrc-font-body);
	font-size: clamp(18px, 1.7vw, 27px);
	font-style: italic;
	font-weight: 760;
	line-height: 1.2;
}

@keyframes afrcClubHeroTextIn {
	to {
		opacity: 1;
		transform: translateX(-50%) translateY(0);
	}
}

@media (max-width: 700px) {
	.afrc-hero-club-lockup {
		top: clamp(96px, 15vh, 136px);
	}

	.afrc-hero-club-lockup h1 {
		font-size: clamp(38px, 10.5vw, 58px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.afrc-hero-club-lockup {
		opacity: 1;
		transform: translateX(-50%);
		animation: none;
	}
}