/* ==========================================================================
   Sollus Team — sollus-team.css
   Brand tokens from the live Elementor kit: orange #ffa500, navy #1a365d,
   warm #fdf7f4, Work Sans. Fonts are already loaded by the theme.
   ========================================================================== */

.sollus-team,
.sollus-profile,
.sollus-review {
	--st-orange: #ffa500;
	--st-navy:   #1a365d;
	--st-navy-2: #224679;
	--st-body:   #696f8c;
	--st-warm:   #fdf7f4;
	--st-card:   #fcf9f5; /* measured off the live About page card */
	--st-gray:   #f6f5f2;
	--st-line:   #e6e8f0;
	--st-sans:   'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	font-family: var(--st-sans);
	color: var(--st-body);
	box-sizing: border-box;
}
.sollus-team *, .sollus-profile *, .sollus-review * { box-sizing: inherit; }

/* ---------- Grid ---------- */

.sollus-team { max-width: 1180px; margin: 0 auto; padding: 0 20px; }

.sollus-team-heading {
	font-family: var(--st-sans); font-weight: 600; color: var(--st-navy);
	font-size: clamp(24px, 3vw, 34px); text-align: center; margin: 0 0 32px;
}

/* Measured on the live About page at 1440px: 4 across, 285px cards, 20px
   between columns and 85px between rows. The row gap is what gives the grid
   its air — columns tight, rows generous. */
.sollus-team-grid {
	display: grid;
	grid-template-columns: repeat(var(--sollus-team-cols, 4), 1fr);
	column-gap: 20px;
	row-gap: 85px;
}

/* Measured off the live About page card so the two are indistinguishable:
   #fcf9f5 on a 1px #e6e8f0 border, 20px radius, photo flush to the top edge,
   40px of breathing room under the text. */
/* overflow stays VISIBLE, which is what the live card does. The photo is flush
   to the top edge, so its square corners paint over the card's rounded ones —
   square photo corners above a 20px-rounded card. Clipping the card instead
   rounds the photo corners too, which is the same 20px but a different
   silhouette, and the top of the card is where the eye lands. */
.sollus-team-card {
	display: block; text-decoration: none; text-align: center;
	background: var(--st-card); border: 1px solid var(--st-line);
	border-radius: 20px; padding: 0 0 40px; overflow: visible;
}

/* Only cards that lead somewhere get affordances — a member without a profile
   must not look clickable, which is also why there is no cursor change. */
.sollus-team-card.has-profile {
	transition: transform .2s cubic-bezier(.455,.03,.515,.955);
}
/* Lift only. No orange border and no shadow on hover: the live cards use a
   plain float, and the brief was explicitly "less is more" — no orange
   borders, nothing extra going on. */
.sollus-team-card.has-profile:hover {
	transform: translateY(-6px);
}
.sollus-team-card.has-profile:focus-visible {
	outline: 2px solid var(--st-orange); outline-offset: 4px;
}

/* Portrait 4:5 with square corners, matching the live About page.

   Every photo rule below is qualified with its wrapper class (.sollus-team,
   .sollus-review, .sollus-profile). The grid and the reviewed-by byline often
   sit inside Elementor pages, and Elementor ships
   ".elementor img { height:auto; max-width:100%; border-radius:0 }". A bare
   ".sollus-team-photo" is one class against a class + element, so it lost:
   photos came out as uncropped rectangles at whatever size Elementor chose. */
.sollus-team .sollus-team-photo {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: center top; /* keeps faces in frame on a tall crop */
	border-radius: 0;
	margin: 0 0 33px;
	background: var(--st-gray);
}

.sollus-team-name { font-size: 22px; line-height: 1.44; font-weight: 600; color: var(--st-navy); margin: 0 14px 10px; }
.sollus-team-role { font-size: 16px; line-height: 1.75; margin: 0 14px; color: var(--st-body); }
.sollus-team-more {
	display: inline-block; margin-top: 12px; font-size: 14px; font-weight: 600;
	color: var(--st-navy-2); padding-bottom: 2px;
}

/* Inside a location page, which already provides width and gutters. */
.sollus-team--embedded { max-width: none; padding: 0; margin-top: 24px; }

/* ---------- Reviewed-by byline ---------- */

.sollus-review {
	display: flex; align-items: center; gap: 16px;
	background: var(--st-warm); border: 1px solid var(--st-line);
	border-left: 3px solid var(--st-orange);
	border-radius: 10px; padding: 16px 20px; margin: 0 0 32px;
}
/* A small round avatar reads as a byline; qualified for the same Elementor reason. */
.sollus-review .sollus-review-photo {
	width: 56px; height: 56px; max-width: none; border-radius: 50%; object-fit: cover;
	flex: none; background: var(--st-gray);
}
.sollus-review-text { min-width: 0; }
.sollus-review p { margin: 0; }
.sollus-review-label {
	font-size: 11.5px; font-weight: 600; letter-spacing: .12em;
	text-transform: uppercase; color: var(--st-orange); margin-bottom: 3px !important;
}
.sollus-review-who { font-size: 16px; color: var(--st-navy); font-weight: 600; }
/* No underline, here or anywhere else in these plugins: house style. Links are
   marked by weight and colour instead, which is still a non-colour cue, and
   they shift colour on hover. */
