/*
 * EC Article — Editorial Yearbook treatment for the 5 "article" landing pages
 * (AWS, CES, InfoComm, sustainable booths, exhibiting-education).
 *
 * These pages already have WPBakery post_content; this sheet wraps it in the
 * shared editorial design language:
 *   - Palette: navy #04171A · gold #F9BE17 · green #39DBB0 · warm white
 *   - Display type: Poppins (--ec-font-display)   [loaded site-wide]
 *   - Body type:    Plus Jakarta Sans (--ec-font-body)
 *   - Navy gradient hero (gold eyebrow, Poppins H1, gold rule)
 *   - Styled body container that lifts the WPBakery content into editorial
 *     typography (headings → Poppins, paragraphs/lists → Plus Jakarta Sans)
 *   - Closing CTA card (navy + green radial + gold pill → free quote)
 *
 * Every selector is parented under `.ec-article` so the cascade can't bleed
 * into OneUp/WPBakery components or any other EC page. (The hero-photo
 * modifier `.ec-hero--has-photo` ships unparented from lib/hero-photo.php but
 * is inline-added only on these pages, so there's no leak surface.)
 */

/* =========================================================================
 *  ROOT WRAPPER + RESET
 * ========================================================================= */
.ec-article {
	font-family: var(--ec-font-body);
	color: var(--ec-navy);
	background: var(--ec-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	position: relative;
}
.ec-article *,
.ec-article *::before,
.ec-article *::after { box-sizing: border-box; }
.ec-article img { max-width: 100%; height: auto; }

/* =========================================================================
 *  HERO BAND — navy gradient default (mirrors /services/ + /contact-us/)
 * ========================================================================= */
.ec-article .ec-hero,
.ec-article .ec-article-hero {
	position: relative;
	padding: 104px 24px 90px;
	background: var(--ec-navy);
	color: var(--ec-white);
	text-align: center;
	overflow: hidden;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Faint mint blueprint grid, masked to a centered ellipse. */
.ec-article .ec-hero::before,
.ec-article .ec-article-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(57,219,176,0.08) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(57,219,176,0.05) 1px, transparent 1px);
	background-size: 80px 80px, 80px 80px;
	background-position: center;
	pointer-events: none;
	mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
	-webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%);
}
.ec-article .ec-hero > *,
.ec-article .ec-article-hero > * { position: relative; z-index: 1; }

.ec-article .ec-hero-eyebrow {
	font-family: var(--ec-font-body);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--ec-gold-text);
	margin-bottom: 22px;
}
.ec-article h1.ec-hero-title,
.ec-article .ec-hero-title {
	font-family: var(--ec-font-display) !important;
	font-weight: 700;
	font-size: clamp(34px, 6vw, 72px) !important;
	line-height: 1.04;
	letter-spacing: -0.02em;
	color: var(--ec-white) !important;
	margin: 0 auto 22px !important;
	max-width: 960px;
}
.ec-article .ec-hero-title em {
	font-style: italic;
	font-weight: 500;
	color: var(--ec-green-text);
}
.ec-article .ec-hero-sub {
	font-size: 18px;
	line-height: 1.55;
	max-width: 720px;
	margin: 0 auto;
	color: rgba(255,255,255,0.78);
}
/* Gold rule centered at the bottom edge of the hero. */
.ec-article .ec-hero::after,
.ec-article .ec-article-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: 0;
	transform: translateX(-50%);
	width: 96px;
	height: 3px;
	background: var(--ec-gold);
}

/* =========================================================================
 *  BODY CONTENT CONTAINER
 *  Lifts the WPBakery post_content into editorial typography. Max-width keeps
 *  measure readable; selectors reach into vc_* wrappers so the existing
 *  shortcode markup inherits the brand skin without being regenerated.
 * ========================================================================= */
.ec-article .ec-article-body {
	max-width: 880px;
	margin: 0 auto;
	padding: 64px 24px 48px;
}

