/* --------------------------------------------------------------------------
   About page - Meet the Team: sort bar, group headings and location map.
   Loaded by page-templates/about-page.php; the markup is built by
   js/team-sort.js. Ported from the Storyland Studios about page and restyled
   to match this theme.
   -------------------------------------------------------------------------- */

/* sort bar - sits directly under the "Meet the Team" heading */
.leadershipContent .pjs-sort-bar {display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin:-25px 0 40px;}
	.leadershipContent .pjs-sort-bar .sort-lbl {font-size:14px; line-height:14px; font-weight:700; text-transform:uppercase; letter-spacing:2pt; color:#2b2b2a; margin-right:6px;}
	.leadershipContent .pjs-sort-bar button {font-family:'proxima-nova',Arial,Helvetica,sans-serif; font-size:14px; line-height:14px; font-weight:700; text-transform:uppercase; letter-spacing:1px; padding:11px 20px; margin:0; border:2px solid var(--main-color); border-radius:4px; background:#fff; color:var(--main-color); cursor:pointer; -webkit-appearance:none; appearance:none; transition:all .3s ease;}
	.leadershipContent .pjs-sort-bar button:hover,
	.leadershipContent .pjs-sort-bar button.active {background:var(--main-color); color:#fff;}
	/* Alphabetical - the label swaps between "Alphabetical", "A-Z First Name"
	   and "A-Z Last Name"; team-sort.js fades it and eases the width between them */
	.leadershipContent .pjs-sort-bar button.pjs-sort-alpha {box-sizing:border-box; white-space:nowrap; overflow:hidden; transition:all .3s ease, width .2s ease;}
		.leadershipContent .pjs-sort-bar .sort-alpha-label {display:inline-flex; align-items:center; gap:7px; vertical-align:top; transition:opacity .12s ease;}
		.leadershipContent .pjs-sort-bar .is-swapping .sort-alpha-label {opacity:0;}
		.leadershipContent .pjs-sort-bar .sort-alpha-label svg {flex:none; width:14px; height:14px;}
	.leadershipContent .pjs-sort-bar .pjs-sort-status {width:100%; height:0; margin:0; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;}

/* group headings - span the full width of the card grid */
.leadershipContent .staff-grid .pjs-group-title {grid-column:1 / -1; margin:35px 0 5px; padding-bottom:12px; border-bottom:2px solid var(--main-color); font-size:30px; line-height:32px; font-weight:700; color:#2b2b2a; text-align:left;}
.leadershipContent .staff-grid .pjs-group-title:first-child {margin-top:0;}
.leadershipContent .staff-grid .member.pjs-filtered-out {display:none;}

/* names - in Alphabetical, the half of the name being sorted on is bold and the
   rest normal weight. team-sort.js wraps them in .pjs-name-first / -last. */
.leadershipContent .staff-grid.pjs-alpha-first .pjs-name,
.leadershipContent .staff-grid.pjs-alpha-last .pjs-name {font-weight:400;}
.leadershipContent .staff-grid.pjs-alpha-first .pjs-name-first,
.leadershipContent .staff-grid.pjs-alpha-last .pjs-name-last {font-weight:700;}

/* location map - shown under the sort bar in the Location mode only. The SVG
   is images/team-location-map.svg; team-sort.js highlights the regions that
   have people in them and adds the count badges. */
.leadershipContent .pjs-team-map {margin:0 0 45px;}
.leadershipContent .pjs-team-map[hidden] {display:none;}
	.leadershipContent .pjs-map-figure {position:relative; max-width:1040px; margin:0 auto;}
		.leadershipContent .pjs-map-svg {display:block; width:100%; height:auto;}
		.leadershipContent .pjs-map-region {fill:#e6e4e0; stroke:#fff; stroke-width:1; stroke-linejoin:round; transition:fill .3s ease;}
		.leadershipContent .pjs-map-region.has-team {fill:#f3b885; cursor:pointer;}
		.leadershipContent .pjs-team-map.is-filtered .pjs-map-region.has-team {fill:#f8d9be;}
		.leadershipContent .pjs-map-region.has-team.is-hover,
		.leadershipContent .pjs-team-map.is-filtered .pjs-map-region.has-team.is-hover,
		.leadershipContent .pjs-team-map.is-filtered .pjs-map-region.has-team.is-selected {fill:var(--main-color);}
		.leadershipContent .pjs-map-context {fill:#f0eeeb; stroke:#fff; stroke-width:1;}
		.leadershipContent .pjs-map-inset-frame {fill:#fff; stroke:#d6d3ce; stroke-width:1.5; stroke-dasharray:5 5;}
		.leadershipContent .pjs-map-inset-lbl {font-family:'proxima-nova',Arial,Helvetica,sans-serif; font-size:14px; font-weight:700; letter-spacing:2pt; text-transform:uppercase; fill:#2b2b2a;}
		.leadershipContent .pjs-map-badges {pointer-events:none;}
			.leadershipContent .pjs-map-badges circle {fill:#2b2b2a; stroke:#fff; stroke-width:2;}
			.leadershipContent .pjs-map-badges text {fill:#fff; font-family:'proxima-nova',Arial,Helvetica,sans-serif; font-size:14px; font-weight:700;}
		.leadershipContent .pjs-map-tip {position:absolute; z-index:2; transform:translate(-50%, calc(-100% - 14px)); padding:6px 12px; border-radius:4px; background:#2b2b2a; color:#fff; font-size:14px; line-height:18px; font-weight:700; white-space:nowrap; pointer-events:none;}
		.leadershipContent .pjs-map-tip[hidden] {display:none;}
	.leadershipContent .pjs-map-chips {display:flex; flex-wrap:wrap; gap:8px; margin-top:20px;}
		.leadershipContent .pjs-map-chips button {font-family:'proxima-nova',Arial,Helvetica,sans-serif; font-size:14px; line-height:14px; font-weight:700; padding:8px 14px; margin:0; border:1px solid #cfcbc5; border-radius:4px; background:#fff; color:#2b2b2a; cursor:pointer; -webkit-appearance:none; appearance:none; transition:all .3s ease;}
			.leadershipContent .pjs-map-chips button .count {color:var(--main-color); font-weight:400; margin-left:6px;}
		.leadershipContent .pjs-map-chips button:hover,
		.leadershipContent .pjs-map-chips button.is-hover {border-color:var(--main-color); color:var(--main-color);}
		.leadershipContent .pjs-map-chips button.active {background:var(--main-color); border-color:var(--main-color); color:#fff;}
			.leadershipContent .pjs-map-chips button.active .count {color:#fff;}

/* touch tablets (iPad, Surface Pro, Android) - two across in portrait, four in
   landscape, switching live on rotate. any-pointer keeps a Surface with its
   keyboard/trackpad attached in here. The min-width leaves phones and narrow
   split-screen windows on the normal rules. */
@media (any-pointer: coarse) and (min-width: 700px) and (orientation: portrait) {
	.leadershipContent .staff-grid {grid-template-columns:repeat(2, 1fr);}
}
@media (any-pointer: coarse) and (min-width: 700px) and (orientation: landscape) {
	.leadershipContent .staff-grid {grid-template-columns:repeat(4, 1fr);}
}

@media (max-width: 920px) {
	.leadershipContent .pjs-sort-bar {margin-bottom:30px;}
	.leadershipContent .staff-grid .pjs-group-title {font-size:24px; line-height:26px;}
	.leadershipContent .pjs-team-map {margin-bottom:35px;}
		/* too small to read at this width - the location buttons carry the counts */
		.leadershipContent .pjs-map-badges {display:none;}
		.leadershipContent .pjs-map-inset-lbl {font-size:20px; letter-spacing:0.02em;}
}
@media (max-width: 520px) {
	.leadershipContent .pjs-sort-bar {gap:8px;}
		.leadershipContent .pjs-sort-bar .sort-lbl {width:100%;}
		.leadershipContent .pjs-sort-bar button {font-size:13px; padding:10px 14px;}
	.leadershipContent .staff-grid .pjs-group-title {font-size:22px; line-height:24px;}
}