/* Redesign "dia" da página de evento do Mundial de Surf.
   Todo seletor aqui é escopado em .mds-event-page (wrapper único desta página) --
   nunca solto, pra nunca vazar pra .mds-season-hero/.mds-career-hero/.mds-archive-hero
   nem pra qualquer outra página que reaproveite classes como .mds-hero-item ou
   .mds-heat-card. O corpo desta página já era claro (.mds-panel usa --mds-ink branco);
   só o hero/pódio era escuro (regra compartilhada com as outras heroes) -- aqui a
   gente troca só essa parte pelo equivalente claro, com classes novas (evd-*) pra não
   mexer na regra compartilhada. */

/* Fundo atmosférico de toda a página (não só do hero) -- o mesmo horizonte
   sol/água do hero, só que espalhado pela página inteira e mais concentrado no
   topo, decaindo pra um tom neutro antes de chegar nas seções de baixo. Substitui
   o branco chapado que .mds-panel usa por padrão só nesta página. */
/* Cores do horizonte recalibradas pro tema Boia (laranja/azul-marinho) —
   eram um laranja quase igual + o verde-reef da paleta "Placar" antiga
   (rgba(11,110,92,...) era literalmente o --mds-coral velho em rgba). Página
   exclusiva desta rota, sempre com .mds-hub-boia, por isso editado direto em
   vez de sobrepor uma variante nova. */
.mds-event-page {
	background:
		radial-gradient(ellipse 1000px 620px at 12% 0%, rgba(255, 90, 54, 0.09), transparent 46%),
		radial-gradient(ellipse 1150px 760px at 90% 4%, rgba(28, 110, 140, 0.10), transparent 44%),
		linear-gradient(180deg, #fbfaf7 0%, #f4f0e6 20%, #fcfbf8 46%, #fcfbf8 100%);
}

/* .mds-panel (o card branco por dentro) tem fundo opaco por padrão -- precisa
   ficar transparente aqui pra esse gradiente do container-fluid aparecer. */
.mds-event-page .mds-panel {
	background: transparent;
}

.mds-event-page .evd-hero {
	position: relative;
	overflow: hidden;
	padding: 40px 38px 0;
}

.mds-event-page .evd-kicker {
	font-family: mds-mono-bold, ui-monospace, "SF Mono", Menlo, monospace;
	font-size: 8.5pt;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--mds-coral);
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
}
.mds-event-page .evd-kicker::before {
	content: "";
	width: 24px;
	height: 1px;
	background: var(--mds-coral);
}

.mds-event-page .evd-title {
	font-family: mds-serif-black, serif;
	font-weight: 300;
	font-size: clamp(32px, 4.4vw, 60px);
	line-height: 0.98;
	letter-spacing: -0.01em;
	color: var(--mds-cream);
	margin: 16px 0 0;
}

.mds-event-page .evd-spot {
	font-family: mds-serif-italic, serif;
	font-style: italic;
	font-size: 18pt;
	color: var(--mds-cream-dim);
	margin: 4px 0 0;
}

.mds-event-page .evd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 22px;
	margin: 26px 0 0;
	font-family: mds-mono, ui-monospace, monospace;
	font-size: 10.5pt;
	color: var(--mds-cream);
}
.mds-event-page .evd-meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

.mds-event-page .evd-status {
	font-family: mds-mono-bold, ui-monospace, monospace;
	font-size: 8.5pt;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--mds-data);
	border: 1px solid rgba(28, 110, 140, 0.35);
	background: rgba(28, 110, 140, 0.08);
	padding: 6px 12px 5px;
	border-radius: 3px;
}
.mds-event-page .evd-status--andamento {
	color: var(--mds-coral);
	border-color: rgba(11, 110, 92, 0.35);
	background: rgba(11, 110, 92, 0.08);
}

.mds-event-page .evd-hero-wave {
	display: block;
	width: 100%;
	height: 26px;
	margin-top: 28px;
}

/* Sobrescreve o stroke="#0b6e5c" fixo no <path> inline do JSP (o --mds-coral
   antigo, hardcoded) — atributo de apresentação SVG perde pra qualquer regra
   de folha de estilo, então isso funciona sem tocar no JSP. */
.mds-event-page .evd-hero-wave path {
	stroke: var(--mds-coral);
}

.mds-event-page .evd-margin-note {
	font-family: inter-regular, sans-serif;
	font-size: 11pt;
	color: var(--mds-cream-dim);
	padding: 16px 38px 0;
	margin: 0;
}

/* ---- Pódio ---- */
.mds-event-page .evd-podium {
	display: grid;
	grid-template-columns: 1fr 1.25fr 0.85fr;
	align-items: end;
	gap: 18px;
	padding: 26px 38px 8px;
}
.mds-event-page .evd-podium-col { display: flex; flex-direction: column; }
.mds-event-page .evd-third-pair { gap: 14px; }

