/* LWM-1123: attorney bio top panel.
   Grey band across the page with one red rule along its bottom edge; the photo
   sits on that rule with no red frame around it. Loaded after video.css so it
   wins over the older border rules in style.css / video.css. */

.peoplemain.feauturedBanner .row.bio-hero {
	background-color: #eee;
	border-bottom: 6px solid #eb0028;
}

/* Photo stands on the red rule; the text column stays at the top. */
@media (min-width: 768px) {
	.peoplemain.feauturedBanner .row.bio-hero {
		display: flex;
		align-items: flex-end;
	}

	.peoplemain.feauturedBanner .bio-hero > .peoplepage {
		align-self: flex-start;
	}

	.peoplemain.feauturedBanner .bio-hero #profile-pick {
		margin-bottom: 0;
	}
}

.peoplemain.feauturedBanner .bio-hero .positionadjust,
.peoplemain.feauturedBanner .bio-hero .headline {
	border: 0 !important;
}

/* Icons are bare grey glyphs (red on hover) instead of white-on-grey tiles. */
.peoplemain.feauturedBanner .bio-hero .social-icons-attorney,
.peoplemain.feauturedBanner .bio-hero .social-icons {
	display: flex;
	align-items: center;
}

.peoplemain.feauturedBanner .bio-hero .social-icons-attorney img,
.peoplemain.feauturedBanner .bio-hero .social-icons img {
	width: auto !important;
	height: 22px !important;
	background: none !important;
	vertical-align: bottom;
}

.peoplemain.feauturedBanner .bio-hero img[src*="icons/bio/vcard"] {
	height: 24px !important;
}

.peoplemain.feauturedBanner .bio-hero img[src*="icons/bio/download"],
.peoplemain.feauturedBanner .bio-hero img[src*="icons/bio/folder"] {
	height: 20px !important;
}

.peoplemain.feauturedBanner .bio-hero img[src*="icons/bio/mail"] {
	height: 17px !important;
}

/* Phones: photo full width on top with the red rule under it, details below. */
@media (max-width: 767px) {
	.peoplemain.feauturedBanner .row.bio-hero {
		border-bottom: 0;
	}

	.peoplemain.feauturedBanner .bio-hero #profile-pick-mobile-container {
		float: none;
		width: 100%;
		height: auto !important;
		padding: 20px 0 0;
		border-bottom: 4px solid #eb0028;
		text-align: center;
	}

	.peoplemain.feauturedBanner .bio-hero #profile-pick-mobile-container .positionadjust {
		display: none;
	}

	/* inline-block hugs the photo, so the video play badge stays on its corner */
	.peoplemain.feauturedBanner .bio-hero #profile-pick-mobile {
		display: inline-block;
		position: relative;
		vertical-align: bottom;
		float: none !important;
		width: auto !important;
		height: auto !important;
		margin: 0;
		padding: 0;
	}

	.peoplemain.feauturedBanner .bio-hero .mobline #profile-pick-mobile img.img-mobile-attorney {
		display: block;
		float: none !important;
		width: auto !important;
		max-width: 100%;
		height: 300px !important;
		margin: 0 auto;
		padding: 0 !important;
		object-fit: cover;
	}

	.peoplemain.feauturedBanner .bio-hero > .col-xs-7.visible-xs,
	.peoplemain.feauturedBanner .bio-hero > .peoplepage.mangaeteam {
		float: none;
		width: 100%;
		padding: 0 0 28px;
	}

	.peoplemain.feauturedBanner .bio-hero > .col-xs-7.visible-xs .page-left,
	.peoplemain.feauturedBanner .bio-hero > .peoplepage.mangaeteam .page {
		/* the row bleeds 15px past each edge, so this lands the text 20px in */
		padding: 0 35px !important;
	}
}

/* LWM-1123 review round 2 (Mike, 10/20) */

