/* ==========================================================================
   Indian Car Nerds — v2.0.0 "Premium Editorial Platform" Homepage Redesign
   Loads AFTER design-system.css — additive layer only (per the project's
   "extend, never rebuild working code" rule). Covers: typography rebrand
   support, mascot micro-animations, the fallback-media illustration system
   (used instead of grey placeholder boxes), the rebuilt navbar visuals,
   light-theme toggle overrides, and every new homepage section.
   ========================================================================== */

/* ==========================================================================
   0. Foundations: light-theme toggle, focus ring, ripple, underline utility
   ========================================================================== */
[data-theme="light"] body,
[data-theme="light"] .icn-header,
[data-theme="light"] .icn-footer {
	background-color: #F7F5F2;
	color: #171412;
}
[data-theme="light"] .icn-header:not(.is-scrolled) { background-color: transparent; }
[data-theme="light"] .icn-header.is-scrolled { background-color: rgba(247, 245, 242, 0.86); }
[data-theme="light"] .icn-content-card,
[data-theme="light"] .icn-car-card,
[data-theme="light"] .icn-sidebar-widget,
[data-theme="light"] .icn-rail-module,
[data-theme="light"] .icn-review-spot,
[data-theme="light"] .icn-vs-card,
[data-theme="light"] .icn-category-card,
[data-theme="light"] .icn-brand-tile,
[data-theme="light"] .icn-timeline__card,
[data-theme="light"] .icn-compare2__widget,
[data-theme="light"] .icn-video-card,
[data-theme="light"] .icn-hero2__rail-block,
[data-theme="light"] .icn-poll {
	background-color: #FFFFFF;
	border-color: #E7E2D9;
	color: #171412;
}
[data-theme="light"] .icn-section-alt { background-color: #EFEBE3; }
[data-theme="light"] .icn-meta,
[data-theme="light"] .icn-content-card__author,
[data-theme="light"] .icn-content-card__date { color: #6B655C; }
[data-theme="light"] .icn-mobile-menu,
[data-theme="light"] .icn-search-overlay__box,
[data-theme="light"] .icn-megamenu__panel { background-color: #FFFFFF; color: #171412; }

/* v3.7: "Bring back the theme switch... Animate transition." Every surface
   the light-theme override above can repaint gets a real color transition,
   so flipping the toggle cross-fades instead of snapping instantly. */
body,
.icn-header,
.icn-footer,
.icn-content-card,
.icn-car-card,
.icn-sidebar-widget,
.icn-rail-module,
.icn-review-spot,
.icn-vs-card,
.icn-category-card,
.icn-brand-tile,
.icn-timeline__card,
.icn-compare2__widget,
.icn-video-card,
.icn-hero2__rail-block,
.icn-poll,
.icn-mobile-menu,
.icn-search-overlay__box,
.icn-megamenu__panel {
	transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}

.icn-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--foreground-muted);
	cursor: pointer;
	transition: color 0.2s var(--icn-ease-out), border-color 0.2s var(--icn-ease-out), transform 0.15s var(--icn-ease-out);
}
.icn-theme-toggle:hover { color: var(--wp--preset--color--amber); border-color: var(--wp--preset--color--amber); transform: rotate(12deg); }
.icn-theme-toggle .icn-theme-toggle__moon { display: none; }
[data-theme="light"] .icn-theme-toggle .icn-theme-toggle__sun { display: none; }
[data-theme="light"] .icn-theme-toggle .icn-theme-toggle__moon { display: block; }

/* Button ripple (vanilla — a radial ::after that scales/fades on click via a
   JS-toggled class, no library) */
.icn-ripple { position: relative; overflow: hidden; }
.icn-ripple::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(circle, rgba(242,84,45,0.35) 0%, transparent 70%);
	opacity: 0;
	transform: scale(0.5);
	transition: opacity 0.5s ease, transform 0.5s ease;
	pointer-events: none;
}
.icn-ripple.is-rippling::after { opacity: 1; transform: scale(1.4); transition: opacity 0.6s ease, transform 0.6s ease; }

/* Animated underline utility for nav links / text links throughout v2 */
.icn-underline {
	position: relative;
	text-decoration: none;
}
.icn-underline::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -3px;
	width: 0;
	height: 2px;
	background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent));
	transition: width 0.25s var(--icn-ease-out);
}
.icn-underline:hover::after { width: 100%; }

/* ==========================================================================
   1. Logo mark — the real site identity (LOGO + "Indian Car Nerds"
   wordmark). Animation is deliberately understated per the brief ("very
   subtle, no gimmicks"): a barely-there ambient glow pulse at rest, plus a
   small one-time suspension bounce on hover only — no continuous motion.
   ========================================================================== */
.icn-logo-mark { display: block; border-radius: 12px; }
.icn-logo-mark--header,
.icn-logo-mark--footer {
	animation: icn-logo-glow-idle 4s ease-in-out infinite;
}
@keyframes icn-logo-glow-idle {
	0%, 100% { filter: drop-shadow(0 0 0 rgba(242, 84, 45, 0)); }
	50% { filter: drop-shadow(0 0 7px rgba(242, 84, 45, 0.35)); }
}
/* v3.8: "Gentle entrance on page load." A one-time, subtle fade + settle
   (no bounce, no rotation here — that's reserved for hover) layered onto the
   header mark's existing continuous idle glow via a second comma-separated
   animation, the same technique already used for the legacy mascot's
   drive-in below. `both` fill-mode holds the resting state once it finishes
   so it doesn't fight the is-scrolled/hover transform rules afterward. */
.icn-logo-mark--header {
	animation: icn-logo-mark-drive-in 0.8s var(--icn-ease-out) both, icn-logo-glow-idle 4s ease-in-out infinite;
}
@keyframes icn-logo-mark-drive-in {
	from { opacity: 0; transform: translateY(-6px) scale(0.94); }
	to { opacity: 1; transform: translateY(0) scale(1); }
}
.icn-header__logo:hover .icn-logo-mark--header {
	animation: icn-logo-glow-idle 4s ease-in-out infinite, icn-mascot-bounce 0.6s var(--icn-ease-out);
}
.icn-logo-mark__wheel { transform-origin: center; transition: transform 0.5s var(--icn-ease-out); }
.icn-header__logo:hover .icn-logo-mark__wheel { transform: rotate(50deg); }
/* v3.8: "Brief headlight glow on initial load." The real vector logo's
   headlight circle (icn_theme_logo_mark()'s <circle class="icn-logo-mark__
   headlight">) gets one short glow-and-fade pass a beat after the mark
   drives in, then settles — "brief," not a repeating pulse. Also glows a
   touch brighter on hover, echoing the legacy mascot's existing headlight
   hover treatment above. */
.icn-logo-mark__headlight { transition: filter 0.3s ease; }
.icn-logo-mark--header .icn-logo-mark__headlight {
	animation: icn-logo-headlight-flash 1.4s ease-out 0.3s both;
}
@keyframes icn-logo-headlight-flash {
	0% { filter: drop-shadow(0 0 0 rgba(255, 233, 184, 0)); }
	40% { filter: drop-shadow(0 0 6px rgba(255, 233, 184, 0.9)); }
	100% { filter: drop-shadow(0 0 0 rgba(255, 233, 184, 0)); }
}
.icn-header__logo:hover .icn-logo-mark--header .icn-logo-mark__headlight {
	filter: drop-shadow(0 0 5px rgba(255, 233, 184, 0.85));
}
.icn-logo-mark--newsletter { animation: icn-logo-glow-idle 4s ease-in-out infinite; }
.icn-logo-mark--empty-hero { margin: 0 auto 1rem; }

/* ==========================================================================
   1z. Mascot (legacy — kept as harmless dead code; no longer used for the
   site identity anywhere the brief specifies "the logo", see icn_theme_logo_mark)
   ========================================================================== */
.icn-mascot { display: block; }
.icn-mascot__headlight {
	transition: filter 0.3s ease, fill 0.3s ease;
}
.icn-mascot__wheel { transition: transform 0.6s var(--icn-ease-out); }

.icn-header__logo:hover .icn-mascot--header {
	animation: icn-mascot-bounce 0.6s var(--icn-ease-out);
}
.icn-header__logo:hover .icn-mascot--header .icn-mascot__headlight {
	fill: var(--wp--preset--color--amber);
	filter: drop-shadow(0 0 6px var(--wp--preset--color--amber));
}
.icn-header__logo:hover .icn-mascot--header .icn-mascot__wheel {
	transform: rotate(90deg);
}
@keyframes icn-mascot-bounce {
	0% { transform: translateY(0); }
	30% { transform: translateY(-6px); }
	55% { transform: translateY(0); }
	75% { transform: translateY(-2px); }
	100% { transform: translateY(0); }
}

/* Premium drive-in on first paint — plays once, then settles (kept subtle:
   a short slide + fade, not a bounce-fest). Respects reduced-motion via the
   existing global @media rule in design-system.css. */
.icn-mascot--header {
	animation: icn-mascot-drive-in 0.9s var(--icn-ease-out) both;
}
@keyframes icn-mascot-drive-in {
	from { opacity: 0; transform: translateX(-24px); }
	to { opacity: 1; transform: translateX(0); }
}
.icn-mascot--newsletter { flex: none; animation: icn-mascot-bounce 3s ease-in-out infinite; animation-delay: 1s; }
.icn-mascot--empty-hero { margin: 0 auto 1rem; }

/* ==========================================================================
   2. Navbar refinements — v3.3: 76px height, real UI font (see the font-family
   bug fix below), deeper glass, clean underline active-state
   ========================================================================== */
:root {
	/* v3.9: "Reduce overall navbar height slightly" — 76px -> 64px (also
	   conveniently matches this round's own "Section spacing: 64px" number).
	   Everything that reads this var (the hero-rail's sticky top offset, the
	   #cars/#news/#reviews/#buying-guides/#photos/#newsletter scroll-margin
	   rule below) automatically stays correctly offset from the real,
	   now-shorter header — this is just keeping that math honest, not a
	   change to any of those sections themselves. */
	--icn-header-h: 64px;
	/* One spacing system for the whole homepage. v3.3 tightens this ~35-40%
	   from the v3.2 values per direct feedback ("everything currently feels
	   section / huge gap / section — reduce vertical spacing by 35-40%,
	   tighter rhythm"): roughly 48-64px between major sections, 28px from a
	   section title to its content, 24px between cards (unchanged — that
	   rhythm wasn't the complaint), 40–60px of side padding on desktop.
	   Every section/grid/heading below reads from these instead of its own
	   one-off value. */
	--icn-space-section: clamp(2.25rem, 4.5vw, 3.25rem);
	--icn-space-title: 1.75rem;
	--icn-space-card-gap: 1.5rem;
	--icn-space-inline: clamp(2.5rem, 5vw, 3.75rem);
}
.icn-header__bar {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	transition: min-height 0.25s var(--icn-ease-out);
}
.icn-header.is-scrolled {
	background-color: rgba(13, 13, 15, 0.72);
	backdrop-filter: blur(20px) saturate(160%);
	-webkit-backdrop-filter: blur(20px) saturate(160%);
}
/* Sticky-shrink: header quietly gets a little shorter once you've scrolled
   past the hero ("shrinks slightly on scroll" polish request) — background
   is already solid dark at all times (see style.css), this just tightens
   the bar. */
.icn-header.is-scrolled .icn-header__bar { min-height: 52px; }
.icn-header.is-scrolled .icn-logo-mark { transform: scale(0.86); transition: transform 0.25s var(--icn-ease-out); }
/* v3.9: "Make logo slightly larger than menu items but reduce the width
   occupied by the branding block." v3.8 had made the wordmark the "visual
   hero of the navbar" (1.9rem/800-weight); that round dialed it back to
   just a touch bigger than the 17px nav links beside it (1.2rem ≈ 19px),
   at a slightly lighter 700 weight so it reads as a confident wordmark
   rather than a competing headline — a denser, more magazine-masthead feel
   instead of a hero treatment.
   v4.0 item 7: "Give more visual importance to the Indian Car Nerds
   branding." Nudged up again to 1.35rem/800-weight — still well short of
   v3.8's full "hero" treatment, but now clearly the most prominent text in
   the header next to the enlarged 18px nav links. */