.mds-event-page .evd-slot {
	background: #ffffff;
	border: 1px solid var(--mds-line);
	border-bottom: 3px solid var(--mds-line);
	border-radius: 8px;
	padding: 18px 20px 20px;
}
.mds-event-page .evd-slot--champion {
	border-bottom-color: var(--mds-gold);
	background: linear-gradient(180deg, #ffffff, #fdf3ee);
	padding-top: 26px;
	padding-bottom: 26px;
}
.mds-event-page .evd-slot--third { padding: 14px 16px 16px; }

.mds-event-page .evd-slot-rank {
	font-family: mds-mono-bold, ui-monospace, monospace;
	font-size: 8pt;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--mds-cream-dim);
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0;
}
.mds-event-page .evd-slot-rank span { font-size: 15pt; color: var(--mds-line); }
.mds-event-page .evd-slot--champion .evd-slot-rank { color: var(--mds-gold-texto); }
.mds-event-page .evd-slot--champion .evd-slot-rank span { color: #e7d9a8; }

.mds-event-page .evd-avatar {
	display: block;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: #fff;
	border: 2px solid var(--mds-line-strong, var(--mds-line));
	overflow: hidden;
	margin: 14px 0 10px;
}
.mds-event-page .evd-slot--champion .evd-avatar { width: 80px; height: 80px; border-width: 3px; margin: 14px 0 12px; }
.mds-event-page .evd-slot--third .evd-avatar { width: 44px; height: 44px; margin: 10px 0 8px; }
.mds-event-page .evd-avatar svg { display: block; width: 100%; height: 100%; }

.mds-event-page .evd-slot-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: mds-mono, monospace;
	font-size: 9pt;
	color: var(--mds-cream-dim);
}
.mds-event-page .evd-slot-flag img { width: 17px; height: auto; border-radius: 1px; }

.mds-event-page .evd-slot-name {
	font-family: mds-serif-bold, serif;
	font-size: 14pt;
	color: var(--mds-cream);
	margin: 10px 0 0;
}
.mds-event-page .evd-slot-name a { color: inherit; text-decoration: none; }
.mds-event-page .evd-slot--champion .evd-slot-name {
	font-size: 20pt;
	border-bottom: 2px solid var(--mds-gold);
	display: inline-block;
	padding-bottom: 4px;
}
.mds-event-page .evd-slot--third .evd-slot-name { font-size: 11.5pt; }

.mds-event-page .evd-slot-result {
	font-family: mds-mono, monospace;
	font-size: 8.5pt;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--mds-cream-dim);
	margin: 6px 0 0;
}
.mds-event-page .evd-slot-score {
	font-family: mds-mono-bold, monospace;
	font-size: 18pt;
	color: var(--mds-cream);
	margin: 10px 0 0;
	font-variant-numeric: tabular-nums;
}
.mds-event-page .evd-slot-score small { font-size: 9pt; color: var(--mds-cream-dim); font-weight: 500; }
.mds-event-page .evd-slot--champion .evd-slot-score { font-size: 25pt; color: var(--mds-gold-texto); }

.mds-event-page .evd-slot-season-link {
	display: block;
	margin-top: 8px;
	font-family: mds-mono, monospace;
	font-size: 8pt;
	color: var(--mds-cream-dim);
	text-decoration: underline;
}

/* ---- Fases: abas + grade de baterias (substitui o antigo <details> por fase) ---- */
.mds-event-page .evd-tracker {
	display: flex;
	gap: 2px;
	overflow-x: auto;
	margin: 0 0 20px;
	border-bottom: 1px solid var(--mds-line);
}
.mds-event-page .evd-tab {
	font-family: mds-mono, monospace;
	font-size: 9.5pt;
	letter-spacing: 0.03em;
	white-space: nowrap;
	color: var(--mds-cream-dim);
	padding: 10px 16px;
	border-bottom: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
}
.mds-event-page .evd-tab--active {
	color: var(--mds-cream);
	border-bottom-color: var(--mds-coral);
	font-weight: 700;
}
.mds-event-page .evd-heats {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin-bottom: 8px;
}
.mds-event-page .evd-heats[hidden] { display: none; }