.sollus-review-name { color: var(--st-navy); text-decoration: none; font-weight: 700; }
.sollus-review-name:hover { color: var(--st-navy-2); }
.sollus-review-role { font-weight: 400; color: var(--st-body); }
.sollus-review-role::before { content: " · "; color: var(--st-body); }
.sollus-review-date { font-size: 13.5px; color: var(--st-body); margin-top: 3px !important; }

/* ---------- Profile page ---------- */

.sollus-profile-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Warm band behind the header, so the page opens with the brand rather than
   with a photo floating on white. */
/* The band sat flush under the nav while having 48px of white below it before
   the body text. Equal space on both sides of the band now: 48px above, 48px
   below. The internal 36px keeps the breadcrumb off the band's own edge. */
.sollus-profile-hero {
	background: var(--st-card);
	border-bottom: 1px solid var(--st-line);
	padding: 36px 0;
	margin: 48px 0;
}

.sollus-profile-crumb { font-size: 13.5px; padding: 0 0 26px; color: var(--st-body); }
.sollus-profile-crumb a { color: var(--st-navy-2); text-decoration: none; }
.sollus-profile-crumb a:hover { color: var(--st-navy); }
.sollus-profile-crumb span[aria-hidden] { margin: 0 8px; color: #b9bed0; }

.sollus-profile-head { display: flex; align-items: center; gap: 44px; }

.sollus-profile-figure { flex: none; width: 300px; }
.sollus-profile .sollus-profile-photo {
	display: block; width: 100%; height: auto; max-width: none;
	aspect-ratio: 4 / 5; object-fit: cover; object-position: center top;
	border-radius: 20px; background: var(--st-gray);
}

.sollus-profile-intro { min-width: 0; }
.sollus-profile-eyebrow {
	font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
	color: var(--st-orange); margin: 0 0 10px;
}
.sollus-profile-intro h1 {
	font-family: var(--st-sans); color: var(--st-navy); font-weight: 600;
	font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin: 0;
}
.sollus-profile-creds { display: block; font-size: .5em; font-weight: 500; color: var(--st-body); margin-top: 8px; letter-spacing: .04em; }

.sollus-profile-facts {
	display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 20px 0 0; padding: 0;
}
.sollus-profile-facts li {
	font-size: 13.5px; color: var(--st-navy-2); background: #fff;
	border: 1px solid var(--st-line); border-radius: 999px; padding: 6px 14px;
}

.sollus-profile-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
/* Theme link rules outrank a single class, so the colour is set on the anchor
   itself rather than inherited — the same trap that made the location buttons
   unreadable. */
.sollus-profile .sollus-btn {
	display: inline-block; font-size: 15px; font-weight: 600; text-decoration: none;
	border-radius: 999px; padding: 13px 26px; border: 1px solid transparent; line-height: 1;
	transition: transform .15s ease, background .15s ease;
}
.sollus-profile a.sollus-btn--primary { background: var(--st-orange); color: #1a1a1a; }
.sollus-profile a.sollus-btn--primary:hover { transform: translateY(-2px); }
.sollus-profile a.sollus-btn--ghost { background: #fff; color: var(--st-navy); border-color: var(--st-line); }
.sollus-profile a.sollus-btn--ghost:hover { border-color: var(--st-orange); }

.sollus-profile-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 48px; align-items: start; }

.sollus-profile-main { min-width: 0; }

.sollus-profile-bio { font-size: 17px; line-height: 1.75; color: #4a5068; }
.sollus-profile-bio p { margin: 0 0 18px; }
.sollus-profile-bio h2, .sollus-profile-bio h3 { font-family: var(--st-sans); color: var(--st-navy); }

.sollus-profile-reviewed { margin-top: 44px; border-top: 1px solid var(--st-line); padding-top: 32px; }
.sollus-profile-reviewed h2 { font-family: var(--st-sans); color: var(--st-navy); font-size: 22px; font-weight: 600; margin: 0 0 18px; }
.sollus-profile-reviewed ul { list-style: none; margin: 0; padding: 0; }
.sollus-profile-reviewed li {
	display: flex; justify-content: space-between; align-items: baseline; gap: 20px;
	padding: 13px 0; border-bottom: 1px solid var(--st-line);
}
.sollus-profile-reviewed a { color: var(--st-navy); font-weight: 600; text-decoration: none; }
.sollus-profile-reviewed a:hover { color: var(--st-orange); }
.sollus-profile-reviewed time { font-size: 13.5px; color: var(--st-body); white-space: nowrap; }

.sollus-profile-aside { position: sticky; top: 24px; }
.sollus-profile-card {
	background: var(--st-card); border: 1px solid var(--st-line);
	border-radius: 20px; padding: 26px 26px 30px;
}
.sollus-profile-card h2 {
	font-family: var(--st-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em;
	text-transform: uppercase; color: var(--st-orange); margin: 0 0 10px;
}
.sollus-profile-card h2 + * { margin-top: 0; }
.sollus-profile-card h2:not(:first-child) { margin-top: 24px; }
.sollus-profile-card ul { list-style: none; margin: 0; padding: 0; }
.sollus-profile-card li { font-size: 15px; line-height: 1.6; color: #4a5068; margin-bottom: 7px; }
.sollus-profile-links a { color: var(--st-navy); font-weight: 600; text-decoration: none; }
.sollus-profile-links a:hover { color: var(--st-orange); }
.sollus-profile-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.sollus-profile-tags li {
	margin: 0; font-size: 13px; background: #fff; border: 1px solid var(--st-line);
	border-radius: 999px; padding: 5px 12px;
}
.sollus-profile-contact { margin: 22px 0 0; font-size: 15px; }
.sollus-profile-contact a { color: var(--st-navy-2); font-weight: 600; }

/* Shared section heading, used by the plugin layout and by the Elementor
   widgets so both routes look like the same page. */
.sollus-profile-section-title {
	font-family: var(--st-sans); color: var(--st-navy);
	font-size: 22px; font-weight: 600; margin: 44px 0 16px;
}

.sollus-profile-lede {
	font-size: 18px; line-height: 1.65; color: #4a5068; margin: 18px 0 0; max-width: 56ch;
}

.sollus-profile-video { margin: 0; border-radius: 16px; overflow: hidden; background: var(--st-gray); }
/* oEmbed returns a fixed-size iframe; this makes it behave responsively. */
.sollus-profile-video iframe,
.sollus-profile-video video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
.sollus-profile-approach { margin-top: 8px; }

.sollus-profile-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.sollus-profile-list li { font-size: 15px; line-height: 1.6; color: #4a5068; }
.sollus-profile-list a { color: var(--st-navy); font-weight: 600; text-decoration: none; }
.sollus-profile-list a:hover { color: var(--st-orange); }
.sollus-profile-list--tags { flex-direction: row; flex-wrap: wrap; gap: 7px; }
.sollus-profile-list--tags li {
	background: #fff; border: 1px solid var(--st-line); border-radius: 999px; padding: 5px 12px; font-size: 13px;
}

/* The widget version carries its own wrapper, so it must not inherit the
   full-page hero padding — Elementor controls the spacing instead. */
.sollus-profile--widget { padding: 0; }
/* Elementor mode: the template controls every bit of spacing, so the wrapper
   stays out of the way. */
.sollus-profile--elementor { display: block; }
.sollus-profile-videowrap { margin-top: 8px; }
.sollus-profile--widget .sollus-profile-head { gap: 44px; }
.sollus-profile-name { font-family: var(--st-sans); color: var(--st-navy); font-weight: 600; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; margin: 0; }

.sollus-profile-more { margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--st-line); }
.sollus-profile-more .sollus-team-heading { font-size: 24px; margin-bottom: 26px; }

.sollus-profile-back { margin: 48px 0 60px; }
.sollus-profile-back a { color: var(--st-navy-2); font-weight: 600; text-decoration: none; }
.sollus-profile-back a:hover { color: var(--st-orange); }

/* The theme ships an "underline-link-effect" body class that draws a sliding
   underline under links. It must not reach these components. */
.sollus-team a, .sollus-profile a, .sollus-review a { text-decoration: none; }
.sollus-team a::after, .sollus-profile a::after, .sollus-review a::after { content: none; }

/* ---------- Theme parity ----------
   On an ordinary page the theme's footer computes position:relative; on the
   team post type it computes static, which is why the footer sat differently
   on a profile page. Measured on staging: /how-does-tms-work/ relative vs
   /team/elaine-parenti/ static. This restores parity without touching the
   theme. If the theme has its own per-page footer setting, that still wins. */
body.single-sollus_team_member #page { position: relative; z-index: 0; }
body.single-sollus_team_member .site-footer.sticky-footer { position: relative; }
/* The header has the same problem as the footer: it stays position:sticky on
   these pages where every other page on the site computes fixed. */
body.single-sollus_team_member .site-header.sticky-header { position: fixed; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
	.sollus-team-grid { grid-template-columns: repeat(3, 1fr); row-gap: 56px; }
	.sollus-profile-body { grid-template-columns: 1fr; gap: 36px; }
	.sollus-profile-aside { position: static; }
	.sollus-profile-head { gap: 32px; }
	.sollus-profile-figure { width: 240px; }
}
@media (max-width: 700px) {
	.sollus-team-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
	.sollus-profile-head { flex-direction: column; align-items: center; text-align: center; gap: 24px; }
	.sollus-profile-figure { width: 220px; }
	.sollus-profile-facts, .sollus-profile-actions { justify-content: center; }
	.sollus-profile-hero { padding-bottom: 36px; margin: 32px 0; }
	.sollus-profile-more .sollus-team-grid { grid-template-columns: repeat(2, 1fr); }
	.sollus-review { flex-direction: column; text-align: center; }
}
@media (max-width: 420px) {
	.sollus-team-grid { grid-template-columns: 1fr; row-gap: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.sollus-team-card.has-profile { transition: none; }
	.sollus-team-card.has-profile:hover { transform: none; }
	.sollus-team .sollus-team-photo { transition: none; transform: none; }
}