/* ==========================================================================
   OCEES - "Industry validation - Hawaii" (NELHA)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .nelha .nelha-image .nelha-copy .photo-credit
              app/page.tsx  <section className="nelha">

   Elementor: Home page, ninth container - "NELHA"

   Structure - the same DOM the React build has:
     section.ocees-nelha.e-con              grid .82fr 1.18fr
       |- .ocees-nelha__image.e-con         min-height 580, photo covers it
       |    `- .ocees-nelha__img  Image widget  (absolute, cover)
       `- .ocees-nelha__copy.e-con          vertically centred, padded
            |- .ocees-label            Heading (p)
            |- .ocees-nelha__title     Heading (h2)
            |- .ocees-nelha__body      Text Editor
            `- .ocees-nelha__credit    Text Editor

   Not on the `.ocees-section` rhythm: the reference pads the copy column so
   the photo runs full-bleed to the section's edges.

   The headline here is NOT the shared `.ocees-heading-lg` - the reference
   gives this one its own smaller scale.
   ========================================================================== */

:root {
	--ocees-nelha-image-bg: #8bbfc2;
	--ocees-nelha-image-min-h: 580px;
	--ocees-nelha-copy-pad-block: clamp(70px, 8vw, 130px);
	--ocees-nelha-copy-pad-inline: clamp(30px, 7vw, 110px);
	--ocees-nelha-copy-max: 700px;
	--ocees-nelha-credit-rule: #6da8aa;
}

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

.ocees-nelha.e-con {
	display: grid;
	grid-template-columns: 0.82fr 1.18fr;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}

/* --------------------------------------------------------------------------
   2. Photo column
   -------------------------------------------------------------------------- */

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

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

.ocees-nelha__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	image-rendering: auto;
}

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

.ocees-nelha__copy.e-con {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-self: center;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: var(--ocees-nelha-copy-pad-block) var(--ocees-nelha-copy-pad-inline);
}

/* Spaced by the headline's own margins and the credit's rule, as in the
   reference - so Elementor's global widget spacing is switched off. */
.ocees-nelha__copy > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.ocees-nelha__title .elementor-heading-title {
	margin: 24px 0 30px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(3rem, 5vw, 6rem);
	font-weight: 500;
	line-height: 0.92;
	letter-spacing: -0.065em;
}

.ocees-nelha__body p,
.ocees-nelha__credit p {
	margin: 0;
	max-width: var(--ocees-nelha-copy-max);
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: 1.06rem;
	line-height: 1.7;
}

/* The credit's own `font` shorthand in the reference asks for 0.65rem/1.4
   Courier, but the paragraph rule above it wins on specificity - so what
   actually renders is Courier bold at the body size and leading, with only
   the family, weight, tracking and caps coming from `.photo-credit`. The
   values below are that outcome, not the shorthand. */
.ocees-nelha__credit p {
	padding-top: 25px;
	border-top: 1px solid var(--ocees-nelha-credit-rule);
	font-family: var(--ocees-font-mono);
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Responsive
   Matches the React `@media (max-width: 980px)` block, which collapses this
   section - along with Technology and SWAC - to a single column. There is no
   phone-specific rule in the reference.
   -------------------------------------------------------------------------- */

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