/* WPBakery structural wrapper resets — the post_content arrives wrapped in
 * vc_row / vc_column / wpb_wrapper; flatten their default padding so our
 * container controls the rhythm. */
.ec-article .ec-article-body .vc_row,
.ec-article .ec-article-body .vc_row-fluid {
	padding: 0;
	margin-left: 0;
	margin-right: 0;
}
.ec-article .ec-article-body .vc_column-inner,
.ec-article .ec-article-body .wpb_wrapper,
.ec-article .ec-article-body .wpb_text_column,
.ec-article .ec-article-body .wpb_content_element { padding: 0; }
.ec-article .ec-article-body .wpb_content_element { margin-bottom: 0; }

/* Headings → Poppins display */
.ec-article .ec-article-body h1,
.ec-article .ec-article-body h2,
.ec-article .ec-article-body h3,
.ec-article .ec-article-body h4,
.ec-article .ec-article-body .wpb_content_element h2,
.ec-article .ec-article-body .wpb_content_element h3 {
	font-family: var(--ec-font-display);
	font-weight: 600;
	color: var(--ec-navy);
	line-height: 1.2;
}
.ec-article .ec-article-body h2,
.ec-article .ec-article-body .wpb_content_element h2 {
	font-size: clamp(1.5rem, 3vw, 2rem);
	margin: 2.5rem 0 0.75rem;
}
.ec-article .ec-article-body h3,
.ec-article .ec-article-body .wpb_content_element h3 {
	font-size: clamp(1.15rem, 2.2vw, 1.45rem);
	margin: 1.75rem 0 0.5rem;
}
.ec-article .ec-article-body h4 {
	font-size: 1.1rem;
	margin: 1.5rem 0 0.5rem;
}
.ec-article .ec-article-body > *:first-child,
.ec-article .ec-article-body .vc_row:first-child h2:first-child,
.ec-article .ec-article-body h2:first-child { margin-top: 0; }

/* Body text → Plus Jakarta Sans */
.ec-article .ec-article-body p,
.ec-article .ec-article-body li,
.ec-article .ec-article-body .vc_column_text p,
.ec-article .ec-article-body .wpb_text_column p {
	font-family: var(--ec-font-body);
	font-size: 1rem;
	line-height: 1.75;
	color: #2a3a3c;
}
.ec-article .ec-article-body p { margin: 0 0 1.15em; }
.ec-article .ec-article-body strong { font-weight: 700; color: var(--ec-navy); }
.ec-article .ec-article-body em { font-style: italic; }

/* Inline links — green, underlined; never restyle the CTA pill. */
.ec-article .ec-article-body a:not(.ec-cta-btn) {
	color: #1a7a60;
	text-decoration: underline;
	text-underline-offset: 2px;
	transition: color 0.18s ease;
}
.ec-article .ec-article-body a:not(.ec-cta-btn):hover {
	color: var(--ec-green-text);
}

/* Lists — custom green-dot bullets / clean ordered numerals */
.ec-article .ec-article-body ul,
.ec-article .ec-article-body .vc_column_text ul,
.ec-article .ec-article-body .wpb_text_column ul {
	list-style: none;
	padding-left: 0;
	margin: 0.5em 0 1.25em;
}
.ec-article .ec-article-body ul li {
	position: relative;
	padding-left: 1.4em;
	margin-bottom: 0.4em;
	line-height: 1.65;
}
.ec-article .ec-article-body ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--ec-green);
}
.ec-article .ec-article-body ol {
	padding-left: 1.3em;
	margin: 0.5em 0 1.25em;
}
.ec-article .ec-article-body ol li {
	margin-bottom: 0.4em;
	line-height: 1.65;
	padding-left: 0.3em;
}

/* Images / figures inside the body get a soft frame */
.ec-article .ec-article-body img {
	border-radius: 8px;
	display: block;
}
.ec-article .ec-article-body figure { margin: 1.5em 0; }
.ec-article .ec-article-body figcaption {
	font-size: 0.85rem;
	color: var(--ec-text-dim);
	margin-top: 0.5em;
	text-align: center;
}