/* ---- Navegação entre etapas (rodapé de conteúdo) ---- */
.mds-event-page .evd-stage-nav {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	border: 1px solid var(--mds-line);
	border-radius: 10px;
	overflow: hidden;
	background: #ffffff;
}
.mds-event-page .evd-stage-nav--topo {
	margin-bottom: 22px;
}
.mds-event-page .evd-stage-link {
	padding: 20px 22px;
	text-decoration: none;
	border-left: 1px solid var(--mds-line);
	min-height: 64px;
}
.mds-event-page .evd-stage-link:first-child { border-left: none; }
.mds-event-page .evd-stage-link--current { background: var(--mds-ink-2); }
.mds-event-page .evd-stage-dir {
	font-family: mds-mono, monospace;
	font-size: 8pt;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--mds-cream-dim);
	margin: 0;
}
.mds-event-page .evd-stage-name {
	font-family: mds-serif-bold, serif;
	font-size: 13.5pt;
	color: var(--mds-cream);
	margin: 8px 0 0;
}
.mds-event-page .evd-quicklinks {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
	margin: 20px 0 8px;
	font-family: mds-mono, monospace;
	font-size: 9.5pt;
}
.mds-event-page .evd-quicklinks a {
	color: var(--mds-cream-dim);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.mds-event-page .evd-quicklinks a:hover {
	color: var(--mds-cream);
	border-bottom-color: var(--mds-coral);
}

/* ---- Destaques do evento: grade "sem costura" -- container pinta a cor das
   frestas (1px), cada quadrado é opaco por cima. No máximo 5 quadrados (limite
   aplicado na JSP), então sempre 1 linha só em telas largas. ---- */
.mds-event-page .mds-hero-grid:not(.evd-numbers-grid) {
	grid-template-columns: repeat(5, 1fr);
	gap: 1px;
	background: var(--mds-line);
	border: 1px solid var(--mds-line);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 32px;
}
.mds-event-page .mds-hero-grid:not(.evd-numbers-grid) .mds-hero-item {
	background: #ffffff;
	border: none;
	border-radius: 0;
	padding: 26px 20px;
}
.mds-event-page .mds-hero-label {
	font-family: mds-mono, monospace;
	letter-spacing: 0.08em;
}
.mds-event-page .mds-hero-valor {
	font-family: mds-serif-black, serif;
	font-variant-numeric: tabular-nums;
	font-size: 24pt;
}
.mds-event-page .mds-hero-sub a { color: var(--mds-coral); }

/* ---- Evento em números: mesma grade sem costura, só que com quantas colunas
   couberem (a quantidade de campos varia por evento, não tem teto de 5). ---- */
.mds-event-page .evd-numbers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 1px;
	background: var(--mds-line);
	border: 1px solid var(--mds-line);
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 32px;
}
.mds-event-page .evd-numbers-grid .mds-hero-item {
	background: #ffffff;
	border: none;
	border-radius: 0;
	text-align: center;
	padding: 22px 14px;
}
.mds-event-page .evd-numbers-grid .mds-hero-label {
	font-size: 8pt;
	margin-bottom: 8px;
}
.mds-event-page .evd-numbers-grid .mds-hero-valor {
	font-family: mds-mono-bold, ui-monospace, monospace;
	font-size: 19pt;
	color: var(--mds-coral);
}

/* ---- Fases: cartão de bateria no mesmo idioma visual (header em mono, ondas
   como caixas com borda -- não pill preenchida -- linha vencedora com barra
   lateral e total em destaque). ---- */
.mds-event-page .mds-heat-card {
	border-radius: 8px;
	background: #ffffff;
	border: 1px solid var(--mds-line);
}
.mds-event-page .mds-heat-head {
	background: #ffffff;
	border-bottom: 1px solid var(--mds-line);
	font-family: mds-mono, monospace;
	letter-spacing: 0.08em;
	color: var(--mds-cream-dim);
}
.mds-event-page .mds-heat-row {
	background: #ffffff;
}
.mds-event-page .mds-heat-row.mds-venceu {
	background: var(--mds-coral-soft);
	border-left: 3px solid var(--mds-coral);
	padding-left: 15px;
}
.mds-event-page .mds-wave-pip {
	background: transparent;
	border: 1px solid var(--mds-line);
	color: var(--mds-cream-dim);
}
.mds-event-page .mds-wave-pip.mds-contabilizada {
	background: var(--mds-coral-soft);
	border-color: var(--mds-coral);
	color: var(--mds-cream);
}
.mds-event-page .mds-heat-row.mds-venceu .mds-heat-total {
	color: var(--mds-coral);
}

/* ---- FAQ: mesma linguagem editorial (serifa nas perguntas, mono nos metadados) ---- */
.mds-event-page .mds-faq-secao {
	background: #ffffff;
	border-radius: 8px;
}
.mds-event-page .mds-faq-pergunta {
	font-family: mds-serif-bold, serif;
	font-size: 14pt;
}
.mds-event-page .mds-faq-resposta {
	font-family: inter-regular, sans-serif;
}

@media (max-width: 900px) {
	.mds-event-page .evd-podium { grid-template-columns: 1fr; }
	.mds-event-page .evd-podium-col { margin-bottom: 4px; }
	.mds-event-page .mds-hero-grid:not(.evd-numbers-grid) { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
	.mds-event-page .evd-hero { padding: 28px 18px 0; border-radius: 0; margin-left: -10px; margin-right: -10px; }
	.mds-event-page .evd-podium { padding: 20px 18px 8px; }
	.mds-event-page .evd-margin-note { padding: 14px 18px 0; }
	.mds-event-page .evd-stage-nav { grid-template-columns: 1fr; }
	.mds-event-page .evd-stage-link { border-left: none; border-top: 1px solid var(--mds-line); }
	.mds-event-page .evd-stage-link:first-child { border-top: none; }
	.mds-event-page .mds-hero-grid:not(.evd-numbers-grid) { grid-template-columns: 1fr; }
	.mds-event-page .evd-numbers-grid { grid-template-columns: repeat(2, 1fr); }
}