/*
 * Get Started page — template-get-started.php.
 *
 * Loaded only on the Get Started page (see
 * spinfire_sport_enqueue_homepage_assets()). The section scaffolding itself
 * (.sf-section, .sf-section__eyebrow, .sf-section__title, .sf-section__lead,
 * .sf-section__btn) comes from css/homepage.css, which is enqueued alongside
 * this file. This file adds what the page needs on top of it: the archive
 * header, the video embed, the YouTube card grid, the app badges and the
 * contact CTA row.
 */

/* ---------------------------------------------------------------------
 * Archive header (breadcrumb + H1)
 * ------------------------------------------------------------------ */

/* Stand-in for the 30px #main-content padding the archive templates get. */
body.get-started .category-archive {
	padding-top: 30px;
}

/* The headline block owns the top of the page; the first section follows it
   straight away instead of adding another 72px of section padding. */
body.get-started main.sf-get-started > section.sf-section:first-of-type {
	padding-top: 0;
}

/* ---------------------------------------------------------------------
 * Download the Spinfire App (CMS block)
 * ------------------------------------------------------------------ */

.sf-app-badges {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 0 0 24px;
}

.sf-app-badges a {
	display: inline-block;
	line-height: 0;
}

.sf-app-badges img {
	display: block;
	height: 48px;
	width: auto;
}

/* ---------------------------------------------------------------------
 * Small print under a section heading, and the violet note lines
 * ("— Share your drills with @SpinfireSport").
 * ------------------------------------------------------------------ */

.sf-section__sub {
	margin: -32px 0 24px;
	color: #484848;
	font-size: 14px;
	line-height: 1.5;
}

.sf-section__note {
	margin: 0 0 24px;
	color: var(--violet);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* ---------------------------------------------------------------------
 * Video section
 * ------------------------------------------------------------------ */

.sf-video {
	margin: 0;
}

.sf-video iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 1px solid var(--border-color);
	border-radius: 8px;
	background: #f4f4f6;
}

/* ---------------------------------------------------------------------
 * "Check out our YouTube channel" — 3 cards
 *
 * Authored in the wysiwyg as
 *   <div class="sf-yt-cards"><a class="sf-yt-card">…</a>×3</div>
 * A <div> wrapper is deliberate: .sf-section__content > ul in
 * homepage.css turns plain lists into the spec-grid layout.
 * ------------------------------------------------------------------ */

.sf-yt-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
}

.sf-yt-card {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-height: 100%;
	padding: 24px;
	border: 1px solid var(--border-color);
	border-radius: 12px;
	background: var(--white);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.3s ease-in-out;
}

.sf-yt-card:hover,
.sf-yt-card:focus {
	border-color: var(--violet);
	text-decoration: none;
}

.sf-yt-card__pill {
	margin: 0 0 20px;
	padding: 6px 12px;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	color: #484848;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.sf-yt-card__title {
	margin: 0 0 12px;
	color: #101010;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.25;
}

.sf-yt-card__desc {
	margin: 0;
	color: var(--light-gray);
	font-size: 14px;
	line-height: 1.5;
}

.sf-yt-card__link {
	margin-top: auto;
	padding-top: 24px;
	color: var(--sky-blue);
	font-size: 14px;
}

/* ---------------------------------------------------------------------
 * Contact CTA row
 * ------------------------------------------------------------------ */

.sf-cta-row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 16px;
}

/* Secondary button: same geometry as .sf-section__btn, outlined. */
.sf-section__btn--outline {
	border: 2px solid var(--violet);
	background: var(--white);
	color: var(--violet);
}

.sf-section__btn--outline:hover,
.sf-section__btn--outline:focus {
	background: var(--violet);
	color: var(--white);
	opacity: 1;
}

/* ---------------------------------------------------------------------
 * Responsive
 * ------------------------------------------------------------------ */

@media screen and (max-width: 991px) {
	.sf-yt-cards {
		grid-template-columns: minmax(0, 1fr);
	}
}

@media screen and (max-width: 767px) {
	body.get-started .category-archive {
		padding-top: 20px;
	}

	.sf-app-badges img {
		height: 40px;
	}
}