/* CartolaNews Central MMA — all rules scoped under .cnmma-wrap (spec section 56).
 * Theme-aware: LIGHT is the default look (matches every other page on the
 * site); the dark "sports dashboard" palette from the reference mockup only
 * applies when the site's own dark-mode toggle is on — Foxiz stamps
 * body[data-theme="dark"], no page reload (same pattern already used on
 * cn-f1/cn-laliga/Libertadores). Brand accent colors (blue/red) stay
 * constant across both themes — only surface/text/border/shadow tokens
 * change. Never touches body/html/.site-header/footer — everything lives
 * inside .cnmma-wrap. */

.cnmma-wrap, .cnmma-wrap-outer {
	font-family: "Inter", Roboto, Arial, sans-serif;
	--cnmma-blue: #144b9b;
	--cnmma-blue-light: #7494c4;
	--cnmma-blue-soft: #849cc4;
	--cnmma-live: #e53935;
	--cnmma-radius: 12px;
	/* Light theme tokens (default) */
	--cnmma-bg: #f3f5fa;
	--cnmma-bg-2: #eaeef6;
	--cnmma-card: #ffffff;
	--cnmma-card-hover: #f5f7fb;
	--cnmma-hero-card-bg: rgba(255,255,255,.90);
	--cnmma-subnav-bg: rgba(255,255,255,.92);
	--cnmma-border: rgba(16,24,40,.10);
	--cnmma-text: #101828;
	--cnmma-muted: #5b6b82;
	--cnmma-faint: #97a3b5;
	--cnmma-shadow: 0 4px 16px rgba(16,24,40,.06);
	/* --cnmma-blue-light reads fine as a border/decorative accent on either background, but as
	 * body text it's too washed-out against white (fails contrast) — this token is what actual
	 * label/caption text should use instead, so it stays legible in both themes. */
	--cnmma-accent-text: var(--cnmma-blue);
}
body[data-theme="dark"] .cnmma-wrap, body[data-theme="dark"] .cnmma-wrap-outer {
	--cnmma-bg: #07111e;
	--cnmma-bg-2: #091726;
	--cnmma-card: #0d1b2a;
	--cnmma-card-hover: #11263b;
	--cnmma-hero-card-bg: rgba(13,27,42,.88);
	--cnmma-subnav-bg: rgba(7,17,30,.95);
	--cnmma-border: rgba(116,148,196,.22);
	--cnmma-text: #f5f7fa;
	--cnmma-muted: #9eabb9;
	--cnmma-faint: #6f8098;
	--cnmma-shadow: none;
	--cnmma-accent-text: var(--cnmma-blue-light);
}

.cnmma-wrap, .cnmma-wrap-outer { max-width: 100%; min-width: 0; }
.cnmma-wrap { background: linear-gradient(180deg, var(--cnmma-bg) 0%, var(--cnmma-bg-2) 100%); color: var(--cnmma-text); position: relative; overflow-x: hidden; }
.cnmma-wrap * { box-sizing: border-box; }
/* Flex/grid children default to a min-width based on their content's min-content size, which lets
 * an unbreakable row (chips, cards, scroller items) force its ancestor — and if the theme's own
 * layout ever treats .cnmma-wrap as a flex/grid item, potentially the whole page — wider than the
 * viewport before overflow-x:hidden ever gets a chance to clip anything. Same bug class already
 * documented on cn-f1 for a horizontally-scrolling calendar carousel; fixed the same way here. */
.cnmma-hero-inner, .cnmma-hero-left, .cnmma-hero-right, .cnmma-secondary-grid > *,
.cnmma-events-grid, .cnmma-events-grid > *, .cnmma-news-grid > *, .cnmma-news-grid,
.cnmma-filters, .cnmma-card, .cnmma-section { min-width: 0; }
.cnmma-wrap a { color: inherit; text-decoration: none; }
.cnmma-wrap img { max-width: 100%; height: auto; display: block; }
.cnmma-wrap button { font-family: inherit; }
.cnmma-wrap h1, .cnmma-wrap h2, .cnmma-wrap h3, .cnmma-wrap p { margin: 0; }
.cnmma-container { max-width: 1380px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 1024px) { .cnmma-container { padding: 0 20px; } }
@media (max-width: 600px) { .cnmma-container { padding: 0 14px; } }

