/* ==========================================================================
   Charlton Live - The app page (build-spec §5.08)
   ========================================================================== */

/* ==========================================================================
   Hero
   ========================================================================== */

.cl-app-hero {
	position: relative;
	overflow: hidden;
	padding-block: 48px 0;
	background: var(--cl-ink);
	color: var(--cl-dark-body);
}

/* The wordmark watermark every other section uses. The build spec asked for a
   giant "CL" bleeding off the top-right corner, but the theme settled on the
   full wordmark spanning the section - see the note in home.css - and it is
   already on the lead, the podcasts hero and the about hero. Matching them
   matters more than matching the spec. */
.cl-app-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, .03);
	pointer-events: none;
}

.cl-app-hero__inner {
	position: relative;
	display: grid;
	grid-template-columns: 1.05fr .95fr;
	align-items: end;
	gap: 48px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-app-hero__body { padding-bottom: 52px; }

/* ---------- Status pill ---------- */

.cl-app-pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 22px;
	padding: 6px 12px;
	border: 1.5px solid rgba(228, 18, 43, .5);
	border-radius: 100px;
	font-family: var(--cl-font-cond);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .16em;
	color: var(--cl-red-on-ink);
	text-transform: uppercase;
}

.cl-app-hero__title {
	margin: 0;
	font-family: var(--cl-font-display);
	font-size: clamp(2.25rem, 5.4vw, 3.75rem);
	line-height: .95;
	letter-spacing: .005em;
	color: var(--cl-white);
	text-transform: uppercase;
}

.cl-app-hero__intro {
	max-width: 480px;
	margin: 20px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--cl-dark-body);
}

.cl-app-hero__note {
	margin: 16px 0 0;
	font-weight: 600;
	font-size: 12px;
	color: var(--cl-dark-meta);
}

/* ---------- The phone ---------- */

/* A screenshot in a frame rather than a device mockup image: the mockup asset
   was never produced, and a real screen is more honest anyway. Bottom-aligned
   so the phone bleeds off the base of the section, as the design has it. */
/* Capped and clipped so the phone runs off the bottom of the section rather
   than setting its height. At full height the screenshot is 650px against a
   copy column of about 400, which made the hero taller than anything on it and
   left a lot of empty ink beside the text. Bleeding off the base is what the
   design asks for in any case. */
.cl-phone {
	display: block;
	width: min(100%, 290px);
	max-height: 440px;
	overflow: hidden;
	margin-inline: auto;
	padding: 10px 10px 0;
	border: 1px solid rgba(255, 255, 255, .16);
	border-bottom: 0;
	border-radius: 30px 30px 0 0;
	background: #f7f1ef;
}

.cl-phone img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 22px 22px 0 0;
}

/* ==========================================================================
   Store badges
   ========================================================================== */

.cl-stores {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	margin-top: 30px;
}

.cl-store {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	padding: 13px 20px;
	border-radius: 11px;
	text-decoration: none;
}

.cl-stores--light .cl-store { background: var(--cl-white); color: var(--cl-ink); }
.cl-stores--dark  .cl-store { background: var(--cl-ink);   color: var(--cl-white); }

.cl-stores--light a.cl-store:hover,
.cl-stores--dark  a.cl-store:hover { filter: brightness(1.07); }

/* Not yet a link. Say so quietly rather than looking broken. */
.cl-stores span.cl-store { opacity: .82; cursor: default; }

.cl-store__glyph { flex: 0 0 auto; }

.cl-store__text {
	display: flex;
	flex-direction: column;
	line-height: 1.1;
}

.cl-store__pre {
	font-weight: 600;
	font-size: 10px;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.cl-store__name {
	font-weight: 800;
	font-size: 18px;
}

/* ==========================================================================
   Feature grid
   ========================================================================== */

.cl-app-features {
	padding-block: 52px;
	background: var(--cl-white);
}

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

.cl-app-features__head {
	margin-bottom: 34px;
	text-align: center;
}

.cl-app-features__title {
	margin: 6px 0 0;
	font-family: var(--cl-font-display);
	font-size: clamp(1.75rem, 3.4vw, 2.25rem);
	letter-spacing: var(--cl-track-display);
	text-transform: uppercase;
}

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

.cl-app-card {
	padding: 26px 24px;
	border: 1px solid var(--cl-line);
	border-radius: 14px;
	background: var(--cl-off);
}

.cl-app-card__tag {
	margin: 0;
	font-family: var(--cl-font-cond);
	font-weight: 800;
	font-size: 11px;
	letter-spacing: .14em;
	color: var(--cl-red-text);
	text-transform: uppercase;
}

.cl-app-card__title {
	margin: 8px 0 0;
	font-family: var(--cl-font-display);
	font-size: 22px;
	letter-spacing: var(--cl-track-display);
	text-transform: uppercase;
}

.cl-app-card__body {
	margin: 9px 0 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cl-mut);
}

/* ==========================================================================
   Closing band
   ========================================================================== */

.cl-app-cta {
	position: relative;
	overflow: hidden;
	padding-block: 48px;
	background: var(--cl-red);
	color: var(--cl-white);
}

/* Same again on the red band. .07 rather than .03, matching the about hero:
   white reads fainter on red than on ink, so it needs the extra to register as
   texture at all. */
.cl-app-cta::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;
}

.cl-app-cta__inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 26px 40px;
	max-width: var(--cl-content);
	margin-inline: auto;
	padding-inline: var(--cl-gutter);
}

.cl-app-cta__title {
	margin: 0;
	font-family: var(--cl-font-display);
	font-size: clamp(1.75rem, 3.6vw, 2.375rem);
	letter-spacing: var(--cl-track-display);
	color: var(--cl-white);
	text-transform: uppercase;
}

.cl-app-cta__blurb {
	max-width: 520px;
	margin: 10px 0 0;
	font-size: 16px;
	line-height: 1.55;
	color: rgba(255, 255, 255, .9);
}

.cl-app-cta__action {
	margin: 0;
	flex: 0 0 auto;
}

/* White on red, so the button inverts to ink like the live banner's does. */
.cl-btn--on-red {
	padding: 12px 22px;
	background: var(--cl-ink);
	color: var(--cl-white);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: var(--cl-track-btn);
	text-transform: uppercase;
}
.cl-btn--on-red:hover { color: var(--cl-white); filter: brightness(1.25); }

.cl-app-cta__small {
	display: block;
	max-width: 260px;
	margin-top: 10px;
	font-size: 12px;
	line-height: 1.45;
	color: rgba(255, 255, 255, .82);
}

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

@media (max-width: 980px) {
	/* Hidden below this width like every other watermark in the theme: at
	   17vw the wordmark stops being texture and starts being a smear behind
	   the headline. */
	.cl-app-hero::before,
	.cl-app-cta::before { display: none; }

	/* The phone goes under the copy rather than beside it, and stops being
	   bottom-aligned to a column that no longer exists. */
	.cl-app-hero__inner { grid-template-columns: 1fr; gap: 0; }
	.cl-app-hero__body { padding-bottom: 34px; }
	.cl-phone { width: min(100%, 260px); }

	.cl-app-grid { grid-template-columns: repeat(2, 1fr); }
}

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

	/* Two badges side by side leaves each too narrow to read at this width. */
	.cl-stores { flex-direction: column; align-items: flex-start; }
	.cl-store { width: 100%; }

	.cl-app-cta__action { width: 100%; }
	.cl-app-cta__small { max-width: none; }
}