/* ==========================================================================
   OCEES - "Ocean Thermal Energy Conversion" (Technology)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .technology .technology-visual .technology-copy .image-caption
              .lead .process-list .drawing-copyright
              app/page.tsx  <section className="technology" id="technology">

   Elementor: Home page, fourth container - "Technology"

   Structure - the same DOM the React build has:
     section#technology.ocees-technology.e-con        grid 1.08fr .92fr
       |- .ocees-technology__visual.e-con
       |    |- .ocees-technology__image    Image widget  (absolute, contain)
       |    |- .ocees-technology__caption  Heading (span)
       |    `- .ocees-drawing-credit       Heading (span) + .ocees-credit
       `- .ocees-technology__copy.e-con
            |- .ocees-label                Heading (p)
            |- .ocees-technology__title    Heading (h2) + .ocees-heading-lg
            |- .ocees-technology__lead     Text Editor
            `- .ocees-process              Text Editor holding the <ol>

   This section is not on the page's `.ocees-section` rhythm: the reference
   pads the copy column instead, so the visual can run full-bleed to the
   section's edges.

   The process steps are a real <ol> inside one Text Editor widget rather than
   a stack of containers - that keeps the list semantics of the reference and
   leaves the copy editable as rich text in Elementor.
   ========================================================================== */

:root {
	--ocees-tech-min-h: 800px;
	--ocees-tech-visual-min-h: 720px;
	--ocees-tech-image-pad: clamp(30px, 4vw, 70px);
	--ocees-tech-copy-pad-block: clamp(70px, 8vw, 132px);
	--ocees-tech-copy-pad-inline: clamp(28px, 6vw, 92px);
	--ocees-tech-lead-fg: #3d555f;
	--ocees-tech-rule: #b9c5c5;
	--ocees-tech-step-fg: #048d9c;
	--ocees-tech-caption-bg: rgba(5, 26, 38, 0.82);
}

/* --------------------------------------------------------------------------
   1. Section
   Both band colours are set on their containers in Elementor (Style >
   Background) so they stay editable.
   -------------------------------------------------------------------------- */

.ocees-technology.e-con {
	display: grid;
	grid-template-columns: 1.08fr 0.92fr;
	gap: 0;
	width: 100%;
	max-width: none;
	min-height: var(--ocees-tech-min-h);
	padding: 0;
}

/* --------------------------------------------------------------------------
   2. Visual column
   Every child is taken out of flow, exactly as in the reference: the image
   fills the cell, and the caption and credit sit on top of it.
   -------------------------------------------------------------------------- */

.ocees-technology__visual.e-con {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	min-height: var(--ocees-tech-visual-min-h);
	padding: 0;
	overflow: hidden;
}

.ocees-technology__image {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.ocees-technology__image img {
	width: 100%;
	height: 100%;
	padding: var(--ocees-tech-image-pad);
	object-fit: contain;
	transition: transform 0.8s;
}

/* Hovering anywhere in the section eases the rendering up by 2.5%. */
.ocees-technology:hover .ocees-technology__image img {
	transform: scale(1.025);
}

.ocees-technology__caption {
	position: absolute;
	z-index: 2;
	bottom: 42px;
	left: 20px;
}

.ocees-technology__caption .elementor-heading-title {
	display: block;
	margin: 0;
	padding: 8px 10px;
	background-color: var(--ocees-tech-caption-bg);
	color: #fff;
	font-family: var(--ocees-font-sans);
	font-size: 0.6rem;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

/* Typography comes from `.ocees-credit` in ocees-base.css. */
.ocees-technology__visual > .ocees-drawing-credit {
	position: absolute;
	z-index: 2;
	bottom: 18px;
	right: 20px;
}

/* --------------------------------------------------------------------------
   3. Copy column
   -------------------------------------------------------------------------- */

/* Children stay stretched (the flex default): in the reference these are all
   full-width blocks in a normal flow, and shrink-wrapping them would give the
   label and the process list the wrong box width. */
.ocees-technology__copy.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: var(--ocees-tech-copy-pad-block) var(--ocees-tech-copy-pad-inline);
}

/* The blocks below are spaced by their own margins, as in the reference, so
   Elementor's global widget spacing is switched off. */
.ocees-technology__copy > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.ocees-technology__lead p {
	margin: 0 0 42px;
	max-width: 610px;
	color: var(--ocees-tech-lead-fg);
	font-family: var(--ocees-font-sans);
	font-size: 1.13rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   4. Process list
   React `.process-list`: a hairline-ruled <ol> whose rows are a 42px number
   column and the step copy.
   -------------------------------------------------------------------------- */

.ocees-process ol {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--ocees-tech-rule);
}

.ocees-process li {
	display: grid;
	grid-template-columns: 42px 1fr;
	gap: 15px;
	padding: 20px 0;
	border-bottom: 1px solid var(--ocees-tech-rule);
}

.ocees-process li > span {
	color: var(--ocees-tech-step-fg);
	font: 700 0.68rem / 1.8 var(--ocees-font-mono);
}

.ocees-process li p {
	margin: 0;
	font-family: var(--ocees-font-sans);
	font-size: 0.94rem;
	line-height: 1.5;
}

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

/* Tablet and below - matches the React `@media (max-width: 980px)` block:
   one column, and the copy is reordered above the rendering. */
@media (max-width: 980px) {
	.ocees-technology.e-con {
		grid-template-columns: 1fr;
	}

	.ocees-technology__visual.e-con {
		order: 2;
		min-height: 70vw;
	}

	.ocees-technology__copy.e-con {
		order: 1;
	}
}