/* ==========================================================================
   OCEES - "OCEES International" (Company)
   --------------------------------------------------------------------------
   Reference: otecorporation-ocees/app/globals.css
              .company .company-copy
              app/page.tsx  <section className="company section-pad">

   Elementor: Home page, twelfth container - "Company"

   Structure - the same DOM the React build has:
     section.ocees-company.ocees-section.e-con   grid 1.1fr .9fr
       |- .ocees-company__head.e-con
       |    |- .ocees-label            Heading (p)
       |    `- .ocees-company__title   Heading (h2)
       `- .ocees-company__copy.e-con   bottom-aligned, two paragraphs

   The headline has its own scale here - not the shared `.ocees-heading-lg`.
   ========================================================================== */

:root {
	--ocees-company-gap: clamp(60px, 10vw, 170px);
	--ocees-company-copy-fg: #3e545e;
}

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

.ocees-company.e-con {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--ocees-company-gap);
	width: 100%;
	max-width: none;
}

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

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

.ocees-company__title .elementor-heading-title {
	margin: 25px 0 0;
	max-width: 780px;
	color: inherit;
	font-family: var(--ocees-font-sans);
	font-size: clamp(3rem, 5.5vw, 6.4rem);
	font-weight: 500;
	line-height: 0.94;
	letter-spacing: -0.065em;
}

/* --------------------------------------------------------------------------
   2. Copy column
   `align-self: end` sits the paragraphs on the bottom edge of the row.
   -------------------------------------------------------------------------- */

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

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

/* Both paragraphs carry the 28px, including the last - so the column ends
   28px below its final line, as in the reference. */
.ocees-company__copy p {
	margin: 0 0 28px;
	color: var(--ocees-company-copy-fg);
	font-family: var(--ocees-font-sans);
	font-size: 1.06rem;
	line-height: 1.7;
}

/* --------------------------------------------------------------------------
   3. Responsive
   Matches the React `@media (max-width: 980px)` block, which collapses this
   section - along with the other two-column heading blocks - to one column.
   -------------------------------------------------------------------------- */

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