/* =========================================================
   Home page — "Meet our key people" and "From first pour to neighborhood
   favorite" sections, rebuilt from Elementor HTML widgets into native
   Elementor Containers + Heading / Text Editor / Image widgets (post 32272).

   Same conventions as sections-elementor.css / discover-category-elementor.css:
     - CONTAINERS take Elementor's "css_classes" field; WIDGETS take "_css_classes".
       The class names are the same ones the old HTML used (.team, .team-card,
       .team-photos, .team-info, .journey-pin, .journey-track, .journey-item,
       .section-head, .eyebrow, .section-title, .reveal ...), so the design rules
       in home-base.css / home-plate.css and the GSAP hooks in home-animations.js
       (.reveal fade-up, .journey-track pinned scrub) keep working untouched.
     - This file only (1) neutralises Elementor's container defaults so the
       original layouts show through, and (2) bridges the extra wrapper divs
       Elementor puts around headings / images / text.
     - Spacing is routed through Elementor's own custom properties
       (--padding-*, --margin-*, --row-gap / --column-gap) with the defaults set at
       low specificity, so a value typed into the editor (Layout > Padding / Gaps,
       Advanced > Margin) still wins: Elementor prints those per element at higher
       specificity. Colours / fonts / weights are set on the widgets themselves,
       so the client changes them from each widget's Style tab.
     - Elementor's own CSS zeroes a widget's bottom margin inside a container at
       (0,3,0) — `.e-con .elementor-widget.elementor-widget { margin-block-end: 0 }` —
       so the design's "margin-bottom" gaps are expressed as margin-TOP on the
       following widget instead (that side is left alone by Elementor).
     - widget-heading.css sets line-height:1 on .elementor-heading-title, so the
       type rules below target the heading tag itself, not its wrapper class.
   ========================================================= */

/* ---------- Section shells: <section class="section team|journey-pin"> ---------- */
.e-con.team,
.e-con.journey-pin {
	display: block; width: 100%; max-width: none;
	--margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0;
	--padding-left: 0; --padding-right: 0;
	--padding-top: var(--section-pad); --padding-bottom: var(--section-pad);
}
.e-con.journey-pin { overflow: hidden; }
/* Same rhythm tweaks home-plate.css gives the old <section class="team"> */
@media (min-width: 768px) { .e-con.team { --padding-bottom: calc(var(--section-pad) - 40px); } }
@media (max-width: 767px) { .e-con.team { --padding-top: calc(var(--section-pad) + 20px); --padding-bottom: calc(var(--section-pad) - 20px); } }
/* home-plate.css sets the section padding as a plain property; read it back from the
   variables so a value typed into the editor's Layout > Padding still wins. */
.theme-plate .e-con.team,
.theme-plate .e-con.journey-pin {
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
	margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
}

/* ---------- Inner container resets ----------
   :where() keeps this at (0,1,0) so the per-container defaults below (.e-con.team-card,
   .e-con.journey-item, ... at (0,2,0)) and anything typed into the editor can override it. */
:where(.e-con.team, .e-con.journey-pin) .e-con {
	--padding-top: 0; --padding-right: 0; --padding-bottom: 0; --padding-left: 0;
	--margin-top: 0; --margin-right: 0; --margin-bottom: 0; --margin-left: 0;
	--gap: 0; --row-gap: 0; --column-gap: 0;
	max-width: none;
}

/* ---------- .container (same box as the theme's .container inside .theme-plate) ---------- */
.e-con.team > .e-con.container,
.e-con.journey-pin > .e-con.container {
	display: block; width: 100%; max-width: 1400px; margin-inline: auto; padding-inline: 20px;
}
@media (min-width: 768px)  { .e-con.team > .e-con.container, .e-con.journey-pin > .e-con.container { padding-inline: 40px; } }
@media (min-width: 1280px) { .e-con.team > .e-con.container, .e-con.journey-pin > .e-con.container { padding-inline: 24px; } }

/* ---------- Section head: eyebrow / title / lead ---------- */
.e-con.section-head { width: 100%; max-width: 640px; --margin-bottom: var(--head-gap); }
.theme-plate .e-con.team .e-con.section-head,
.theme-plate .e-con.journey-pin .e-con.section-head { margin-bottom: var(--margin-bottom); }
/* eyebrow → title gap (was margin-bottom:14px on the old <span class="eyebrow">) */
.section-head .section-title.elementor-widget { margin-top: 14px; }
.team .section-title .elementor-heading-title,
.journey-pin .section-title .elementor-heading-title {
	font-size: clamp(1.9rem, 4.5vw, 3.1rem); line-height: 1.12; font-weight: 600;
}
/* lead paragraph: .team .lead (home-base.css) keeps margin-top:16px; its 560px max-width
   is repeated here because Elementor's `.elementor.elementor .e-con > .elementor-widget
   { max-width: 100% }` (0,4,0) outranks the theme rule. Opacity is dropped because the
   fade now lives in the widget's Text Color alpha. */
