/* ==========================================================================
   Charlton Live - About and contact (design 07)
   build-spec.md §5.07
   ========================================================================== */

/* ---------- Shared: section heading with the 2px rule ---------- */
.cl-rule {
	padding-bottom: 12px;
	margin-bottom: 20px;
	border-bottom: var(--cl-rule);
	font-size: var(--cl-h2);
}

/* ==========================================================================
   Red hero
   ========================================================================== */

.cl-about-hero {
	position: relative;
	overflow: hidden;
	padding-block: var(--cl-section-y);
	background: var(--cl-red);
	color: var(--cl-white);
	text-align: center;
}

/* Wordmark watermark, spanning the full width behind the copy. */
.cl-about-hero::before {
	content: "CHARLTON LIVE";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	translate: 0 -50%;
	font-family: var(--cl-font-display);
	font-size: 17vw;
	line-height: 1;
	letter-spacing: var(--cl-track-display);
	text-align: center;
	white-space: nowrap;
	color: rgba(255, 255, 255, .07);
	pointer-events: none;
}
@media (max-width: 980px) {
	.cl-about-hero::before { display: none; }
}

.cl-about-hero__inner {
	position: relative;
	max-width: 820px;
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-about-hero__title {
	font-size: var(--cl-h1-sub);
	line-height: .98;
	color: var(--cl-white);
}

.cl-about-hero__intro {
	max-width: 680px;
	margin: 16px auto 0;
	font-size: var(--cl-text-lg);
	line-height: var(--cl-lh-body);
	color: rgba(255, 255, 255, .92);
}

/* ==========================================================================
   Stat cards
   ========================================================================== */

.cl-stats {
	background: var(--cl-white);
	padding-block: 48px;
}

.cl-stats__inner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
	list-style: none;
}

.cl-stat {
	padding: 26px;
	background: var(--cl-off);
	border-radius: var(--cl-radius);
}

/* Brand red is fine here: at 40px this is large text, which needs 3:1. */
.cl-stat__figure {
	font-family: var(--cl-font-display);
	font-size: 40px;
	line-height: 1;
	color: var(--cl-red);
}

.cl-stat__label {
	margin-top: 8px;
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--cl-ink);
}

.cl-stat__blurb {
	margin-top: 8px;
	font-size: var(--cl-meta);
	line-height: 1.5;
	color: var(--cl-mut);
}

/* ==========================================================================
   By the numbers

   Deliberately reuses .cl-stat from the section above rather than restating
   it: these are the same kind of card, so they should not be able to drift
   apart. Only the section wrapper and the grid are new, because the count
   of cards here varies with what the APIs are answering.
   ========================================================================== */

.cl-numbers {
	background: var(--cl-white);
	padding-block: 10px 48px;
}

.cl-numbers__inner {
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

/* auto-fit rather than a fixed count: two cards, three or four all fill the
   row, and a missing figure closes the gap instead of leaving a hole. */
.cl-numbers__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 720px) {
	.cl-numbers__grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   The team
   ========================================================================== */

.cl-team {
	background: var(--cl-white);
	padding-block: 10px 48px;
}

.cl-team__inner {
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-team__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-member {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 22px 20px;
	background: var(--cl-off);
	border: var(--cl-border);
	border-radius: var(--cl-radius);
	text-align: center;
}

.cl-member__photo {
	display: block;
	width: 88px;
	height: 88px;
	margin-bottom: 14px;
	border: 3px solid var(--cl-white);
	border-radius: 50%;
	background: #2a231e;
	box-shadow: 0 4px 14px rgba(20, 15, 10, .14);
	overflow: hidden;
}
.cl-member__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cl-member__name {
	font-family: var(--cl-font-display);
	font-size: 19px;
	letter-spacing: 0.01em;
	color: var(--cl-ink);
}

.cl-member__role {
	margin-top: 3px;
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-tag);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cl-red-text);
}

.cl-member__bio {
	margin: 11px 0 12px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--cl-mut);
}

/* Push the X button to the bottom so cards line up whatever the bio length. */
.cl-member__x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	margin-top: auto;
	border-radius: 8px;
	background: var(--cl-ink);
	color: var(--cl-white);
}
.cl-member__x:hover {
	background: var(--cl-red);
	color: var(--cl-white);
}

