/* ==========================================================================
   OCEES - "Ocean infrastructure for AI"
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .ai-feature .ai-overlay .ai-copy .concept-label
              app/page.tsx  <section className="ai-feature">

   Elementor: Home page, seventh container - "AI feature"

   Structure - the same DOM the React build has:
     section.ocees-ai.e-con              full-bleed image, copy at the bottom
       |- .ocees-ai__image  Image widget    absolute, cover   (z 0)
       |- ::after                           the two gradients (z 1)
       `- .ocees-ai__copy.e-con                                (z 2)
            |- .ocees-label        Heading (p)
            |- .ocees-ai__title    Heading (h2)
            |- .ocees-ai__body     Text Editor
            `- .ocees-ai__concept  Heading (span)

   Like the hero, the overlay is drawn on the container's ::after rather than
   as its own element: Elementor's Background Overlay control only supports a
   single two-stop gradient, and ::before is reserved for that control.

   This section is not on the `.ocees-section` rhythm - the reference pads the
   copy block instead, so the image runs full-bleed.
   ========================================================================== */

:root {
	--ocees-ai-min-h: 850px;
	--ocees-ai-min-h-md: 760px;
	--ocees-ai-min-h-sm: 700px;
	--ocees-ai-copy-max: 790px;
	--ocees-ai-copy-pad-block: clamp(80px, 10vw, 160px);
	--ocees-ai-copy-pad-inline: clamp(22px, 6vw, 100px);
	--ocees-ai-body-fg: #c6d9dc;
	--ocees-ai-concept-fg: #84dfe3;
}

/* --------------------------------------------------------------------------
   1. Stage
   -------------------------------------------------------------------------- */

.ocees-ai.e-con {
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-end;
	gap: 0;
	width: 100%;
	max-width: none;
	min-height: var(--ocees-ai-min-h);
	padding: 0;
	overflow: hidden;
	color: #fff;
}

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

.ocees-ai__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* --------------------------------------------------------------------------
   2. Overlay
   Two stacked gradients, straight from `.ai-overlay`: a horizontal one that
   darkens the left where the copy sits, and a vertical one that grounds the
   bottom edge.
   -------------------------------------------------------------------------- */

.ocees-ai::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(90deg, rgba(3, 19, 34, 0.93) 0%, rgba(3, 22, 38, 0.78) 38%, rgba(3, 25, 42, 0.12) 73%),
		linear-gradient(0deg, rgba(3, 19, 34, 0.55), transparent 50%);
}

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

.ocees-ai__copy.e-con {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: var(--ocees-ai-copy-max);
	padding: var(--ocees-ai-copy-pad-block) var(--ocees-ai-copy-pad-inline);
}

/* The blocks are spaced by their own margins, as in the reference. */
.ocees-ai__copy > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

.ocees-ai__title .elementor-heading-title {
	margin: 24px 0 32px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(3.4rem, 6vw, 7rem);
	font-weight: 500;
	line-height: 0.9;
	letter-spacing: -0.07em;
}

.ocees-ai__body p {
	margin: 0;
	max-width: 600px;
	color: var(--ocees-ai-body-fg);
	font-family: var(--ocees-font-sans);
	font-size: 1.1rem;
	line-height: 1.7;
}

/* The rule sits on the span, not the widget, so it is only as wide as the
   text - `display: inline-block` in the reference. */
.ocees-ai__concept .elementor-heading-title {
	display: inline-block;
	margin: 38px 0 0;
	padding-top: 16px;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	color: var(--ocees-ai-concept-fg);
	font: 700 0.62rem / 1.4 var(--ocees-font-mono);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   4. Responsive
   Only the stage height changes; both values come from the reference.
   -------------------------------------------------------------------------- */

@media (max-width: 980px) {
	.ocees-ai.e-con {
		min-height: var(--ocees-ai-min-h-md);
	}
}

@media (max-width: 620px) {
	.ocees-ai.e-con {
		min-height: var(--ocees-ai-min-h-sm);
	}
}