/**
 * Styles for the Lightroom Alternative page
 *
 * @copyright   2026, ON1
 *
 * The comparison page that used to sit at /products/photo-raw/lightroom-alternative/,
 * in the 2027 design. It brings the Photo RAW subnav and hero vocabulary with
 * it - that lived on the 2027 product sheet, which this page no longer loads,
 * and base.css carries none of it - then the section shells and the four
 * widgets that are this page's own: the ranked alternatives list, the numbered
 * reason cards, the head-to-head table, and the audience cards.
 *
 * Band order, on the 70/20/10 dark / light / one-step-lighter split:
 *
 *   #hero            pinned dark, --bg-950
 *   #why-switch      follows the theme, blue burst
 *   #case-for-on1    pinned LIGHT
 *   #comparison      follows the theme
 *   #getting-started follows the theme, blue burst
 *   #who-its-for     pinned dark, --bg-950
 *   #faqs            follows the theme, --bg-800 (the one step-lighter band)
 *   #commercial      follows the theme, blue burst
 *   #start-using     pinned dark, --bg-950
 *   ON1 Guarantee    pinned light, injected by partials/footer.php
 *
 * Everything is scoped to the body id, which keeps these rules clear of the
 * #faqs and .eyebrow vocabulary base.css owns under the same names.
 */

/* !- Product navigation
 *
 * partials/products/2027/photo-raw/product-nav.php, which the page still
 * includes. base.css owns the sticky mechanics - the .sticky class base.js adds
 * and the offset it measures off #site-header - but none of the bar's own
 * chrome, so all of that lives here.
 *
 * Every link is white rather than --text-300, so the active state is carried by
 * the underline rather than by colour.
 *
 * border-top: 0 when pinned is deliberate, and base.css's
 * .sticky.is-sticky[data-on1-sticky-below] comment names this bar as one of the
 * pages that does it: #site-header already draws that line, and both drawing
 * one rendered a 4px rule on scroll. */
#lightroom-alternative #product-navigation.is-sticky {
	background: color-mix(in srgb, var(--bg-900) 75%, transparent);
	border-top: 0;
}

@media (max-width: 575.98px) {
	#lightroom-alternative #product-navigation {
		background: var(--bg-900);
	}
}

#lightroom-alternative #product-navigation .nav {
	align-items: center;
}

#lightroom-alternative #product-navigation .nav-link {
	color: var(--white);
	text-decoration: none;
}

#lightroom-alternative #product-navigation .nav-link:hover {
	opacity: 0.75;
}

@media (max-width: 575.98px) {
	#lightroom-alternative #product-navigation .nav-item .nav-link {
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

#lightroom-alternative #product-navigation .nav-link small {
	font-size: var(--text-xs);
	position: relative;
	top: 0.125em;
}

#lightroom-alternative #product-navigation .nav-link strong {
	font-weight: 600;
}

#lightroom-alternative #product-navigation a.nav-link.active small {
	border-bottom: 1px solid var(--white);
}

/* !- Hero
 *
 * The negative margin pulls the band up under the subnav, which is 46px tall,
 * and the top padding adds that height back so the content still clears it. */
#lightroom-alternative #hero {
	background: var(--bg-950);
	margin-top: -46px;
	padding: calc(5rem + 46px) 0 2.5rem 0;
	text-align: center;
}

#lightroom-alternative #hero .eyebrow {
	margin-bottom: 2.25rem;
}

#lightroom-alternative #hero .eyebrow span {
	align-items: center;
	background: var(--blue-transparent);
	border-radius: var(--border-radius);
	color: var(--blue-300);
	display: inline-flex;
	gap: 0.5rem;
	letter-spacing: 0.08em;
	padding: 0.3125rem 0.75rem;
	text-transform: uppercase;
}

/* The product-page heroes run this headline at 76px, sized for what's-new's
   three-word headline. This one is 37 characters and wraps to three lines at
   that size, so it takes the same step down the overview page takes: 56px, and
   38px below lg. */
#lightroom-alternative #hero h1 {
	color: var(--white);
	font-size: 3.5rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin-bottom: 1.375rem;
}

@media (max-width: 991.98px) {
	#lightroom-alternative #hero h1 {
		font-size: 2.375rem;
	}
}