/* Blockquotes — green left rule */
.ec-article .ec-article-body blockquote {
	margin: 1.75em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--ec-green);
	font-size: 1.1rem;
	line-height: 1.6;
	color: var(--ec-navy);
}

/* =========================================================================
 *  CLOSING CTA  —  navy card, green radial wash, gold pill
 *  (grammar mirrors contact.css / service-detail's .ec-closing)
 * ========================================================================= */
.ec-article .ec-closing,
.ec-article .ec-article-closing {
	margin: 24px auto 0;
	max-width: 1180px;
	padding: 80px 32px;
	background: var(--ec-navy);
	color: var(--ec-white);
	border-radius: 8px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.ec-article .ec-closing::before {
	content: "";
	position: absolute;
	inset: -50% -10% auto auto;
	width: 540px;
	height: 540px;
	background: radial-gradient(circle, var(--ec-green-tint), transparent 60%);
	pointer-events: none;
}
.ec-article .ec-closing > * { position: relative; }
.ec-article .ec-closing-eyebrow {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--ec-green-text);
	margin-bottom: 18px;
}
.ec-article h2.ec-closing-title,
.ec-article .ec-closing .ec-closing-title {
	font-family: var(--ec-font-display) !important;
	font-weight: 700;
	font-size: clamp(32px, 4.6vw, 52px) !important;
	line-height: 1.06;
	letter-spacing: -0.02em;
	max-width: 720px;
	margin: 0 auto 18px !important;
	color: var(--ec-white) !important;
}
.ec-article .ec-closing .ec-closing-title em {
	font-style: italic;
	color: var(--ec-green-text) !important;
	font-weight: 500;
}
.ec-article .ec-closing-sub {
	font-size: 17px;
	line-height: 1.55;
	max-width: 600px;
	margin: 0 auto 38px;
	color: rgba(255,255,255,0.78);
}
.ec-article .ec-closing .ec-cta-btn,
.ec-article a.ec-cta-btn {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	padding: 18px 30px !important;
	background: var(--ec-gold) !important;
	color: var(--ec-navy) !important;
	font-family: var(--ec-font-body) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
	letter-spacing: 0.08em !important;
	text-transform: uppercase;
	border-radius: 999px;
	text-decoration: none !important;
	line-height: 1 !important;
	border: 0;
	transition: transform 200ms ease, background 200ms ease;
	cursor: pointer;
}
.ec-article .ec-cta-btn::after {
	content: "→";
	transition: transform 220ms ease;
	font-weight: 400;
}
.ec-article .ec-cta-btn:hover {
	background: var(--ec-green) !important;
	transform: translateY(-2px);
}
.ec-article .ec-cta-btn:hover::after { transform: translateX(4px); }

/* =========================================================================
 *  RESPONSIVE
 * ========================================================================= */
@media (max-width: 1023px) {
	.ec-article .ec-hero,
	.ec-article .ec-article-hero { padding: 80px 22px 72px; }
	.ec-article .ec-article-body { padding: 52px 22px 40px; }
	.ec-article .ec-closing,
	.ec-article .ec-article-closing { padding: 64px 26px; }
}
@media (max-width: 767px) {
	.ec-article .ec-hero,
	.ec-article .ec-article-hero { padding: 64px 20px 60px; }
	.ec-article .ec-hero-sub { font-size: 16px; }
	.ec-article .ec-article-body { padding: 40px 20px 32px; }
	.ec-article .ec-article-body h2 { font-size: 1.4rem; }
	.ec-article .ec-article-body h3 { font-size: 1.15rem; }
	.ec-article .ec-closing,
	.ec-article .ec-article-closing { padding: 56px 22px 60px; border-radius: 6px; }
	.ec-article .ec-closing-sub { font-size: 16px; }
}

/* =========================================================================
 *  PRINT
 * ========================================================================= */
