/**
 * Lifestyle photography editor landing page
 *
 * @copyright   2026, ON1
 *
 * base.css already owns most of this page's vocabulary - .eyebrow,
 * .section-divider, .section-intro, .feature-bullets, the .faqs accordion and
 * the whole #resources band - so what lives here is the hero, the two-column
 * section block the five feature bands share, and the video band.
 *
 * The .section-* classes came across from v2/assets/css/base.css, which this
 * page no longer loads. They are scoped to the body id rather than left bare:
 * the names are generic enough that a later base.css addition under the same
 * name would collide.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero             pinned dark, photographic plate
 *   #intro            pinned LIGHT
 *   #skin-tones       follows the theme
 *   #natural-light    follows the theme
 *   #background-blur  follows the theme
 *   #ai-tools         follows the theme
 *   #video            follows the theme, --bg-800 (the one step-lighter band)
 *   #faqs             follows the theme
 *   #start-editing    pinned dark, --bg-950, blue burst
 *   #resources        follows the theme, base.css owns the band
 *   ON1 Guarantee     pinned light, injected by partials/footer.php
 */

/* !- Buttons
   House sizing, same as the blog index. The hero steps up from it below. */
#lifestyle-photography-editor #site-main .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Hero
   The plate is a photograph, so the band is pinned dark and states its own
   colors - pinning the attribute only redefines the tokens, and body's color
   is already computed by the time it inherits in.

   max-width is load-bearing, not tidiness: aspect-ratio and min-height together
   resolve the width off the height, so below 1440px the band sizes itself to
   600 x 2.4 and takes the whole page into horizontal scroll with it. The cap is
   what keeps it on the viewport. */
#lifestyle-photography-editor #hero {
	align-items: center;
	aspect-ratio: 2880 / 1200;
	background: url(https://ononesoft.cachefly.net/images/landing/lifestyle-photography-editor/hero-bg-skater@2x.jpg) center center no-repeat;
	background-size: cover;
	color: var(--text-300);
	display: flex;
	max-width: 100%;
	min-height: 600px;
	position: relative;
}

/* Darkens the copy side only, so the right of the frame keeps the photograph.
   Two layers, because the ellipse alone doesn't cover the column: it falls off
   well before the top of the band, which is where the eyebrow sits, and the
   photograph is bright concrete right there. The linear wash underneath carries
   the full height of the column; the ellipse still does the work of deepening
   the middle and fading out before the subject. */
#lifestyle-photography-editor #hero::before {
	background:
		radial-gradient(ellipse 62% 85% at 22% 50%, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.3) 45%, rgba(0, 0, 0, 0) 72%),
		linear-gradient(to right, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0.6) 35%, rgba(0, 0, 0, 0) 68%);
	content: '';
	inset: 0;
	pointer-events: none;
	position: absolute;
}

/* Below lg the copy column spans the frame, so the off-centre ellipse stops
   covering it - a flat wash is what keeps the text legible. */
@media (max-width: 991.98px) {
	#lifestyle-photography-editor #hero::before {
		background: rgba(0, 0, 0, 0.65);
	}
}

#lifestyle-photography-editor #hero .container {
	position: relative;
	z-index: 2;
}

#lifestyle-photography-editor #hero .hero-content {
	padding: 4rem 1rem;
}

/* Mobile first, and the small step is the one that matters: the band centres
   its content, so at --text-6xl the headline outgrows the 600px plate on a
   phone and the eyebrow rides up under the sticky header. */
#lifestyle-photography-editor #hero .hero-h1 {
	color: var(--white);
	font-size: var(--text-4xl);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.08;
	margin-bottom: 1rem;
}

@media (min-width: 992px) {
	#lifestyle-photography-editor #hero .hero-content {
		padding: 6.25rem 1rem;
	}

	#lifestyle-photography-editor #hero .hero-h1 {
		font-size: var(--text-6xl);
	}
}

#lifestyle-photography-editor #hero .hero-sub {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#lifestyle-photography-editor #hero .btn {
	font-size: var(--text-base);
	padding: 0.9375rem 1.875rem;
}

#lifestyle-photography-editor #hero .hero-buttons {
	margin-bottom: 2.5rem;
}

#lifestyle-photography-editor #hero .hero-proof {
	color: var(--white);
	font-size: var(--text-xs);
	margin: 0;
}

#lifestyle-photography-editor #hero .hero-proof .list-inline-item {
	margin-right: 1.75rem;
	padding-left: 0.875rem;
	position: relative;
}

#lifestyle-photography-editor #hero .hero-proof .list-inline-item:last-child {
	margin-right: 0;
}

#lifestyle-photography-editor #hero .hero-proof .list-inline-item::before {
	background: var(--blue-500);
	border-radius: 50%;
	content: '';
	height: 0.375rem;
	left: 0;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 0.375rem;
}

/* !- Section blocks
   The intro and the four feature bands. The row runs g-0 so the photograph
   meets the copy column edge to edge; .section-copy carries the padding that
   keeps the text off it. */
#lifestyle-photography-editor .section-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4.375rem;
}

@media (max-width: 575.98px) {
	#lifestyle-photography-editor .section-copy {
		padding-left: 0;
		padding-right: 0;
	}
}

#lifestyle-photography-editor .section-h2 {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 1rem;
}

#lifestyle-photography-editor .section-lede {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-style: italic;
	margin-bottom: 1rem;
}

#lifestyle-photography-editor .section-body {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

#lifestyle-photography-editor .section-link {
	color: var(--link-alt);
	font-size: var(--text-sm);
	font-weight: 600;
	text-decoration: none;
}

#lifestyle-photography-editor .section-link:hover {
	text-decoration: underline;
}

/* !- Intro
   The page's light band. Pinned, so it stays light under either theme, and it
   restates background and color for the same reason the hero does. */
#lifestyle-photography-editor #intro {
	background: var(--bg-900);
	color: var(--text-300);
}

/* !- Video
   The one step up from the page's own tone. */
#lifestyle-photography-editor #video {
	background: var(--bg-800);
	padding: 5.625rem 0;
}

#lifestyle-photography-editor #video .video-figure {
	margin: 0;
}

#lifestyle-photography-editor #video .video-caption {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-style: italic;
	margin-top: 1rem;
	text-align: center;
}

/* !- FAQs */
#lifestyle-photography-editor #faqs {
	padding: 5.625rem 0;
}

/* !- Start Editing the Life You Capture
   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 - letting this band follow the theme would erase it on light. */
#lifestyle-photography-editor #start-editing {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6.25rem 0;
}

#lifestyle-photography-editor #start-editing 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;
}

#lifestyle-photography-editor #start-editing .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}