/* ==========================================================================
   OCEES - "Sea Water Air Conditioning (SWAC)"
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .swac .swac-copy .swac-note .technical-drawing
              app/page.tsx  <section className="swac section-pad"> and the
              SwacDiagram() component

   Elementor: Home page, fifth container - "SWAC"

   Structure - the same DOM the React build has:
     section.ocees-swac.ocees-section.e-con      grid .78fr 1.22fr, centred
       |- .ocees-swac__copy.e-con
       |    |- .ocees-label            Heading (p)
       |    |- .ocees-swac__title      Heading (h2) + .ocees-heading-lg
       |    |- .ocees-swac__body       Text Editor
       |    `- .ocees-swac__note       Text Editor (rule above it)
       `- .ocees-swac__figure          HTML widget holding
              figure.ocees-technical-drawing
                |- svg  (the system diagram)
                `- figcaption > span + span.ocees-credit

   The diagram is hand-authored vector artwork with live text, so it is
   inlined rather than exported to a raster: that keeps it crisp at any size,
   keeps its <title>/<desc> available to screen readers, and lets the labels
   scale with the drawing. The artwork itself lives at
   `assets/diagrams/swac.svg` - that file is the source, and the build script
   composes it into the figure. Elementor has no container tag for <figure> or
   <figcaption>, which is the other reason the figure is one HTML widget.
   ========================================================================== */

:root {
	--ocees-swac-gap: clamp(40px, 7vw, 120px);
	--ocees-swac-copy-fg: #37545d;
	--ocees-swac-copy-max: 610px;
	--ocees-swac-note-rule: #7ca8aa;
	--ocees-drawing-bg: #eef5f3;
	--ocees-drawing-rule: #90b2b2;
}

/* --------------------------------------------------------------------------
   1. Section
   The band colour is set on the container in Elementor (Style > Background).
   -------------------------------------------------------------------------- */

.ocees-swac.e-con {
	display: grid;
	grid-template-columns: 0.78fr 1.22fr;
	align-items: center;
	gap: var(--ocees-swac-gap);
	width: 100%;
	max-width: none;
}

/* --------------------------------------------------------------------------
   2. Copy column
   The reference spaces these blocks with the headline's own margins and the
   note's padding - nothing else - so Elementor's widget spacing is off and
   the paragraphs keep zero margin.
   -------------------------------------------------------------------------- */

.ocees-swac__copy.e-con {
	display: flex;
	flex-direction: column;
	gap: 0;
	width: 100%;
	max-width: none;
	padding: 0;
}

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

.ocees-swac__body p,
.ocees-swac__note p {
	margin: 0;
	max-width: var(--ocees-swac-copy-max);
	color: var(--ocees-swac-copy-fg);
	font-family: var(--ocees-font-sans);
	font-size: 1.05rem;
	line-height: 1.7;
}

/* The rule sits on the paragraph, not on the widget, so it spans the copy
   measure rather than the whole column once the column grows past 610px. */
.ocees-swac__note p {
	padding-top: 22px;
	border-top: 1px solid var(--ocees-swac-note-rule);
}

/* --------------------------------------------------------------------------
   3. The diagram figure
   -------------------------------------------------------------------------- */

.ocees-technical-drawing {
	margin: 0;
	background-color: var(--ocees-drawing-bg);
	border: 1px solid var(--ocees-drawing-rule);
}

.ocees-technical-drawing svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Hello Elementor's <figcaption> reset is neutralised in ocees-base.css. */
.ocees-technical-drawing figcaption {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	padding: 15px 18px;
	border-top: 1px solid var(--ocees-drawing-rule);
	font-family: var(--ocees-font-sans);
	font-size: 0.73rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ocees-technical-drawing .ocees-credit {
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4. Responsive
   -------------------------------------------------------------------------- */

/* Tablet and below - matches the React `@media (max-width: 980px)` block. */
@media (max-width: 980px) {
	.ocees-swac.e-con {
		grid-template-columns: 1fr;
	}
}

/* Phones - matches the React `@media (max-width: 620px)` block: the caption
   and the credit stack instead of sitting on one line. */
@media (max-width: 620px) {
	.ocees-technical-drawing figcaption {
		display: grid;
	}
}