/**
 * Solutions for Photographers landing page
 *
 * @copyright   2026, ON1
 *
 * The genre hub. Five split bands, each one pointing at its own landing page:
 * Nature, Wedding, Fashion, Real Estate, Lifestyle.
 *
 * base.css already owns most of this page's vocabulary - .eyebrow,
 * .section-divider, .section-intro, the .bg-burst CTA treatment and the whole
 * #resources band - so what lives here is the hero, the stats strip, the intro
 * band, the two-column block the five genre bands share, and the closing CTA.
 *
 * The .section-* classes came across from the sibling genre pages. 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.
 *
 * Unlike Nature and Lifestyle, the hero is not a photographic plate. The only
 * art for this page is 1440 x 450 with no 2x, which is too small to carry a
 * full-bleed band, so it runs under the copy as a wide plate inside the
 * container instead.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero          pinned dark, --bg-950, copy over the wide plate
 *   #stats         follows the theme, --bg-800 (the one step-lighter band)
 *   #intro         pinned LIGHT, the page's one light band
 *   #nature        follows the theme
 *   #wedding       follows the theme
 *   #fashion       follows the theme
 *   #real-estate   follows the theme
 *   #lifestyle     follows the theme
 *   #one-platform  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. */
#solutions-for-photographers #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. */
#solutions-for-photographers #hero {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 4rem 0;
}

@media (min-width: 992px) {
	#solutions-for-photographers #hero {
		padding: 5.625rem 0;
	}
}

/* Mobile first, and the small step is the one that matters: at --text-5xl this
   headline runs to four lines on a phone. */
#solutions-for-photographers #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) {
	#solutions-for-photographers #hero .hero-h1 {
		font-size: var(--text-5xl);
	}
}

#solutions-for-photographers #hero .hero-sub {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#solutions-for-photographers #hero .hero-sub strong {
	color: var(--text-100);
	font-weight: 600;
}

#solutions-for-photographers #hero .btn {
	font-size: var(--text-base);
	padding: 0.9375rem 1.875rem;
}

/* The plate is 1440 wide against a container that tops out near it, so it runs
   the full column width and takes the crop from the intrinsic ratio. */
#solutions-for-photographers #hero .hero-plate {
	margin-top: 3.5rem;
	width: 100%;
}

/* !- Stats
   The page's one step-lighter band, and the same three-up the homepage runs
   under its hero. The divider only appears once the columns sit side by side;
   stacked, it would cut across the middle of the strip. */
#solutions-for-photographers #stats {
	background: var(--bg-800);
	padding: 2.5rem 0;
}

#solutions-for-photographers #stats .stat-num {
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background: linear-gradient(90deg, var(--teal-500) 0%, var(--blue-500) 100%);
	background-clip: text;
	font-size: 3rem;
	font-weight: 900;
	line-height: 1.1;
	margin-bottom: 0.25rem;
	margin-left: auto;
	margin-right: auto;
	width: fit-content;
}

#solutions-for-photographers #stats .stat-label {
	color: var(--text-500);
	font-size: var(--text-sm);
	margin-bottom: 0;
}

/* Stacked, the three run together - the divider that separates them side by
   side isn't there to do it. */
@media (max-width: 767.98px) {
	#solutions-for-photographers #stats .stat-item+.stat-item {
		margin-top: 1.5rem;
	}
}

@media (min-width: 768px) {
	#solutions-for-photographers #stats .stat-item+.stat-item {
		border-left: 1px solid var(--bg-600);
	}
}

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

#solutions-for-photographers #intro .section-intro {
	margin-bottom: 0;
}

#solutions-for-photographers #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;
}

#solutions-for-photographers #intro .intro-sub {
	font-size: var(--text-base);
	line-height: 1.7;
}

#solutions-for-photographers #intro .intro-sub strong {
	color: var(--text-100);
	font-weight: 600;
}

/* !- Genre bands
   One genre against one photograph, alternating sides. 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.

   The eyebrow is the h2 here rather than a bare label: the genre name is the
   heading that matters for the page outline, and the line above it - the one
   that reads as the headline - is the pitch. */
#solutions-for-photographers .section-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 5rem 4.375rem;
}

@media (max-width: 575.98px) {
	#solutions-for-photographers .section-copy {
		padding-left: 0;
		padding-right: 0;
	}
}

#solutions-for-photographers .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;
}

#solutions-for-photographers .section-body {
	font-size: var(--text-base);
	line-height: 1.65;
	margin-bottom: 1.75rem;
}

#solutions-for-photographers .section-body strong {
	color: var(--text-100);
	font-weight: 600;
}

/* !- One Platform. Your Workflow.
   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. */
#solutions-for-photographers #one-platform {
	background: var(--bg-950);
	color: var(--text-300);
	padding: 6.25rem 0;
}

#solutions-for-photographers #one-platform 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;
}

#solutions-for-photographers #one-platform .cta-copy {
	font-size: var(--text-lg);
	line-height: 1.65;
	margin-bottom: 2.5rem;
}

#solutions-for-photographers #one-platform .cta-copy strong {
	color: var(--text-100);
	font-weight: 600;
}