/**
 * HTPLaw Page Banner widget.
 *
 * Measured from the 4x Figma export of the Patents frame (design px, banner
 * top = 0 at y82, height 610): light topographic background image (cover).
 * Figma's banner overlaps the bottom 12px of the 94px site header; the
 * backgrounds are both near-white, so the top padding is 12px less to keep
 * the text where Figma has it on the page (banner 598px tall).
 * Breadcrumbs Inter 14px #1e1e1e; eyebrow and heading use the shared styles
 * (heading 43/50, max 2 lines in 548px); intro Inter 17/27 #0e1b2c, max
 * 670px; buttons 26px apart. Text tops (ink): breadcrumbs 69.5, eyebrow
 * 120.75, heading 161, intro 288.25; buttons at 460, 108px above the bottom.
 *
 * Not in Figma: breadcrumb links are underlined on hover; the separators are
 * CSS so screen readers announce a plain list.
 */

.htplaw-pb {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding-top: var(--htplaw-pb-pad-top, 54px);
	padding-bottom: var(--htplaw-pb-pad-bottom, 108px);
	background: var(--htplaw-color-surface);
}

/* Figma keeps the banner 610px tall (598 here, see above) whatever the
   intro length; shorter content leaves more space below the buttons. */
@media (min-width: 901px) {
	.htplaw-pb {
		min-height: var(--htplaw-pb-min-height, 598px);
	}
}

/* (0,2,0) beats `.elementor img { height: auto }`, which stopped the
   image covering the banner when its proportions differed. */
.htplaw-pb .htplaw-pb__bg {
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;
	width: 100%;
	/* HTPLAW-COVER-BANNER.png has a 1px grey border along its bottom edge;
	   the extra height pushes it below the banner, where it is clipped. */
	height: calc(100% + 3px);
	max-width: none;
	object-fit: cover;
}

/* Breadcrumbs */
.htplaw-pb__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	color: #1e1e1e;
	font-family: var(--htplaw-font-body);
	font-size: 14px;
	line-height: 20px;
}

.htplaw-pb__crumbs li + li::before {
	content: "/";
	content: "/" / "";
	margin-inline: .25em;
}

.htplaw-pb__crumbs a {
	color: inherit;
	text-decoration: none;
}

.htplaw-pb__crumbs a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Posts and archives (content source "post"/"archive"): a long title as
   the last crumb stays on one line and is cut with an ellipsis; the full
   title is the heading right below. */
.htplaw-pb--entry .htplaw-pb__crumbs ol {
	flex-wrap: nowrap;
}

.htplaw-pb--entry .htplaw-pb__crumbs li {
	flex-shrink: 0;
	white-space: nowrap;
}

.htplaw-pb--entry .htplaw-pb__crumbs li:last-child {
	flex-shrink: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.htplaw-pb__eyebrow {
	margin-top: 30px;
	text-transform: uppercase;
}

.htplaw-pb .htplaw-pb__title {
	max-width: var(--htplaw-pb-title-width, 548px);
	margin-top: 14px;
}

.htplaw-pb__intro {
	max-width: var(--htplaw-pb-intro-width, 670px);
	margin-top: 31px;
	color: var(--htplaw-color-text);
	font-family: var(--htplaw-font-body);
	font-size: 17px;
	line-height: 27px;
}

.htplaw-pb__intro > :first-child { margin-top: 0; }
.htplaw-pb__intro > :last-child { margin-bottom: 0; }

.htplaw-pb__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 16px 26px;
	margin-top: 43px;
}

/*
 * Variants from The Firm and About Teddy mock-ups (2026-10-23).
 * No eyebrow: heading ink 76px below the breadcrumbs. Both pages add a
 * 1px #d9d9d9 rule under the banner.
 */
.htplaw-pb--divider {
	border-bottom: 1px solid #d9d9d9;
}

.htplaw-pb .htplaw-pb__crumbs + .htplaw-pb__title,
.htplaw-pb .htplaw-pb__portrait + .htplaw-pb__title {
	margin-top: 50px;
}