.icn-header__logo-word {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 800;
	font-size: 1.35rem;
	letter-spacing: 0.015em;
	position: relative;
}
.icn-header.is-scrolled .icn-header__logo-word { font-size: 1.15rem; }
@media (max-width: 480px) {
	.icn-header__logo-word { font-size: 1.15rem; }
}
/* v3.8: "Add a subtle tagline below: India's Automotive Magazine." Small,
   muted, wide letter-spacing — reads as a magazine kicker line, not a second
   headline competing with the wordmark above it. Hidden on narrow screens
   where the header is already tight (mobile menu covers full navigation).
   v3.9: "Remove the tagline from the navbar" — the markup that rendered
   this (icn_block_site_header() in inc/blocks.php) is gone, so this rule is
   unused dead code now, kept per this project's "extend, don't delete"
   convention in case a tagline returns in a future round. */
.icn-header__logo-tagline {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--foreground-muted);
	margin-top: 0.15rem;
	white-space: nowrap;
	transition: opacity 0.25s var(--icn-ease-out), height 0.25s var(--icn-ease-out), margin 0.25s var(--icn-ease-out);
}
.icn-header.is-scrolled .icn-header__logo-tagline {
	opacity: 0;
	height: 0;
	margin-top: 0;
	overflow: hidden;
}
@media (max-width: 900px) {
	.icn-header__logo-tagline { display: none; }
}
/* v3.8: "Animated underline on site title hover" — reuses the same
   underline mechanic as .icn-nav__link::after (accent-colored bar that
   grows from the left) rather than inventing a new animation language. */
.icn-header__logo-word::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--icn-ease-out);
}
.icn-header__logo:hover .icn-header__logo-word::after { transform: scaleX(1); }

/* v3.3 — FIX: .icn-nav__link was silently inheriting font-family: heading
   (Bebas Neue — a tall, condensed, all-caps DISPLAY font meant for big
   headlines) from the older frontend.css rule, since v3.2's navbar rewrite
   never explicitly set its own font-family. That's the actual root cause of
   "still looks like a WordPress menu... font feels too condensed and
   small" — Bebas Neue at 18px reads thin and cramped; it was never designed
   to be run at UI sizes. This is the fix: nav links now explicitly use the
   real UI/nav font (Inter, same family as the brief's "Manrope/Inter/Plus
   Jakarta Sans" suggestion — already loaded, no new font import needed),
   bigger (1.2rem ≈ 19px, top of the 18-20px ask), with real letter-spacing
   and generous gaps. Active/hover state is a clean single-color underline
   (no background rectangle, no heavy glow) per "NEWS / ──── , much
   cleaner." */
/* v3.6: "Current font feels weak... premium like Porsche, Apple or Motor1."
   Bumped from 1.2rem/600 to 1.3rem/700 with a touch more letter-spacing, and
   the list gap opened up slightly (2.4rem → 2.6rem) so the extra weight/size
   doesn't read as cramped — a "balanced," more confident nav rather than a
   default WordPress menu.
   v3.9: "Reduce navigation font size to 17–18px." Dialed back down to 17px
   (was 1.3rem ≈ 20.8px) — a denser, cleaner magazine-nav feel, and it also
   buys back the horizontal room the new 6th "Cars" item needs. The list gap
   is trimmed slightly too (2.6rem -> 2.1rem) for the same reason — six
   items at the old gap would have pushed the nav noticeably wider.
   v4.0 item 7: "Increase menu font slightly (around 18px)." 17px -> 18px. */
.icn-nav__list { display: flex; align-items: center; gap: 2.1rem; }
.icn-nav__link {
	position: relative;
	padding: 0.6rem 0.1rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: 0.015em;
	text-transform: none;
	transition: color 0.2s ease;
}
.icn-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.1rem;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s var(--icn-ease-out);
}
.icn-nav__link:hover::after,
.icn-nav__link.is-active::after { transform: scaleX(1); }
.icn-nav__link:hover,
.icn-nav__link.is-active { color: var(--wp--preset--color--accent); }
.icn-nav__link.is-active { font-weight: 700; }
/* v3.8: "Enhance the active navigation item with a stronger underline and
   subtle orange glow." Hover keeps the existing thin 2px underline; the
   active (current-section) state specifically gets a visibly thicker bar
   plus a soft accent-colored text-shadow, so it reads as clearly "you are
   here" rather than identical to a plain hover state. */
.icn-nav__link.is-active::after {
	height: 3px;
	box-shadow: 0 0 8px rgba(242, 84, 45, 0.55);
}
.icn-nav__link.is-active {
	text-shadow: 0 0 12px rgba(242, 84, 45, 0.35);
}

.icn-header__actions { display: flex; align-items: center; gap: 1.1rem; }
/* v3.3 — the search control is a visibly premium, input-shaped pill instead
   of an icon-only button with a hidden label. Still opens the existing full
   search overlay on click (icn_block_search_overlay()) — no functional
   search rebuild, just the visual treatment.
   v3.9: "Make search compact (icon + Search), expanding on click." The
   fixed 220px min-width (always wide open) is gone — at rest this is now a
   true compact icon+"Search" pill that hugs its own content, and widens on
   hover/focus (the closest honest equivalent to "expanding" for a control
   whose click action is opening a full-screen overlay rather than an
   inline input — see icn_block_site_header()'s comment for why the overlay
   itself wasn't rebuilt this round). */
.icn-header__search-toggle {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--wp--preset--color--foreground-muted);
	background: rgba(0,0,0,0.35);
	border: 1px solid rgba(255,255,255,0.1);
	border-radius: var(--icn-radius-pill);
	padding: 0.5rem 0.85rem !important;
	min-width: 0;
	justify-content: flex-start;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, padding 0.25s var(--icn-ease-out), min-width 0.25s var(--icn-ease-out);
}
.icn-header__search-toggle:hover,
.icn-header__search-toggle:focus-visible {
	border-color: var(--wp--preset--color--accent);
	background: rgba(242,84,45,0.1);
	color: var(--wp--preset--color--foreground);
	min-width: 128px;
	padding: 0.5rem 1.1rem !important;
}
.icn-header__search-label { white-space: nowrap; }
@media (max-width: 1100px) { .icn-header__search-label { display: none; } .icn-header__search-toggle { padding: 0.55rem !important; } }

/* v3.5: "Follow ICN" — icon-only social discovery beside the search bar.
   v3.6 update: "Make FOLLOW ICN much more visible... Do not make them
   tiny" — the label was made bigger/bolder and the icon circles grew from
   30px to 38px with a clearer border, so the whole widget reads as a real,
   findable feature rather than a barely-there afterthought.
   v3.9: "Remove 'FOLLOW US' text. Keep only Instagram, X and Theme icons."
   The label markup is gone (see icn_block_site_header()); .icn-header__
   social-label below is now unused dead code (kept per this project's
   "extend, don't delete" convention). Icons themselves are unchanged —
   still monochrome-until-hover (orange accent), still 38px. */
.icn-header__social { display: flex; align-items: center; gap: 0.7rem; }
.icn-header__social-label {
	font-size: 0.85rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--foreground-muted);
	white-space: nowrap;
}
.icn-header__social-icon {
	display: flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.16);
	color: var(--wp--preset--color--foreground);
	transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.icn-header__social-icon svg { width: 17px; height: 17px; }
.icn-header__social-icon:hover {
	border-color: var(--wp--preset--color--accent);
	background: rgba(242,84,45,0.12);
	color: var(--wp--preset--color--accent);
	transform: translateY(-1px) scale(1.05);
}
@media (max-width: 1150px) { .icn-header__social-label { display: none; } }
@media (max-width: 840px) { .icn-header__social { display: none; } }

/* Mega menu v3: 3-column panel (Featured | Recent Stories | Trending +
   Popular Tags) — wider than the original 2-column (links | featured)
   layout since a v3 nav item always has all three groups. */
.icn-megamenu__panel--v3 {
	grid-template-columns: 1.1fr 1fr 1fr;
	max-width: 1100px;
}
.icn-megamenu__panel--v3 .icn-megamenu__featured-grid { grid-template-columns: 1fr; }
.icn-megamenu__panel--v3 .icn-megamenu__link-list { columns: 1; }
.icn-megamenu__tag-cloud { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.6rem; }
.icn-megamenu__tag {
	font-size: 0.76rem;
	padding: 0.25rem 0.6rem;
	border-radius: var(--icn-radius-pill);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground-muted);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.icn-megamenu__tag:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
@media (max-width: 1300px) {
	.icn-megamenu__panel--v3 { grid-template-columns: 1fr 1fr; }
	.icn-megamenu__panel--v3 .icn-megamenu__featured { grid-column: 1 / -1; }
}

/* ==========================================================================
   3. Fallback media (illustrated placeholder system, replaces grey boxes)
   ========================================================================== */