#lightroom-alternative #hero .hero-sub {
	color: var(--text-300);
	font-size: var(--text-lg);
	line-height: 1.6;
	margin-bottom: 2.25rem;
}

/* Matches the NoNoise AI 2027 hero button: this padding plus Bootstrap's
   default 1rem, no font-size override. Scoped to the hero, not the page - a
   bare .btn here would also catch the subnav's .btn-sm and blow out its
   sizing. */
#lightroom-alternative #hero .btn {
	padding: 0.9375rem 1.875rem;
}

#lightroom-alternative #hero .hero-icon {
	border-radius: 22%;
}

/* The #hero rule above ends at 2.5rem of bottom padding, which is the gap above
   the screenshot rather than below it. */
#lightroom-alternative #hero .hero-shot {
	margin-bottom: 0;
	margin-top: 2.5rem;
}

#lightroom-alternative #why-switch,
#lightroom-alternative #case-for-on1,
#lightroom-alternative #comparison,
#lightroom-alternative #getting-started,
#lightroom-alternative #who-its-for,
#lightroom-alternative #commercial,
#lightroom-alternative #start-using {
	padding: 5rem 0;
}

/* Pinning with data-theme only redefines the tokens. body's color is already
   computed by the time it inherits in, so each pinned band restates it or the
   copy keeps the other theme's grey. */
#lightroom-alternative #who-its-for,
#lightroom-alternative #start-using {
	background: var(--bg-950);
	color: var(--text-300);
}

#lightroom-alternative #case-for-on1 {
	background: var(--bg-800);
	color: var(--text-300);
}

/* base.css puts the FAQ band on --bg-900, the same tone as the page. This page
   uses it as its single step-lighter band, between the pinned-dark audience
   cards above and the burst below. */
#lightroom-alternative #faqs {
	background: var(--bg-800);
}

/* !- Ranked alternatives */
#lightroom-alternative .la-alt {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	display: flex;
	gap: 0.875rem;
	margin-bottom: 1rem;
	padding: 1.125rem 1.25rem;
}

#lightroom-alternative .la-alt:last-child {
	margin-bottom: 0;
}

#lightroom-alternative .la-alt-featured {
	background: var(--blue-transparent);
	border-color: color-mix(in srgb, var(--blue-500) 35%, transparent);
}

#lightroom-alternative .la-alt-num {
	align-items: center;
	background: var(--bg-600);
	border-radius: 50%;
	color: var(--text-50);
	display: flex;
	flex: none;
	font-size: var(--text-xs);
	font-weight: 700;
	height: 1.625rem;
	justify-content: center;
	width: 1.625rem;
}

#lightroom-alternative .la-alt-featured .la-alt-num {
	background: var(--blue-500);
	color: var(--white);
}

#lightroom-alternative .la-alt h3 {
	font-size: var(--text-sm);
	font-weight: 700;
	margin-bottom: 0.25rem;
}

#lightroom-alternative .la-alt p {
	color: var(--text-300);
	font-size: var(--text-xs);
	line-height: 1.55;
	margin-bottom: 0;
}

/* !- Trailing arrows
 *
 * The arrows are on ordinary links and buttons, so the only thing setting their
 * spacing is the inline margin-left: 0.25rem in $right_arrow_after. fa-fw then
 * pins the glyph in a 1.25em box on top of that, adding 0.125em of dead space
 * on each side - a 20px box around a 16px glyph. Let the glyph size its own box
 * and the margin alone sets the gap.
 *
 * Scoped inside #site-main rather than to the body id: partials/header.php's
 * announcement bar uses the same icon, and the body id reaches into every
 * chrome partial that renders on this page.
 */
/*
#lightroom-alternative #site-main .fa-arrow-right.fa-fw {
	width: auto;
}
*/

/* The footnote under a section's supporting image, and the "Also read" line. */
#lightroom-alternative .la-aside {
	color: var(--text-400);
	font-size: var(--text-sm);
	margin-bottom: 0;
	margin-top: 1rem;
}

/* !- Reason cards */
#lightroom-alternative .la-reason {
	background: var(--bg-900);
	border-radius: var(--border-radius);
	display: flex;
	gap: 1.125rem;
	padding: 1.75rem;
}