.cnmma-section { padding: 40px 24px; max-width: 1380px; margin: 0 auto; }
@media (max-width: 600px) { .cnmma-section { padding: 28px 14px; } }
.cnmma-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.cnmma-section-title { font-size: 22px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.cnmma-section-title-sm { font-size: 16px; }
.cnmma-section-subtitle { color: var(--cnmma-muted); font-size: 14px; }
.cnmma-wrap .cnmma-link-small { font-size: 13px; color: var(--cnmma-accent-text); }
.cnmma-link-small:hover { text-decoration: underline; }
.cnmma-empty-state { color: var(--cnmma-muted); font-size: 14px; padding: 8px 0; }

.cnmma-card { background: var(--cnmma-card); border: 1px solid var(--cnmma-border); box-shadow: var(--cnmma-shadow); border-radius: var(--cnmma-radius); padding: 20px; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.cnmma-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }

/* ---------------------------------------------------------------- Buttons/chips */
.cnmma-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 11px 20px; border-radius: 8px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .03em; border: 1px solid transparent; cursor: pointer; transition: transform 150ms ease, background 150ms ease, border-color 150ms ease; }
/* .cnmma-wrap prefix bumps specificity above the base `.cnmma-wrap a { color: inherit }` reset —
 * without it, that reset (element+class = higher specificity than a single class) always won on
 * an <a>-tag button, silently carrying forward whatever `color` the ancestor had already resolved
 * (var() only re-evaluates on an element that itself declares the property — `color: inherit`
 * does not) instead of this button's own intended color. Found live when hero CTA buttons on a
 * photo background rendered with unreadable dark text. */
.cnmma-wrap .cnmma-btn-primary { background: var(--cnmma-blue); color: #fff; }
.cnmma-btn-primary:hover { background: #1a5bb8; transform: translateY(-1px); }
.cnmma-wrap .cnmma-btn-outline { background: transparent; color: var(--cnmma-text); border-color: var(--cnmma-border); }
.cnmma-btn-outline:hover { border-color: var(--cnmma-blue-light); background: rgba(116,148,196,.08); }
.cnmma-btn-block { width: 100%; margin-top: 14px; }
.cnmma-btn-small { padding: 7px 14px; font-size: 11px; }

.cnmma-filters { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 18px; scrollbar-width: thin; scroll-snap-type: x proximity; }
.cnmma-filters-scroll { flex-wrap: nowrap; }
.cnmma-chip { flex: 0 0 auto; scroll-snap-align: start; background: transparent; border: 1px solid var(--cnmma-border); color: var(--cnmma-muted); border-radius: 999px; padding: 7px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; cursor: pointer; transition: all 150ms ease; white-space: nowrap; }
.cnmma-chip:hover { border-color: var(--cnmma-blue-light); color: var(--cnmma-text); }
.cnmma-chip.is-active { background: var(--cnmma-blue); border-color: var(--cnmma-blue); color: #fff; }

.cnmma-flag { width: 18px; height: 13px; object-fit: cover; border-radius: 2px; display: inline-block; vertical-align: middle; }

.cnmma-fighter-photo { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 50%; background: var(--cnmma-bg-2); border: 2px solid var(--cnmma-border); flex-shrink: 0; }
.cnmma-fighter-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
/* Head-and-shoulders silhouette when no photo is available — the two pseudo-elements must be
 * stacked vertically (flex-direction: column), not centered as flex row siblings, or they render
 * side by side as two blobs instead of a head over shoulders. */
.cnmma-fighter-photo.cnmma-no-photo { flex-direction: column; justify-content: flex-end; align-items: center; }
.cnmma-fighter-photo.cnmma-no-photo::before { content: ""; width: 38%; height: 38%; border-radius: 50%; background: var(--cnmma-faint); display: block; }
.cnmma-fighter-photo.cnmma-no-photo::after { content: ""; width: 78%; height: 40%; border-radius: 50% 50% 0 0; background: var(--cnmma-faint); display: block; }

.cnmma-live-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--cnmma-live); box-shadow: 0 0 0 0 rgba(229,57,53,.6); animation: cnmma-pulse 1.6s infinite; }
@keyframes cnmma-pulse { 0% { box-shadow: 0 0 0 0 rgba(229,57,53,.55); } 70% { box-shadow: 0 0 0 8px rgba(229,57,53,0); } 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); } }
.cnmma-live-badge, .cnmma-live-badge-small { display: inline-flex; align-items: center; gap: 6px; color: var(--cnmma-live); }
.cnmma-live-badge-small { font-size: 11px; font-weight: 700; text-transform: uppercase; background: rgba(229,57,53,.12); padding: 4px 8px; border-radius: 999px; }