.icn-fallback-media {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--wp--preset--color--white);
}
.icn-fallback-media--sunset-glow { background: var(--wp--preset--gradient--sunset-glow); }
.icn-fallback-media--ember-fade { background: linear-gradient(135deg, var(--wp--preset--color--burnt-orange, #B34700), var(--wp--preset--color--graphite-raised)); }
.icn-fallback-media--carbon-veil { background: linear-gradient(135deg, var(--wp--preset--color--graphite-raised), var(--wp--preset--color--base)); }
.icn-fallback-media__lines {
	position: absolute;
	inset: -20%;
	background-image: repeating-linear-gradient(-35deg, rgba(255,255,255,0.06) 0 2px, transparent 2px 26px);
	opacity: 0.6;
}
.icn-fallback-media__mark { position: relative; z-index: 1; opacity: 0.9; }
.icn-fallback-media__label {
	position: absolute;
	bottom: 0.6rem;
	left: 0.8rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.65rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	opacity: 0.75;
}

/* ==========================================================================
   4. Hero Story + Editorial Sidebar
   ========================================================================== */
/* v3.3: the Hero now runs beside a compact rail again (Trending / Editor's
   Pick / Most Discussed — see icn_block_hero_rail()), per direct feedback
   ("beside it keep Trending / Editor's Pick / Most Discussed, much
   tighter"). This is a narrower, 3-module version of the old Editorial
   Sidebar reintroduced specifically for this slot — not the full-width
   sidebar that was removed from the rest of the homepage in v3.1, which
   stays removed. */
.icn-hero-row {
	display: grid;
	/* v3.7 root-cause fix: this was already `display: grid` with two direct
	   children (.icn-hero2__main, .icn-hero-rail) — the grid declaration
	   itself was never the problem. The actual cause of "hero still
	   overlapping the sidebar" is WordPress core's own global styles for a
	   Group block set to layout type "constrained" (see front-page.html):
	   core injects `.wp-block-group.is-layout-constrained > :where(...) {
	   max-width: var(--wp--style--global--content-size); margin-left: auto
	   !important; margin-right: auto !important; }` onto every direct
	   child that isn't align:full/wide. That rule was silently landing on
	   BOTH grid items here, telling each one to shrink-to-fit its own
	   content and center itself — exactly the kind of conflict that makes
	   a grid child collapse/drift and visually overlap its sibling instead
	   of behaving like an honest, independent column. The two rules right
	   after this one (targeting `.icn-hero-row > .icn-hero2__main` and
	   `.icn-hero-row > .icn-hero-rail` directly) have higher specificity
	   than core's `:where()`-based selector, so they now win outright and
	   neutralize it — each column is sized ONLY by grid-template-columns
	   below, nothing else. `minmax(0, 1fr)` (instead of a bare `1fr`) is
	   the standard fix for "grid blowout": a bare `1fr` track has an
	   implicit min-width equal to its content's min-content size, so
	   unshrinkable content (a wide image, a long unbroken string) can
	   still force the column past its share and overlap the sidebar;
	   wrapping it in `minmax(0, 1fr)` removes that implicit floor so the
	   column can never grow past what the grid assigns it. */
	/* v3.9: "Increase hero width slightly. Hero: ~72%. Sidebar: ~28%." Swaps
	   the sidebar's fixed minmax(280px, 340px) track for a proportional
	   minmax(280px, 28fr) one, paired with minmax(0, 72fr) for the Hero —
	   fr tracks split the row 72:28 once the 280px floor is satisfied, and
	   still guard against grid blowout the same way the old minmax(0, 1fr)
	   did (see the long comment above). 280px stays as the sidebar's floor
	   so the Trending/Editor's Pick/Most Discussed rail never gets crushed
	   on a narrower viewport, exactly as before. */
	grid-template-columns: minmax(0, 72fr) minmax(280px, 28fr);
	/* v3.8 reduced this to 24px ("around 24px"); v3.9: "Reduce gap between
	   them" again, further, to 16px — denser, per this round's "make the
	   homepage feel denser and more premium" direction. */
	gap: 16px;
	/* v3.8: "Remove the large grey empty space below the hero slider. Make
	   the hero slider automatically match the height of the right sidebar.
	   Both columns should end at the same height." `align-items: start`
	   was the actual cause — it let each column size to its OWN content
	   height instead of the row's height, so whichever column had less
	   content (usually the Hero, whose height was capped by its own
	   min-height clamp rather than allowed to grow) fell short of the
	   taller one and left visible empty space in its own box. `stretch`
	   (CSS Grid's own default, explicitly overridden to `start` before) is
	   the correct, standard fix: both columns are guaranteed to be exactly
	   the same height — whichever is naturally taller — with no extra
	   logic needed. */
	align-items: stretch;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: var(--icn-space-inline);
}
.icn-hero-row > .icn-hero2__main,
.icn-hero-row > .icn-hero-rail {
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	min-width: 0;
	width: 100%;
}
/* v3.9: "Section spacing: 64px." Scoped to the Hero's own section wrapper
   only — front-page.html gives the Hero's group block both "icn-v2-section"
   (the shared class every homepage section uses for its own padding-block:
   var(--icn-space-section), a responsive clamp()) AND "icn-hero-row"
   together, so this two-class selector is more specific than the shared
   single-class rule and wins ONLY here. News/Reviews/Guides/Cars/Photos/
   Newsletter keep reading the shared --icn-space-section var untouched —
   this round is scoped to "navbar and hero section" only, not a sitewide
   spacing-scale change. */
.icn-hero-row.icn-v2-section {
	padding-block: 64px;
}
@media (max-width: 1100px) { .icn-hero-row { grid-template-columns: 1fr; } }

/* Hero image, shortened ~15% from the previous cinematic near-viewport-height
   treatment per direct feedback ("the hero occupies too much height") —
   still a real cover shot, just more balanced against the rest of the page. */
.icn-hero2__main {
	position: relative;
	/* v3.8: min-height stays as a graceful floor (so the card never gets
	   too short if the sidebar's content is ever shorter than this), but
	   `height: 100%` is what actually makes it fill the grid row exactly
	   to the sidebar's height when the sidebar is the taller of the two —
	   the parent row's own `align-items: stretch` provides that 100%. */
	min-height: clamp(480px, 68vh, 720px);
	height: 100%;
	border-radius: var(--icn-radius-card);
	overflow: hidden;
	display: flex;
	/* v3.6: no more align-items:flex-end here — the Hero is now a Swiper
	   carousel, so this container's only job is to stretch its single
	   .icn-hero-swiper child to fill the full height (default
	   align-items:stretch). Each .swiper-slide below handles its own
	   bottom-aligned content individually, the same way this element used
	   to for the one static card it used to hold. */
	background: var(--wp--preset--color--surface);
}

/* v3.6: Hero Swiper — real SwiperJS (see assets/js/hero-swiper.js). Swiper's
   own base CSS (loaded via CDN) doesn't give the wrapper/slides a definite
   height on its own, which every absolutely-positioned .icn-hero2__media
   inside depends on — these rules give the whole chain (hero → swiper →
   wrapper → slide) a real 100% height all the way down. */
.icn-hero-swiper,
.icn-hero-swiper .swiper-wrapper { height: 100%; }
.icn-hero-swiper .swiper-slide {
	position: relative;
	height: 100%;
	display: flex;
	align-items: flex-end; /* replicates the old .icn-hero2__main bottom-alignment, per slide */
}
.icn-hero-swiper { --swiper-pagination-color: var(--wp--preset--color--accent); --swiper-pagination-bullet-inactive-color: rgba(255,255,255,0.45); --swiper-pagination-bullet-size: 8px; --swiper-pagination-bullet-horizontal-gap: 5px; }
.icn-hero-swiper__pagination { position: absolute; left: 0; right: 0; bottom: 1rem; z-index: 3; }
.icn-hero-swiper__arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 52px; height: 52px;
	display: flex; align-items: center; justify-content: center;
	border-radius: 50%;
	border: 1px solid rgba(255,255,255,0.18);
	background: rgba(13,13,15,0.45);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.icn-hero-swiper__arrow--prev { left: 1.25rem; }
.icn-hero-swiper__arrow--next { right: 1.25rem; }
.icn-hero-swiper__arrow:hover { border-color: var(--wp--preset--color--accent); background: rgba(242,84,45,0.35); transform: translateY(-50%) scale(1.06); }
@media (max-width: 700px) { .icn-hero-swiper__arrow { display: none; } } /* mobile relies on swipe, not arrows — keeps the card clean */

/* Compact hero-side rail — reuses the exact module/list styling from the
   old Editorial Sidebar (.icn-ed-module, .icn-rail-list, etc.) at a
   narrower 340px width, sticky under the fixed header.
   v3.9: "Card spacing: 24px" — the gap between the rail's 3 modules
   (Trending Today / Editor's Pick / Most Discussed) is now a literal 24px
   (was 1.25rem = 20px), matching this round's spacing scale. Scoped to just
   this flex gap, not the shared .icn-ed-module class itself (that class is
   also used by a different, out-of-scope module elsewhere in the theme). */
.icn-hero-rail {
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: calc(var(--icn-header-h, 64px) + 1.25rem);
}
@media (max-width: 1100px) { .icn-hero-rail { position: static; flex-direction: row; flex-wrap: wrap; } .icn-hero-rail .icn-ed-module { flex: 1 1 220px; } }
.icn-hero2__media { position: absolute; inset: 0; display: block; }
.icn-hero2__media img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--icn-ease-out), opacity 0.8s ease;
}
.icn-hero2__main:hover .icn-hero2__media img { transform: scale(1.04); }
/* v3.6: "Fade + slight scale" slide-change animation — the incoming slide's
   photo rests at a very slight zoom (1.06) and eases down to its normal
   size (1) exactly as it becomes the active slide, layered on top of
   Swiper's own fade crossfade between slides. */
.icn-hero-swiper .swiper-slide .icn-hero2__media img { transform: scale(1.06); }
.icn-hero-swiper .swiper-slide-active .icn-hero2__media img { transform: scale(1); }
.icn-hero2__gradient {
	position: absolute;
	inset: 0;
	/* v3.6: "Image should dominate — around 65% image / 35% content
	   overlay" — the scrim is now concentrated in roughly the bottom third
	   of the card (fully faded out by the ~50% mark going up) instead of
	   staying heavily darkened (>=0.6 opacity) across nearly half the
	   frame, so the upper ~65% of a real photo reads as a clean, undimmed
	   image rather than "a gradient with a photo behind it." */
	background: linear-gradient(0deg, rgba(13,13,15,0.94) 0%, rgba(13,13,15,0.55) 18%, rgba(13,13,15,0.12) 35%, rgba(13,13,15,0) 50%);
}
/* v3.7: "Too much empty space on the hero card. Increase image prominence.
   Reduce dead space. Content should feel vertically balanced." The content
   block's own padding is trimmed (was up to 3rem on wide screens) so less
   of the card is spent on chrome around the text and more of it reads as
   real photo — combined with the tightened margins below (title/excerpt/
   meta/specs/actions/CTA), the whole block sits more compactly instead of
   spreading out with visible gaps between each line.
   v3.9: "Internal padding: 20px" replaces the old responsive clamp with a
   literal 20px, per this round's spacing scale. "Content should stay within
   a maximum width of 520px" also lands here (was 720px) — narrower text
   measure, and it keeps the content block well clear of the Swiper-style
   side arrows (see .icn-hero-swiper__arrow below), which was the other
   half of this round's "arrows should never overlap text" ask: the arrows
   were already siblings of the content block in the DOM (not nested inside
   it) and already layered above it via z-index, so the real fix for
   "never overlap" is making sure the content itself never grows wide
   enough to reach them — this narrower max-width guarantees that. */
.icn-hero2__content {
	position: relative;
	z-index: 2;
	padding: 20px;
	max-width: 520px;
}
.icn-hero2__badges { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.4rem; }
.icn-hero2__badge { margin-right: 0; }
.icn-hero2__excerpt {
	color: var(--wp--preset--color--foreground);
	opacity: 0.85;
	max-width: 60ch;
	margin: 0.3rem 0 0.55rem;
	font-size: 1.02rem;
}
/* v3.7: "The stars look cheap... show only 8.2/10 inside a clean rating
   pill... no star icons anywhere." One shared pill style used everywhere a
   rating appears on the homepage — Hero, Explore Cars, and (already, from
   an earlier round) the generic content-card rating chip. No star glyphs
   in the markup at all anymore (icn_theme_rating_pill() in
   inc/homepage-v2.php), so there's nothing here to hide — this is the only
   rating display left. */
.icn-rating-pill {
	display: inline-flex;
	align-items: baseline;
	gap: 0.2rem;
	font-family: var(--wp--preset--font-family--data);
	font-weight: 700;
	font-size: 0.78rem;
	line-height: 1;
	color: var(--wp--preset--color--base);
	background: var(--wp--preset--color--amber, #ffb020);
	padding: 0.3rem 0.6rem;
	border-radius: var(--icn-radius-pill);
}
.icn-rating-pill small { font-size: 0.66rem; font-weight: 600; opacity: 0.75; }

/* Hero badge row context — same pill, just sized to sit comfortably among
   the other badges (Review / Category / Editor's Badge / Popular). */
.icn-hero2__rating.icn-rating-pill { font-size: 0.74rem; padding: 0.32rem 0.65rem; }

/* "Popular" badge — only ever rendered once a post has genuinely earned
   real traffic (>=500 real views); never a placeholder. Warm amber/coral
   tone (distinct from the Editor's Badge blue and the Review orange). */
.icn-hero2__popular-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem;
	border-radius: var(--icn-radius-pill);
	color: var(--wp--preset--color--amber);
	border: 1px solid var(--wp--preset--color--amber);
	background: rgba(240, 194, 75, 0.12);
}

/* "Top Comment" pill — links straight to the article's real highest-liked
   comment; only rendered when one genuinely exists (icn_theme_get_top_comment
   returns null on posts with no liked comments yet — no fake highlight). */
.icn-hero2__top-comment-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem;
	border-radius: var(--icn-radius-pill);
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--icn-border-color, rgba(255,255,255,0.25));
	background: rgba(255,255,255,0.06);
	text-decoration: none;
	transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.icn-hero2__top-comment-badge:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	background: rgba(242, 84, 45, 0.1);
}
.icn-hero2__title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(2rem, 4.2vw, 3.6rem);
	line-height: 0.98;
	margin: 0.35rem 0 0.5rem;
}
.icn-hero2__title a { color: inherit; text-decoration: none; }
.icn-hero2__meta { display: flex; gap: 0.5rem; align-items: center; color: var(--wp--preset--color--foreground-muted); font-size: 0.85rem; margin-bottom: 0.6rem; }
.icn-hero2__dot { opacity: 0.5; }
.icn-hero2__specs { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.75rem; }
.icn-hero2__specs span {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.7rem;
	border-radius: var(--icn-radius-pill);
	border: 1px solid rgba(255,255,255,0.25);
	color: var(--wp--preset--color--foreground);
}
.icn-hero2__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.85rem;
	padding: 0.75rem 1.4rem;
	border-radius: var(--icn-radius-pill);
	background: var(--wp--preset--gradient--sunset-glow, var(--wp--preset--color--accent));
	color: var(--wp--preset--color--base);
	font-weight: 700;
	text-decoration: none;
	box-shadow: var(--icn-shadow-glow);
	transition: transform 0.2s var(--icn-ease-out), box-shadow 0.2s var(--icn-ease-out);
}
/* v3.7: "Hovering buttons: Orange glow" — intensifies the CTA's existing
   always-on glow shadow rather than just lifting it. */
.icn-hero2__cta:hover { transform: translateY(-2px); box-shadow: 0 0 0 1px rgba(242,84,45,0.4), 0 12px 34px rgba(242,84,45,0.35); }

/* Hero actions row: real Comments/Likes/Views stats + Share — sits above
   the single "Read Review" CTA, replacing the old dual-CTA comment-preview
   block (this round: "Only ONE primary CTA"). */
