/**
 * Portrait Lightroom Presets landing page
 *
 * @copyright   2026, ON1
 *
 * Built on the same pattern as lightroom-film-presets.css. base.css owns
 * .eyebrow, .section-divider, .section-intro, .theme-inverted, the .faqs
 * accordion and the #resources band; what lives here is the hero, the sticky
 * page nav, the preset grid, the install steps, the tips grid, the video band
 * and the closing CTA.
 *
 * 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
 *   #presets            follows the theme, the three pack cards
 *   #what-are           follows the theme, copy plus the three install steps
 *   #tips               --bg-800 (the one step-lighter band)
 *   #video              follows the theme
 *   #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.
   Same photo-band construction as the Photo Studio hero; position: relative
   also anchors base.css's p.photo-credit. */
#portrait-lightroom-presets #hero {
	background-color: var(--bg-950);
	background-image: image-set(url(https://ononesoft.cachefly.net/images/landing/portrait-lightroom-presets/hero--portrait-lightroom-presets.jpg) 1x, url(https://ononesoft.cachefly.net/images/landing/portrait-lightroom-presets/hero--portrait-lightroom-presets@2x.jpg) 2x);
	background-position: center 30%;
	background-repeat: no-repeat;
	background-size: cover;
	color: var(--text-100);
	padding: 3.5rem 0;
	position: relative;
}

/* Below lg the copy is full width and lands over the face and the bright
   yellow foreground, so the wash is flat and heavy. */
#portrait-lightroom-presets #hero::before {
	background: rgba(10, 9, 8, 0.6);
	content: '';
	inset: 0;
	position: absolute;
}

#portrait-lightroom-presets #hero>.container {
	position: relative;
	z-index: 1;
}

/* At lg the copy keeps to the left columns and the girl sits right, so the
   wash turns directional: heavy behind the type - the lower left of the frame
   is near-white yellow - and light enough on the right to leave her face
   clear. */
@media (min-width: 992px) {
	#portrait-lightroom-presets #hero {
		padding: 5rem 0;
	}

	#portrait-lightroom-presets #hero::before {
		background: linear-gradient(90deg, rgba(10, 9, 8, 0.72) 0%, rgba(10, 9, 8, 0.58) 45%, rgba(10, 9, 8, 0.15) 70%, rgba(10, 9, 8, 0.03) 100%);
	}
}

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

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

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

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

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

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

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

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

/* --bg-800 at 60%, so the photo reads through. The hero is pinned dark, so a
   literal is safe; base.css has no neutral transparent token. */
#portrait-lightroom-presets #hero .works-with .rounded-pill {
	background: rgba(40, 40, 40, 0.6);
	color: var(--text-200);
	display: inline-block;
	font-size: var(--text-micro);
	font-weight: 500;
	padding: 0.375rem 0.75rem;
}

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

#portrait-lightroom-presets #hero .hero-note {
	color: var(--text-200);
	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. */
#portrait-lightroom-presets #page-navigation {
	background: var(--bg-800);
}

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

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

#portrait-lightroom-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;
}

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

/* !- Preset packs
   No bottom padding - the gap below the grid belongs to #what-are, so that
   section's top edge sits where the cards end and the subnav highlight flips
   as soon as its heading comes into view. */
#portrait-lightroom-presets #presets {
	padding: 3.5rem 0 0;
}

#portrait-lightroom-presets #presetGrid>.col {
	display: flex;
}

#portrait-lightroom-presets .preset-card {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	flex: 1;
	flex-direction: column;
}

/* The Kids Matte card has a single after image rather than a comparison */
#portrait-lightroom-presets .preset-card>img,
#portrait-lightroom-presets .preset-card image-compare img {
	border-top-left-radius: var(--border-radius);
	border-top-right-radius: var(--border-radius);
}

#portrait-lightroom-presets .preset-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.5rem;
	padding: 1.5rem;
}

#portrait-lightroom-presets .preset-name {
	color: var(--text-100);
	font-size: var(--text-lg);
	font-weight: 700;
	line-height: 1.5;
	margin-bottom: 0;
}

#portrait-lightroom-presets .preset-source {
	align-items: center;
	color: var(--gold-500);
	display: flex;
	font-size: var(--text-mini);
	font-weight: 600;
	gap: 0.25rem;
	margin-bottom: 0;
}

#portrait-lightroom-presets .preset-source i {
	margin-top: -0.075rem;
}

#portrait-lightroom-presets .preset-desc {
	color: var(--text-500);
	flex: 1;
	font-size: var(--text-xs);
	line-height: 1.5;
	margin-bottom: 0.75rem;
}

#portrait-lightroom-presets .preset-actions {
	display: flex;
	gap: 0.75rem;
}

#portrait-lightroom-presets .preset-actions .btn {
	flex: 1;
	font-size: var(--text-xs);
	font-weight: 600;
	padding: 0.75rem;
}

/* !- What are these */
#portrait-lightroom-presets #what-are {
	padding: 4.5rem 0 5rem;
}

#portrait-lightroom-presets #what-are h2 {
	margin-bottom: 1.5rem;
}

#portrait-lightroom-presets #what-are .steps-heading {
	color: var(--text-100);
	font-size: var(--text-xl);
	font-weight: 700;
	margin-bottom: 1.25rem;
}

/* Badge sits beside the copy rather than above it, to keep the stacked cards
   short enough to sit alongside the intro copy. */
#portrait-lightroom-presets .install-card {
	align-items: flex-start;
	background: var(--bg-800);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1rem;
	margin-bottom: 0.75rem;
	padding: 1.25rem;
}

#portrait-lightroom-presets .install-card:last-child {
	margin-bottom: 0;
}

#portrait-lightroom-presets .install-card .badge {
	font-size: var(--text-sm);
	font-weight: 500;
}

#portrait-lightroom-presets .install-card .install-title {
	color: var(--text-100);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

#portrait-lightroom-presets .install-card .install-copy {
	font-size: var(--text-xs);
	margin-bottom: 0;
}

/* !- Tips
   The page's one step-lighter band, so the cards drop back a step to --bg-900
   to stay visible against it. */
#portrait-lightroom-presets #tips {
	background: var(--bg-800);
	padding: 5rem 0;
}

#portrait-lightroom-presets .tip-card {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	height: 100%;
	padding: 1.5rem;
}

#portrait-lightroom-presets .tip-card .badge {
	font-size: var(--text-sm);
	font-weight: 500;
}

#portrait-lightroom-presets .tip-card .tip-title {
	color: var(--text-100);
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.75rem;
}

#portrait-lightroom-presets .tip-card .tip-copy {
	font-size: var(--text-xs);
	margin-bottom: 0;
}

/* !- Video */
#portrait-lightroom-presets #video {
	padding: 5rem 0;
}

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

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

/* !- Closing CTA
   Pinned dark, and restating its own colors for the reason the hero does. */
#portrait-lightroom-presets #download-presets {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6rem 0;
}

#portrait-lightroom-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;
}

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

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

/* House button sizing, scoped to the section - never the body id, since the
   header and footer partials render inside it. */
#portrait-lightroom-presets #download-presets .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}