/*
 Theme Name:   TheEVcar EV News Child
 Theme URI:    https://theevcar.com
 Description:  Premium EV News Portal child theme for GeneratePress (FREE). Built for 95–100 PageSpeed, Core Web Vitals, EV-tech aesthetic.
 Author:       TheEVcar Dev Team
 Author URI:   https://theevcar.com
 Template:     generatepress
 Version:      1.4.20
 License:      GNU GPL v2 or later
 Text Domain:  theevcar
*/

/* ==========================================================================
   1. LOCAL FONT FACES (Kanit / Prompt — self-hosted, font-display: optional)
   Place woff2 files in /assets/fonts/. This guarantees zero external
   font requests = no render-blocking from Google Fonts CDN.
   ========================================================================== */
@font-face {
	font-family: 'Kanit';
	src: url('assets/fonts/kanit-regular.woff2') format('woff2');
	font-weight: 400;
	font-style: normal;
	font-display: optional;
}
@font-face {
	font-family: 'Kanit';
	src: url('assets/fonts/kanit-medium.woff2') format('woff2');
	font-weight: 500;
	font-style: normal;
	font-display: optional;
}
@font-face {
	font-family: 'Kanit';
	src: url('assets/fonts/kanit-bold.woff2') format('woff2');
	font-weight: 700;
	font-style: normal;
	font-display: optional;
}
/* Fallback face whose metrics are adjusted to match Kanit. With
   font-display: optional above, the browser uses the webfont only if it
   loads within ~100ms (otherwise it keeps this fallback forever — no swap,
   so zero font-swap CLS). This face is the safety net used when Kanit is
   unavailable: size-adjust/ascent/descent override keep its line-box close
   to Kanit's so any residual paint matches. Values approximate Kanit's
   ascent/descent ratios over Tahoma (closest widely-installed Thai-capable
   sans). Tune if you measure different Kanit metrics on your own copy. */
@font-face {
	font-family: 'Kanit Fallback';
	src: local('Tahoma'), local('Arial');
	size-adjust: 100%;
	ascent-override: 95%;
	descent-override: 22%;
	line-gap-override: 0%;
	font-display: optional;
}

/* ==========================================================================
   2. CSS VARIABLES — Design tokens (color, grid, spacing, type scale)
   Centralised so the whole theme is themeable from one place.
   ========================================================================== */
:root {
	/* --- Brand palette --- */
	--ev-blue:        #0B63F6;   /* Secondary accent: Deep Electric Blue */
	--ev-blue-deep:   #0052FF;
	--ev-brand:       #189E49;   /* PRIMARY brand green (from TheEVcar logo) */
	--ev-brand-deep:  #0E7A37;   /* darker green for hover */
	--ev-emerald:     #00D2A0;   /* Tertiary: Emerald / Cyan accent */
	--ev-cyan:        #00E5FF;
	--ev-slate:       #0F172A;   /* Dark neutral */
	--ev-slate-800:   #1E293B;
	--ev-slate-600:   #475569;
	--ev-white:       #FFFFFF;
	--ev-gray-bg:     #F8FAFC;   /* Cool gray background */
	--ev-gray-200:    #E2E8F0;
	--ev-gray-400:    #94A3B8;

	/* --- Semantic --- */
	--c-text:         var(--ev-slate);
	--c-text-muted:   var(--ev-slate-600);
	--c-bg:           var(--ev-white);
	--c-bg-alt:       var(--ev-gray-bg);
	--c-border:       var(--ev-gray-200);
	--c-link:         var(--ev-brand);
	--c-link-hover:   var(--ev-brand-deep);
	--c-accent:       var(--ev-brand);

	/* --- Typography --- */
	--font-sans:      'Kanit', 'Kanit Fallback', 'Prompt', system-ui, -apple-system, 'Segoe UI', sans-serif;
	--fs-base:        17px;
	--lh-base:        1.8;
	--fs-h1:          clamp(2rem, 4vw, 3rem);
	--fs-h2:          clamp(1.5rem, 3vw, 2.1rem);
	--fs-h3:          1.3rem;
	--fs-small:       0.85rem;

	/* --- Layout / grid --- */
	--content-max:    1200px;     /* site container */
	--article-max:    780px;      /* single post reading column */
	--gap:            1.5rem;
	--radius:         14px;
	--radius-sm:      8px;
	--radius-pill:    999px;

	/* --- Spacing scale --- */
	--sp-1: 0.5rem;
	--sp-2: 1rem;
	--sp-3: 1.5rem;
	--sp-4: 2.5rem;
	--sp-5: 4rem;

	/* --- Effects --- */
	--shadow-card:    0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
	--shadow-lift:    0 12px 32px rgba(11,99,246,.18);
	--transition:     180ms cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   3. BASE RESET / GENERIC
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	font-family: var(--font-sans);
	font-size: var(--fs-base);
	line-height: var(--lh-base);
	color: var(--c-text);
	background: var(--c-bg);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

a { color: var(--c-link); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-link-hover); }

img { max-width: 100%; height: auto; display: block; }

/* Aspect-ratio wrapper keeps CLS = 0 (no layout shift while images load) */
.theevcar-ratio { aspect-ratio: 16 / 9; width: 100%; object-fit: cover; }

/* ==========================================================================
   4. SITE CONTAINER & HEADER
   ========================================================================== */
.theevcar-container {
	max-width: var(--content-max);
	margin-inline: auto;
	padding-inline: var(--sp-2);
}

/* Header bar — clean, sticky, subtle blur */
.site-header.ev-header {
	background: rgba(255,255,255,.85);
	backdrop-filter: saturate(180%) blur(12px);
	border-bottom: 1px solid var(--c-border);
	position: sticky;
	top: 0;
	z-index: 100;
}
.ev-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-2);
	height: 68px;
}
.ev-logo { font-weight: 700; font-size: 1.4rem; letter-spacing: -.02em; color: var(--ev-slate); display: inline-flex; align-items: center; }
.ev-logo span { color: var(--ev-blue); }
.ev-logo__img { height: 38px; width: auto; display: block; }
.ev-logo--footer .ev-logo__img { height: 34px; }