.icn-hero2__actions { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap; margin-top: 0.25rem; }
.icn-share-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: var(--icn-radius-pill);
	padding: 0.35rem 0.8rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.78rem;
	color: var(--wp--preset--color--foreground-muted);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
/* v3.7: "Hovering buttons: Orange glow" */
.icn-share-btn:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); background: rgba(242,84,45,0.08); box-shadow: 0 0 0 1px rgba(242,84,45,0.2), 0 6px 18px rgba(242,84,45,0.2); }
.icn-hero2__empty { text-align: center; padding: 4rem 1rem; }

/* v3.7: Share hover menu — "Hovering Share should open Copy Link / Copy
   URL." A small panel below the Share button, shown on hover/focus (pure
   CSS, smooth fade — same pattern as the comment tooltip below) and also
   toggleable by click/tap (homepage-v2.js) for touch devices that have no
   :hover. Copy Link is a real, working clipboard copy; Copy URL is
   visibly marked "Soon" and genuinely disabled rather than pretending to
   work. */
.icn-share-menu { position: relative; display: inline-flex; }
.icn-share-menu__panel {
	position: absolute;
	bottom: calc(100% + 0.5rem);
	left: 0;
	z-index: 6;
	min-width: 170px;
	background: rgba(13,13,15,0.96);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 12px;
	box-shadow: 0 16px 40px rgba(0,0,0,0.45);
	padding: 0.4rem;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.22s var(--icn-ease-out, ease), transform 0.22s var(--icn-ease-out, ease);
}
.icn-share-menu:hover .icn-share-menu__panel,
.icn-share-menu:focus-within .icn-share-menu__panel,
.icn-share-menu.is-open .icn-share-menu__panel {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.icn-share-menu__item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
	background: none;
	border: none;
	border-radius: 8px;
	padding: 0.5rem 0.6rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem;
	font-weight: 500;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	text-align: left;
	transition: background 0.15s ease, color 0.15s ease;
}
.icn-share-menu__item:hover:not(:disabled) { background: rgba(242,84,45,0.12); color: var(--wp--preset--color--accent); }
.icn-share-menu__item-icon { flex-shrink: 0; }
.icn-share-menu__item--soon { color: var(--wp--preset--color--foreground-muted); cursor: not-allowed; }
.icn-share-menu__item--soon:hover { background: none; color: var(--wp--preset--color--foreground-muted); }
.icn-share-menu__soon-tag {
	margin-left: auto;
	font-size: 0.6rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.15rem 0.4rem;
	border-radius: var(--icn-radius-pill);
	background: rgba(255,255,255,0.08);
	color: var(--wp--preset--color--foreground-muted);
}
.icn-share-menu__copied {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--success, #4CAF7D);
	color: var(--wp--preset--color--base);
	border-radius: inherit;
	font-weight: 700;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease;
}
.icn-share-menu__item.is-copied .icn-share-menu__copied { opacity: 1; }

/* v3.7: Hero comment-icon hover tooltip — "Top Comments" preview. Pure CSS
   fade (no JS needed to show/hide), same transition treatment as the Share
   menu above for a consistent feel. Positioned above the icon so it never
   gets clipped by the bottom of the hero card. */
