/* ==========================================================================
	PhotoLotus — Industry landing pages
	Loads after designsystem.css and landing.css. Rules specific to the
	vertical (by-industry) pages only.
	========================================================================== */

.tmLarge {
	margin-top: 80px;
}
.bm2em {
	margin-bottom: 2em;
}


/* Split hero: copy left, imagery right */
.vertical-hero {
	padding-top: var(--space-12);
	padding-bottom: var(--space-12);
}

.vertical-hero .container {
	display: grid;
	grid-template-columns: 6fr 6fr;
	gap: var(--space-8);
	align-items: center;
}

.vertical-hero h1 {
	text-align: left;
	font-size: var(--font-size-h2);
	line-height: var(--line-height-h2);
	letter-spacing: var(--letter-spacing-h2);
}

.vertical-hero .lede {
	margin-top: var(--space-3);
	max-width: 512px;
}

.vertical-hero .hero-actions {
	justify-content: flex-start;
	margin-top: var(--space-6);
}

.vertical-hero .caption {
	text-align: left;
	margin-bottom: var(--space-3);
}

/* Pain points as a ruled list rather than cards */
.pain-list {
	list-style: none;
	margin: 0;
	padding: 0;
	counter-reset: pain;
}

.pain-list li {
	counter-increment: pain;
	display: grid;
	grid-template-columns: 64px 1fr;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-top: var(--hairline);
}

.pain-list li:last-child {
	border-bottom: var(--hairline);
}

.pain-list li::before {
	content: counter(pain, decimal-leading-zero);
	font-size: var(--font-size-caption);
	letter-spacing: var(--letter-spacing-caption);
	color: var(--color-accent);
	font-weight: 700;
	padding-top: 4px;
}

.pain-list strong {
	display: block;
	font-weight: 600;
	font-size: var(--font-size-h6);
	line-height: var(--line-height-h6);
	letter-spacing: var(--letter-spacing-h6);
	margin-bottom: 4px;
}

.pain-list p {
	color: rgba(0, 0, 0, 0.72);
	max-width: 640px;
}

/* Example gallery strip */
.example-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-2);
	align-items: center;
}

.example-strip img {
	width: 100%;
	object-fit: cover;
}

/* Compact how-it-works row */
.steps-row {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--space-4);
}

.steps-row .step {
	border-top: 2px solid var(--color-ink);
	padding-top: var(--space-2);
}

.steps-row .step .cell-num {
	display: block;
	font-size: var(--font-size-caption);
	line-height: var(--line-height-caption);
	letter-spacing: var(--letter-spacing-caption);
	text-transform: uppercase;
	color: var(--color-accent);
	font-weight: 700;
	margin-bottom: var(--space-1);
}

.steps-row .step h3 {
	font-size: var(--font-size-h5);
	line-height: var(--line-height-h5);
	letter-spacing: var(--letter-spacing-h5);
	text-align: left;
	margin-bottom: var(--space-1);
}

.steps-row .step p {
	color: rgba(0, 0, 0, 0.72);
}

/* Cross-links to other industries */
.other-industries {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2);
}

.other-industries a {
	display: inline-block;
	padding: var(--space-1) var(--space-2);
	border: var(--hairline);
	background: var(--color-white);
	color: var(--color-ink);
	text-decoration: none;
	font-size: var(--font-size-body);
	letter-spacing: var(--letter-spacing-body);
}

.other-industries a:hover {
	border-color: var(--color-ink);
}

@media (max-width: 960px) {
	.vertical-hero .container {
		grid-template-columns: 1fr;
		gap: var(--space-6);
	}

	.vertical-hero h1 {
		font-size: 40px;
		line-height: 48px;
		letter-spacing: -1.6px;
	}

	.steps-row,
	.example-strip {
		grid-template-columns: 1fr;
	}

	.vertical-hero .hero-actions {
		flex-direction: row;
	}
}