/* Subtitle (About Teddy): Inter 16/27 #24597f, ~20px under the heading. */
.htplaw-pb__subtitle {
	max-width: 340px;
	margin: 20px 0 0;
	color: var(--htplaw-color-blue);
	font-family: var(--htplaw-font-body);
	font-size: 16px;
	line-height: 27px;
}

.htplaw-pb__subtitle + .htplaw-pb__intro {
	margin-top: 22px;
}

/* Compact banner without buttons (Contact): intro 5px closer to the heading. */
.htplaw-pb__title + .htplaw-pb__intro:last-child {
	margin-top: 26px;
}

/* Portrait (About Teddy): 340×374, 5px radius, 60px inside the container's
   right edge, top 33px below the content top. */
.htplaw-pb__portrait {
	aspect-ratio: 340 / 374;
	overflow: hidden;
	border-radius: 5px;
	background: var(--htplaw-color-border);
}

.htplaw-pb__portrait img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.htplaw-pb--portrait .htplaw-pb__actions {
	margin-top: 27px;
}

@media (min-width: 901px) {
	.htplaw-pb--portrait .htplaw-pb__inner {
		position: relative;
	}

	.htplaw-pb--portrait .htplaw-pb__portrait {
		position: absolute;
		top: 33px;
		right: calc(var(--htplaw-gutter) + 60px);
		width: 340px;
	}

	.htplaw-pb--portrait .htplaw-pb__intro {
		max-width: min(var(--htplaw-pb-intro-width, 670px), calc(100% - 440px));
	}
}

/* Centred (The Firm): breadcrumbs stay left; heading, intro and buttons
   centre; intro ~21px and buttons ~28px below the text above. */
.htplaw-pb--center .htplaw-pb__eyebrow,
.htplaw-pb--center .htplaw-pb__title,
.htplaw-pb--center .htplaw-pb__subtitle,
.htplaw-pb--center .htplaw-pb__intro {
	margin-inline: auto;
	text-align: center;
}

.htplaw-pb--center .htplaw-pb__intro {
	margin-top: 21px;
}

/* The Firm's centred heading sits 15px lower under the breadcrumbs. */
.htplaw-pb.htplaw-pb--center .htplaw-pb__crumbs + .htplaw-pb__title {
	margin-top: 65px;
}

.htplaw-pb--center .htplaw-pb__actions {
	justify-content: center;
	margin-top: 26px;
}

@media (max-width: 900px) {
	/* Text first, portrait after the button (like the homepage hero), so
	   the name and call to action stay above the fold. */
	.htplaw-pb--portrait .htplaw-pb__inner {
		display: flex;
		flex-direction: column;
	}

	.htplaw-pb__portrait {
		order: 10;
		width: 100%;
		max-width: 340px;
		margin-top: 32px;
	}

	/* Line breaks typed into the heading match the desktop design; on
	   narrower screens the heading wraps naturally. */
	.htplaw-pb__title br {
		display: none;
	}

	.htplaw-pb {
		padding-top: var(--htplaw-pb-pad-top, 40px);
		padding-bottom: var(--htplaw-pb-pad-bottom, 56px);
	}

	.htplaw-pb__eyebrow {
		margin-top: 24px;
	}

	.htplaw-pb__intro {
		margin-top: 20px;
		font-size: 16px;
		line-height: 1.6;
	}

	.htplaw-pb__actions {
		gap: 12px;
		margin-top: 28px;
	}
}

@media (max-width: 480px) {
	.htplaw-pb__actions .htplaw-btn {
		flex: 1 1 100%;
		white-space: normal;
	}
}

/* Mobile spacing: section padding is capped at the shared mobile token
   (variables.css), so large desktop values set in Elementor don't carry
   over to tablets and phones; smaller custom values are kept. */
@media (max-width: 900px) {
	.htplaw-pb {
		padding-top: min(var(--htplaw-pb-pad-top, 40px), var(--htplaw-space-section));
		padding-bottom: min(var(--htplaw-pb-pad-bottom, var(--htplaw-space-section)), var(--htplaw-space-section));
	}
}