.icn-stat-row__item-hover { position: relative; display: inline-flex; }
.icn-comment-tooltip {
	position: absolute;
	bottom: calc(100% + 0.6rem);
	left: 0;
	z-index: 6;
	width: 260px;
	background: rgba(13,13,15,0.97);
	border: 1px solid rgba(255,255,255,0.14);
	border-radius: 14px;
	box-shadow: 0 20px 48px rgba(0,0,0,0.5);
	padding: 0.9rem 1rem;
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity 0.22s var(--icn-ease-out, ease), transform 0.22s var(--icn-ease-out, ease);
}
.icn-stat-row__item-hover:hover .icn-comment-tooltip,
.icn-stat-row__item-hover:focus-within .icn-comment-tooltip {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}
.icn-comment-tooltip__heading {
	display: block;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.68rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--foreground-muted);
	margin-bottom: 0.6rem;
}
.icn-comment-tooltip__list { list-style: none; margin: 0 0 0.7rem; padding: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.icn-comment-tooltip__item { display: flex; flex-direction: column; gap: 0.1rem; }
.icn-comment-tooltip__author { font-size: 0.8rem; font-weight: 700; color: var(--wp--preset--color--foreground); }
.icn-comment-tooltip__excerpt { font-size: 0.78rem; line-height: 1.4; color: var(--wp--preset--color--foreground-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.icn-comment-tooltip__view-all {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-size: 0.78rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	border-top: 1px solid rgba(255,255,255,0.1);
	padding-top: 0.6rem;
	width: 100%;
}
.icn-comment-tooltip__view-all:hover { text-decoration: underline; }
@media (max-width: 700px) {
	/* Hover-only affordances make little sense on touch — the tooltip and
	   share menu both still work via tap/focus (:focus-within, and the
	   Share menu's click-toggle), this just keeps the tooltip from
	   spilling off-screen on a narrow viewport. */
	.icn-comment-tooltip { width: 220px; }
}

/* Editor's Badge — the 3rd accent color (Electric Blue) at work: "verified/
   editor badges" per the brief. Deliberately NOT orange — orange stays
   reserved for buttons/CTAs. */
.icn-editor-badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem;
	border-radius: var(--icn-radius-pill);
	color: var(--wp--preset--color--accent-blue, #3B82F6);
	border: 1px solid var(--wp--preset--color--accent-blue, #3B82F6);
	background: rgba(59, 130, 246, 0.1);
	animation: icn-badge-glow 2.4s ease-in-out infinite;
}
/* Same animated glow treatment on the Reviews spotlight's "Editor's Pick"
   card badge — both are the theme's two "featured" badges, per the
   "Featured badge: Animated glow" polish request. */
.icn-card-badge--editors-pick { animation: icn-badge-glow-orange 2.4s ease-in-out infinite; }
@keyframes icn-badge-glow {
	0%, 100% { box-shadow: 0 0 0 rgba(59, 130, 246, 0); }
	50% { box-shadow: 0 0 10px rgba(59, 130, 246, 0.55); }
}
@keyframes icn-badge-glow-orange {
	0%, 100% { box-shadow: 0 0 0 rgba(242, 84, 45, 0); }
	50% { box-shadow: 0 0 10px rgba(242, 84, 45, 0.55); }
}

/* Breaking-news badge — replaces the old dedicated "Breaking" sidebar
   column with a small animated marker directly on the card it belongs to. */
.icn-badge-breaking {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.64rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem;
	border-radius: var(--icn-radius-pill);
	color: var(--wp--preset--color--danger);
	border: 1px solid var(--wp--preset--color--danger);
	background: rgba(226, 76, 76, 0.1);
	margin-left: 0.4rem;
}
.icn-badge-breaking__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--wp--preset--color--danger); box-shadow: 0 0 6px var(--wp--preset--color--danger); animation: icn-pulse-dot 1.1s ease-in-out infinite; }

/* Unified, color-coded content badges — see icn_theme_render_badges() in
   inc/homepage-v2.php. Every badge here is real (a real post type or a real
   post_tag); the five colors the brief called out explicitly get their own
   class, everything else shares the neutral steel-grey pill. */
.icn-badge-row { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.icn-badge {
	display: inline-flex;
	align-items: center;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.66rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	padding: 0.3rem 0.65rem;
	border-radius: var(--icn-radius-pill);
	color: var(--wp--preset--color--white, #fff);
	white-space: nowrap;
}
.icn-badge--review    { background: var(--wp--preset--color--accent); }                                  /* Orange */
.icn-badge--ev        { background: var(--wp--preset--color--accent-blue, #3B82F6); }                    /* Blue */
.icn-badge--official  { background: var(--wp--preset--color--success, #4CAF7D); }                        /* Green */
.icn-badge--breaking  { background: var(--wp--preset--color--danger, #E24C4C); }                         /* Red */
.icn-badge--exclusive { background: var(--wp--preset--color--exclusive-violet, #8B5CF6); }               /* Purple */
.icn-badge--featured  { background: var(--wp--preset--color--accent-blue, #3B82F6); }
.icn-badge--neutral   { background: var(--wp--preset--color--steel, #8A8A8A); color: var(--wp--preset--color--base); }
/* On a card's media (the small News tiles), the badge row floats over the
   image like the old single .icn-card-badge did. */
.icn-news-small__badge { position: absolute; top: 0.6rem; left: 0.6rem; z-index: 2; }
.icn-news-small__badge .icn-badge-row { margin-bottom: 0; }

/* Real "💬 Comments / ❤ Likes / 👁 Views" stat row — see icn_theme_stat_row(). */
.icn-stat-row { display: inline-flex; align-items: center; gap: 0.85rem; margin: 0.35rem 0; }
.icn-stat-row__item { display: inline-flex; align-items: center; gap: 0.3rem; font-family: var(--wp--preset--font-family--data); font-size: 0.8rem; color: var(--wp--preset--color--foreground-muted); text-decoration: none; }
a.icn-stat-row__item { cursor: pointer; transition: color 0.2s ease; }
a.icn-stat-row__item:hover { color: var(--wp--preset--color--accent); }

/* Genuine article Like button — real toggle state, real count, see
   icn_theme_like_button() / the AJAX handler behind it. */
.icn-like-btn {
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--wp--preset--font-family--data);
}
.icn-like-btn__icon { font-size: 0.9rem; color: var(--wp--preset--color--foreground-muted); transition: color 0.2s ease, transform 0.2s ease; }
.icn-like-btn:hover .icn-like-btn__icon { color: var(--wp--preset--color--danger); }
.icn-like-btn.is-liked .icn-like-btn__icon { color: var(--wp--preset--color--danger); }
.icn-like-btn.icn-like-btn--pop .icn-like-btn__icon { transform: scale(1.3); }
.icn-like-btn.is-busy { opacity: 0.6; pointer-events: none; }

@keyframes icn-pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.icn-rail-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
/* v3.7: "Hovering sidebar items: Background highlight" — the Hero Rail
   (Trending Today / Editor's Pick / Most Discussed) is the sidebar next to
   the Hero; each row now gets a soft background + slight inset padding on
   hover instead of only the title text changing color. */
.icn-rail-list__item {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin: 0 -0.5rem;
	padding: 0.35rem 0.5rem;
	border-radius: 10px;
	transition: background-color 0.2s ease;
}
.icn-rail-list__item:hover { background-color: rgba(255,255,255,0.05); }
.icn-rail-list__index {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.85rem;
	color: var(--wp--preset--color--foreground-muted);
	width: 1.4rem;
	flex: none;
}
.icn-rail-list__thumb { flex: none; width: 52px; height: 52px; border-radius: 8px; overflow: hidden; display: block; }
.icn-rail-list__thumb img, .icn-rail-list__thumb .icn-fallback-media { width: 100%; height: 100%; object-fit: cover; min-height: 0; }
.icn-rail-list__body { display: flex; flex-direction: column; min-width: 0; }
.icn-rail-list__title {
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.25;
	transition: color 0.2s ease;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.icn-rail-list__title:hover { color: var(--wp--preset--color--accent); }
.icn-rail-list__badge { align-self: flex-start; font-size: 0.6rem; padding: 0.15rem 0.45rem; margin-bottom: 0.2rem; }
.icn-rail-list__comments { margin-left: 0.4rem; }

/* ==========================================================================
   5. Comment preview: "💬 N Comments" / "Top Comment" quote / "Add Comment →"
   (comments are meant to be one of the site's "heroes" — never a large
   embedded comment box on the homepage, always a link to the real one)
   ========================================================================== */
.icn-comment-preview { margin: 0.75rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem; }
.icn-comment-preview__count {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
}
.icn-comment-preview__count:hover { color: var(--wp--preset--color--accent); }
.icn-comment-preview__top {
	display: flex;
	align-items: baseline;
	gap: 0.4rem;
	flex: 1 1 260px;
	min-width: 0;
	padding: 0.4rem 0.75rem;
	border-radius: 10px;
	border-left: 2px solid var(--wp--preset--color--accent-blue, #3B82F6);
	background: rgba(59, 130, 246, 0.07);
	text-decoration: none;
	color: inherit;
	transition: background 0.2s ease;
}
.icn-comment-preview__top:hover { background: rgba(59, 130, 246, 0.14); }
.icn-comment-preview__top-label {
	flex: none;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.62rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-blue, #3B82F6);
}
.icn-comment-preview__quote {
	font-style: italic;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.icn-comment-preview__add {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	margin-left: auto;
	color: var(--wp--preset--color--accent);
	font-weight: 700;
	font-size: 0.85rem;
	text-decoration: none;
	white-space: nowrap;
}
.icn-comment-preview__add:hover { color: var(--wp--preset--color--amber); }

/* ==========================================================================
   6. Endless marquee carousel (vanilla drag/swipe/pause, CSS transforms)
   ========================================================================== */
.icn-marquee-section { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-marquee-section__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.icn-marquee-section__controls { display: flex; gap: 0.4rem; }
.icn-marquee__arrow {
	width: 38px; height: 38px; border-radius: 50%;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--foreground);
	font-size: 1.2rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.icn-marquee__arrow:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
/* nav.js sets `overflow-x: auto` inline on every [data-icn-marquee] element
   (ticker, reviews carousel) to support drag-to-scroll — that inline style
   always wins over any CSS `overflow: hidden` here, and on Windows/Linux
   Chrome/Edge (classic, non-overlay scrollbars) that produced a visible
   native scrollbar under the ticker: "looks like HTML, not premium." This
   hides the scrollbar chrome cosmetically on every marquee/ticker/carousel
   without touching the drag/auto-scroll behavior itself. */
[data-icn-marquee] { scrollbar-width: none; -ms-overflow-style: none; }
[data-icn-marquee]::-webkit-scrollbar { display: none; width: 0; height: 0; }

.icn-marquee { overflow: hidden; cursor: grab; }
.icn-marquee.is-dragging { cursor: grabbing; }
.icn-marquee__track {
	display: flex;
	gap: 1.25rem;
	width: max-content;
	animation: icn-marquee-scroll 60s linear infinite;
}
.icn-marquee:hover .icn-marquee__track,
.icn-marquee.is-dragging .icn-marquee__track { animation-play-state: paused; }
@keyframes icn-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
.icn-marquee__item { flex: none; width: 300px; }
.icn-marquee__item .icn-content-card { height: 100%; }

/* ==========================================================================
   v3.5: Explore Cars Carousel — a configurator-style carousel (Apple/Tesla/
   Porsche reference), scoped entirely under .icn-cars-carousel so none of
   this bleeds into the Trending News Ticker, the Reviews carousel, or the
   Article marquee, which all still use the shared .icn-marquee rules above
   as-is.
   ========================================================================== */

/* No continuous auto-scroll here — a paginated, user-driven carousel (see
   the dots below) needs a stable resting position, not a ticker constantly
   drifting under it. */
.icn-cars-carousel .icn-marquee__track { animation: none; gap: 1.75rem; }

/* Wider, taller cards so ~4-5 are visible at once on desktop, with the row
   itself flush to the same content edges as every other section (no extra
   left/right gutter beyond the shared --icn-space-inline). */
.icn-cars-carousel__item { width: 300px; }
@media (min-width: 1400px) { .icn-cars-carousel__item { width: 320px; } }

/* Larger, premium circular arrow buttons — replaces the small 38px arrow
   shared by every other marquee on the site, scoped so those are untouched. */
.icn-cars-carousel .icn-marquee__arrow {
	width: 52px; height: 52px;
	font-size: 1.5rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: 0 6px 20px rgba(0,0,0,0.25);
	transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.icn-cars-carousel .icn-marquee__arrow:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 26px rgba(242,84,45,0.22);
}

/* Pagination dots — populated/managed by nav.js only when a
   [data-icn-marquee-dots] container is present (opt-in, so no other
   marquee on the site is affected). */
.icn-marquee-dots { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-top: 1.25rem; }
.icn-marquee-dot {
	width: 8px; height: 8px; border-radius: 50%; padding: 0; border: none;
	background: var(--wp--preset--color--border);
	cursor: pointer;
	transition: background 0.2s ease, transform 0.2s ease, width 0.2s ease;
}
.icn-marquee-dot:hover { background: var(--wp--preset--color--foreground-muted); }
.icn-marquee-dot.is-active { background: var(--wp--preset--color--accent); width: 22px; border-radius: 5px; }

/* -------------------------- Explore Car card -------------------------- */
.icn-explore-car-card {
	position: relative;
	display: flex;
	flex-direction: column;
	aspect-ratio: 4 / 5;
	height: 100%;
	border-radius: var(--icn-radius-card);
	overflow: hidden;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	transition: transform 0.3s var(--icn-ease-out), box-shadow 0.3s var(--icn-ease-out), border-color 0.3s var(--icn-ease-out);
}
.icn-explore-car-card:hover { transform: translateY(-6px); box-shadow: var(--icn-shadow-lg); border-color: var(--wp--preset--color--accent); }
/* display:contents removes the <a> itself from the flex layout so its
   children (media/body) become direct flex items of the card, sitting
   alongside the footer — that's what makes "image = ~70% of card height"
   measure against the WHOLE card rather than a nested wrapper. */
.icn-explore-car-card__link { display: contents; color: inherit; text-decoration: none; }

.icn-explore-car-card__media {
	position: relative;
	flex: 0 0 70%;
	min-height: 0;
	overflow: hidden;
	background: linear-gradient(160deg, #1c1c1f 0%, #0d0d0f 100%);
	display: flex; align-items: center; justify-content: center;
}
.icn-explore-car-card__media img,
.icn-explore-car-card__media .icn-fallback-media {
	width: 100%; height: 100%;
	object-fit: contain; /* real photography, never awkwardly cropped */
	object-position: center;
	padding: 0.9rem;
	box-sizing: border-box;
	transition: transform 0.5s var(--icn-ease-out);
}
.icn-explore-car-card:hover .icn-explore-car-card__media img { transform: scale(1.06); }
.icn-explore-car-card__gradient {
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(13,13,15,0.55) 0%, rgba(13,13,15,0) 55%);
	pointer-events: none;
}
/* A second, stronger gradient that only fades in on hover — reliably
   animates via opacity (crossfading raw gradient stops is unreliable
   cross-browser). */
.icn-explore-car-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(0deg, rgba(13,13,15,0.9) 0%, rgba(13,13,15,0.25) 55%, rgba(13,13,15,0) 78%);
	opacity: 0;
	transition: opacity 0.35s var(--icn-ease-out);
	pointer-events: none;
}
.icn-explore-car-card:hover .icn-explore-car-card__media::after { opacity: 1; }
.icn-explore-car-card__category { position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2; }
.icn-explore-car-card__hover-cta {
	position: absolute; left: 0.9rem; right: 0.9rem; bottom: 0.85rem;
	z-index: 2;
	display: flex; align-items: center; gap: 0.35rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.3s var(--icn-ease-out), transform 0.3s var(--icn-ease-out);
	pointer-events: none;
}
.icn-explore-car-card:hover .icn-explore-car-card__hover-cta { opacity: 1; transform: translateY(0); }

.icn-explore-car-card__body {
	flex: 1 1 auto;
	min-height: 0;
	padding: 0.85rem 1rem 0.35rem;
	display: flex; flex-direction: column; gap: 0.3rem;
}
.icn-explore-car-card__top-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
/* v3.7: no more inline star glyph here — reuses the shared .icn-rating-pill
   pill ("8.2/10", no stars) via icn_theme_rating_pill(), just sized down
   slightly to sit in this card's tighter top row. */
.icn-explore-car-card__rating.icn-rating-pill { flex: none; font-size: 0.72rem; padding: 0.24rem 0.5rem; }
.icn-explore-car-card__title {
	font-size: 1rem; margin: 0; line-height: 1.25;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.icn-explore-car-card__fuel { font-size: 0.78rem; color: var(--wp--preset--color--foreground-muted); }

.icn-explore-car-card__footer {
	flex: 0 0 auto;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.5rem 1rem 0.9rem;
	margin-top: auto;
}
.icn-explore-car-card__price { font-family: var(--wp--preset--font-family--heading); font-weight: 700; color: var(--wp--preset--color--accent); font-size: 0.95rem; }

/* -------------------------- Browse-All-Cars card -------------------------- */
.icn-explore-car-card--cta {
	background: linear-gradient(160deg, rgba(242,84,45,0.14) 0%, rgba(242,84,45,0.03) 100%);
	border: 1px solid rgba(242,84,45,0.35);
}
.icn-explore-car-card--cta:hover { border-color: var(--wp--preset--color--accent); box-shadow: var(--icn-shadow-glow); transform: translateY(-6px); }
.icn-explore-car-card__cta-link {
	display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
	gap: 0.6rem; height: 100%; padding: 1.5rem;
	color: inherit; text-decoration: none;
}
.icn-explore-car-card__cta-icon {
	display: flex; align-items: center; justify-content: center;
	width: 56px; height: 56px; border-radius: 50%;
	background: rgba(242,84,45,0.16);
	color: var(--wp--preset--color--accent);
}
.icn-explore-car-card__cta-title { font-size: 1.25rem; margin: 0; line-height: 1.25; }
/* v3.7: "Browse All Cars" → "Explore Car Database" — the two live stat
   lines are replaced with the brief's real feature list (what the Cars
   archive actually contains), styled as a compact checklist rather than a
   stats readout. */
.icn-explore-car-card__cta-features {
	display: flex; flex-direction: column; gap: 0.35rem;
	list-style: none; margin: 0; padding: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.82rem; color: var(--wp--preset--color--foreground-muted);
}
.icn-explore-car-card__cta-features li { display: flex; align-items: center; gap: 0.45rem; line-height: 1.3; }
.icn-explore-car-card__cta-features li::before {
	content: "";
	flex-shrink: 0;
	width: 5px; height: 5px; border-radius: 50%;
	background: var(--wp--preset--color--accent);
}
.icn-explore-car-card__cta-action {
	display: inline-flex; align-items: center; gap: 0.35rem;
	font-weight: 700; color: var(--wp--preset--color--accent);
	margin-top: 0.3rem;
}

/* v3.4: Trending Cars Carousel richer card — Category badge over the
   image, plus a real-data subtitle line (fuel type / seating) between the
   title and price. Scoped to .icn-trending-car-card only, so the shared
   .icn-car-card look elsewhere on the site (car archives, other rails) is
   untouched. */
.icn-trending-car-card__category { position: absolute; top: 0.6rem; right: 0.6rem; z-index: 2; }
.icn-trending-car-card .icn-content-card__quick-actions { z-index: 3; }
.icn-trending-car-card__subtitle { display: block; font-size: 0.78rem; color: var(--wp--preset--color--foreground-muted); margin: 0.1rem 0 0.35rem; }

/* ==========================================================================
   7. Compare Search — "Find Your Perfect Match"
   ========================================================================== */
.icn-compare2 {
	max-width: 1200px;
	margin-inline: auto;
	padding: clamp(2rem, 4vw, 3.5rem) var(--icn-space-inline);
	border-radius: var(--icn-radius-card);
	background: radial-gradient(120% 140% at 15% 10%, rgba(242,84,45,0.14), transparent 60%), var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
}
@media (max-width: 900px) { .icn-compare2 { grid-template-columns: 1fr; } }
.icn-compare2__intro span.icn-meta { color: var(--wp--preset--color--accent); }
.icn-compare2__intro h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	margin: 0.3rem 0 0.6rem;
}
.icn-compare2__chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.icn-compare2__chip {
	padding: 0.45rem 1rem;
	border-radius: var(--icn-radius-pill);
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--foreground);
	font-size: 0.82rem;
	cursor: pointer;
	transition: all 0.2s var(--icn-ease-out);
}
.icn-compare2__chip:hover,
.icn-compare2__chip.is-active {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 1px var(--wp--preset--color--accent) inset, 0 0 14px rgba(242,84,45,0.25);
}
.icn-compare2__widget.icn-compare-widget { background: transparent; border: none; padding: 0; }

/* ==========================================================================
   8. Reviews Spotlight — v3.4: rebuilt as one full-width Featured banner
      + four equally-balanced 2x2 grid cards (was one giant card + three
      stacked "medium" cards, called out directly as unbalanced). The old
      .icn-review-spot--medium horizontal-list layout is gone; the new
      .icn-review-spot--grid variant is a plain vertical card so all four
      grid cards are genuinely identical in shape.
   ========================================================================== */
.icn-reviews2 { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-reviews2__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--icn-space-title); }
.icn-reviews2__all { color: var(--wp--preset--color--accent); text-decoration: none; font-size: 0.9rem; }
.icn-reviews2__grid-four { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 1.5rem; }
@media (max-width: 700px) { .icn-reviews2__grid-four { grid-template-columns: 1fr; } }

.icn-review-spot { position: relative; border-radius: var(--icn-radius-card); overflow: hidden; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); transition: transform 0.3s var(--icn-ease-out), box-shadow 0.3s var(--icn-ease-out); }
/* v3.7: standardized to the shared "lift 6px, shadow increases" hover per this round's micro-interactions ask (was -4px). */
.icn-review-spot:hover { transform: translateY(-6px); box-shadow: var(--icn-shadow-glow); }
.icn-review-spot__media { position: relative; display: block; }
.icn-review-spot--grid .icn-review-spot__media { aspect-ratio: 16/10; }
.icn-review-spot--feature { display: flex; align-items: stretch; }
.icn-review-spot--feature .icn-review-spot__media { flex: none; width: 48%; }
@media (max-width: 800px) {
	.icn-review-spot--feature { flex-direction: column; }
	.icn-review-spot--feature .icn-review-spot__media { width: 100%; aspect-ratio: 16/10; }
}
.icn-review-spot__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--icn-ease-out); }
.icn-review-spot:hover .icn-review-spot__media img { transform: scale(1.06); }
.icn-review-spot__gradient { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(13,13,15,0.55) 0%, rgba(13,13,15,0) 45%); pointer-events: none; }
.icn-card-badge--editors-pick {
	position: absolute; top: 0.7rem; left: 0.7rem;
	background: var(--wp--preset--gradient--sunset-glow);
	color: var(--wp--preset--color--white);
	font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
	padding: 0.3rem 0.6rem; border-radius: var(--icn-radius-pill);
}
.icn-review-spot__body { padding: 1rem 1.1rem; }
.icn-review-spot--feature .icn-review-spot__body { flex: 1; padding: 1.75rem 1.75rem 1.75rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 800px) { .icn-review-spot--feature .icn-review-spot__body { padding: 1.25rem; } }
.icn-review-spot__badges { margin-bottom: 0.5rem; }
.icn-review-spot__body h3 { font-size: 1.05rem; margin: 0 0 0.4rem; line-height: 1.3; }
.icn-review-spot__body h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.icn-review-spot__body h3 a:hover { color: var(--wp--preset--color--accent); }
.icn-review-spot--feature .icn-review-spot__body h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); }
.icn-review-spot__excerpt { color: var(--wp--preset--color--foreground-muted); font-size: 0.85rem; line-height: 1.45; margin: 0 0 0.5rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.icn-review-spot--feature .icn-review-spot__excerpt { font-size: 0.95rem; -webkit-line-clamp: 3; }
.icn-review-spot__meta { display: flex; gap: 0.5rem; font-size: 0.78rem; color: var(--wp--preset--color--foreground-muted); margin-bottom: 0.5rem; }
/* v3.7: the redundant stars+number row this card used to render below its
   meta line is gone — the card already carries a real, non-star rating
   pill over its image (.icn-card-rating-chip). These three selectors are
   now unused dead CSS (nothing in the templates emits this markup
   anymore), kept per this project's "extend, never delete" rule rather
   than because they're still needed. */
.icn-review-spot__stars { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.6rem; }
.icn-star-rating { color: var(--wp--preset--color--amber); font-size: 0.9rem; letter-spacing: 0.05em; }
.icn-review-spot__rating-num { font-family: var(--wp--preset--font-family--data); font-size: 0.78rem; color: var(--wp--preset--color--foreground-muted); }
.icn-review-spot__actions { display: flex; align-items: center; justify-content: space-between; }
.icn-review-spot__comments { font-size: 0.8rem; color: var(--wp--preset--color--foreground-muted); }

.icn-reviews2__carousel { display: flex; gap: 1.25rem; overflow-x: auto; margin-top: 1.5rem; scroll-snap-type: x mandatory; padding-bottom: 0.5rem; }
.icn-reviews2__carousel-item { flex: none; width: 280px; scroll-snap-align: start; }

/* ==========================================================================
   9. Comparisons split VS cards
   ========================================================================== */
.icn-comparisons2 { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-comparisons2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.icn-vs-card {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 0.75rem;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--icn-radius-card);
	padding: 1.1rem;
	text-decoration: none;
	color: inherit;
	transition: transform 0.3s var(--icn-ease-out), border-color 0.3s var(--icn-ease-out);
}
.icn-vs-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--accent); }
.icn-vs-card__side { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; position: relative; }
.icn-vs-card__side .icn-fallback-media,
.icn-vs-card__image { width: 100%; aspect-ratio: 1/1; border-radius: 10px; object-fit: cover; min-height: 0; }
.icn-vs-card__winner {
	position: absolute; top: 0.35rem; right: 0.35rem;
	background: var(--wp--preset--color--success);
	color: var(--wp--preset--color--base);
	font-size: 0.6rem; font-weight: 700; text-transform: uppercase;
	padding: 0.2rem 0.45rem; border-radius: var(--icn-radius-pill);
}
.icn-vs-card__name { font-size: 0.85rem; font-weight: 600; }
.icn-vs-card__mid { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; }
.icn-vs-card__vs {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	color: var(--wp--preset--color--accent);
}
.icn-vs-card__bar { width: 90px; height: 5px; border-radius: var(--icn-radius-pill); background: var(--wp--preset--color--border); overflow: hidden; }
.icn-vs-card__bar span { display: block; height: 100%; background: var(--wp--preset--gradient--sunset-glow); }
.icn-vs-card__pct { font-family: var(--wp--preset--font-family--data); font-size: 0.75rem; }

/* ==========================================================================
   10. News Timeline
   ========================================================================== */
.icn-timeline { max-width: 1200px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-timeline__rail { position: relative; margin-top: 1.5rem; padding-left: 1.75rem; border-left: 2px solid var(--wp--preset--color--border); display: flex; flex-direction: column; gap: 1.4rem; }
.icn-timeline__entry { position: relative; }
.icn-timeline__node { position: absolute; left: -2.05rem; top: 0.35rem; width: 12px; height: 12px; border-radius: 50%; box-shadow: 0 0 0 4px var(--wp--preset--color--base); }
.icn-timeline__card { display: flex; flex-direction: column; gap: 0.3rem; }
.icn-timeline__tag {
	display: inline-flex;
	width: fit-content;
	font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
	border: 1px solid; border-radius: var(--icn-radius-pill);
	padding: 0.15rem 0.55rem;
}
.icn-timeline__card h3 { margin: 0.1rem 0 0; font-size: 1.05rem; }
.icn-timeline__card h3 a { color: var(--wp--preset--color--foreground); text-decoration: none; }
.icn-timeline__card h3 a:hover { color: var(--wp--preset--color--accent); }

/* ==========================================================================
   11. Category Explorer
   ========================================================================== */
.icn-category-explorer { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-category-explorer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1.1rem; margin-top: 1.25rem; }
.icn-category-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: 2rem 1rem;
	border-radius: var(--icn-radius-card);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
	overflow: hidden;
	transition: transform 0.3s var(--icn-ease-out), border-color 0.3s var(--icn-ease-out), box-shadow 0.3s var(--icn-ease-out);
}
.icn-category-card::before {
	content: "";
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 120%, rgba(242,84,45,0.22), transparent 65%);
	opacity: 0;
	transition: opacity 0.3s ease;
}
.icn-category-card:hover { transform: translateY(-6px); border-color: var(--wp--preset--color--accent); box-shadow: var(--icn-shadow-glow); }
.icn-category-card:hover::before { opacity: 1; }
.icn-category-card__icon { position: relative; z-index: 1; color: var(--wp--preset--color--accent); transition: transform 0.35s var(--icn-ease-out); }
.icn-category-card:hover .icn-category-card__icon { transform: scale(1.15) translateY(-2px); }
.icn-category-card__label { position: relative; z-index: 1; font-family: var(--wp--preset--font-family--heading); font-size: 1.2rem; }
.icn-category-card__count { position: relative; z-index: 1; font-size: 0.72rem; color: var(--wp--preset--color--foreground-muted); }

/* ==========================================================================
   12. Brand Explorer
   ========================================================================== */
.icn-brand-explorer { max-width: 1200px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-brand-explorer__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.icn-brand-tile {
	display: flex; flex-direction: column; align-items: center; gap: 0.4rem;
	padding: 1.3rem 0.75rem;
	border-radius: var(--icn-radius-card);
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--surface);
	text-decoration: none; color: var(--wp--preset--color--foreground);
	transition: transform 0.25s var(--icn-ease-out), border-color 0.25s var(--icn-ease-out);
}
.icn-brand-tile:hover { transform: translateY(-4px) scale(1.03); border-color: var(--wp--preset--color--accent); }
.icn-brand-tile__mark {
	width: 46px; height: 46px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--gradient--sunset-glow);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	transition: transform 0.3s var(--icn-ease-out);
}
.icn-brand-tile:hover .icn-brand-tile__mark { transform: rotate(8deg) scale(1.08); }
.icn-brand-tile__name { font-weight: 600; font-size: 0.9rem; }

/* ==========================================================================
   13. Videos
   ========================================================================== */
.icn-videos2 { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-videos2__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.25rem; margin-top: 1.25rem; }
.icn-video-card { display: block; text-decoration: none; color: var(--wp--preset--color--foreground); }
.icn-video-card__thumb-wrap { position: relative; display: block; border-radius: var(--icn-radius-card); overflow: hidden; aspect-ratio: 16/9; background: var(--wp--preset--color--surface); }
.icn-video-card__thumb { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s var(--icn-ease-out); }
.icn-video-card:hover .icn-video-card__thumb { transform: scale(1.08); }
.icn-video-card__play {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	font-size: 1.4rem; color: #fff;
	background: rgba(13,13,15,0.3);
	opacity: 0; transition: opacity 0.25s ease;
}
.icn-video-card:hover .icn-video-card__play { opacity: 1; }
.icn-video-card__duration {
	position: absolute; bottom: 0.4rem; right: 0.4rem;
	background: rgba(13,13,15,0.85); color: #fff;
	font-size: 0.68rem; padding: 0.1rem 0.4rem; border-radius: 4px;
}
.icn-video-card__title { display: block; margin-top: 0.6rem; font-weight: 600; font-size: 0.92rem; line-height: 1.3; }

/* ==========================================================================
   14. Newsletter v2
   ========================================================================== */
.icn-newsletter2 {
	max-width: 1200px;
	margin-inline: auto;
	display: flex;
	align-items: center;
	gap: 2rem;
	padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
	border-radius: var(--icn-radius-card);
	background: linear-gradient(135deg, var(--wp--preset--color--surface), var(--wp--preset--color--graphite-raised));
	border: 1px solid var(--wp--preset--color--border);
}
@media (max-width: 700px) { .icn-newsletter2 { flex-direction: column; text-align: center; } }
.icn-newsletter2__copy h2 { font-family: var(--wp--preset--font-family--heading); font-size: clamp(1.6rem, 3vw, 2.2rem); margin: 0 0 0.4rem; }
.icn-newsletter2__form { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
.icn-newsletter2__form input[type="email"] {
	flex: 1; min-width: 220px;
	background: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--icn-radius-pill);
	padding: 0.75rem 1.1rem;
	color: var(--wp--preset--color--foreground);
}
.icn-newsletter2__form button {
	background: var(--wp--preset--gradient--sunset-glow);
	color: var(--wp--preset--color--white);
	border: none; border-radius: var(--icn-radius-pill);
	padding: 0.75rem 1.6rem; font-weight: 700; cursor: pointer;
	transition: transform 0.2s var(--icn-ease-out);
}
.icn-newsletter2__form button:hover { transform: translateY(-2px); }

/* ==========================================================================
   15. Homepage sidebar + poll
   ========================================================================== */
.icn-homepage-sidebar { display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: calc(var(--icn-header-h, 96px) + 1.5rem); }
.icn-poll__question { font-size: 0.9rem; margin: 0.3rem 0 0.75rem; }
.icn-poll__form { display: flex; flex-direction: column; gap: 0.5rem; }
.icn-poll__option {
	position: relative;
	display: flex; align-items: center; justify-content: space-between;
	padding: 0.55rem 0.75rem;
	border-radius: 8px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	overflow: hidden;
	font-size: 0.85rem;
	text-align: left;
}
.icn-poll__option-bar { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(242,84,45,0.16); z-index: 0; transition: width 0.4s var(--icn-ease-out); }
.icn-poll__option-label, .icn-poll__option-pct { position: relative; z-index: 1; }
.icn-poll__option:hover { border-color: var(--wp--preset--color--accent); }

/* ==========================================================================
   15b. Homepage body shell — editorial column + persistent sidebar
   ========================================================================== */
.icn-home-body {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 2.5rem;
	align-items: start;
	max-width: 1600px;
	margin-inline: auto;
	padding-inline: var(--icn-space-inline);
}
@media (max-width: 1100px) { .icn-home-body { grid-template-columns: 1fr; } }
.icn-home-body__main { display: flex; flex-direction: column; gap: clamp(2.5rem, 5vw, 4rem); min-width: 0; }
.icn-home-body__sidebar { min-width: 0; }

/* ==========================================================================
   17. Editorial Sidebar — Editor's Picks / Trending / Most Discussed /
   Latest Comments. Four genuinely different visual treatments ("a
   newsroom, not cards stacked vertically") rather than four identical
   widget boxes.
   ========================================================================== */
.icn-editorial-sidebar { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: calc(var(--icn-header-h, 88px) + 1.5rem); }
.icn-ed-module { padding-bottom: 1.25rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.icn-ed-module:last-child { border-bottom: none; padding-bottom: 0; }
.icn-ed-module__heading {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--foreground-muted);
	display: flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0 0 0.85rem;
}
.icn-ed-module__live-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--accent-blue, #3B82F6);
	box-shadow: 0 0 8px var(--wp--preset--color--accent-blue, #3B82F6);
	animation: icn-pulse-dot 1.6s ease-in-out infinite;
}

/* Editor's Picks reuses .icn-rail-list (numbered thumb list) — already
   defined above. Trending: a dense ranked ticker-tape list, no thumbnails —
   visually distinct from the Picks module. */
.icn-ed-trending-list { list-style: none; margin: 0; padding: 0; counter-reset: none; display: flex; flex-direction: column; gap: 0.5rem; }
.icn-ed-trending-list li a {
	display: flex;
	align-items: baseline;
	gap: 0.6rem;
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	font-size: 0.88rem;
	line-height: 1.3;
	padding: 0.3rem 0;
	border-bottom: 1px dashed var(--wp--preset--color--border);
}
.icn-ed-trending-list li:last-child a { border-bottom: none; }
.icn-ed-trending-list li a:hover { color: var(--wp--preset--color--accent); }
.icn-ed-trending-list__rank {
	flex: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.3rem;
	color: var(--wp--preset--color--accent-blue, #3B82F6);
	opacity: 0.7;
	line-height: 1;
}

/* Most Discussed: a ranked list with a comment-count pill — a third
   distinct language again. */
.icn-ed-discussed-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.icn-ed-discussed-list a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	text-decoration: none;
	color: inherit;
	padding: 0.5rem 0.65rem;
	border-radius: 8px;
	background: var(--wp--preset--color--surface);
	transition: background 0.2s ease;
}
.icn-ed-discussed-list a:hover { background: var(--wp--preset--color--graphite-raised); }
.icn-ed-discussed-list__title { font-size: 0.86rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icn-ed-discussed-list__count {
	flex: none;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	color: var(--wp--preset--color--accent);
	background: rgba(242,84,45,0.12);
	padding: 0.15rem 0.5rem;
	border-radius: var(--icn-radius-pill);
}

/* Latest Comments: chat-bubble style feed — the fourth, most distinct
   module (matches "comments are one of the heroes of this website"). */
.icn-ed-comments-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.icn-ed-comments-feed a { display: flex; gap: 0.6rem; text-decoration: none; color: inherit; }
.icn-ed-comments-feed__avatar {
	flex: none;
	width: 30px; height: 30px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--gradient--sunset-glow);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 0.9rem;
}
.icn-ed-comments-feed__body { min-width: 0; }
.icn-ed-comments-feed__quote {
	display: block;
	font-size: 0.85rem;
	font-style: italic;
	line-height: 1.35;
	background: var(--wp--preset--color--surface);
	border-radius: 10px 10px 10px 2px;
	padding: 0.5rem 0.7rem;
}
.icn-ed-comments-feed__on {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.72rem;
	color: var(--wp--preset--color--foreground-muted);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.icn-ed-comments-feed a:hover .icn-ed-comments-feed__quote { background: var(--wp--preset--color--graphite-raised); }

/* ==========================================================================
   18. Trending News Ticker — reuses the endless-marquee mechanism (same
   data-icn-marquee hook → same JS drag/pause behaviour) with a slimmer,
   ticker-specific look.
   ========================================================================== */
.icn-ticker {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	max-width: 1600px;
	margin-inline: auto;
	padding: 0.85rem var(--icn-space-inline);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--icn-radius-pill);
	background: var(--wp--preset--color--surface);
	overflow: hidden;
}
.icn-ticker__label {
	flex: none;
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent-blue, #3B82F6);
}
.icn-ticker__dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--wp--preset--color--accent-blue, #3B82F6);
	box-shadow: 0 0 8px var(--wp--preset--color--accent-blue, #3B82F6);
	animation: icn-pulse-dot 1.6s ease-in-out infinite;
}
.icn-ticker__flame { font-size: 0.95rem; line-height: 1; filter: drop-shadow(0 0 4px rgba(242,84,45,0.5)); }
.icn-ticker__track {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	width: max-content;
	animation: icn-marquee-scroll 38s linear infinite;
}
.icn-ticker:hover .icn-ticker__track { animation-play-state: paused; }
.icn-ticker__item { color: var(--wp--preset--color--foreground); text-decoration: none; font-size: 0.9rem; white-space: nowrap; }
.icn-ticker__item:hover { color: var(--wp--preset--color--accent); }
.icn-ticker__sep { color: var(--wp--preset--color--border); font-size: 0.9rem; opacity: 0.6; }

/* ==========================================================================
   19. Latest News — asymmetric magazine grid ("don't use identical cards"):
   one large Featured block, then a Small/Small/Wide/Small/Small secondary
   grid (middle item spans both columns), plus a client-side filter row.
   The old vertical "Breaking" sidebar column is gone — see
   icn_theme_breaking_badge() for its per-card replacement. Its CSS below
   is unused now but left in place as dead code, consistent with this
   theme's convention (its rules only ever matched markup that no longer
   exists, so it's inert either way).
   ========================================================================== */
.icn-news-grid { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-news-grid__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--icn-space-title); gap: 1rem; flex-wrap: wrap; }
.icn-news-grid__head-right { display: flex; align-items: center; gap: 1.1rem; }
.icn-news-grid__all { color: var(--wp--preset--color--accent); text-decoration: none; font-size: 0.9rem; }
.icn-news-grid__body { display: flex; flex-direction: column; gap: 1.75rem; }

/* v3.4: "Filter by ▼" — a compact toggle that reveals the same real
   filter-chip panel used before (data-icn-news-filter-bar), instead of a
   permanently-open chip row that read as empty. UI only, no backend query. */
.icn-news-filter { position: relative; }
.icn-news-filter__toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.85rem;
	font-weight: 600;
	padding: 0.5rem 0.9rem;
	border-radius: var(--icn-radius-pill);
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--foreground);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.icn-news-filter__toggle:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.icn-news-filter__caret { font-size: 0.65rem; transition: transform 0.2s ease; }
.icn-news-filter.is-open .icn-news-filter__caret { transform: rotate(180deg); }
.icn-news-filter__panel {
	position: absolute;
	top: calc(100% + 0.5rem);
	right: 0;
	z-index: 20;
	display: none;
	flex-wrap: wrap;
	gap: 0.5rem;
	width: max-content;
	max-width: 260px;
	padding: 0.85rem;
	border-radius: var(--icn-radius-card);
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	box-shadow: var(--icn-shadow-lg);
}
.icn-news-filter__panel.is-open { display: flex; }

.icn-news-feature { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 1.5rem; align-items: stretch; border-radius: var(--icn-radius-card); overflow: hidden; background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); }
@media (max-width: 800px) { .icn-news-feature { grid-template-columns: 1fr; } }
.icn-news-feature__media { position: relative; display: block; min-height: 260px; }
.icn-news-feature__media img, .icn-news-feature__media .icn-fallback-media { width: 100%; height: 100%; object-fit: cover; min-height: 260px; transition: transform 0.5s var(--icn-ease-out); }
.icn-news-feature { transition: box-shadow 0.3s var(--icn-ease-out), border-color 0.3s var(--icn-ease-out), transform 0.3s var(--icn-ease-out); }
/* v3.7: added the same "lift 6px" hover the rest of the homepage's cards use (shadow-increase + image-zoom were already here). */
.icn-news-feature:hover { transform: translateY(-6px); box-shadow: var(--icn-shadow-lg); border-color: var(--wp--preset--color--accent); }
.icn-news-feature:hover .icn-news-feature__media img { transform: scale(1.05); }
.icn-news-feature__body { padding: 1.5rem 1.5rem 1.5rem 0; display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
@media (max-width: 800px) { .icn-news-feature__body { padding: 0 1.25rem 1.25rem; } }
.icn-news-feature__badge-row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; }
.icn-news-feature__badge-row .icn-badge-row { margin-bottom: 0; }
.icn-news-feature__badge-row .icn-card-action { flex-shrink: 0; }
.icn-news-feature__body h3 { font-size: clamp(1.3rem, 2.2vw, 1.9rem); margin: 0.3rem 0 0.4rem; line-height: 1.1; }
.icn-news-feature__body h3 a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.icn-news-feature__body h3 a:hover { color: var(--wp--preset--color--accent); }
.icn-news-feature__body p { color: var(--wp--preset--color--foreground-muted); font-size: 0.95rem; }
.icn-news-feature__meta { display: flex; gap: 0.5rem; font-size: 0.78rem; color: var(--wp--preset--color--foreground-muted); }
.icn-news-feature__more, .icn-news-small__more {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	font-weight: 600;
	font-size: 0.85rem;
	margin-top: 0.2rem;
}
.icn-news-feature__more:hover, .icn-news-small__more:hover { text-decoration: underline; }
/* Shared "arrow slides on hover" micro-interaction for every CTA link that
   ends in → (Read More, View All, See All, etc.) — see the bulk &rarr; →
   <span class="icn-arrow"> wrap in inc/homepage-v2.php. */
.icn-arrow { display: inline-block; transition: transform 0.25s var(--icn-ease-out); }
a:hover .icn-arrow, button:hover .icn-arrow { transform: translateX(4px); }

/* Small / Small / Wide / Small / Small — a 2-column grid where the 3rd
   secondary item (nth-child(3)) spans both columns. Each block is now a
   real boxed card (background/border/padding), matching the Featured
   block and the Reviews/Guides cards, so the hover elevate+shadow language
   is consistent everywhere ("every card hover: shadow increases"). */
.icn-news-grid__secondary { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--icn-space-card-gap); }
@media (max-width: 1000px) { .icn-news-grid__secondary { grid-template-columns: 1fr; } }
.icn-news-small {
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--icn-radius-card);
	padding: 0.9rem;
	transition: transform 0.25s var(--icn-ease-out), box-shadow 0.25s var(--icn-ease-out), border-color 0.25s var(--icn-ease-out);
}
/* v3.7: standardized to the shared "lift 6px" hover per this round's micro-interactions ask (was -4px). */
.icn-news-small:hover { transform: translateY(-6px); box-shadow: var(--icn-shadow-lg); border-color: var(--wp--preset--color--accent); }
.icn-news-small--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.25rem; align-items: center; }
@media (max-width: 700px) { .icn-news-small--wide { grid-template-columns: 1fr; } }
.icn-news-small__media { position: relative; display: block; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden; }
.icn-news-small--wide .icn-news-small__media { aspect-ratio: 16/9; }
.icn-news-small__media img, .icn-news-small__media .icn-fallback-media { width: 100%; height: 100%; object-fit: cover; min-height: 0; transition: transform 0.4s var(--icn-ease-out); }
.icn-news-small:hover .icn-news-small__media img { transform: scale(1.08); }
.icn-news-small__body { padding-top: 0.6rem; }
.icn-news-small__body h4 { font-size: 0.92rem; line-height: 1.3; margin: 0 0 0.3rem; }
.icn-news-small--wide .icn-news-small__body h4 { font-size: 1.15rem; }
.icn-news-small__body h4 a { color: var(--wp--preset--color--foreground); text-decoration: none; transition: color 0.2s ease; }
.icn-news-small__body h4 a:hover { color: var(--wp--preset--color--accent); }
.icn-news-small__title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; }
.icn-news-small__title-row h4 { flex: 1; }
.icn-news-small__title-row .icn-card-action { width: 26px; height: 26px; flex-shrink: 0; }
.icn-news-small__excerpt { color: var(--wp--preset--color--foreground-muted); font-size: 0.85rem; line-height: 1.4; margin: 0 0 0.4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* Client-side filter row — hides/shows the already-rendered cards above by
   real post_tag data (see icn_theme_news_filter_keys() / nav.js). */
.icn-news-grid__filters { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: var(--icn-space-title); }
.icn-filter-chip {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.78rem;
	font-weight: 600;
	padding: 0.45rem 0.95rem;
	border-radius: var(--icn-radius-pill);
	border: 1px solid var(--wp--preset--color--border);
	background: transparent;
	color: var(--wp--preset--color--foreground-muted);
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.icn-filter-chip:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.icn-filter-chip.is-active { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--base); }
[data-icn-news-item].is-filtered-out { display: none; }

.icn-news-grid__breaking { background: var(--wp--preset--color--surface); border: 1px solid var(--wp--preset--color--border); border-radius: var(--icn-radius-card); padding: 1.25rem; align-self: start; }
.icn-news-grid__breaking h3 { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 1rem; }
.icn-news-grid__breaking-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--wp--preset--color--danger); box-shadow: 0 0 8px var(--wp--preset--color--danger); animation: icn-pulse-dot 1.4s ease-in-out infinite; }
.icn-news-grid__breaking ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.icn-news-grid__breaking li { padding-bottom: 0.85rem; border-bottom: 1px solid var(--wp--preset--color--border); }
.icn-news-grid__breaking li:last-child { border-bottom: none; padding-bottom: 0; }
.icn-news-grid__breaking a { display: block; color: var(--wp--preset--color--foreground); text-decoration: none; font-size: 0.88rem; line-height: 1.3; margin-bottom: 0.25rem; }
.icn-news-grid__breaking a:hover { color: var(--wp--preset--color--accent); }