/* ==========================================================================
   Contact and sponsor
   ========================================================================== */

.cl-contact {
	background: var(--cl-off);
	padding-block: 48px;
}

.cl-contact__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 44px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-contact__main h2 {
	margin-bottom: 14px;
	font-size: var(--cl-h2);
}

.cl-contact__blurb {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: var(--cl-lh-body);
	color: var(--cl-body);
}

.cl-email {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 16px;
	background: var(--cl-white);
	border: var(--cl-border);
	border-radius: 9px;
	font-family: var(--cl-font-body);
	font-weight: 700;
	font-size: 14px;
	color: var(--cl-ink);
	text-decoration: none;
}
.cl-email:hover {
	color: var(--cl-ink);
	border-color: var(--cl-red);
}

.cl-email__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 36px;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: var(--cl-red);
	color: var(--cl-white);
}

.cl-contact__socials {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}

.cl-contact__social {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 9px;
	background: var(--cl-ink);
	color: var(--cl-white);
}
.cl-contact__social:hover {
	background: var(--cl-red);
	color: var(--cl-white);
}

/* ---------- Sponsor card ---------- */
.cl-sponsor-card {
	padding: 30px;
	background: var(--cl-ink);
	border-radius: var(--cl-radius-lg);
	color: var(--cl-dark-body);
}

.cl-sponsor-card__title {
	margin: 10px 0;
	font-size: var(--cl-h3);
	color: var(--cl-white);
}

.cl-sponsor-card__blurb {
	margin-bottom: 18px;
	font-size: 14px;
	line-height: var(--cl-lh-body);
	color: var(--cl-dark-body);
}

/* The address under the button, for anyone whose machine does nothing with
   a mailto link. */
.cl-sponsor-card__email {
	margin-top: 12px;
	font-size: var(--cl-meta);
	color: var(--cl-dark-meta);
}
.cl-sponsor-card__email a { color: var(--cl-red-on-ink); }

.cl-sponsor-card .cl-sponsor { margin-bottom: 18px; }
.cl-sponsor-card .cl-sponsor img { height: 44px; }

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 980px) {
	.cl-team__grid { grid-template-columns: repeat(3, 1fr); }
	.cl-contact__inner { grid-template-columns: 1fr; gap: 28px; }
}

@media (max-width: 720px) {
	.cl-stats__inner { grid-template-columns: 1fr; }
	.cl-team__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.cl-member { padding: 18px 14px; }
}

/* ==========================================================================
   Contact page
   The design has no contact page, so this reuses the About contact styles
   with a two-column split and adds the app support block.
   ========================================================================== */

/* On the contact page both columns are contact methods, not contact and
   sponsor, so they carry equal weight. */
.cl-contact--page {
	background: var(--cl-white);
}

.cl-support {
	background: var(--cl-off);
	padding-block: 48px;
}

.cl-support__inner {
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-support__intro {
	max-width: 640px;
	margin-bottom: var(--cl-space-lg);
	font-size: 15px;
	line-height: var(--cl-lh-body);
	color: var(--cl-body);
}

.cl-support__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
}

.cl-support__list dt {
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: var(--cl-eyebrow);
	letter-spacing: var(--cl-track-eyebrow);
	text-transform: uppercase;
	color: var(--cl-red-text);
}

.cl-support__list dd {
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cl-mut);
}

/* Each term and its description form one card. */
.cl-support__list > dt {
	padding: 18px 18px 0;
	background: var(--cl-white);
	border: var(--cl-border);
	border-bottom: 0;
	border-radius: var(--cl-radius) var(--cl-radius) 0 0;
}
.cl-support__list > dd {
	padding: 0 18px 18px;
	background: var(--cl-white);
	border: var(--cl-border);
	border-top: 0;
	border-radius: 0 0 var(--cl-radius) var(--cl-radius);
}

.cl-support__contact {
	margin-top: var(--cl-space-lg);
	font-size: 15px;
	line-height: var(--cl-lh-body);
	color: var(--cl-body);
}
.cl-support__contact a { color: var(--cl-red-text); }

@media (max-width: 720px) {
	.cl-support__list { grid-template-columns: 1fr; }
}