/* ==========================================================================
   OCEES - "One platform - Four essential outcomes" (Platform)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .platform .section-intro .outcome-grid .outcome-card .card-top
              app/page.tsx  <section className="platform section-pad" id="platform">

   Elementor: Home page, third container - "Platform"

   Structure - the same DOM the React build has:
     section#platform.ocees-platform.ocees-section.e-con
       |- .ocees-platform__intro.e-con          grid 1fr 3fr, bottom-aligned
       |    |- .ocees-label            Heading (p)
       |    `- .ocees-platform__title  Heading (h2)
       `- .ocees-outcomes.e-con                 grid, 4 hairline cells
            `- .ocees-outcome.e-con  x4
                 |- .ocees-outcome__top.e-con
                 |    |- .ocees-outcome__num   Heading (span)
                 |    `- .ocees-outcome__icon  Icon (Lucide SVG)
                 `- .ocees-outcome__body.e-con
                      |- .ocees-outcome__title Heading (h3)
                      `- .ocees-outcome__text  Text Editor

   The card grid draws its rules with the classic no-double-border trick:
   top + left on the container, right + bottom on every cell. Elementor's
   grid container control only emits `repeat(n, 1fr)` and cannot express the
   intro's 1fr 3fr, so both grids are declared here.
   ========================================================================== */

:root {
	--ocees-platform-rule: #91aaad;
	--ocees-platform-intro-gap: 38px;
	--ocees-platform-intro-space: 64px;
	--ocees-outcome-pad: 28px;
	--ocees-outcome-min-h: 410px;
	--ocees-outcome-min-h-md: 330px;
	--ocees-outcome-min-h-sm: 280px;
	--ocees-outcome-text: #53676e;
	--ocees-outcome-hover-bg: #0a3441;
	--ocees-outcome-hover-text: #c9dcde;
}

/* --------------------------------------------------------------------------
   1. Section
   The band colour is set on the container in Elementor (Style > Background)
   so it stays editable; the text colour is left to inherit from the page, as
   in the reference - which is why the headings below ask for `inherit`
   rather than carrying a colour of their own.
   -------------------------------------------------------------------------- */

.ocees-platform.e-con {
	display: flex;
	flex-direction: column;
	/* React puts this 64px on `.section-intro` as a bottom margin. It is the
	   column gap here instead: Elementor drives a container's own margin from
	   its Advanced controls at a specificity this stylesheet cannot match,
	   and the gap between the only two children is the same distance. */
	gap: var(--ocees-platform-intro-space);
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------------------------
   2. Intro
   React: `grid-template-columns: 1fr 3fr` with `align-items: end`, so the
   eyebrow label sits on the baseline of the headline's last line.
   -------------------------------------------------------------------------- */

.ocees-platform__intro.e-con {
	display: grid;
	grid-template-columns: 1fr 3fr;
	align-items: end;
	gap: var(--ocees-platform-intro-gap);
	width: 100%;
	max-width: none;
	padding: 0;
}

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

.ocees-platform__title .elementor-heading-title {
	margin: 0;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(3rem, 6.3vw, 7rem);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.065em;
}

/* --------------------------------------------------------------------------
   3. Card grid
   -------------------------------------------------------------------------- */

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

.ocees-outcome.e-con {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: none;
	min-height: var(--ocees-outcome-min-h);
	padding: var(--ocees-outcome-pad);
	border-right: 1px solid var(--ocees-platform-rule);
	border-bottom: 1px solid var(--ocees-platform-rule);
	transition: background-color 0.25s, color 0.25s, transform 0.25s;
}

/* --- Card head: number left, icon right --------------------------------- */

.ocees-outcome__top.e-con {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}

/* `display: block` matters: in the reference the number span is itself the
   flex item, so its box is its line-height. Here Elementor wraps it in the
   widget div, which would leave the span inline and sized by Courier New's
   font metrics instead - about 1.6px taller, and enough to sit the digits off
   the icon's centre line. */
.ocees-outcome__num .elementor-heading-title {
	display: block;
	margin: 0;
	color: inherit;
	font: 700 0.7rem / 1 var(--ocees-font-mono);
}

/* Lucide icons at 25px with a 1.5 stroke, as passed in the reference.
   Elementor colours every Icon widget with the kit's global primary through a
   three-class selector, so this matches that weight to let the icon inherit
   the card's colour instead - which is what makes it turn white on hover. */
.ocees-outcome .elementor-widget-icon.ocees-outcome__icon .elementor-icon {
	display: flex;
	color: inherit;
	font-size: 25px;
}

.ocees-outcome .elementor-widget-icon.ocees-outcome__icon .elementor-icon svg {
	width: 25px;
	height: 25px;
	fill: none;
	stroke: currentColor;
}

/* --- Card body ---------------------------------------------------------- */

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

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

.ocees-outcome__title .elementor-heading-title {
	margin: 0 0 16px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(2rem, 3vw, 3.6rem);
	font-weight: 500;
	line-height: 1.5;
	letter-spacing: -0.05em;
}

.ocees-outcome__text {
	color: var(--ocees-outcome-text);
}

.ocees-outcome__text p {
	margin: 0;
	font-family: var(--ocees-font-sans);
	font-size: 0.98rem;
	line-height: 1.55;
}

/* --------------------------------------------------------------------------
   4. Hover
   The whole cell inverts to deep navy and lifts 5px. Only the body copy gets
   its own colour; the number, headline and icon all inherit the card's.
   -------------------------------------------------------------------------- */

.ocees-outcome.e-con:hover,
.ocees-outcome.e-con:focus-within {
	background-color: var(--ocees-outcome-hover-bg);
	color: #fff;
	transform: translateY(-5px);
}

.ocees-outcome:hover .ocees-outcome__text,
.ocees-outcome:focus-within .ocees-outcome__text {
	color: var(--ocees-outcome-hover-text);
}

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

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

	.ocees-outcomes.e-con {
		grid-template-columns: repeat(2, 1fr);
	}

	.ocees-outcome.e-con {
		min-height: var(--ocees-outcome-min-h-md);
	}
}

/* Phones - matches the React `@media (max-width: 620px)` block. */
@media (max-width: 620px) {
	.ocees-outcomes.e-con {
		grid-template-columns: 1fr;
	}

	.ocees-outcome.e-con {
		min-height: var(--ocees-outcome-min-h-sm);
	}
}