/* ==========================================================================
   20. Buying Guides — horizontal thumbnail cards
   ========================================================================== */
.icn-guides-row { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-guides-row__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--icn-space-title); }
.icn-guides-row__all { color: var(--wp--preset--color--accent); text-decoration: none; font-size: 0.9rem; }
.icn-guides-row__list { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--icn-space-card-gap); }
@media (max-width: 900px) { .icn-guides-row__list { grid-template-columns: 1fr; } }
.icn-guide-card {
	display: flex;
	gap: 1.1rem;
	align-items: stretch;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--icn-radius-card);
	padding: 0.9rem;
	text-decoration: none;
	color: inherit;
	transition: transform 0.25s var(--icn-ease-out), border-color 0.25s var(--icn-ease-out);
}
.icn-guide-card:hover { transform: translateY(-3px); border-color: var(--wp--preset--color--accent); box-shadow: var(--icn-shadow-lg); }
.icn-guide-card:hover .icn-guide-card__title { color: var(--wp--preset--color--accent); }
.icn-guide-card:hover .icn-guide-card__media img { transform: scale(1.06); }
.icn-guide-card__media { flex: none; width: 120px; border-radius: 10px; overflow: hidden; display: block; }
.icn-guide-card__media img, .icn-guide-card__media .icn-fallback-media { width: 100%; height: 100%; object-fit: cover; min-height: 90px; }
.icn-guide-card__media img { transition: transform 0.35s var(--icn-ease-out); }
.icn-guide-card__body { display: flex; flex-direction: column; gap: 0.3rem; justify-content: center; min-width: 0; }
.icn-guide-card__title { font-family: var(--wp--preset--font-family--heading); font-size: 1.1rem; line-height: 1.15; transition: color 0.2s ease; }
.icn-guide-card__excerpt { font-size: 0.85rem; color: var(--wp--preset--color--foreground-muted); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }

/* ==========================================================================
   21. Compare Search — Trending Comparisons strip
   ========================================================================== */
.icn-compare2__trending { margin-top: 1.25rem; }
.icn-compare2__trending-label {
	display: block;
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	color: var(--wp--preset--color--foreground-muted);
	margin-bottom: 0.5rem;
}
.icn-compare2__trending-list { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.icn-compare2__trending-item {
	font-size: 0.82rem;
	padding: 0.4rem 0.8rem;
	border-radius: var(--icn-radius-pill);
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground);
	text-decoration: none;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.icn-compare2__trending-item:hover { border-color: var(--wp--preset--color--accent-blue, #3B82F6); color: var(--wp--preset--color--accent-blue, #3B82F6); }

/* ==========================================================================
   22. Minimal Footer
   ========================================================================== */
.icn-footer--minimal .icn-footer__inner { max-width: 1600px; margin-inline: auto; padding: 2rem var(--icn-space-inline); }
.icn-footer--minimal .icn-footer__row {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: space-between;
	padding-bottom: 1.25rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.icn-footer__brand {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
	color: var(--wp--preset--color--foreground);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.1rem;
	text-transform: uppercase;
}
.icn-footer--minimal .icn-footer__links { list-style: none; display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 0; padding: 0; }
.icn-footer--minimal .icn-footer__links a { color: var(--wp--preset--color--foreground-muted); text-decoration: none; font-size: 0.88rem; }
.icn-footer--minimal .icn-footer__links a:hover { color: var(--wp--preset--color--accent); }
.icn-footer--minimal .icn-footer__social { display: flex; gap: 0.5rem; }
.icn-footer--minimal .icn-footer__social a {
	width: 32px; height: 32px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--foreground-muted);
	text-decoration: none;
	font-size: 0.8rem;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.icn-footer--minimal .icn-footer__social a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.icn-footer--minimal .icn-footer__bottom { padding-top: 1.25rem; text-align: center; }
.icn-footer--minimal .icn-footer__copyright { font-size: 0.8rem; color: var(--wp--preset--color--foreground-muted); }

/* ==========================================================================
   23. Photos — Pinterest-style masonry gallery + lightbox
   ========================================================================== */
.icn-photos-gallery { max-width: 1600px; margin-inline: auto; padding-inline: var(--icn-space-inline); }
.icn-photos-gallery__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--icn-space-title); }
.icn-photos-gallery__all { color: var(--wp--preset--color--accent); text-decoration: none; font-size: 0.9rem; }

/* A CSS-grid masonry: every tile occupies one column and a variable number
   of implicit auto-rows, so "square / wide / tall / wide / small" reads as
   a genuinely uneven Pinterest-style wall rather than a uniform grid. */
.icn-photos-gallery__grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-rows: 110px;
	gap: var(--icn-space-card-gap);
}
@media (max-width: 900px) { .icn-photos-gallery__grid { grid-template-columns: repeat(2, 1fr); } }

.icn-photo-tile {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	border: none;
	padding: 0;
	margin: 0;
	border-radius: var(--icn-radius-card);
	overflow: hidden;
	cursor: pointer;
	background: var(--wp--preset--color--surface);
	grid-column: span 1;
}
.icn-photo-tile--square { grid-row: span 2; }
.icn-photo-tile--wide   { grid-column: span 2; grid-row: span 2; }
.icn-photo-tile--tall   { grid-row: span 3; }
.icn-photo-tile--small  { grid-row: span 1; }
@media (max-width: 900px) { .icn-photo-tile--wide { grid-column: span 2; } }

.icn-photo-tile img, .icn-photo-tile .icn-fallback-media {
	width: 100%;
	height: 100%;
	object-fit: cover;
	min-height: 0;
	display: block;
	transition: transform 0.5s var(--icn-ease-out);
}
.icn-photo-tile:hover img,
.icn-photo-tile:hover .icn-fallback-media,
.icn-photo-tile:focus-visible img,
.icn-photo-tile:focus-visible .icn-fallback-media { transform: scale(1.06); }

.icn-photo-tile__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-end;
	gap: 0.25rem;
	padding: 0.9rem;
	background: linear-gradient(0deg, rgba(13,13,15,0.85) 0%, rgba(13,13,15,0) 55%);
	opacity: 0;
	transition: opacity 0.25s ease;
	text-align: left;
}
.icn-photo-tile:hover .icn-photo-tile__overlay,
.icn-photo-tile:focus-visible .icn-photo-tile__overlay { opacity: 1; }
.icn-photo-tile__caption { color: var(--wp--preset--color--foreground); font-size: 0.85rem; font-weight: 600; line-height: 1.25; }
.icn-photo-tile__open {
	font-family: var(--wp--preset--font-family--data);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--wp--preset--color--amber);
}