/* Phones: whole square photo (no side clipping), 30px H1 name, even text sizes and spacing. */
@media (max-width: 767px) {
	.peoplemain.feauturedBanner .bio-hero .mobline #profile-pick-mobile img.img-mobile-attorney {
		height: auto !important;
		max-height: 340px;
		object-fit: contain;
	}

	.peoplemain.feauturedBanner .bio-hero h1.bio-name {
		font-size: 30px !important;
		line-height: 34px !important;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .sub-title,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .practices,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .practices li,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body .font-size-xl,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body label,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body a {
		font-size: 14px !important;
		line-height: 20px !important;
	}

	/* more air under the title block, less between the practice tags and the contact block */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .practices {
		margin-top: 12px;
		margin-bottom: 0;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .practices .list-freerole {
		margin-bottom: 0;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body {
		margin-top: 8px;
	}
}

/* Tablets: smaller text in the right column, larger photo. */
@media (min-width: 768px) and (max-width: 1024px) {
	.peoplemain.feauturedBanner .bio-hero h1.bio-name {
		font-size: 40px !important;
		line-height: 44px !important;
	}

	.peoplemain.feauturedBanner .bio-hero .peoplepage .sub-title,
	.peoplemain.feauturedBanner .bio-hero .peoplepage .practices,
	.peoplemain.feauturedBanner .bio-hero .peoplepage .practices li,
	.peoplemain.feauturedBanner .bio-hero .peoplepage .font-size-xl,
	.peoplemain.feauturedBanner .bio-hero .peoplepage label {
		font-size: 18px !important;
		line-height: 24px !important;
	}

	.peoplemain.feauturedBanner .bio-hero .peoplepage .social-icons-attorney,
	.peoplemain.feauturedBanner .bio-hero .peoplepage .social-icons {
		padding-top: 9px !important;
	}

	.peoplemain.feauturedBanner .bio-hero .peoplepage .practices a,
	.peoplemain.feauturedBanner .bio-hero .peoplepage .body a {
		font-size: 18px !important;
		line-height: 24px !important;
	}

	/* photo column: 30px gutter + 348px photo fits the 50% left half at 768px */
	.peoplemain.feauturedBanner .bio-hero .positionadjust {
		width: 30px !important;
	}

	.peoplemain.feauturedBanner .bio-hero #profile-pick {
		width: 348px !important;
		height: auto !important;
	}

	.peoplemain.feauturedBanner .bio-hero #profile-pick figure.noSpeedBump:not(.videoPanel) {
		width: 348px !important;
		height: 490px !important;
	}
}

/* Desktop and tablet, new square headshot: the photo column used to keep the old portrait
   height, so a shorter square photo floated above the red rule at some widths. The column now
   shrinks to the photo and is pinned to the bottom of the band. */
@media (min-width: 768px) {
	.peoplemain.feauturedBanner.has-new-headshot .bio-hero > .hidden-xs {
		display: flex;
		align-items: flex-end;
		align-self: flex-end;
	}

	.peoplemain.feauturedBanner.has-new-headshot .bio-hero > .hidden-xs > .positionadjust {
		float: none;
		flex: 0 0 auto;
		height: 0 !important;
	}

	.peoplemain.feauturedBanner.has-new-headshot .bio-hero #profile-pick {
		float: none;
		height: auto !important;
	}
}

/* LWM-1123 review round 3 (Mike, 10/21): phone only */
@media (max-width: 767px) {
	/* photo fills 90% of the width, never wider or taller than 400px */
	.peoplemain.feauturedBanner .bio-hero #profile-pick-mobile {
		display: block;
		width: 90% !important;
		max-width: 400px;
		margin: 0 auto;
	}

	.peoplemain.feauturedBanner .bio-hero .mobline #profile-pick-mobile img.img-mobile-attorney {
		width: 100% !important;
		/* style.min.css caps .img-mobile-attorney at 200x260 with !important, so these must be important too */
		max-width: 400px !important;
		max-height: 400px !important;
	}

	/* practice tags run on one line and wrap only when they must */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .practices .list-freerole > li {
		display: inline;
	}

	/* equal 12px between title block, practice tags and the contact block */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .practices {
		margin-top: 12px;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body {
		margin-top: 12px;
		padding-top: 0 !important;
		font-size: 14px !important;
		line-height: 20px !important;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body > .mb-10 {
		font-size: 14px !important;
		line-height: 20px !important;
	}

	/* contact block uses the title block's size and line height; T:/F: match the numbers */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .body .mb-10,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #phone-mobile {
		margin-bottom: 0;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #phone-mobile,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #phone-mobile .text-red,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #email-attorney-mobile,
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #email-attorney-mobile a {
		font-size: 14px !important;
		line-height: 20px !important;
	}

	/* telephone and fax sit side by side */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #phone-mobile .d-block-m {
		display: inline-block;
		margin: 0 14px 0 0;
		font-size: 14px;
		line-height: 20px;
	}

	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #email-attorney-mobile {
		display: block;
	}
}