/* Primary nav */
.ev-nav { display: flex; align-items: center; gap: var(--sp-3); }
.ev-nav a {
	font-weight: 500;
	color: var(--ev-slate-800);
	position: relative;
	padding-block: .25rem;
}
.ev-nav a::after {
	content: '';
	position: absolute; left: 0; bottom: -2px;
	width: 0; height: 2px; background: var(--ev-brand);
	transition: width var(--transition);
}
.ev-nav a:hover::after { width: 100%; }

/* Nav dropdown (EV VEHICLE group) — click-to-open, keyboard accessible */
.ev-nav__dropdown { position: relative; display: inline-flex; align-items: center; }
.ev-nav__dropdown-toggle {
	background: none; border: none; padding: 0; margin: 0;
	font: inherit; color: var(--ev-slate-800); cursor: pointer;
	display: inline-flex; align-items: center; gap: .35rem;
	font-weight: 500; position: relative; padding-block: .25rem;
	white-space: nowrap;
}
.ev-nav__dropdown-toggle:hover { color: var(--ev-brand); }
.ev-nav__dropdown-toggle::after {
	content: ''; position: absolute; left: 0; bottom: -2px;
	width: 0; height: 2px; background: var(--ev-brand);
	transition: width var(--transition);
}
.ev-nav__dropdown.is-open .ev-nav__dropdown-toggle::after,
.ev-nav__dropdown-toggle:hover::after { width: 100%; }
.ev-nav__caret {
	display: inline-block; width: 0; height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 4px solid currentColor;
	transition: transform .2s var(--transition);
	margin-top: 1px;
}
.ev-nav__dropdown.is-open .ev-nav__caret { transform: rotate(180deg); }
.ev-nav__dropdown-menu {
	position: absolute; top: calc(100% + .5rem); left: 0;
	min-width: 200px;
	background: #fff;
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	box-shadow: 0 10px 28px rgba(15,23,42,.14);
	padding: .5rem 0; margin: 0; list-style: none;
	z-index: 100;
	opacity: 0; visibility: hidden; pointer-events: none;
	transform: translateY(-4px);
	transition: opacity .15s var(--transition), transform .15s var(--transition), visibility .15s var(--transition);
}
.ev-nav__dropdown.is-open .ev-nav__dropdown-menu,
.ev-nav__dropdown:focus-within .ev-nav__dropdown-menu {
	opacity: 1; visibility: visible; pointer-events: auto;
	transform: translateY(0);
}
.ev-nav__dropdown-menu li { margin: 0; padding: 0; list-style: none; }
.ev-nav__dropdown-menu a {
	display: block; padding: .55rem 1rem;
	color: var(--ev-slate); font-weight: 500;
	white-space: nowrap;
	transition: background var(--transition), color var(--transition);
}
.ev-nav__dropdown-menu a:hover {
	background: var(--ev-gray-bg, #F1F5F9);
	color: var(--ev-brand);
}
.ev-nav__dropdown-menu a::after { display: none; }

/* Drawer (mobile) — same markup, but expand as an in-flow accordion
   so the absolute overlay doesn't overlap the vertical column. */
.ev-nav--drawer .ev-nav__dropdown {
	display: flex; flex-direction: column; align-items: stretch; width: 100%;
}
.ev-nav--drawer .ev-nav__dropdown-toggle {
	justify-content: space-between; width: 100%; padding: .75rem 0;
}
.ev-nav--drawer .ev-nav__dropdown-toggle::after { display: none; }
.ev-nav--drawer .ev-nav__dropdown-menu {
	position: static; transform: none;
	box-shadow: none; border: none; border-radius: 0;
	background: var(--ev-gray-bg, #F1F5F9);
	min-width: 0; width: 100%; padding: .25rem 0 .5rem;
	opacity: 1; visibility: visible; pointer-events: auto;
	display: none;
}
.ev-nav--drawer .ev-nav__dropdown.is-open .ev-nav__dropdown-menu { display: block; }
.ev-nav--drawer .ev-nav__dropdown-menu a { padding: .55rem 1rem; }

/* Quick search */
.ev-search { display: flex; align-items: center; gap: .5rem; }
.ev-search input {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-pill);
	padding: .45rem 1rem;
	font: inherit;
	font-size: var(--fs-small);
	width: 180px;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.ev-search input:focus {
	outline: none;
	border-color: var(--ev-brand);
	box-shadow: 0 0 0 3px rgba(24,158,73,.15);
}

/* ==========================================================================
   5. NEWS CARD + MAGAZINE GRID (1 hero + 4 secondary, 16:9)
   ========================================================================== */
.ev-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--gap);
}

/* Hero (large) card spans 8 cols */
.ev-card--hero { grid-column: span 8; }
/* Secondary cards span 4 cols, stacked 2x2 via nested grid */
.ev-card--sub  { grid-column: span 4; }

.ev-card {
	background: var(--c-bg);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-card);
	transition: transform var(--transition), box-shadow var(--transition);
	display: flex;
	flex-direction: column;
}
.ev-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lift);
}

.ev-card__media {
	position: relative;
	aspect-ratio: 16 / 9;      /* CLS-proof */
	overflow: hidden;
	background: var(--ev-gray-bg);
}
.ev-card__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 320ms cubic-bezier(.4,0,.2,1);
}
.ev-card:hover .ev-card__media img { transform: scale(1.05); }

.ev-card__body { padding: var(--sp-3); display: flex; flex-direction: column; gap: .6rem; flex: 1; }
.ev-card__title { font-size: var(--fs-h3); font-weight: 700; line-height: 1.35; margin: 0; }
.ev-card--hero .ev-card__title { font-size: clamp(1.4rem, 2.5vw, 2rem); }
.ev-card__excerpt { color: var(--c-text-muted); font-size: var(--fs-small); margin: 0; }
.ev-card__meta { margin-top: auto; display: flex; align-items: center; gap: .75rem; font-size: var(--fs-small); color: var(--ev-gray-400); }

/* Sub-grid: 4 small cards in 2 columns under the hero on wide screens */
.ev-sub-grid {
	grid-column: span 4;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gap);
}

/* ==========================================================================
   6. CATEGORY BADGES (TEST DRIVE / EXCLUSIVE / TECH SPECS …)
   ========================================================================== */