/* Lightbox — plain vanilla JS/CSS, no library. */
.icn-photo-lightbox {
	position: fixed;
	inset: 0;
	z-index: 300;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(6, 6, 8, 0.92);
	padding: clamp(1rem, 5vw, 4rem);
}
.icn-photo-lightbox[hidden] { display: none; }
.icn-photo-lightbox__figure { max-width: 1100px; max-height: 100%; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; margin: 0; }
.icn-photo-lightbox__media { max-width: 100%; max-height: 72vh; border-radius: var(--icn-radius-card); overflow: hidden; display: flex; }
.icn-photo-lightbox__media img, .icn-photo-lightbox__media .icn-fallback-media { max-width: 100%; max-height: 72vh; width: auto; height: auto; min-height: 240px; min-width: 320px; object-fit: cover; }
.icn-photo-lightbox__caption { color: var(--wp--preset--color--foreground); font-size: 1rem; text-align: center; }
.icn-photo-lightbox__link { color: var(--wp--preset--color--accent); text-decoration: none; font-weight: 600; font-size: 0.9rem; }
.icn-photo-lightbox__link:hover { text-decoration: underline; }
.icn-photo-lightbox__close, .icn-photo-lightbox__nav {
	position: absolute;
	background: rgba(255,255,255,0.08);
	border: 1px solid rgba(255,255,255,0.2);
	color: var(--wp--preset--color--foreground);
	border-radius: 50%;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	cursor: pointer;
	transition: border-color 0.2s ease, color 0.2s ease;
}
.icn-photo-lightbox__close:hover, .icn-photo-lightbox__nav:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }
.icn-photo-lightbox__close { top: clamp(0.75rem, 3vw, 2rem); right: clamp(0.75rem, 3vw, 2rem); }
.icn-photo-lightbox__nav--prev { left: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }
.icn-photo-lightbox__nav--next { right: clamp(0.5rem, 2vw, 1.5rem); top: 50%; transform: translateY(-50%); }

/* ==========================================================================
   16. Homepage section rhythm — full-bleed shell + breathing room
   ========================================================================== */
.icn-v2-section { padding-block: var(--icn-space-section); }
.icn-v2-section + .icn-v2-section { border-top: 1px solid var(--wp--preset--color--border); }
.icn-v2-section--tight { padding-block: clamp(1rem, 2vw, 1.5rem); }

/* Same-page anchor targets (Cars/News/Reviews/Buying Guides/Photos/Newsletter) —
   keeps the section clear of the fixed header on both a native #hash jump
   and nav.js's JS-driven smooth scroll. v3.9 adds #cars for the new "Cars"
   nav item — same mechanism, nothing else about anchor scrolling changed. */
#cars, #news, #reviews, #buying-guides, #photos, #newsletter {
	scroll-margin-top: calc(var(--icn-header-h, 88px) + 1.5rem);
}

@media (prefers-reduced-motion: reduce) {
	.icn-marquee__track, .icn-ticker__track { animation: none !important; }
	.icn-mascot--newsletter, .icn-mascot--header,
	.icn-logo-mark--header, .icn-logo-mark--newsletter, .icn-logo-mark--footer { animation: none !important; }
	.icn-ed-module__live-dot, .icn-ticker__dot, .icn-news-grid__breaking-dot,
	.icn-editor-badge, .icn-card-badge--editors-pick, .icn-badge-breaking__dot { animation: none !important; }
	.icn-photo-tile img, .icn-photo-tile .icn-fallback-media { transition: none !important; }
}