#lightroom-alternative .la-reason-num {
	align-items: center;
	background: linear-gradient(-40deg, var(--blue-500), var(--purple-500));
	border-radius: var(--border-radius);
	color: var(--white);
	display: flex;
	flex: none;
	font-size: var(--text-sm);
	font-weight: 700;
	height: 2.25rem;
	justify-content: center;
	width: 2.25rem;
}

#lightroom-alternative .la-reason h3 {
	font-size: var(--text-base);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

#lightroom-alternative .la-reason p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0;
}

/* !- Head-to-head table
 *
 * Same treatment as the comparison table on the Compare ON1 Photo Editing
 * Software landing page, narrowed to four columns.
 */
#lightroom-alternative #comparison .compare {
	border: 1px solid var(--bg-700);
	border-collapse: separate;
	border-spacing: 0;
	margin-bottom: 0;
	width: 100%;
}

#lightroom-alternative #comparison .compare th,
#lightroom-alternative #comparison .compare td {
	border-bottom: 1px solid var(--bg-800);
	font-size: var(--text-sm);
	padding: 1.125rem 1.25rem;
	text-align: left;
	vertical-align: top;
}

#lightroom-alternative #comparison .compare thead th {
	background: var(--bg-800);
	color: var(--text-400);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#lightroom-alternative #comparison .compare thead th.on1-col {
	color: var(--blue-500);
}

#lightroom-alternative #comparison .compare tbody th {
	color: var(--text-100);
	font-weight: 600;
	white-space: nowrap;
}

#lightroom-alternative #comparison .compare tbody td {
	color: var(--text-300);
}

#lightroom-alternative #comparison .compare tbody tr:last-child th,
#lightroom-alternative #comparison .compare tbody tr:last-child td {
	border-bottom: 0;
}

#lightroom-alternative #comparison .compare thead th:first-child {
	border-top-left-radius: var(--border-radius);
}

#lightroom-alternative #comparison .compare thead th:last-child {
	border-top-right-radius: var(--border-radius);
}

#lightroom-alternative #comparison .compare tbody tr:last-child th {
	border-bottom-left-radius: var(--border-radius);
}

#lightroom-alternative #comparison .compare tbody tr:last-child td:last-child {
	border-bottom-right-radius: var(--border-radius);
}

#lightroom-alternative #comparison .compare tbody tr:hover th,
#lightroom-alternative #comparison .compare tbody tr:hover td {
	background: var(--bg-850);
}

#lightroom-alternative .la-mark {
	margin-right: 0.25rem;
}

#lightroom-alternative .la-mark-yes {
	color: var(--green-500);
}

#lightroom-alternative .la-mark-partial {
	color: var(--gold-500);
}

#lightroom-alternative .la-mark-no {
	color: var(--red-500);
}

#lightroom-alternative .la-mark-na {
	color: var(--text-500);
	font-size: var(--text-micro);
	font-weight: 700;
	letter-spacing: 0.04em;
}

/* !- Migration options */
#lightroom-alternative .la-video {
	border-radius: var(--border-radius);
	margin-bottom: 2.25rem;
	overflow: hidden;
}

#lightroom-alternative #commercial .la-video {
	margin-bottom: 0;
}

#lightroom-alternative .la-migrate {
	background: var(--bg-800);
	border: 1px solid var(--bg-700);
	border-radius: var(--border-radius);
	padding: 1.75rem;
}

#lightroom-alternative .la-migrate h3 {
	font-size: var(--text-lg);
	font-weight: 700;
	margin-bottom: 0.5rem;
}

#lightroom-alternative .la-migrate p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.6;
	margin-bottom: 0.875rem;
}

/* !- Audience cards */
#lightroom-alternative .la-audience {
	background: var(--bg-800);
	border-radius: var(--border-radius);
	padding: 1rem;
}

#lightroom-alternative .la-audience img {
	border-radius: var(--border-radius);
	margin-bottom: 1rem;
	width: 100%;
}

#lightroom-alternative .la-audience p {
	color: var(--text-300);
	font-size: var(--text-sm);
	line-height: 1.55;
	margin-bottom: 0;
}

