/**
 * Lightroom Mobile Presets landing page
 *
 * @copyright   2026, ON1
 *
 * base.css already owns most of this page's vocabulary - .eyebrow,
 * .section-divider, .section-intro, .theme-inverted, the .faqs accordion and
 * the #resources band - so what lives here is the hero, the sticky page nav,
 * the showcase band, the four customize cards and the closing CTA.
 *
 * The hero and #page-navigation are the same pair the Film Presets sibling
 * carries, scoped to this page's body id. Both came across from
 * assets/css/free/lightroom-presets.css, which neither landing page loads.
 *
 * There is no hero art for this page. The one usable asset,
 * lightroom-mobile-presets.png, is a 792 x 473 plate with its own white matte
 * baked in - it goes in the showcase band, where the one-step-lighter surface
 * suits it, and the hero runs as a pinned-dark type band, which is what the
 * mockup shows.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero               pinned dark, --bg-950
 *   #page-navigation    --bg-800, sticky below #site-header
 *   #showcase           --bg-800 (the one step-lighter band)
 *   #customize          follows the theme, the four cards
 *   #faqs               .theme-inverted - the page's light band
 *   #download-presets   pinned dark, --bg-950, blue burst
 *   #resources          follows the theme, base.css owns the band
 *   ON1 Guarantee       pinned light, injected by partials/footer.php
 */

/* !- Hero
   Pinned dark and stating its own color - pinning the attribute only redefines
   the tokens, and body's color is already computed by the time it inherits in. */
#lightroom-mobile-presets #hero {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 3.5rem 0;
}

@media (min-width: 992px) {
	#lightroom-mobile-presets #hero {
		padding: 5rem 0;
	}
}

#lightroom-mobile-presets #hero h1 {
	color: var(--white);
	letter-spacing: -0.02em;
	margin-bottom: 1rem;
	text-wrap: balance;
}

#lightroom-mobile-presets #hero .breadcrumb {
	color: var(--text-400);
	font-size: var(--text-mini);
}

#lightroom-mobile-presets #hero .breadcrumb .separator {
	margin: 0 0.25rem;
}

#lightroom-mobile-presets #hero .breadcrumb a {
	color: var(--text-400);
	text-decoration: none;
}

#lightroom-mobile-presets #hero .breadcrumb a:hover {
	color: var(--text-50);
	text-decoration: underline;
}

#lightroom-mobile-presets #hero .breadcrumb .here {
	color: var(--text-200);
}

#lightroom-mobile-presets #hero .list-inline,
#lightroom-mobile-presets #hero .list-inline-item {
	margin-bottom: 0;
}

#lightroom-mobile-presets #hero .works-with {
	margin-bottom: 2rem;
	margin-top: 1.75rem;
}

#lightroom-mobile-presets #hero .works-with .rounded-pill {
	background: var(--bg-800);
	color: var(--text-200);
	display: inline-block;
	font-size: var(--text-micro);
	font-weight: 500;
	padding: 0.375rem 0.75rem;
}

#lightroom-mobile-presets #hero .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

#lightroom-mobile-presets #hero .hero-note {
	color: var(--text-400);
	font-size: var(--text-mini);
	margin-left: 0.75rem;
}

/* !- Page navigation
   base.js gives this position: sticky and a top offset equal to #site-header's
   height, so the two travel together. */
#lightroom-mobile-presets #page-navigation {
	background: var(--bg-800);
}

#lightroom-mobile-presets #page-navigation .nav-item {
	margin: 0 0.75rem 0 0;
}

#lightroom-mobile-presets #page-navigation .nav-item:last-child {
	margin-right: 0;
}

#lightroom-mobile-presets #page-navigation .nav-link {
	border-bottom: 3px solid transparent;
	color: var(--text-300);
	font-size: var(--text-xs);
	font-weight: 500;
	padding: 1rem 0.75rem;
}

#lightroom-mobile-presets #page-navigation .nav-link.active,
#lightroom-mobile-presets #page-navigation .nav-link:hover {
	border-color: var(--blue-500);
	color: var(--text-100);
}

/* !- Showcase
   The page's one step-lighter band, and the only one carrying artwork. The
   plate arrives with its own white matte and shadow, so nothing is added here. */
#lightroom-mobile-presets #showcase {
	background: var(--bg-800);
	padding: 4.5rem 0;
}

#lightroom-mobile-presets #showcase h2 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
}

#lightroom-mobile-presets #showcase .showcase-copy {
	font-size: var(--text-base);
	line-height: 1.7;
	margin-bottom: 1.75rem;
}

#lightroom-mobile-presets #showcase .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Customize */
#lightroom-mobile-presets #customize {
	padding: 5rem 0;
}

#lightroom-mobile-presets .customize-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 2rem 1.75rem;
}

#lightroom-mobile-presets .customize-card .customize-icon {
	color: var(--blue-500);
	font-size: 1.75rem;
	margin-bottom: 1rem;
}

#lightroom-mobile-presets .customize-card h3 {
	color: var(--text-100);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.3;
	margin-bottom: 0.625rem;
}

#lightroom-mobile-presets .customize-card .customize-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

/* !- FAQs
   .theme-inverted flips the tokens, so the band paints itself from --bg-900 and
   needs no background of its own here. */
#lightroom-mobile-presets #faqs {
	padding: 5rem 0;
}

#lightroom-mobile-presets #faqs h2 {
	margin-bottom: 2rem;
}

/* !- Closing CTA
   Pinned dark, and restating its own colors for the reason the hero does. The
   secondary button is .btn-outline-light, which is only legible on a dark
   surface, so the pin is load-bearing rather than cosmetic. */
#lightroom-mobile-presets #download-presets {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6rem 0;
}

#lightroom-mobile-presets #download-presets h2 {
	color: var(--text-50);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin-bottom: 1.25rem;
	text-wrap: balance;
}

#lightroom-mobile-presets #download-presets .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#lightroom-mobile-presets #download-presets .cta-copy strong {
	color: var(--text-100);
	font-weight: 600;
}

/* House button sizing. Without a rule of its own a .btn falls through to
   Bootstrap's default, which reads too big. Scoped to the section, never the
   body id - the header and footer partials render inside it. */
#lightroom-mobile-presets #download-presets .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}