/**
 * Nature photo 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 #reviews and #resources bands - so what lives here is the hero,
 * the intro strip, the two-column block the four 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, heading plus the four-up strip
 *   #noise-reduction   follows the theme
 *   #color-tone        follows the theme
 *   #object-removal    follows the theme
 *   #sky-foreground    follows the theme
 *   #reviews           follows the theme, --bg-800 (the one step-lighter band)
 *   #video             follows the theme
 *   #faqs              follows the theme
 *   #capture-the-wild  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. */
#nature-photo-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. */
#nature-photo-editor #hero {
	align-items: center;
	aspect-ratio: 2880 / 1200;
	background: url(https://ononesoft.cachefly.net/images/landing/nature-photo-editor/hero-bg@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. 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. */
#nature-photo-editor #hero::before {
	background:
		radial-gradient(ellipse 62% 85% at 22% 50%, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.4) 45%, rgba(0, 0, 0, 0) 72%),
		linear-gradient(to right, rgba(0, 0, 0, 0.7) 0%, rgba(0, 0, 0, 0.55) 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) {
	#nature-photo-editor #hero::before {
		background: rgba(0, 0, 0, 0.65);
	}
}

#nature-photo-editor #hero .container {
	position: relative;
	z-index: 2;
}

#nature-photo-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. */
#nature-photo-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) {
	#nature-photo-editor #hero .hero-content {
		padding: 6.25rem 1rem;
	}

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

#nature-photo-editor #hero .hero-sub-bold {
	color: var(--white);
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.5;
	margin-bottom: 0.875rem;
}

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

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

/* !- 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. */
#nature-photo-editor #intro {
	background: var(--bg-900);
	color: var(--text-300);
	padding: 4.375rem 0;
}

#nature-photo-editor #intro .intro-heading {
	color: var(--text-50);
	font-size: var(--text-3xl);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.2;
	margin-bottom: 0.875rem;
}

#nature-photo-editor #intro .intro-sub {
	font-size: var(--text-base);
	line-height: 1.7;
}

#nature-photo-editor #intro .intro-sub strong {
	color: var(--text-100);
	font-weight: 600;
}

/* !- Four-up strip
   Cards sit one step lighter than the band they're on, which on a pinned-light
   band means --bg-950. The border is what carries the edge at that distance. */
#nature-photo-editor .four-up-item {
	background: var(--bg-950);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2rem 1.75rem;
}

#nature-photo-editor .four-up-item .four-up-icon {
	color: var(--blue-600);
	font-size: 1.75rem;
	margin-bottom: 1rem;
}

#nature-photo-editor .four-up-item h3 {
	font-size: var(--text-base);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.625rem;
}

#nature-photo-editor .four-up-item .four-up-copy {
	color: var(--text-400);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

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

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

#nature-photo-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;
}

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

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

#nature-photo-editor .sub-feature {
	margin-bottom: 1.75rem;
}

#nature-photo-editor .sub-feature h3 {
	font-size: var(--text-base);
	font-weight: 600;
	margin-bottom: 0.5rem;
}

#nature-photo-editor .sub-feature p {
	font-size: var(--text-sm);
	line-height: 1.65;
}

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

#nature-photo-editor .section-link:hover {
	text-decoration: underline;
}

/* !- Video */
#nature-photo-editor #video {
	padding: 5.625rem 0;
}

#nature-photo-editor #video .video-figure {
	margin: 0;
}

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

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

/* !- Capture the Wild
   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. */
#nature-photo-editor #capture-the-wild {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6.25rem 0;
}

#nature-photo-editor #capture-the-wild 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;
}

#nature-photo-editor #capture-the-wild .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#nature-photo-editor #capture-the-wild .cta-copy strong {
	color: var(--text-100);
	font-weight: 600;
}