.ev-badge {
	display: inline-flex;
	align-items: center;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: .3rem .7rem;
	border-radius: var(--radius-pill);
	color: #fff;
	background: var(--ev-blue);
	position: absolute;
	top: 12px; left: 12px;
	z-index: 2;
	box-shadow: 0 2px 8px rgba(15,23,42,.25);
}
.ev-badge--exclusive { background: linear-gradient(135deg, var(--ev-blue-deep), var(--ev-cyan)); }
.ev-badge--test     { background: linear-gradient(135deg, #0EA5E9, var(--ev-emerald)); }
.ev-badge--tech     { background: linear-gradient(135deg, var(--ev-emerald), #10B981); }
.ev-badge--review   { background: linear-gradient(135deg, #F59E0B, #EF4444); }

/* Inline badge (inside card body) */
.ev-tag {
	display: inline-block;
	font-size: .72rem;
	font-weight: 600;
	color: var(--ev-blue);
	background: rgba(11,99,246,.1);
	padding: .2rem .6rem;
	border-radius: var(--radius-sm);
}

/* ==========================================================================
   7. SINGLE POST TYPOGRAPHY (readable, calm, max-width 780px)
   ========================================================================== */
.theevcar-article {
	max-width: var(--article-max);
	margin-inline: auto;
}
.theevcar-article h1 {
	font-size: var(--fs-h1);
	line-height: 1.2;
	letter-spacing: -.02em;
	margin-bottom: var(--sp-2);
}
.theevcar-article h2 { font-size: var(--fs-h2); margin-top: var(--sp-4); line-height: 1.3; }
.theevcar-article h3 { font-size: var(--fs-h3); margin-top: var(--sp-3); }
.theevcar-article p,
.theevcar-article li { line-height: var(--lh-base); font-size: 1.05rem; color: var(--ev-slate-800); }
.theevcar-article p { margin-block: 1.25rem; }
.theevcar-article img,
.theevcar-article figure { border-radius: var(--radius-sm); margin-block: var(--sp-3); }
.theevcar-article blockquote {
	border-left: 4px solid var(--ev-blue);
	background: var(--ev-gray-bg);
	padding: var(--sp-2) var(--sp-3);
	margin-block: var(--sp-3);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-style: italic;
}

/* Magazine drop cap — first glyph of the article body enlarged + brand green.
   Applied only on single posts; Thai has no case, but ::first-letter still
   targets the first readable character (consonant) and floats it. */
.single .entry-content > p:first-of-type::first-letter {
	float: left;
	font-size: 3.2em;
	line-height: .78;
	font-weight: 700;
	color: var(--ev-brand, #189E49);
	padding: .04em .12em 0 0;
	margin-right: .04em;
}

/* Single post header meta */
.ev-post-header { max-width: var(--article-max); margin: var(--sp-4) auto var(--sp-3); }
.ev-post-header .ev-cat-row { display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: var(--sp-2); }
.ev-post-meta {
	display: flex; align-items: center; gap: var(--sp-2);
	flex-wrap: wrap;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
	margin-top: var(--sp-2);
}
.ev-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ev-gray-200); }
.ev-post-meta strong { color: var(--ev-slate); }

/* ==========================================================================
   8. SOCIAL SHARE (light, no heavy script)
   ========================================================================== */
.ev-share {
	display: flex; align-items: center; gap: .6rem;
	margin-top: var(--sp-3);
}
.ev-share a {
	width: 38px; height: 38px;
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 50%;
	background: var(--ev-gray-bg);
	color: var(--ev-slate-600);
	transition: background var(--transition), color var(--transition), transform var(--transition);
}
.ev-share a:hover { background: var(--ev-blue); color: #fff; transform: translateY(-2px); }

/* Article share bar — 8 brand-colored rounded-square buttons */
.ev-share--post { gap: .5rem; flex-wrap: wrap; }
.ev-share--post .ev-share__btn {
	width: 40px; height: 40px;
	display: inline-flex; align-items: center; justify-content: center;
	padding: 0; border: none; cursor: pointer; font: inherit;
	border-radius: 10px; color: #fff; background: var(--ev-slate-600);
	box-shadow: 0 1px 2px rgba(15,23,42,.14);
	transition: transform var(--transition), box-shadow var(--transition), filter var(--transition);
}
.ev-share--post .ev-share__btn svg { width: 20px; height: 20px; display: block; }
.ev-share--post .ev-share__btn:hover { transform: translateY(-2px); filter: brightness(1.07); box-shadow: 0 4px 10px rgba(15,23,42,.2); }
.ev-share--post .ev-share__btn--facebook  { background: #1877F2; }
.ev-share--post .ev-share__btn--line      { background: #06C755; }
.ev-share--post .ev-share__btn--instagram { background: linear-gradient(45deg, #FEDA75 0%, #D62976 48%, #962FBF 100%); }
.ev-share--post .ev-share__btn--messenger { background: #0084FF; }
.ev-share--post .ev-share__btn--x         { background: #000; }
.ev-share--post .ev-share__btn--linkedin  { background: #0A66C2; }
.ev-share--post .ev-share__btn--copy      { background: #189E49; }
.ev-share--post .ev-share__btn--print     { background: #475569; }
.ev-share--post .ev-share__btn.is-copied  { background: #0f7c3a; }

/* ==========================================================================
   9. AUTHOR BOX (E-E-A-T) + RELATED POSTS
   ========================================================================== */
.ev-author-box {
	display: flex; gap: var(--sp-2);
	background: var(--ev-gray-bg);
	border: 1px solid var(--c-border);
	border-radius: var(--radius);
	padding: var(--sp-3);
	margin-block: var(--sp-4);
	max-width: var(--article-max);
	margin-inline: auto;
}
.ev-author-box img { width: 64px; height: 64px; border-radius: 50%; }
.ev-author-box h4 { margin: 0 0 .25rem; font-size: 1rem; }
.ev-author-box p { margin: 0; font-size: var(--fs-small); color: var(--c-text-muted); }

.ev-related {
	max-width: var(--content-max);
	margin: var(--sp-5) auto;
}
.ev-related h3 { font-size: 1.4rem; margin-bottom: var(--sp-3); }
/* "ข่าวที่เกี่ยวข้อง" — headline links only (no image / excerpt / meta).
   Each item is a clickable headline; a thin divider separates rows. */
.ev-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ev-related__item {
	border-top: 1px solid var(--c-border, #e5e7eb);
}
.ev-related__item:last-child {
	border-bottom: 1px solid var(--c-border, #e5e7eb);
}
.ev-related__item a {
	display: block;
	padding: .85rem .25rem;
	color: var(--ev-slate-900, #0f172a);
	font-size: 1.1rem;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: color .15s ease, padding-left .15s ease;
}
.ev-related__item a:hover {
	color: #189E49;
	padding-left: .6rem;
}

/* ==========================================================================
   10. MOBILE-FIRST RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* ≤ 1024px: hero takes full width, sub-grid becomes 1 column */
@media (max-width: 1024px) {
	.ev-card--hero,
	.ev-card--sub,
	.ev-sub-grid { grid-column: 1 / -1; }
	.ev-sub-grid { grid-template-columns: 1fr 1fr; }
}

/* ≤ 768px: phones — cleanest possible layout */
@media (max-width: 768px) {
	:root { --fs-base: 16px; }

	.ev-header__inner { height: 60px; }
	.ev-nav { display: none; }                 /* hidden, replaced by drawer */
	.ev-search input { width: 130px; }

	.ev-grid { grid-template-columns: 1fr; }
	.ev-card--hero,
	.ev-card--sub,
	.ev-sub-grid { grid-column: 1 / -1; }
	.ev-sub-grid { grid-template-columns: 1fr; }

	.theevcar-article h1 { font-size: 1.9rem; }
	.ev-author-box { flex-direction: column; text-align: center; align-items: center; }
	.ev-post-meta { justify-content: center; }

	/* Mobile drawer slide-in */
	.ev-drawer {
		position: fixed; inset: 0 0 0 auto;
		width: min(82vw, 320px);
		background: var(--c-bg);
		box-shadow: -8px 0 32px rgba(15,23,42,.15);
		transform: translateX(100%);
		transition: transform var(--transition);
		z-index: 200; padding: var(--sp-4) var(--sp-3);
	}
	.ev-drawer.is-open { transform: translateX(0); }
	.ev-drawer a { display: block; padding: .9rem 0; border-bottom: 1px solid var(--c-border); font-weight: 500; }
	.ev-drawer__overlay {
		position: fixed; inset: 0; background: rgba(15,23,42,.45);
		opacity: 0; visibility: hidden; transition: opacity var(--transition); z-index: 150;
	}
	.ev-drawer__overlay.is-open { opacity: 1; visibility: visible; }
	.ev-burger { display: inline-flex; } /* show hamburger on mobile */
}

/* ≥ 769px: hide burger + drawer toggle on desktop */
@media (min-width: 769px) {
	.ev-burger,
	.ev-drawer,
	.ev-drawer__overlay { display: none !important; }
}

/* ==========================================================================
   11. ACCESSIBILITY & MOTION
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:focus-visible { outline: 3px solid var(--ev-blue); outline-offset: 2px; border-radius: 4px; }

/* ==========================================================================
   12. SINGLE-POST READING COLUMN (free GeneratePress compatibility)
   Our Single Post Header is injected via PHP hook; the article body is
   GeneratePress's .entry-content — center it to the 780px reading width.
   ========================================================================== */
.single .entry-content {
	max-width: var(--article-max);
	margin-inline: auto;
}
/* Keep the built-in GP entry-header hidden (we render our own H1/meta) */
.single .entry-header { display: none; }

/* ==========================================================================
   13. HOMEPAGE MULTI-SECTION LAYOUT (magazine feel)
   Each section is a "block" with a title bar + accent rule + content.
   ========================================================================== */
.theevcar-home { display: flex; flex-direction: column; gap: var(--sp-4); margin-block: var(--sp-2); width: 100%; }
.theevcar-home > .ev-section { width: 100%; }

.ev-section { padding-block: var(--sp-1); }

/* Section title bar (with accent underline + "see all" link) */
.ev-section__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--sp-2);
	padding-bottom: .65rem;
	margin-bottom: var(--sp-3);
	border-bottom: 3px solid var(--ev-blue);
}
.ev-section__title {
	font-size: 1.4rem;
	font-weight: 700;
	color: var(--ev-slate);
	margin: 0;
	letter-spacing: -.01em;
}
.ev-section__more {
	font-size: var(--fs-small);
	font-weight: 600;
	color: var(--ev-blue);
}
.ev-section__more:hover { color: var(--ev-blue-deep); }

/* Accent variant for variety across sections */
.ev-section--accent .ev-section__head { border-bottom-color: var(--ev-emerald); }
.ev-section--accent .ev-section__more  { color: var(--ev-emerald); }
.ev-section--accent .ev-section__more:hover { color: #00A37A; }

/* Latest strip: 3 columns desktop, 2 tablet, 1 mobile */
.ev-latest-strip {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--gap);
}
@media (max-width: 1024px) { .ev-latest-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ev-latest-strip { grid-template-columns: 1fr; } }

/* Compact card (latest strip) */
.ev-card--compact .ev-card__body { padding: var(--sp-2); gap: .4rem; }
.ev-card--compact .ev-card__title { font-size: 1rem; line-height: 1.35; }

/* Category block: 3 horizontal cards (LEFT) + 1 tall hero (RIGHT).
   Fills the frame edge-to-edge; no loose whitespace. */
.ev-category-block {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr);
	gap: var(--gap);
	align-items: stretch;
}
.ev-category-block .ev-category-block__list {
	grid-column: 1;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	min-width: 0;
}
.ev-category-block .ev-card--hero {
	/* Override the global .ev-card--hero span 8 (meant for .ev-grid 12-col). */
	grid-column: 2;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
}
.ev-category-block .ev-card--hero .ev-card__media {
	flex: 1 1 auto;
	border-radius: var(--radius-sm);
	min-height: 360px;
	aspect-ratio: auto;
}
.ev-category-block .ev-card--hero .ev-card__body { padding: var(--sp-3) 0 .5rem; }
.ev-category-block .ev-card--hero .ev-card__title { font-size: clamp(1.2rem, 1.8vw, 1.6rem); line-height: 1.3; }

/* Horizontal card (thumbnail left + text right) */
.ev-card--row {
	flex-direction: row;
	gap: var(--gap);
}
.ev-card--row .ev-card__media {
	width: 160px;
	min-width: 160px;
	aspect-ratio: 4 / 3;
	border-radius: var(--radius-sm);
	flex-shrink: 0;
}
.ev-card--row .ev-card__body { padding: .25rem 0; }
.ev-card--row .ev-card__title { font-size: 1rem; line-height: 1.35; font-weight: 600; }
.ev-card--row .ev-card__meta { margin-top: .25rem; color: var(--ev-gray-400); }

@media (max-width: 1024px) {
	.ev-category-block { grid-template-columns: 1fr; }
	.ev-category-block .ev-card--hero,
	.ev-category-block .ev-category-block__list { grid-column: 1; grid-row: auto; }
	.ev-category-block .ev-card--hero .ev-card__media { min-height: 240px; }
	.ev-card--row .ev-card__media { width: 120px; min-width: 120px; }
}
@media (max-width: 480px) {
	.ev-card--row .ev-card__media { width: 100px; min-width: 100px; }
}

/* Tighter card meta (used everywhere) */
.ev-card__meta { font-size: .8rem; }

/* ==========================================================================
   13B. CHIP-STYLE SECTION HEADER (matches "THE REPORT" reference layout)
   Used by category highlight sections. Colored label box on left + "MORE"
   link on right + thin divider below.
   ========================================================================== */
.ev-section--chip .ev-section__head {
	border-bottom: 1px solid var(--ev-gray-200);
	padding-bottom: .8rem;
	margin-bottom: var(--sp-3);
}
.ev-section__label {
	display: inline-block;
	background: var(--ev-brand);
	color: var(--ev-white);
	padding: .55rem 1.2rem;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .08em;
	border-radius: 2px;
	margin: 0;
	text-transform: uppercase;
}
.ev-section--chip:nth-of-type(2n) .ev-section__label { background: var(--ev-emerald); }
.ev-section--chip:nth-of-type(3n) .ev-section__label { background: var(--ev-slate); }

.ev-section__more {
	font-size: .8rem;
	font-weight: 600;
	color: var(--ev-brand);
	letter-spacing: .05em;
}
.ev-section__more:hover { color: var(--ev-brand-deep); }

/* (.ev-category-block + .ev-card--row rules consolidated into the unified block above — v1.4.6) */

/* ==========================================================================
   14. CUSTOM FOOTER (replaces GeneratePress default footer)
   ========================================================================== */
.ev-footer {
	background: var(--ev-slate);
	color: #CBD5E1;
	margin-top: var(--sp-5);
	padding: 0;
	font-size: var(--fs-small);
}
.ev-footer .ev-logo { color: var(--ev-white); }
.ev-footer .ev-logo span { color: var(--ev-emerald); }
.ev-footer a { color: #CBD5E1; }
.ev-footer a:hover { color: var(--ev-emerald); }

.ev-footer__inner {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: var(--sp-4);
	padding-block: var(--sp-5);
}
.ev-footer__col h4 {
	color: var(--ev-white);
	font-size: 1rem;
	margin: 0 0 var(--sp-2);
	letter-spacing: .02em;
}
.ev-footer__brand p { margin: var(--sp-2) 0 0; line-height: 1.6; max-width: 38ch; }
.ev-footer__list {
	list-style: none; padding: 0; margin: 0;
	display: flex; flex-direction: column; gap: .5rem;
}
.ev-footer__list a { display: inline-block; }
.ev-footer__contact { list-style: none; padding: 0; margin: var(--sp-2) 0 0; display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; }

.ev-footer__bottom {
	border-top: 1px solid rgba(255,255,255,.1);
	padding-block: var(--sp-3);
	color: #94A3B8;
	font-size: .8rem;
}

@media (max-width: 768px) {
	.ev-footer__inner { grid-template-columns: 1fr; gap: var(--sp-3); padding-block: var(--sp-4); }
	.ev-footer__brand p { max-width: none; }
}

/* ============================================================
   11. HOMEPAGE — THEEVcar v1.4.20 COMPONENTS
   ============================================================ */
.theevcar-home { gap: var(--sp-5); }

/* Header LIVE button */
.ev-live {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	background: #EF4444;
	color: #fff;
	font-weight: 700;
	font-size: .8rem;
	letter-spacing: .06em;
	padding: .45rem 1rem;
	border-radius: 4px;
	flex-shrink: 0;
}
.ev-live::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: ev-pulse 1.4s infinite; }
.ev-live:hover { background: #DC2626; color: #fff; }
@keyframes ev-pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* Breaking News ticker */
.ev-breaking {
	display: flex;
	align-items: center;
	background: var(--ev-slate);
	border-radius: 6px;
	overflow: hidden;
	height: 44px;
}
.ev-breaking__tag {
	background: #EF4444;
	color: #fff;
	font-weight: 800;
	font-size: .72rem;
	letter-spacing: .08em;
	padding: 0 1rem;
	height: 100%;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
}
.ev-breaking__viewport { flex: 1; overflow: hidden; position: relative; }
.ev-breaking__viewport::before, .ev-breaking__viewport::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.ev-breaking__viewport::before { left: 0; background: linear-gradient(90deg, var(--ev-slate), transparent); }
.ev-breaking__viewport::after { right: 0; background: linear-gradient(-90deg, var(--ev-slate), transparent); }
.ev-breaking__track {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	white-space: nowrap;
	animation: ev-ticker 38s linear infinite;
}
.ev-breaking__viewport:hover .ev-breaking__track { animation-play-state: paused; }
.ev-breaking__item { color: #fff; font-size: .9rem; padding: 0 .25rem; }
.ev-breaking__item:hover { color: var(--ev-brand); }
.ev-breaking__sep { color: #FBBF24; font-size: .7rem; vertical-align: middle; }
@keyframes ev-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Section head row variant (kept for clarity) */
.ev-section__head--row { display: flex; align-items: center; justify-content: space-between; }

/* EV Market Today */
.ev-market { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-3); }
.ev-stat {
	background: var(--c-bg);
	border: 1px solid var(--ev-gray-200);
	border-top: 3px solid var(--ev-brand);
	border-radius: 8px;
	padding: var(--sp-3);
	display: flex;
	flex-direction: column;
	gap: .5rem;
}
.ev-stat--link { align-items: center; justify-content: center; text-align: center; gap: .75rem; background: linear-gradient(135deg, var(--ev-brand), var(--ev-brand-deep)); color: #fff; border-top-color: var(--ev-brand-deep); transition: transform var(--transition); }
.ev-stat--link:hover { transform: translateY(-2px); color: #fff; }
.ev-stat--link .ev-stat__label { color: rgba(255,255,255,.92); font-size: 1rem; font-weight: 600; }
.ev-stat--link .ev-stat__icon { font-size: 1.8rem; }
.ev-stat__head { display: flex; gap: .5rem; align-items: flex-start; }
.ev-stat__icon { font-size: 1.4rem; line-height: 1; }
.ev-stat__label { font-size: .82rem; color: var(--c-text-muted); line-height: 1.35; }
.ev-stat__label small { display: block; color: var(--ev-gray-400); font-size: .72rem; }
.ev-stat__value { font-size: 1.5rem; font-weight: 800; color: var(--c-text); }
.ev-stat__value small { font-size: .8rem; font-weight: 500; color: var(--c-text-muted); margin-left: .2rem; }
.ev-stat__change { font-size: .82rem; font-weight: 700; }
.ev-stat__change.is-up { color: var(--ev-brand); }
.ev-stat__change.is-down { color: #EF4444; }
.ev-market__source { margin: var(--sp-2) 0 0; font-size: .75rem; color: var(--ev-gray-400); }
.ev-market__source code { background: var(--ev-gray-bg); padding: 0 .35rem; border-radius: 3px; font-size: .7rem; }

/* EV vs น้ำมัน — cost calculator */
.ev-section__tag { display: inline-block; align-self: center; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--ev-brand-deep); background: rgba(24,158,73,.1); border: 1px solid rgba(24,158,73,.28); padding: .2rem .55rem; border-radius: 999px; }
.ev-calc { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--sp-3); }
.ev-calc .ev-stat--calc { border-top-width: 3px; }
.ev-calc .ev-stat--ev { border-top-color: var(--ev-brand); }
.ev-calc .ev-stat--ice { border-top-color: var(--ev-gray-400); }
.ev-calc .ev-stat--save { border-top-color: #00A37A; background: linear-gradient(180deg, rgba(0,163,122,.06), var(--c-bg)); }
.ev-stat__sub { font-size: .74rem; color: var(--ev-gray-500); }
.ev-stat__formula { font-size: .72rem; color: var(--ev-gray-400); background: var(--ev-gray-bg); border-radius: 5px; padding: .25rem .45rem; font-variant-numeric: tabular-nums; }
.ev-calc__bars { display: grid; gap: .6rem; margin-top: var(--sp-3); }
.ev-calc__bar { display: grid; grid-template-columns: 80px 1fr auto; align-items: center; gap: .75rem; }
.ev-calc__bar-label { font-size: .8rem; font-weight: 600; color: var(--c-text); white-space: nowrap; }
.ev-calc__bar-track { height: 14px; background: var(--ev-gray-bg); border-radius: 999px; overflow: hidden; }
.ev-calc__bar-fill { display: block; height: 100%; border-radius: 999px; }
.ev-calc__bar--ev .ev-calc__bar-fill { background: linear-gradient(90deg, var(--ev-brand), #00A37A); }
.ev-calc__bar--ice .ev-calc__bar-fill { background: linear-gradient(90deg, var(--ev-gray-400), var(--ev-gray-500)); }
.ev-calc__bar-val { font-size: .82rem; font-weight: 700; color: var(--c-text); font-variant-numeric: tabular-nums; }
.ev-calc__note { margin: var(--sp-3) 0 0; font-size: .76rem; line-height: 1.5; color: var(--ev-gray-500); background: var(--ev-gray-bg); border-left: 3px solid var(--ev-brand); border-radius: 0 6px 6px 0; padding: .6rem .8rem; }


/* 3-column block */
.ev-cols { display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: var(--sp-4); }
.ev-col {
	background: var(--ev-gray-bg);
	border: 1px solid var(--ev-gray-200);
	border-radius: 8px;
	padding: var(--sp-4);
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
}

/* Latest News list */
.ev-news-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.ev-news-row { display: grid; grid-template-columns: 96px 1fr; gap: var(--sp-3); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ev-gray-200); }
.ev-news-row:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-news-row__media img { width: 100%; height: 70px; object-fit: cover; border-radius: 6px; }
.ev-news-row__title { margin: 0 0 .3rem; font-size: .95rem; line-height: 1.35; }
.ev-news-row__title a { color: var(--c-text); }
.ev-news-row__title a:hover { color: var(--ev-brand); }
.ev-news-row__meta { font-size: .75rem; color: var(--ev-gray-400); }

/* Latest News — tab pills */
.ev-tabs { display: flex; gap: .35rem; flex-wrap: wrap; border-bottom: 1px solid var(--ev-gray-200); padding-bottom: .65rem; }
.ev-tab { background: transparent; border: 1px solid var(--ev-gray-200); border-radius: 999px; padding: .35rem .85rem; font-size: .8rem; color: var(--c-text-muted); cursor: pointer; transition: all var(--transition); }
.ev-tab:hover { border-color: var(--ev-brand); color: var(--ev-brand); }
.ev-tab.is-active { background: var(--ev-brand); border-color: var(--ev-brand); color: #fff; font-weight: 600; }

/* Models — carousel dots */
.ev-dots { display: flex; justify-content: center; gap: .45rem; margin-top: var(--sp-3); }
.ev-dots__item { width: 8px; height: 8px; border-radius: 50%; background: var(--ev-gray-200); }
.ev-dots__item.is-active { background: var(--ev-brand); width: 20px; border-radius: 4px; }

/* New EV Models grid */
.ev-models-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.ev-model-card { background: var(--c-bg); border: 1px solid var(--ev-gray-200); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; }
.ev-model-card__media { position: relative; display: block; }
.ev-model-card__badge { position: absolute; top: 8px; left: 8px; background: var(--ev-brand); color: #fff; padding: .15rem .5rem; border-radius: 4px; font-size: .62rem; font-weight: 800; letter-spacing: .05em; z-index: 2; }
.ev-model-card__media img { width: 100%; height: 120px; object-fit: cover; }
.ev-model-card__body { padding: var(--sp-2) var(--sp-3) var(--sp-3); display: flex; flex-direction: column; gap: .25rem; }
.ev-model-card__title { margin: 0; font-size: .9rem; font-weight: 700; color: var(--c-text); }
.ev-model-card__price { font-size: .82rem; font-weight: 700; color: var(--ev-brand); }

/* Most Popular */
.ev-popular { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-3); }
.ev-popular__item { display: grid; grid-template-columns: 32px 72px 1fr; gap: var(--sp-3); align-items: center; padding-bottom: var(--sp-3); border-bottom: 1px solid var(--ev-gray-200); }
.ev-popular__item:last-child { border-bottom: 0; padding-bottom: 0; }
.ev-popular__rank { font-size: 1.4rem; font-weight: 800; color: var(--ev-brand); font-family: ui-monospace, monospace; }
.ev-popular__media img { width: 100%; height: 56px; object-fit: cover; border-radius: 6px; }
.ev-popular__title { margin: 0; font-size: .9rem; line-height: 1.3; }
.ev-popular__title a { color: var(--c-text); }
.ev-popular__title a:hover { color: var(--ev-brand); }

/* Ghost button */
.ev-btn { display: inline-flex; align-items: center; justify-content: center; padding: .6rem 1.1rem; border-radius: 6px; font-size: .85rem; font-weight: 600; transition: background var(--transition), color var(--transition); margin-top: auto; }
.ev-btn--ghost { background: transparent; border: 1px solid var(--ev-brand); color: var(--ev-brand); }
.ev-btn--ghost:hover { background: var(--ev-brand); color: #fff; }

/* Service cards */
.ev-services { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-3); }
.ev-service {
	position: relative;
	min-height: 200px;
	border-radius: 10px;
	overflow: hidden;
	display: flex;
	align-items: flex-end;
	padding: var(--sp-4);
	color: #fff;
	background-size: cover;
	background-position: center;
	transition: transform var(--transition);
}
.ev-service:hover { transform: translateY(-3px); }
.ev-service__overlay { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(15,23,42,.15) 0%, rgba(15,23,42,.85) 70%); z-index: 1; }
.ev-service__body { position: relative; z-index: 2; display: flex; flex-direction: column; gap: .4rem; width: 100%; }
.ev-service__title { margin: 0; font-size: 1.2rem; font-weight: 800; letter-spacing: .02em; }
.ev-service__desc { margin: 0; font-size: .82rem; opacity: .92; line-height: 1.5; }
.ev-service__arrow {
	position: absolute; right: 14px; top: 14px; z-index: 2;
	width: 36px; height: 36px; border-radius: 50%;
	background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.25);
	display: inline-flex; align-items: center; justify-content: center;
	font-size: 1rem; color: #fff;
	transition: background var(--transition), transform var(--transition);
}
.ev-service:hover .ev-service__arrow { background: var(--ev-brand); transform: translateX(3px); }
.ev-service--0 { background-color: #0B63F6; }
.ev-service--1 { background-color: #0E7A37; }
.ev-service--2 { background-color: #0E7490; }
.ev-service--3 { background-color: #7C3AED; }

/* EV INSIDER newsletter */
.ev-insider {
	display: grid;
	grid-template-columns: 1.4fr .6fr;
	gap: var(--sp-4);
	align-items: center;
	background: linear-gradient(135deg, #0F172A 0%, #134e2f 100%);
	border-radius: 14px;
	padding: var(--sp-5);
	color: #fff;
	overflow: hidden;
}
.ev-insider__title { margin: 0; font-size: 1.9rem; font-weight: 800; color: var(--ev-brand); letter-spacing: -.01em; }
.ev-insider__desc { margin: var(--sp-1) 0 var(--sp-3); font-size: .95rem; opacity: .9; max-width: 56ch; line-height: 1.55; }
.ev-insider__form { display: flex; gap: .5rem; flex-wrap: wrap; max-width: 520px; }
.ev-insider__form input[type=email] {
	flex: 1 1 240px;
	padding: .7rem 1rem;
	border: 0; border-radius: 6px;
	font: inherit;
	background: rgba(255,255,255,.95);
	color: var(--c-text);
}
.ev-insider__form button {
	background: var(--ev-brand); color: #fff;
	border: 0; border-radius: 6px;
	padding: .7rem 1.2rem; font-weight: 700; cursor: pointer;
	transition: background var(--transition);
}
.ev-insider__form button:hover { background: var(--ev-brand-deep); }
.ev-insider__ok { color: #6EE7B7; font-weight: 700; }
.ev-insider__art {
	font-size: 8rem;
	text-align: right;
	opacity: .6;
	line-height: 1;
}

/* Footer 4 columns: brand (widest) + categories + about + contact */
.ev-footer__inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }

/* Responsive for new homepage blocks */
@media (max-width: 1024px) {
	.ev-market { grid-template-columns: repeat(3, 1fr); }
	.ev-calc { grid-template-columns: repeat(3, 1fr); }
	.ev-cols { grid-template-columns: 1fr 1fr; }
	.ev-col:last-child { grid-column: 1 / -1; }
	.ev-services { grid-template-columns: repeat(2, 1fr); }
	.ev-footer__inner { grid-template-columns: 1fr 1fr 1fr; }
	.ev-insider { grid-template-columns: 1fr; padding: var(--sp-4); }
	.ev-insider__art { font-size: 4rem; text-align: left; }
}
@media (max-width: 640px) {
	.ev-market { grid-template-columns: repeat(2, 1fr); }
	.ev-calc { grid-template-columns: repeat(2, 1fr); }
	.ev-calc__bar { grid-template-columns: 64px 1fr auto; gap: .5rem; }
	.ev-cols { grid-template-columns: 1fr; }
	.ev-col:last-child { grid-column: auto; }
	.ev-services { grid-template-columns: 1fr; }
	.ev-models-grid { grid-template-columns: 1fr; }
	.ev-footer__inner { grid-template-columns: 1fr; }
	.ev-breaking__tag { font-size: .62rem; padding: 0 .7rem; }
	.ev-insider { padding: var(--sp-3); }
	.ev-insider__title { font-size: 1.5rem; }
}

/* ==========================================================================
   12. ARCHIVE/CATEGORY 3-COLUMN MAGAZINE GRID (no sidebar)  -- v1.4.12
   -------------------------------------------------------------------------- */
/* Force the archive list into a 3-column grid; the right widget area is
   already removed via functions.php section 9.8 (generate_get_layout filter
   returns 'no-sidebar' on category / tag / tax / author / search / archive). */
.archive .site-main,
.blog .site-main,
.search .site-main {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .75rem;
	max-width: var(--content-max);
	margin-inline: auto;
}

/* Page header + pagination span all 3 columns */
.archive .page-header,
.blog .page-header,
.search .page-header,
.archive .navigation.pagination,
.blog .navigation.pagination,
.search .navigation.pagination,
.archive #nav-below,
.blog #nav-below,
.search #nav-below,
.archive .nav-links,
.blog .nav-links,
.search .nav-links {
	grid-column: 1 / -1;
}

/* v1.4.19 — Defensive reset for category/archive .page-header.
   It was escaping to top:0 left:0 of the viewport (above the sticky header).
   Force static positioning + style the page-title as a proper chip that lives
   in the content flow, just below the header. */
.archive .page-header,
.blog .page-header,
.search .page-header {
	position: static !important;
	max-width: var(--content-max);
	margin: var(--sp-3) auto var(--sp-3);
	padding: 0 .5rem;
}
.archive .page-header .page-title,
.blog .page-header .page-title,
.search .page-header .page-title,
body.category .page-header .page-title,
body.tag .page-header .page-title {
	position: static !important;
	display: inline-block;
	background: var(--ev-blue);
	color: #fff;
	padding: .4rem 1.05rem;
	font-size: .85rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	border-radius: 4px;
	margin: 0;
}

/* Convert GP's default .entry article into a compact card */
.archive .site-main > article,
.blog .site-main > article,
.search .site-main > article {
	background: #fff;
	border-radius: var(--radius-md);
	border: 1px solid #e5e7eb;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	margin: 0;
	padding: 0;
	transition: transform .2s ease, box-shadow .2s ease;
}

.archive .site-main > article:hover,
.blog .site-main > article:hover,
.search .site-main > article:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.08);
}

/* Flatten GP's .inside-article wrapper so its direct children
   (entry-header, post-image, entry-summary) become flex items of <article>.
   In GP 3.x .inside-article places entry-header BEFORE post-image in the
   DOM, so without flattening the title would render above the image. */
.archive .site-main > article .inside-article,
.blog .site-main > article .inside-article,
.search .site-main > article .inside-article {
	display: contents;
}

/* Featured image: 4:3 (taller, more dominant), fills card top.
   `order: -1` pushes it above the title in the flex column. */
.archive .site-main .post-image,
.blog .site-main .post-image,
.search .site-main .post-image {
	order: -1;
	margin: 0;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	width: 100%;
	display: block;
}

.archive .site-main .post-image img,
.blog .site-main .post-image img,
.search .site-main .post-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Card body — tighter padding so image + title fill the frame */
.archive .site-main .entry-header,
.blog .site-main .entry-header,
.search .site-main .entry-header {
	padding: .7rem .85rem .5rem;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: .4rem;
}

.archive .site-main .entry-title,
.blog .site-main .entry-title,
.search .site-main .entry-title {
	font-size: 1.15rem;
	line-height: 1.35;
	margin: 0;
	font-weight: 700;
	color: var(--ev-slate-900, #0f172a);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* v1.4.10 — archive card minimal layout: image + title + "Read more" only.
   Hide the excerpt paragraphs (inside .entry-summary / .entry-content), the
   date+author meta, and the category/tag footer. The "Read more" link stays
   as a single visible link styled in brand green. */
.archive .site-main .entry-summary > p,
.blog .site-main .entry-summary > p,
.search .site-main .entry-summary > p,
.archive .site-main .entry-content > p,
.blog .site-main .entry-content > p,
.search .site-main .entry-content > p {
	display: none;
}

/* "Read more" link — only element shown in .entry-summary now */
.archive .site-main .entry-summary a,
.blog .site-main .entry-summary a,
.search .site-main .entry-summary a,
.archive .site-main .entry-content a,
.blog .site-main .entry-content a,
.search .site-main .entry-content a {
	display: inline-block;
	color: #189E49;
	font-weight: 600;
	font-size: .9rem;
	text-decoration: none;
	margin-top: .25rem;
	transition: color .15s ease;
}

.archive .site-main .entry-summary a:hover,
.blog .site-main .entry-summary a:hover,
.search .site-main .entry-summary a:hover,
.archive .site-main .entry-content a:hover,
.blog .site-main .entry-content a:hover,
.search .site-main .entry-content a:hover {
	color: #0f7c3a;
	text-decoration: underline;
}

/* Hide date/author meta + categories/tags footer */
.archive .site-main .entry-meta,
.blog .site-main .entry-meta,
.search .site-main .entry-meta,
.archive .site-main .entry-footer,
.blog .site-main .entry-footer,
.search .site-main .entry-footer {
	display: none;
}

/* (entry-header padding already tightened above — v1.4.12) */

/* ==========================================================================
   13. CLS / PERFORMANCE HARDENING — v1.4.20
   Complements v1.4.16 (Kanit Fallback metrics + LCP fetchpriority/async).
   ========================================================================== */

/* (a) Reserve space for common third-party ad containers so the ad does NOT
   push content down when it injects late. This is the #1 remaining CLS source
   on desktop (Google AdSense / theme ad widgets). Harmless if the selectors
   don't exist on a given install. */
.adsbygoogle,
.ad-slot,
.ads,
.adv,
.advertisement,
.ev-ad,
[data-ad],
[data-adslot],
.adsbygoogle + ins {
	min-height: 100px;
	display: block;
}

/* (b) Skip rendering of below-the-fold regions until they scroll into view.
   Cuts Total Blocking Time and stops any late widget (related posts, comments,
   newsletter) from shifting the page. contain-intrinsic-size reserves a
   placeholder so the scrollbar never jumps. */
.ev-section,
.ev-footer,
.ev-insider {
	content-visibility: auto;
	contain-intrinsic-size: auto 480px;
}
/* Hero is above the fold on every view — never skip it. */
.ev-section:first-of-type { content-visibility: visible; contain-intrinsic-size: none; }

/* Responsive */
@media (max-width: 1024px) {
	.archive .site-main,
	.blog .site-main,
	.search .site-main {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--sp-3);
	}
}

@media (max-width: 640px) {
	.archive .site-main,
	.blog .site-main,
	.search .site-main {
		grid-template-columns: 1fr;
		gap: var(--sp-3);
	}
}