.e-con.team .e-con.section-head .lead.elementor-widget { opacity: 1; max-width: 560px; }
.team .lead p { margin: 0; }

/* ---------- Team card (photo column + info column) ---------- */
.e-con.team-card {
	display: grid; grid-template-columns: 1fr; width: 100%;
	--row-gap: 32px; --column-gap: 32px;
	--padding-top: clamp(24px, 4vw, 44px); --padding-right: clamp(24px, 4vw, 44px);
	--padding-bottom: clamp(24px, 4vw, 44px); --padding-left: clamp(24px, 4vw, 44px);
	--border-radius: var(--radius-lg, 24px);
	gap: var(--row-gap) var(--column-gap);
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
	margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
	border-radius: var(--border-radius);
	background: var(--card-bg); border: 1px solid var(--card-border, transparent);
}
@media (min-width: 860px) { .e-con.team-card { grid-template-columns: 300px 1fr; align-items: center; --row-gap: 50px; --column-gap: 50px; } }
@media (max-width: 767px) {
	.e-con.team-card {
		--row-gap: 20px; --column-gap: 20px;
		--padding-top: 20px; --padding-right: 20px; --padding-bottom: 20px; --padding-left: 20px;
	}
}
.e-con.team-card > .e-con { width: 100%; min-width: 0; }

/* Photos: main 4/5 photo (16/10 on mobile, from home-plate.css) + inset circle photo.
   Size / radius / offsets come from .team-photo-main / .team-photo-sub in home-base.css
   and home-plate.css; here we only make Elementor's two wrapper divs fill that box. */
.e-con.team-photos { display: block; position: relative; }
.team-photos .team-photo-main { display: block; width: 100%; }
.team-photos .team-photo-sub { position: absolute; }
.team-photos .team-photo-main > .elementor-widget-container,
.team-photos .team-photo-sub > .elementor-widget-container { height: 100%; }
.team-photos .team-photo-main img,
.team-photos .team-photo-sub img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Info column: role / name / bio / signature */
.e-con.team-info { display: block; }
.team-info .role .elementor-heading-title { line-height: 1.6; }
.team-info .team-name { margin-top: 12px; }            /* was .role { margin-bottom: 12px } */
.team-info .team-name .elementor-heading-title { font-size: 1.7rem; line-height: 1.12; font-weight: 600; }
.team-info .team-bio { margin-top: 14px; }             /* was .team-info p { margin-top: 14px } */
.team-info .elementor-widget-text-editor p { opacity: 1; margin: 0; }
.team-info .team-signature { text-align: left; }
.team-info .team-signature.elementor-widget { height: auto; }
.team-info .team-signature img { height: 48px; width: auto; }

/* ---------- Journey / timeline ---------- */
/* Track: 2-column grid on small screens; from 900px a single horizontal row that
   home-animations.js pins and scrubs sideways (it reads .journey-track / .journey-pin). */
.e-con.journey-track {
	display: grid; grid-template-columns: repeat(2, 1fr);
	gap: 0; width: 100%; max-width: none; margin: 0;
}
@media (min-width: 900px) {
	.e-con.journey-track {
		display: flex; --flex-direction: row; flex-direction: row; flex-wrap: nowrap;
		width: max-content; max-width: none; margin: auto; overflow: visible;
	}
}
.e-con.journey-item {
	display: flex; --flex-direction: column; flex-direction: column;
	--justify-content: center; justify-content: var(--justify-content);
	--row-gap: 10px; --column-gap: 10px;
	--padding-top: clamp(20px, 3vw, 40px); --padding-right: clamp(20px, 3vw, 40px);
	--padding-bottom: clamp(20px, 3vw, 40px); --padding-left: clamp(20px, 3vw, 40px);
	gap: var(--row-gap) var(--column-gap);
	padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
	margin: var(--margin-top) var(--margin-right) var(--margin-bottom) var(--margin-left);
	border-left: 2px solid var(--accent);
	width: var(--width); max-width: none;
}
@media (min-width: 900px) {
	.e-con.journey-item {
		--width: 340px; --flex-basis: 340px; --flex-grow: 0; --flex-shrink: 0;
		flex: var(--flex-grow) var(--flex-shrink) var(--flex-basis);
	}
}
@media (max-width: 767px) {
	.e-con.journey-item {
		--row-gap: 6px; --column-gap: 6px;
		--padding-top: 16px; --padding-right: 16px; --padding-bottom: 16px; --padding-left: 16px;
	}
}
/* year / label sizes, colours and letter-spacing come from .journey-item .year / .label
   (home-base.css + the mobile sizes in home-plate.css) on the widget wrapper and are
   inherited by the tag; restore the body line-height Elementor's heading CSS removes. */
.journey-item .year .elementor-heading-title,
.journey-item .label .elementor-heading-title { line-height: 1.6; }
.journey-item .elementor-widget-text-editor p { opacity: 1; margin: 0; }