/* ---------------------------------------------------------------- Hero */
.cnmma-hero { position: relative; padding: 44px 0 36px; overflow: hidden; }
.cnmma-hero.no-image { background: radial-gradient(ellipse at 30% 20%, rgba(20,75,155,.35) 0%, transparent 55%), var(--cnmma-bg); }
.cnmma-hero.has-image::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, rgba(7,17,30,.96) 0%, rgba(7,17,30,.86) 45%, rgba(7,17,30,.4) 80%, rgba(7,17,30,.15) 100%); }
/* The kicker/title/description/buttons sit directly on the photo + dark scrim above, so they
 * need guaranteed light text regardless of the site's own light/dark toggle — redefining the
 * shared tokens locally (not overriding `color` on individual elements) means every descendant
 * that already reads var(--cnmma-text)/--cnmma-muted/etc automatically picks up the light-safe
 * values without needing !important anywhere. Scoped to .cnmma-hero-left only (not the whole
 * .has-image hero) so the "Próximo Grande Evento" card on the right — which has its own solid
 * light/dark surface via --cnmma-hero-card-bg — keeps using the page's normal theme tokens for
 * its own text instead of inheriting this override too. */
.cnmma-hero.has-image .cnmma-hero-left {
	--cnmma-text: #ffffff;
	--cnmma-muted: #d7e0ee;
	--cnmma-faint: #c3d2e6;
	--cnmma-accent-text: #9fc0ea;
	--cnmma-border: rgba(255,255,255,.35);
}
.cnmma-hero-media { position: absolute; inset: 0; z-index: 0; }
.cnmma-hero-media picture { display: block; width: 100%; height: 100%; }
.cnmma-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.cnmma-hero-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0,1fr) minmax(320px,460px); gap: 40px; align-items: center; }
@media (max-width: 960px) { .cnmma-hero-inner { grid-template-columns: 1fr; } }

.cnmma-hero-kicker { font-size: clamp(40px, 7vw, 72px); font-weight: 900; line-height: .95; letter-spacing: -.02em; color: var(--cnmma-text); }
.cnmma-hero-title { font-size: clamp(18px, 2.4vw, 24px); font-weight: 700; color: var(--cnmma-accent-text); margin-top: 8px; }
.cnmma-hero-desc { color: var(--cnmma-muted); margin-top: 12px; max-width: 480px; line-height: 1.5; font-size: 14px; }
.cnmma-hero-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.cnmma-hero-card { background: var(--cnmma-hero-card-bg); backdrop-filter: blur(6px); border: 1px solid var(--cnmma-border); box-shadow: var(--cnmma-shadow); border-radius: 16px; padding: 22px; }
.cnmma-hero-card.is-live { border-color: var(--cnmma-live); }
.cnmma-hero-card-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cnmma-accent-text); display: flex; align-items: center; gap: 6px; }
.cnmma-hero-card.is-live .cnmma-hero-card-label { color: var(--cnmma-live); }

