/* ==========================================================================
   OCEES - "Leadership" (Team)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .team .team-heading .leader-grid .leader-card .leader-role
              .vega-card
              app/page.tsx  <section className="team section-pad" id="team">

   Elementor: Home page, eleventh container - "Team"

   Structure - the same DOM the React build has:
     section#team.ocees-team.ocees-section.e-con
       |- .ocees-team__heading.e-con        grid 1fr 2fr, bottom-aligned
       |    |- .ocees-label             Heading (p)
       |    `- .ocees-team__title       Heading (h2) + .ocees-heading-lg
       |- .ocees-leaders.e-con              2 hairline columns
       |    `- article.ocees-leader.e-con  x5   grid 145px 1fr
       |         |- .ocees-leader__photo   Image widget
       |         `- .ocees-leader__body.e-con
       |              |- .ocees-leader__name  Heading (h3)
       |              |- .ocees-leader__role  Heading (p)
       |              `- .ocees-leader__text  Text Editor
       `- .ocees-vega.e-con                 grid .8fr 1.2fr, deep navy
            |- .ocees-vega__head.e-con
            |    |- .ocees-label            Heading (p)
            |    |- .ocees-vega__name       Heading (h3)
            |    `- .ocees-vega__role       Heading (p)
            `- .ocees-vega__text            Text Editor

   The fifth leader card spans both columns, as in the reference.
   ========================================================================== */

:root {
	--ocees-team-rule: #9badad;
	--ocees-team-heading-gap: 50px;
	--ocees-team-heading-space: 68px;
	--ocees-leader-pad: 30px;
	--ocees-leader-pad-sm: 22px;
	--ocees-leader-min-h: 300px;
	--ocees-leader-photo: 145px;
	--ocees-leader-photo-sm: 90px;
	--ocees-leader-gap: 28px;
	--ocees-leader-gap-sm: 20px;
	--ocees-leader-role-fg: #078b98;
	--ocees-leader-text-fg: #4c6067;
	--ocees-vega-bg: #071d2b;
	--ocees-vega-accent: #6adce0;
	--ocees-vega-text-fg: #a8bdc2;
}

/* --------------------------------------------------------------------------
   1. Section
   The band colour is set on the container in Elementor (Style > Background).
   The two blocks below are spaced by their own margins rather than one gap,
   because the reference uses different distances (68px and 40px). Container
   margins are set with the `.e-con` compound so they beat Elementor's own
   `margin-block-*` defaults.
   -------------------------------------------------------------------------- */

.ocees-team.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------------------------
   2. Heading block
   -------------------------------------------------------------------------- */

.ocees-team__heading.e-con {
	display: grid;
	grid-template-columns: 1fr 2fr;
	align-items: end;
	gap: var(--ocees-team-heading-gap);
	width: 100%;
	max-width: none;
	padding: 0;
	margin-block-end: var(--ocees-team-heading-space);
}

.ocees-team__heading > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* The shared `.ocees-heading-lg` sets `margin: 22px 0 34px`; the reference
   drops the bottom margin here. */