/* LWM-1123 review round 4 (Mike, 10/22): phone only */
@media (max-width: 767px) {
	/* low.css caps .ellipsis at 100px under 970px; the full address must show */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs #email-attorney-mobile {
		width: auto;
		max-width: 100%;
		overflow: visible;
		text-overflow: clip;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	/* all four icons (vCard, download, mail, folder) fit on one row */
	.peoplemain.feauturedBanner .bio-hero .col-xs-7.visible-xs .social-icons.w-112-p {
		width: auto !important;
	}
}

/* Phones: even space between the icons. The old per-icon margins (mr-10 / mr-20) were uneven, so
   they are cleared and a single gap spaces every icon. */
@media (max-width: 767px) {
	.peoplemain.feauturedBanner .bio-hero .social-icons,
	.peoplemain.feauturedBanner .bio-hero .social-icons-attorney {
		gap: 28px;
	}

	.peoplemain.feauturedBanner .bio-hero .social-icons img,
	.peoplemain.feauturedBanner .bio-hero .social-icons-attorney img {
		margin-right: 0 !important;
	}

	/* the grey glyph was position:absolute (so the red hover glyph could sit on it), which left the
	   items zero-width; keep it in flow so each item is as wide as its icon */
	.peoplemain.feauturedBanner .bio-hero .social-icons img:not(.hover),
	.peoplemain.feauturedBanner .bio-hero .social-icons-attorney img:not(.hover) {
		position: static !important;
	}

	/* the old items are fixed 25-30px wide with 30px of left padding on the link, which made the
	   spaces between icons uneven; let each item hug its icon */
	.peoplemain.feauturedBanner .bio-hero .social-icons > .item,
	.peoplemain.feauturedBanner .bio-hero .social-icons > .item1,
	.peoplemain.feauturedBanner .bio-hero .social-icons .item2,
	.peoplemain.feauturedBanner .bio-hero .social-icons-attorney > .item,
	.peoplemain.feauturedBanner .bio-hero .social-icons-attorney > .item1 {
		width: max-content !important;
		min-width: 0 !important;
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	.peoplemain.feauturedBanner .bio-hero .social-icons a,
	.peoplemain.feauturedBanner .bio-hero .social-icons-attorney a {
		padding: 0 !important;
		margin: 0 !important;
		min-width: 0 !important;
		width: max-content !important;
		float: none !important;
	}
}

/* LWM-1123 review round 6 (client, 10/28): desktop placement from the header, at every width.
   The header container is 964px / 1060px / 1100px wide depending on the viewport. Measured from the
   centre of the grey band (which is the centre of the page): the red LS logo box ends at
   --bio-logo, and the search box starts at --bio-search.
   - The photo container starts at the right edge of the red LS box.
   - The name and contact text start on the left edge of the search box.
   - The icon row is pinned near the bottom of the grey band, with room above it for the contact text. */
@media (min-width: 1024px) {
	.peoplemain.feauturedBanner .bio-hero {
		--bio-logo: -400px;
		--bio-search: -4px;
		--bio-text-pad: 0px;
		--bio-adj: 0px;
	}

	/* a bio without a video has a band 30px wider than the video one (which is held to 100% of the
	   container), so its centre sits 15px further right */
	.peoplemain.feauturedBanner .bio-hero:not(.peopleVideo) {
		--bio-adj: -15px;
	}

	/* photo column: starts at the logo edge (a percentage margin is measured on the band, so it
	   follows the page centre) and ends at the search box edge, where the text column begins */
	.peoplemain.feauturedBanner .bio-hero > .hidden-xs {
		display: flex;
		align-items: flex-end;
		align-self: flex-end;
		flex: 0 0 auto;
		float: none;
		margin-left: calc(50% + var(--bio-logo) + var(--bio-adj));
		width: calc(var(--bio-search) - var(--bio-logo));
		min-width: max-content;
	}

	.peoplemain.feauturedBanner .bio-hero > .hidden-xs > .positionadjust {
		display: none;
	}

	.peoplemain.feauturedBanner .bio-hero > .hidden-xs > #profile-pick {
		float: none;
		flex: 0 0 auto;
		left: 0;
		right: auto;
		height: auto !important;
	}

	.peoplemain.feauturedBanner .bio-hero > .peoplepage {
		position: relative;
		align-self: stretch;
		flex: 1 1 0;
		min-width: 0;
		width: auto;
		float: none;
		margin-left: 0;
		padding-left: var(--bio-text-pad) !important;
		padding-bottom: 92px;
	}

	/* the template's own 53px inner padding would push the text past the search box edge */
	.peoplemain.feauturedBanner .bio-hero > .peoplepage .page {
		padding-left: 0 !important;
	}

	.peoplemain.feauturedBanner .bio-hero > .peoplepage .social-icons-attorney {
		position: absolute;
		bottom: 18px;
		margin-top: 0;
	}

	/* While the video plays the text column is hidden; take it out of the row so the player
	   keeps its width, and leave headroom in the band for the close (X) button above the player. */
	.peoplemain.feauturedBanner .bio-hero.imageExpand > .peoplepage {
		position: absolute;
	}

	.peoplemain.feauturedBanner .bio-hero.imageExpand {
		padding-top: 56px;
	}

	.peoplemain.feauturedBanner .bio-hero.imageExpand > .hidden-xs {
		width: auto;
		min-width: 0;
	}
}

