/* ==========================================================================
   OCEES - "Engineering beyond the concept"
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .engineering .engineering-heading .engineering-grid
              .engineering-card
              app/page.tsx  <section className="engineering section-pad"> and
              the EngineeringDrawings() component

   Elementor: Home page, sixth container - "Engineering"

   Structure - the same DOM the React build has:
     section.ocees-engineering.ocees-section.e-con
       |- .ocees-engineering__heading.e-con     grid 1fr 1.2fr, bottom-aligned
       |    |- .ocees-label                Heading (p)     row 1, col 1
       |    |- .ocees-engineering__title   Heading (h2)    row 1, col 2
       |    `- .ocees-engineering__note    Text Editor     row 2, col 1
       `- .ocees-engineering__grid.e-con        three hairline cells
            `- .ocees-engineering__card x3      HTML widget holding
                   figure.ocees-engineering-card
                     |- svg  (the drawing)
                     `- figcaption > strong + span + span.ocees-credit

   Same reasoning as the SWAC diagram: each drawing is hand-authored vector
   artwork with live text, so it is inlined from its own file in
   `assets/diagrams/` rather than rasterised, and each figure is one HTML
   widget because Elementor has no container tag for <figure>/<figcaption>.
   ========================================================================== */

:root {
	--ocees-eng-rule: #38505b;
	--ocees-eng-card-bg: #0a2636;
	--ocees-eng-heading-gap: 70px;
	--ocees-eng-note-fg: #a7bcc2;
	--ocees-eng-caption-fg: #9db8bf;
	--ocees-eng-credit-fg: #5e808a;
}

/* --------------------------------------------------------------------------
   1. Section
   The band colour is set on the container in Elementor (Style > Background);
   the white text colour is set here, since containers have no colour control.
   -------------------------------------------------------------------------- */

.ocees-engineering.e-con {
	display: flex;
	flex-direction: column;
	/* React puts this 70px on `.engineering-heading` as a bottom margin; it is
	   the gap between the only two children here, which is the same distance
	   and does not fight Elementor's own margin controls. */
	gap: var(--ocees-eng-heading-gap);
	width: 100%;
	max-width: none;
	color: #fff;
}

/* --------------------------------------------------------------------------
   2. Heading block
   Three children in a two-column grid: the label and the headline share the
   first row, and the paragraph falls into the second row's first column.
   -------------------------------------------------------------------------- */

.ocees-engineering__heading.e-con {
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	align-items: end;
	gap: var(--ocees-eng-heading-gap);
	width: 100%;
	max-width: none;
	padding: 0;
}

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

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

.ocees-engineering__note p {
	margin: 0;
	max-width: 650px;
	color: var(--ocees-eng-note-fg);
	font-family: var(--ocees-font-sans);
	font-size: 1rem;
	line-height: 1.75;
}

/* --------------------------------------------------------------------------
   3. Card grid
   Hairline rules drawn the same way as the outcome cards: top + left on the
   container, right + bottom on every cell.
   -------------------------------------------------------------------------- */

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

/* The grid item is the HTML widget; making it a grid lets the figure inside
   stretch to the row height, so the card's background and rules fill the cell
   exactly as the reference's <figure> does. */
.ocees-engineering__card {
	display: grid;
}

.ocees-engineering-card {
	margin: 0;
	background-color: var(--ocees-eng-card-bg);
	border-right: 1px solid var(--ocees-eng-rule);
	border-bottom: 1px solid var(--ocees-eng-rule);
}

.ocees-engineering-card svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Hello Elementor's <figcaption> reset is neutralised in ocees-base.css. */
.ocees-engineering-card figcaption {
	display: grid;
	gap: 10px;
	padding: 24px;
	border-top: 1px solid var(--ocees-eng-rule);
	font-family: var(--ocees-font-sans);
}

.ocees-engineering-card figcaption strong {
	font-size: 1.25rem;
	font-weight: 500;
}

.ocees-engineering-card figcaption > span:not(.ocees-credit) {
	color: var(--ocees-eng-caption-fg);
	font-size: 0.9rem;
	line-height: 1.5;
}

.ocees-engineering-card .ocees-credit {
	margin-top: 12px;
	color: var(--ocees-eng-credit-fg);
}

/* --------------------------------------------------------------------------
   4. Responsive
   Matches the React `@media (max-width: 980px)` block: both grids collapse to
   a single column. There is no phone-specific rule in the reference.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.ocees-engineering__heading.e-con {
		grid-template-columns: 1fr;
	}

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