.ocees-team__title .elementor-heading-title {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   3. Leader grid
   -------------------------------------------------------------------------- */

.ocees-leaders.e-con {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
	border-top: 1px solid var(--ocees-team-rule);
	border-left: 1px solid var(--ocees-team-rule);
}

.ocees-leader.e-con {
	display: grid;
	grid-template-columns: var(--ocees-leader-photo) 1fr;
	gap: var(--ocees-leader-gap);
	width: 100%;
	max-width: none;
	min-height: var(--ocees-leader-min-h);
	padding: var(--ocees-leader-pad);
	border-right: 1px solid var(--ocees-team-rule);
	border-bottom: 1px solid var(--ocees-team-rule);
}

/* The last card runs the full width of the grid. */
.ocees-leaders > .ocees-leader:last-child {
	grid-column: 1 / -1;
}

.ocees-leader__photo img {
	width: var(--ocees-leader-photo);
	height: var(--ocees-leader-photo);
	object-fit: cover;
	filter: saturate(0.85);
}

/* A square `cover` crop is taken from the middle of the source by default,
   which clips the top of the head on a tightly framed headshot. Anchoring the
   crop to the top edge of the source starts the frame at the top of the photo
   instead, so the whole head sits inside it and the trim comes off the bottom.

   Applied per portrait, because it is the framing of the individual photo that
   calls for it, not the layout. Cards two (Bobbie Griffin) and three (Bill
   Sheedy) are selected by position so the rule needs no change to the
   Elementor markup; the `--top` modifier does the same job for any portrait
   given that class. */
.ocees-leader__photo--top img,
.ocees-leaders > .ocees-leader:nth-child(2) .ocees-leader__photo img,
.ocees-leaders > .ocees-leader:nth-child(3) .ocees-leader__photo img {
	object-position: 50% 0%;
}

.ocees-leader__body.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}

.ocees-leader__body > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.ocees-leader__name .elementor-heading-title,
.ocees-vega__name .elementor-heading-title {
	margin: 0 0 8px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(1.6rem, 2.4vw, 2.5rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.04em;
}

.ocees-leader__role .elementor-heading-title,
.ocees-vega__role .elementor-heading-title {
	margin: 0 0 20px;
	color: var(--ocees-leader-role-fg);
	font-family: var(--ocees-font-sans);
	font-size: 0.64rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* `.leader-role` carries no line-height of its own in the reference. Inside a
   leader card it picks up 1.6 from `.leader-card p`; the Vega card has no
   such rule, so its role falls back to the page's 1.5. Worth 1px on the
   card's height, so it is reproduced rather than shared. */
.ocees-vega__role .elementor-heading-title {
	line-height: 1.5;
}

.ocees-leader__text p {
	margin: 0;
	color: var(--ocees-leader-text-fg);
	font-family: var(--ocees-font-sans);
	font-size: 0.9rem;
	line-height: 1.6;
}

/* --------------------------------------------------------------------------
   4. Vega card
   -------------------------------------------------------------------------- */

.ocees-vega.e-con {
	display: grid;
	grid-template-columns: 0.8fr 1.2fr;
	gap: 60px;
	width: 100%;
	max-width: none;
	padding: 34px;
	margin-block-start: 40px;
	background-color: var(--ocees-vega-bg);
	color: #fff;
}

.ocees-vega__head.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}

.ocees-vega__head > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* Inside this card the eyebrow and the role both take the accent cyan. */
.ocees-vega .ocees-label .elementor-heading-title,
.ocees-vega .ocees-vega__role .elementor-heading-title {
	color: var(--ocees-vega-accent);
}

.ocees-vega__text p {
	margin: 0;
	color: var(--ocees-vega-text-fg);
	font-family: var(--ocees-font-sans);
	font-size: 1rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   5. Responsive
   -------------------------------------------------------------------------- */

/* Tablet and below - matches the React `@media (max-width: 980px)` block. */
@media (max-width: 980px) {
	.ocees-team__heading.e-con {
		grid-template-columns: 1fr;
	}

	.ocees-leaders.e-con {
		grid-template-columns: 1fr;
	}

	.ocees-leaders > .ocees-leader:last-child {
		grid-column: auto;
	}
}

/* Phones - matches the React `@media (max-width: 620px)` block. */
@media (max-width: 620px) {
	.ocees-leader.e-con {
		grid-template-columns: var(--ocees-leader-photo-sm) 1fr;
		gap: var(--ocees-leader-gap-sm);
		padding: var(--ocees-leader-pad-sm);
	}

	.ocees-leader__photo img {
		width: var(--ocees-leader-photo-sm);
		height: var(--ocees-leader-photo-sm);
	}

	.ocees-vega.e-con {
		grid-template-columns: 1fr;
		gap: 25px;
	}
}