@media (min-width: 1280px) {
	.peoplemain.feauturedBanner .bio-hero {
		--bio-logo: -423px;
		--bio-search: 52px;
	}
}

@media (min-width: 1440px) {
	.peoplemain.feauturedBanner .bio-hero {
		--bio-logo: -443px;
		--bio-search: 72px;
	}
}

/* Tablet: more air between the last line of contact text and the icon row. */
@media (min-width: 768px) and (max-width: 1023px) {
	.peoplemain.feauturedBanner .bio-hero .peoplepage .social-icons-attorney,
	.peoplemain.feauturedBanner .bio-hero .peoplepage .social-icons {
		margin-top: 18px;
	}
}

/* Desktop and tablet: title block, practice links and contact block are 16px apart, measured from
   text to text (client, 10/30; it was 10/28 that asked for the two gaps to match). The contact
   block starts 17px below the top of .body, so it gets 16px of padding-top (same as the practices
   margin-top) and is pulled up by 23px (-4px for the practices line box) to land on the same 16px. */
@media (min-width: 768px) {
	.peoplemain.feauturedBanner .bio-hero > .peoplepage .practices {
		margin-top: 16px;
	}

	.peoplemain.feauturedBanner .bio-hero > .peoplepage .body {
		padding-top: 16px !important;
		margin-top: -23px;
	}
}

/* Tablet: 18px / 24px text, so the same 16px text-to-text gap needs 4px more above the practices
   and 1px more pull-up on the contact block. */
@media (min-width: 768px) and (max-width: 1023px) {
	.peoplemain.feauturedBanner .bio-hero > .peoplepage .practices {
		margin-top: 20px;
	}

	.peoplemain.feauturedBanner .bio-hero > .peoplepage .body {
		padding-top: 16px !important;
		margin-top: -24px;
	}
}

/* Desktop: the whole text block stays pinned to the bottom of the grey panel (above the icon row),
   so a bio with less text gets the extra room above the name instead (client, 10/30). */
@media (min-width: 1024px) {
	.peoplemain.feauturedBanner .bio-hero:not(.imageExpand) > .peoplepage {
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		/* the panel is align-items: flex-end for the row layout; in a column that pushes the text to the right edge */
		align-items: stretch;
	}
}

/* Play button: a red ring and a stronger fill so it reads against any photo (client, 10/28;
   the ring and opacity are the proposed design, still to be confirmed by the client). */
.peoplemain.feauturedBanner .peopleVideo .filter-img .videoPanel:after {
	outline: 3px solid #eb0028;
	outline-offset: -2px;
	border-radius: 50%;
	opacity: 0.95;
}

@media (max-width: 767px) {
	/* same ring on the phone badge, at a 44px tap size */
	.peoplemain.feauturedBanner .row.peopleVideo .mobline #profile-pick-mobile:after {
		width: 44px;
		height: 44px;
		outline: 3px solid #eb0028;
		outline-offset: -2px;
		border-radius: 50%;
		opacity: 0.95;
	}

	/* While the video plays: the grey band runs edge to edge (the row's 100% width stopped it 30px
	   short of the right edge) and has room above the player for the close (X) button. */
	.peoplemain.feauturedBanner .row.peopleVideo.bio-hero.imageExpand {
		display: block;
		width: auto;
		padding-top: 24px;
	}

	/* The player wrapper only holds floats, so it collapsed to 0px and the name and contact text
	   (the next block) was laid over the player, taking every tap meant for pause/play. */
	.peoplemain.feauturedBanner .row.peopleVideo.bio-hero.imageExpand > .hidden-xs::after {
		content: "";
		display: block;
		clear: both;
	}
}