.cnmma-hero-matchup { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 16px 0; }
.cnmma-hero-fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.cnmma-hero-photo { width: 84px; height: 84px; }
.cnmma-hero-fighter-name { font-size: 13px; font-weight: 700; text-align: center; }
.cnmma-hero-vs { font-size: 13px; font-weight: 800; color: var(--cnmma-faint); flex-shrink: 0; }

.cnmma-hero-event-name { text-align: center; font-weight: 700; font-size: 14px; margin-bottom: 10px; }
.cnmma-hero-meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; font-size: 12px; color: var(--cnmma-muted); margin-bottom: 14px; }
.cnmma-hero-meta .dashicons { font-size: 15px; width: 15px; height: 15px; vertical-align: text-bottom; }
.cnmma-hero-live-status { text-align: center; font-weight: 800; color: var(--cnmma-live); margin-bottom: 12px; letter-spacing: .03em; }

.cnmma-countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 16px; }
.cnmma-countdown-box { background: var(--cnmma-bg-2); border-radius: 8px; padding: 10px 4px; text-align: center; }
.cnmma-countdown-value { display: block; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cnmma-countdown-label { display: block; font-size: 10px; text-transform: uppercase; color: var(--cnmma-muted); letter-spacing: .04em; margin-top: 2px; }

.cnmma-hero-empty { text-align: center; }
.cnmma-hero-empty .cnmma-empty-state { margin-top: 10px; }

/* ---------------------------------------------------------------- Sticky subnav */
.cnmma-subnav { position: sticky; top: var(--cnmma-header-offset, 0px); z-index: 30; background: var(--cnmma-subnav-bg); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cnmma-border); }
.cnmma-subnav-inner { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.cnmma-subnav-inner::-webkit-scrollbar { display: none; }
.cnmma-wrap .cnmma-subnav-link { flex: 0 0 auto; padding: 14px 16px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--cnmma-muted); border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 6px; }
.cnmma-wrap .cnmma-subnav-link:hover { color: var(--cnmma-text); }
.cnmma-wrap .cnmma-subnav-link.is-active { color: var(--cnmma-text); border-bottom-color: var(--cnmma-blue-light); }
.cnmma-subnav-link .dashicons { font-size: 15px; width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Ao Vivo */
.cnmma-live-panel { max-width: 720px; margin: 0 auto; }
.cnmma-live-matchup { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.cnmma-live-fighter { display: flex; flex-direction: column; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cnmma-live-photo { width: 96px; height: 96px; }
.cnmma-live-fighter-name { font-weight: 700; font-size: 14px; text-align: center; }
.cnmma-live-center { display: flex; flex-direction: column; align-items: center; gap: 4px; flex-shrink: 0; min-width: 120px; }
.cnmma-live-round { font-size: 22px; font-weight: 900; color: var(--cnmma-live); }
.cnmma-live-clock { font-size: 26px; font-weight: 900; font-variant-numeric: tabular-nums; }
.cnmma-live-weight { font-size: 11px; text-transform: uppercase; color: var(--cnmma-muted); letter-spacing: .04em; }
.cnmma-live-empty { text-align: center; padding: 32px 20px; }
.cnmma-live-empty-next { margin: 16px 0; }
.cnmma-live-empty-label { font-size: 12px; color: var(--cnmma-muted); text-transform: uppercase; }
.cnmma-live-empty-name { font-weight: 700; margin-top: 4px; }
.cnmma-live-empty-date { color: var(--cnmma-muted); font-size: 13px; margin-top: 2px; }

/* ---------------------------------------------------------------- Eventos */
.cnmma-events-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
@media (max-width: 1024px) { .cnmma-events-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .cnmma-events-grid { grid-template-columns: 1fr; } }
.cnmma-event-card { background: var(--cnmma-card); border: 1px solid var(--cnmma-border); border-radius: var(--cnmma-radius); padding: 18px; cursor: pointer; transition: transform 200ms ease, border-color 200ms ease, background 200ms ease; }
.cnmma-event-card:hover, .cnmma-event-card:focus-visible { transform: translateY(-3px); border-color: var(--cnmma-blue-light); background: var(--cnmma-card-hover); }
.cnmma-event-card.is-live { border-color: var(--cnmma-live); }
.cnmma-event-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.cnmma-event-org { font-size: 11px; font-weight: 800; letter-spacing: .05em; color: var(--cnmma-accent-text); text-transform: uppercase; }
.cnmma-event-name { font-weight: 700; font-size: 15px; margin-bottom: 14px; }
.cnmma-event-matchup { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 14px; }
.cnmma-event-fighter { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.cnmma-event-fighter span { font-size: 12px; font-weight: 600; text-align: center; }
.cnmma-event-photo { width: 56px; height: 56px; }
.cnmma-event-vs { font-size: 11px; color: var(--cnmma-faint); font-weight: 800; }
.cnmma-event-meta { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--cnmma-muted); }
.cnmma-event-meta .dashicons { font-size: 14px; width: 14px; height: 14px; vertical-align: text-bottom; }
.cnmma-event-broadcast { font-size: 12px; color: var(--cnmma-muted); margin-top: 10px; }
.cnmma-event-broadcast strong { color: var(--cnmma-text); font-style: italic; }

/* ---------------------------------------------------------------- Campeões */
.cnmma-champions-scroller { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.cnmma-champion-card { flex: 0 0 160px; scroll-snap-align: start; background: var(--cnmma-card); border: 1px solid var(--cnmma-border); border-radius: var(--cnmma-radius); padding: 16px; text-align: center; transition: transform 200ms ease, border-color 200ms ease; }
.cnmma-champion-card:hover { transform: translateY(-3px); border-color: var(--cnmma-blue-light); }
.cnmma-champion-photo { width: 88px; height: 88px; margin: 0 auto 12px; }
.cnmma-champion-division { font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--cnmma-accent-text); margin-bottom: 4px; }
.cnmma-champion-name { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.cnmma-champion-record { color: var(--cnmma-muted); font-size: 12px; }
.cnmma-champion-defenses { color: var(--cnmma-faint); font-size: 11px; margin-top: 4px; }

/* ---------------------------------------------------------------- Rankings + Brasil */
.cnmma-secondary-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 20px; padding: 0 24px 40px; max-width: 1380px; margin: 0 auto; }
@media (max-width: 960px) { .cnmma-secondary-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { .cnmma-secondary-grid { padding: 0 14px 28px; } }

.cnmma-ranking-row { display: grid; grid-template-columns: 24px 20px 1fr auto; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--cnmma-border); font-size: 13px; }
.cnmma-ranking-row:last-child { border-bottom: none; }
.cnmma-ranking-pos { font-weight: 800; color: var(--cnmma-muted); }
.cnmma-ranking-champion .cnmma-ranking-pos { color: var(--cnmma-live); }
.cnmma-ranking-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cnmma-ranking-record { color: var(--cnmma-muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.cnmma-ranking-champion { background: rgba(229,57,53,.06); border-radius: 6px; margin-bottom: 4px; }

.cnmma-brazilians-scroller { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.cnmma-brazilian-card { flex: 0 0 150px; scroll-snap-align: start; background: var(--cnmma-bg-2); border: 1px solid var(--cnmma-border); border-radius: var(--cnmma-radius); padding: 14px; text-align: center; }
.cnmma-brazilian-photo { width: 68px; height: 68px; margin: 0 auto 8px; }
.cnmma-brazilian-name { font-weight: 700; font-size: 12px; margin-bottom: 2px; }
.cnmma-brazilian-division { font-size: 11px; color: var(--cnmma-muted); margin-bottom: 6px; }
.cnmma-badge { display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase; background: var(--cnmma-blue); color: #fff; padding: 3px 8px; border-radius: 999px; margin-bottom: 6px; }
.cnmma-badge-champion { background: var(--cnmma-live); }
.cnmma-brazilian-record { font-size: 11px; color: var(--cnmma-muted); }
.cnmma-brazilian-next { font-size: 11px; color: var(--cnmma-accent-text); margin-top: 6px; line-height: 1.4; }

/* ---------------------------------------------------------------- Lendas */
.cnmma-legends-scroller { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; }
.cnmma-legend-card { flex: 0 0 140px; scroll-snap-align: start; text-align: center; }
.cnmma-legend-photo { width: 110px; height: 110px; border-radius: 50%; object-fit: cover; margin: 0 auto 10px; border: 2px solid var(--cnmma-border); }
.cnmma-legend-name { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .02em; }
.cnmma-legend-meta { font-size: 11px; color: var(--cnmma-muted); margin-top: 4px; }

/* ---------------------------------------------------------------- História */
.cnmma-timeline { display: flex; gap: 0; overflow-x: auto; padding: 20px 0 10px; position: relative; }
.cnmma-timeline::before { content: ""; position: absolute; top: 30px; left: 0; right: 0; height: 1px; background: var(--cnmma-border); }
.cnmma-timeline-item { flex: 1 0 190px; position: relative; padding: 0 16px; text-align: center; }
.cnmma-timeline-dot { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--cnmma-blue-light); margin: 24px auto 14px; position: relative; z-index: 1; border: 3px solid var(--cnmma-bg); }
.cnmma-timeline-period { font-size: 11px; font-weight: 800; color: var(--cnmma-accent-text); text-transform: uppercase; letter-spacing: .04em; }
.cnmma-timeline-title { font-weight: 700; font-size: 13px; margin: 4px 0; }
.cnmma-timeline-body { font-size: 12px; color: var(--cnmma-muted); line-height: 1.4; }
@media (max-width: 768px) {
	.cnmma-timeline { flex-direction: column; padding-left: 16px; }
	.cnmma-timeline::before { top: 0; bottom: 0; left: 5px; right: auto; width: 1px; height: auto; }
	.cnmma-timeline-item { text-align: left; padding: 0 0 24px 20px; flex: none; }
	.cnmma-timeline-dot { position: absolute; left: -21px; top: 4px; margin: 0; }
}

/* ---------------------------------------------------------------- Notícias */
.cnmma-news-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
@media (max-width: 860px) { .cnmma-news-grid { grid-template-columns: 1fr; } }
.cnmma-news-featured { display: block; background: var(--cnmma-card); border: 1px solid var(--cnmma-border); border-radius: var(--cnmma-radius); overflow: hidden; transition: border-color 200ms ease; }
.cnmma-news-featured:hover { border-color: var(--cnmma-blue-light); }
.cnmma-news-featured img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.cnmma-news-featured-body { padding: 18px; }
.cnmma-news-cat { font-size: 10px; font-weight: 800; text-transform: uppercase; color: var(--cnmma-accent-text); letter-spacing: .04em; }
.cnmma-news-title { font-weight: 700; font-size: 17px; margin: 8px 0 14px; line-height: 1.35; }
.cnmma-news-list { display: flex; flex-direction: column; gap: 12px; }
.cnmma-news-item { display: grid; grid-template-columns: 84px 1fr; gap: 10px; background: var(--cnmma-card); border: 1px solid var(--cnmma-border); border-radius: 10px; padding: 10px; transition: border-color 200ms ease; }
.cnmma-news-item:hover { border-color: var(--cnmma-blue-light); }
.cnmma-news-item img { width: 84px; height: 60px; object-fit: cover; border-radius: 6px; }
.cnmma-news-item-title { font-size: 12px; font-weight: 700; line-height: 1.35; margin: 3px 0 5px; }
.cnmma-news-date { font-size: 11px; color: var(--cnmma-faint); }

/* ---------------------------------------------------------------- Sources footer */
.cnmma-sources { max-width: 1380px; margin: 0 auto; padding: 0 24px 32px; font-size: 11px; color: var(--cnmma-faint); }

/* ---------------------------------------------------------------- Fight rows (event modal) */
.cnmma-event-detail-org { font-size: 11px; font-weight: 800; color: var(--cnmma-accent-text); text-transform: uppercase; letter-spacing: .04em; }
.cnmma-event-detail-name { font-size: 20px; font-weight: 800; margin: 4px 0 12px; }
.cnmma-event-detail-meta { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--cnmma-muted); margin-bottom: 20px; }
.cnmma-event-detail-heading { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--cnmma-muted); margin: 22px 0 10px; }
.cnmma-fight-row { border-bottom: 1px solid var(--cnmma-border); padding: 12px 0; }
.cnmma-fight-row.is-main-event, .cnmma-fight-row.is-co-main { background: rgba(20,75,155,.08); border-radius: 8px; padding: 14px 12px; margin-bottom: 8px; border-bottom: none; }
.cnmma-fight-label { font-size: 11px; font-weight: 800; text-transform: uppercase; color: var(--cnmma-accent-text); display: flex; justify-content: space-between; margin-bottom: 8px; letter-spacing: .03em; }
.cnmma-fight-weight { color: var(--cnmma-muted); font-weight: 600; }
.cnmma-fight-matchup { display: flex; align-items: center; gap: 12px; }
.cnmma-fight-fighter { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.cnmma-fight-fighter:last-child { flex-direction: row-reverse; text-align: right; }
.cnmma-fight-photo { width: 40px; height: 40px; }
.cnmma-fight-fighter-name { font-size: 13px; font-weight: 600; }
.cnmma-fight-fighter.is-winner .cnmma-fight-fighter-name { color: #4caf50; font-weight: 800; }
.cnmma-fight-fighter-record { font-size: 11px; color: var(--cnmma-muted); display: block; }
.cnmma-fight-center { flex-shrink: 0; text-align: center; min-width: 60px; font-size: 11px; color: var(--cnmma-muted); }
.cnmma-fight-status-final { color: var(--cnmma-muted); display: block; }
.cnmma-fight-status-live { color: var(--cnmma-live); font-weight: 800; display: block; }
.cnmma-fight-method { display: block; font-size: 10px; }

/* ---------------------------------------------------------------- Modal */
.cnmma-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.cnmma-modal[hidden] { display: none; }
.cnmma-modal-backdrop { position: absolute; inset: 0; background: rgba(4,10,18,.82); }
.cnmma-modal-panel { position: relative; background: var(--cnmma-bg-2); border: 1px solid var(--cnmma-border); border-radius: 16px; max-width: 640px; width: 100%; max-height: 86vh; overflow-y: auto; padding: 28px; color: var(--cnmma-text); }
.cnmma-modal-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; color: var(--cnmma-muted); font-size: 26px; line-height: 1; cursor: pointer; }
.cnmma-modal-close:hover { color: var(--cnmma-text); }

/* ---------------------------------------------------------------- Skeleton loading */
.cnmma-skeleton { background: linear-gradient(90deg, var(--cnmma-card) 25%, var(--cnmma-card-hover) 37%, var(--cnmma-card) 63%); background-size: 400% 100%; animation: cnmma-skeleton 1.4s ease infinite; border-radius: 6px; }
@keyframes cnmma-skeleton { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

/* ---------------------------------------------------------------- Accessibility */
.cnmma-wrap :focus-visible { outline: 2px solid var(--cnmma-accent-text); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
	.cnmma-wrap *, .cnmma-wrap *::before, .cnmma-wrap *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------------------------------------------------------------- Mobile hero reorg (spec section 42) */
@media (max-width: 600px) {
	.cnmma-hero { padding: 32px 0 24px; }
	.cnmma-hero-actions { flex-direction: column; }
	.cnmma-hero-actions .cnmma-btn { width: 100%; }
	.cnmma-hero-photo { width: 68px; height: 68px; }
}