#lightroom-alternative .la-audience strong {
	color: var(--text-50);
}

/* !- Closing CTA */
#lightroom-alternative #start-using .la-cta-copy {
	color: var(--text-300);
	font-size: var(--text-lg);
	margin-bottom: 1.5rem;
}

#lightroom-alternative #start-using .la-cta-list {
	color: var(--text-300);
	display: flex;
	flex-wrap: wrap;
	font-size: var(--text-sm);
	gap: 0.75rem 1.75rem;
	justify-content: center;
	list-style: none;
	margin: 0 0 2rem;
	padding-left: 0;
}

#lightroom-alternative #start-using .la-cta-list li {
	align-items: center;
	display: flex;
	gap: 0.5rem;
	margin-bottom: 0;
}

#lightroom-alternative #start-using .la-cta-list i.fa-solid {
	color: var(--green-500);
	font-size: var(--text-xs);
}

#lightroom-alternative #start-using .btn {
	padding: 0.75rem 1.25rem;
}

/* !- Light theme contrast
 *
 * The links on this page are ordinary anchors, so base.css's --link already
 * steps them to --blue-600 under the light theme - nothing to restate here.
 * The table marks are the exception.
 *
 * The gold and red marks are tuned for the dark table. Against --bg-900 in
   light they fall to 1.96 and 3.48; these are the first steps that clear AA.
   Green already clears it at 700, which the table shares with the compare
   landing page. */
[data-theme="light"] #lightroom-alternative .la-mark-yes {
	color: var(--green-700);
}

[data-theme="light"] #lightroom-alternative .la-mark-partial {
	color: var(--gold-900);
}

[data-theme="light"] #lightroom-alternative .la-mark-no {
	color: var(--red-700);
}

@media (max-width: 991.98px) {
	#lightroom-alternative #why-switch,
	#lightroom-alternative #case-for-on1,
	#lightroom-alternative #comparison,
	#lightroom-alternative #getting-started,
	#lightroom-alternative #who-its-for,
	#lightroom-alternative #commercial,
	#lightroom-alternative #start-using {
		padding: 3rem 0;
	}
}

/*
 * Four columns, three of them running prose, will not fit a phone, and a
 * horizontal scroller hides the two competitor columns behind a swipe. Each
 * row becomes its own card instead, with the column headings carried down from
 * the data-label attributes. Same treatment as the compare landing page.
 */
@media (max-width: 767.98px) {
	#lightroom-alternative #comparison .compare {
		border: 0;
	}

	#lightroom-alternative #comparison .compare,
	#lightroom-alternative #comparison .compare tbody,
	#lightroom-alternative #comparison .compare tbody tr,
	#lightroom-alternative #comparison .compare tbody th,
	#lightroom-alternative #comparison .compare tbody td {
		display: block;
		width: auto;
	}

	#lightroom-alternative #comparison .compare thead {
		display: none;
	}

	#lightroom-alternative #comparison .compare tbody tr {
		background: var(--bg-800);
		border: 1px solid var(--bg-700);
		border-radius: var(--border-radius);
		margin-bottom: 1rem;
		padding: 1.25rem;
	}

	#lightroom-alternative #comparison .compare tbody tr:last-child {
		margin-bottom: 0;
	}

	#lightroom-alternative #comparison .compare tbody tr:hover th,
	#lightroom-alternative #comparison .compare tbody tr:hover td {
		background: none;
	}

	#lightroom-alternative #comparison .compare tbody th,
	#lightroom-alternative #comparison .compare tbody td {
		border: 0;
		border-radius: 0;
		padding: 0;
		white-space: normal;
	}

	#lightroom-alternative #comparison .compare tbody th + td,
	#lightroom-alternative #comparison .compare tbody td + td {
		margin-top: 1rem;
	}

	#lightroom-alternative #comparison .compare tbody th[data-label]::before,
	#lightroom-alternative #comparison .compare tbody td[data-label]::before {
		color: var(--text-400);
		content: attr(data-label);
		display: block;
		font-size: var(--text-micro);
		font-weight: 700;
		letter-spacing: 0.06em;
		margin-bottom: 0.25rem;
		text-transform: uppercase;
	}
}