@media print {
	.ec-article { color: #000; background: #fff; }
	.ec-article .ec-hero,
	.ec-article .ec-article-hero { background: #fff; color: #000; }
	.ec-article .ec-closing,
	.ec-article .ec-article-closing { background: #fff; color: #000; }
}

/* =========================================================================
 *  EXHIBITING EDUCATION resource hub (.ec-edu-*) — guide-card grid.
 *  EC design system: about-us founder-card lineage (warm cards, gold top-border,
 *  hover lift). Scoped to .ec-edu; uses shared --ec-* tokens + .ec-hero/.ec-closing.
 * ========================================================================= */
.ec-edu .ec-edu-band { background: var(--ec-white, #fff); padding: clamp(3.5rem, 8vw, 6rem) 0; }
.ec-edu .ec-edu-wrap { max-width: 1100px; margin: 0 auto; padding: 0 clamp(1.25rem, 5vw, 4rem); }

.ec-edu .ec-edu-section-tag { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.ec-edu .ec-edu-eyebrow {
	font-family: var(--ec-font-display) !important; font-weight: 600; font-size: .74rem;
	letter-spacing: .26em; text-transform: uppercase; color: var(--ec-gold-text); white-space: nowrap;
}
.ec-edu .ec-edu-line { flex: 1; height: 1px; background: var(--ec-rule-dim, rgba(4,23,26,.10)); }
.ec-edu .ec-edu-h2 {
	font-family: var(--ec-font-display) !important; font-weight: 700; color: var(--ec-navy, #04171A);
	font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.08; letter-spacing: -.01em; margin: 0 0 .8rem;
}
.ec-edu .ec-edu-italic { font-style: italic; font-weight: 600; color: var(--ec-green-text); }
.ec-edu .ec-edu-intro { color: var(--ec-text-dim); font-size: 1.1rem; max-width: 54ch; margin: 0 0 2.8rem; }

.ec-edu .ec-edu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.4rem); align-items: stretch; }

.ec-edu .ec-edu-card {
	display: flex; flex-direction: column; background: var(--ec-warm-white, #FAF8F4);
	border: 1px solid var(--ec-rule-dim, rgba(4,23,26,.10)); border-top: 4px solid var(--ec-gold, #F9BE17);
	border-radius: 12px; overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ec-edu .ec-edu-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(4,23,26,.10); }
.ec-edu .ec-edu-card__media { aspect-ratio: 16/10; background: #e9e4db; overflow: hidden; }
.ec-edu .ec-edu-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-edu .ec-edu-card__body { padding: clamp(1.4rem, 3vw, 2rem); display: flex; flex-direction: column; gap: .7rem; flex: 1; }
.ec-edu .ec-edu-card__tag {
	font-family: var(--ec-font-display) !important; font-weight: 600; font-size: .72rem;
	letter-spacing: .18em; text-transform: uppercase; color: var(--ec-gold-text);
}
.ec-edu .ec-edu-card__title {
	font-family: var(--ec-font-display) !important; font-weight: 600; color: var(--ec-navy, #04171A);
	font-size: clamp(1.25rem, 2.4vw, 1.6rem); line-height: 1.15; margin: 0;
}
.ec-edu .ec-edu-card__blurb { color: var(--ec-text-dim); font-size: 1rem; line-height: 1.65; margin: 0; }
.ec-edu .ec-edu-card__cta {
	margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; gap: .5rem;
	font-family: var(--ec-font-display) !important; font-weight: 600; font-size: .95rem;
	color: var(--ec-navy, #04171A); text-decoration: none;
	background: var(--ec-gold, #F9BE17); padding: .7rem 1.4rem; border-radius: 999px;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.ec-edu .ec-edu-card__cta:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(249,190,23,.30); background: #ffca33; }
.ec-edu .ec-edu-card__cta span { transition: transform .18s ease; }
.ec-edu .ec-edu-card__cta:hover span { transform: translateX(3px); }

@media (max-width: 820px) {
	.ec-edu .ec-edu-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
	.ec-edu .ec-edu-card, .ec-edu .ec-edu-card__cta, .ec-edu .ec-edu-card__cta span { transition: none; }
}