/* ==========================================================================
   OCEES - "The opportunity" (manifesto)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .manifesto .manifesto-note (and the shared .section-pad,
              .section-label utilities, which live in ocees-base.css)
              app/page.tsx  <section className="manifesto section-pad">

   Elementor: Home page, second container - "The opportunity"

   Structure - three widgets in one grid, the same DOM the React build has:
     section.ocees-manifesto.ocees-section.e-con
       |- .ocees-manifesto__label  Heading (p)  + .ocees-label
       |- .ocees-manifesto__title  Heading (h2)
       `- .ocees-manifesto__note   Text Editor

   The layout is a real two-column grid (1fr 5fr): the label and the headline
   share the first row, and the closing note is placed explicitly into the
   second column so it starts under the headline rather than under the label.
   Elementor's container controls cannot express an asymmetric track list, so
   the grid is declared here - `.e-con` raises specificity just enough to win
   over Elementor's own container defaults, as elsewhere in this theme.
   ========================================================================== */

:root {
	--ocees-manifesto-bg: #0a2432;
	--ocees-manifesto-fg: #eef7f5;
	--ocees-manifesto-note-fg: #afc3c7;
	--ocees-manifesto-gap: 40px;
	--ocees-manifesto-title-max: 1220px;
	--ocees-manifesto-note-max: 650px;
}

/* --------------------------------------------------------------------------
   1. The grid
   The background colour is set on the container in Elementor (Style >
   Background) so it stays editable; only the text colour, which containers
   have no control for, is set here.
   -------------------------------------------------------------------------- */

.ocees-manifesto.e-con {
	display: grid;
	grid-template-columns: 1fr 5fr;
	gap: var(--ocees-manifesto-gap);
	width: 100%;
	max-width: none;
	color: var(--ocees-manifesto-fg);
}

/* The design spaces these blocks with the grid gap and the note's own top
   margin, so Elementor's global widget spacing is switched off - left on, it
   would add 20px to every row gap. */
.ocees-manifesto > .elementor-widget:not(:last-child) {
	margin-block-end: 0;
}

/* --------------------------------------------------------------------------
   2. Headline
   -------------------------------------------------------------------------- */

.ocees-manifesto__title .elementor-heading-title {
	margin: 0;
	max-width: var(--ocees-manifesto-title-max);
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(2.6rem, 5.3vw, 6.1rem);
	font-weight: 500;
	line-height: 0.98;
	letter-spacing: -0.06em;
}

/* --------------------------------------------------------------------------
   3. Closing note
   React: `grid-column: 2` with `margin: 40px 0 0 auto` and a 650px cap, which
   parks it at the right-hand end of the headline's column.
   -------------------------------------------------------------------------- */

.ocees-manifesto__note {
	grid-column: 2;
	color: var(--ocees-manifesto-note-fg);
}

/* The 650px cap and the right-hand placement sit on the paragraph rather than
   on the widget. Elementor drives a container child's own `max-width` and
   `margin` from its Advanced controls, at a specificity this stylesheet
   cannot match without silly selectors - whereas the paragraph inside has no
   competing rule at all. The result is identical to the reference: a 650px
   measure of copy parked at the right-hand end of the headline's column,
   40px under it (on top of the grid's own 40px row gap). */
.ocees-manifesto__note p {
	max-width: var(--ocees-manifesto-note-max);
	margin: var(--ocees-manifesto-gap) 0 0 auto;
	font-family: var(--ocees-font-sans);
	font-size: 1.05rem;
	line-height: 1.65;
}

/* --------------------------------------------------------------------------
   4. Responsive
   Matches the React `@media (max-width: 980px)` block: one column, and the
   note stops being right-aligned. There is no phone-specific rule in the
   reference, so none here either.
   -------------------------------------------------------------------------- */

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

	/* The 650px cap stays; only the column and the auto margin change. */
	.ocees-manifesto__note {
		grid-column: 1;
	}

	.ocees-manifesto__note p {
		margin-left: 0;
	}
}