/**
 * Wedding 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 challenge strip, the two-column block the five feature bands share, the
 * video band and the closing CTA.
 *
 * 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.
 *
 * Like the Real Estate sibling and unlike Nature and Lifestyle, the hero is not
 * a photographic plate - there is no 2880-wide art for this page, the widest
 * asset in /images/landing/wedding-photo-editor/ being 1464 x 800. It runs as a
 * two-column band instead, copy against the hero photograph.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero                pinned dark, --bg-950
 *   #editing-challenge   pinned LIGHT, heading plus the five-up strip
 *   #skin-retouching     follows the theme
 *   #presets             follows the theme
 *   #color-lighting      follows the theme
 *   #distraction-removal follows the theme
 *   #ai-masking          follows the theme
 *   #reviews             follows the theme, --bg-800 (the one step-lighter band)
 *   #video               follows the theme
 *   #faqs                follows the theme
 *   #edit-smarter        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. */
#wedding-photo-editor #site-main .btn {
	font-size: var(--text-sm);
	padding: 0.75rem 1.25rem;
}

/* !- Hero
   Pinned dark and stating its own colors - pinning the attribute only redefines
   the tokens, and body's color is already computed by the time it inherits in.
   The secondary button is .btn-outline-light, which is only legible on a dark
   surface, so the pin is load-bearing rather than cosmetic. */
#wedding-photo-editor #hero {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 4rem 0;
}

@media (min-width: 992px) {
	#wedding-photo-editor #hero {
		padding: 5.625rem 0;
	}
}

/* Mobile first, and the small step is the one that matters: at --text-5xl the
   headline crowds the photograph on a phone, where the two columns have already
   stacked. */
#wedding-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;
	text-wrap: balance;
}

@media (min-width: 992px) {
	#wedding-photo-editor #hero .hero-h1 {
		font-size: var(--text-5xl);
	}
}

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

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

#wedding-photo-editor #hero .hero-buttons {
	margin-bottom: 2.5rem;
}

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

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

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

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

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

#wedding-photo-editor #editing-challenge .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;
}

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

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

/* !- Five-up strip
   The five hurdles the live page listed, one card each. 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.

   The column run is the Guarantee grid's - 1 / 3 / 5 - rather than a straight
   1 / 2 / 5. Five cards over three columns leaves a two-card orphan row that
   still reads as a grid, where a 2-across run leaves a single stretched card,
   and five across only has the width to hold this much copy at xxl. */
#wedding-photo-editor .five-up-item {
	background: var(--bg-950);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 2rem 1.75rem;
}

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

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

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

/* !- Section blocks
   The five deep-dive bands, each one topic against one photograph. The row runs
   g-0 so the artwork meets the copy column edge to edge; .section-copy carries
   the padding that keeps the text off it.

   Three of the bands carry a second topic under a .section-subhead. The live
   page ran those four topics as their own full-width rows; folding them in
   keeps the copy without stretching the page to nine bands, and each one pairs
   with the band it already belonged to. */
#wedding-photo-editor .section-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4.375rem;
}

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

#wedding-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;
}

#wedding-photo-editor .section-subhead {
	color: var(--text-50);
	font-size: var(--text-lg);
	font-weight: 600;
	line-height: 1.3;
	margin-bottom: 0.75rem;
	margin-top: 0.75rem;
}

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

#wedding-photo-editor .section-body strong {
	color: var(--text-100);
	font-weight: 600;
}

#wedding-photo-editor .section-lede {
	color: var(--text-400);
	font-size: var(--text-sm);
	font-style: italic;
}

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

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

/* The challenge sub and the presets paragraph both run a .section-link inside
   body copy rather than on its own line, where the 0.875rem of the class would
   shrink the words out of the sentence around them. */
#wedding-photo-editor .intro-sub .section-link,
#wedding-photo-editor .section-body .section-link {
	font-size: inherit;
}

/* !- Video
   Follows the theme rather than stepping up: #reviews above it is already the
   page's one --bg-800 band, and a second one would push the lighter step past
   its 10% share. */
#wedding-photo-editor #video {
	padding: 5.625rem 0;
}

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

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

/* !- The Smartest Way to Edit Weddings & Events
   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. */
#wedding-photo-editor #edit-smarter {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6.25rem 0;
}

#wedding-photo-editor #edit-smarter 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;
}

#wedding-photo-editor #edit-smarter .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#wedding-photo-editor #edit-smarter .cta-copy strong {
	color: var(--text-100);
	font-weight: 600;
}