/*
Theme Name: Largada
Description: Tema para calendário de eventos de corrida, natação e triathlon. Funciona junto com o plugin Eventos Esportivos.
Version: 1.7.0
Author: —
Text Domain: largada
*/

/* ============================================================
   1. Tokens
   ============================================================ */
:root {
	--ink: #0a1a24;
	--agua: #0e6e85;
	--agua-escura: #08505f;
	--raia: #c9dde2;
	--deck: #eef2f3;
	--papel: #ffffff;
	--asfalto: #5c6b72;
	--tape: #d3364a;

	--mono: "IBM Plex Mono", ui-monospace, monospace;
	--sans: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;

	--gap: 24px;
	--largura: 1120px;
	--borda: 1px solid var(--raia);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background: var(--deck);
	color: var(--ink);
	font-family: var(--sans);
	font-size: 17px;
	line-height: 1.6;
	font-weight: 400;
}

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

a { color: var(--agua-escura); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 3px solid var(--agua); outline-offset: 2px; }

.container {
	width: 100%;
	max-width: var(--largura);
	margin: 0 auto;
	padding: 0 20px;
}

/* Tipografia */
h1, h2, h3, h4 {
	font-family: var(--sans);
	font-weight: 800;
	line-height: 1.08;
	letter-spacing: -0.02em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}
h1 { font-size: clamp(2rem, 6vw, 3.4rem); }
h2 { font-size: clamp(1.5rem, 3.6vw, 2.1rem); }
h3 { font-size: 1.2rem; }

.olho {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--agua-escura);
	font-weight: 600;
	margin: 0 0 10px;
}

/* Faixa de raias — motivo visual das linhas de piscina e da pista */
.raias {
	background-image: repeating-linear-gradient(
		90deg,
		var(--raia) 0 2px,
		transparent 2px 14px
	);
	height: 8px;
}

/* ============================================================
   2. Cabeçalho
   ============================================================ */
.topo {
	background: var(--papel);
	border-bottom: var(--borda);
	position: sticky;
	top: 0;
	z-index: 40;
}
.topo-interno {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 72px;
	flex-wrap: wrap;
	padding-top: 10px;
	padding-bottom: 10px;
}
/* Logo personalizado */
.custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.custom-logo {
	max-height: 56px;
	width: auto;
}
@media (max-width: 520px) {
	.custom-logo { max-height: 44px; }
}

.marca {
	font-weight: 900;
	font-size: 1.25rem;
	letter-spacing: -0.03em;
	text-transform: uppercase;
	color: var(--ink);
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.marca:hover { text-decoration: none; color: var(--agua-escura); }
.marca-descricao {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--asfalto);
	font-weight: 400;
	display: block;
	margin-top: 2px;
}
.menu ul {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
}
.menu a {
	font-family: var(--mono);
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ink);
	padding: 6px 0;
	display: block;
	border-bottom: 2px solid transparent;
}
.menu a:hover, .menu .current-menu-item > a {
	text-decoration: none;
	border-bottom-color: var(--agua);
}

/* ============================================================
   3. Abertura da home
   ============================================================ */
.abertura {
	background: var(--ink);
	color: var(--papel);
	padding: 56px 0 0;
	position: relative;
	overflow: hidden;
}
.abertura::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 10px;
	background-image: repeating-linear-gradient(90deg, var(--agua) 0 3px, transparent 3px 18px);
	z-index: 3;
}

/* Abertura com foto de fundo */
.abertura--foto {
	background-size: cover;
	background-repeat: no-repeat;
	--escurecer: 0.65;
}
.abertura--foto::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 26, 36, calc(var(--escurecer) * 0.85)) 0%,
		rgba(10, 26, 36, var(--escurecer)) 55%,
		rgba(10, 26, 36, calc(var(--escurecer) + 0.15)) 100%
	);
	z-index: 1;
}
.abertura > .container {
	position: relative;
	z-index: 2;
}
.abertura h1 { color: var(--papel); max-width: 20ch; }
.abertura .olho { color: var(--raia); }
.abertura p.chamada {
	color: var(--raia);
	max-width: 52ch;
	font-size: 1.05rem;
	margin: 0 0 32px;
}

/* Destaque do próximo evento */
.proximo {
	background: var(--papel);
	color: var(--ink);
	border-radius: 2px;
	padding: 26px;
	display: grid;
	gap: 20px;
	grid-template-columns: 1fr;
	transform: translateY(28px);
	box-shadow: 0 18px 40px rgba(10, 26, 36, 0.18);
}
.proximo-rotulo {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tape);
	font-weight: 600;
}
.proximo h2 { margin: 6px 0 10px; font-size: clamp(1.5rem, 4vw, 2.2rem); }
.proximo-dados {
	font-family: var(--mono);
	font-size: 0.86rem;
	color: var(--asfalto);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}
.proximo-capa img { border-radius: 2px; }
@media (min-width: 860px) {
	.proximo { grid-template-columns: 1.25fr 1fr; align-items: center; }
	.abertura { padding-top: 76px; }
}

/* Abertura sem o cartão de destaque: precisa de respiro embaixo */
.abertura--simples {
	padding-bottom: 56px;
}
@media (min-width: 860px) {
	.abertura--simples { padding-bottom: 72px; }
}

/* ============================================================
   4. Lista de eventos — o "start list"
   ============================================================ */
.secao { padding: 60px 0; }
.secao-cabecalho {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 26px;
}
.secao-cabecalho h2 { margin: 0; }

.lista-eventos {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 2px solid var(--ink);
}

.evento-linha {
	background: var(--papel);
	border-bottom: var(--borda);
	display: grid;
	grid-template-columns: 76px 1fr;
	gap: 0 18px;
	padding: 20px;
	align-items: start;
	transition: background 0.18s ease;
}
.evento-linha:hover { background: #f8fbfb; }

/* Bloco de data em monoespaçada, com a raia vertical */
.evento-data {
	font-family: var(--mono);
	text-align: center;
	border-right: 2px solid var(--raia);
	padding-right: 14px;
	line-height: 1;
}
.evento-data .dia { display: block; font-size: 2.1rem; font-weight: 600; letter-spacing: -0.04em; }
.evento-data .mes { display: block; font-size: 0.72rem; letter-spacing: 0.14em; color: var(--agua-escura); margin-top: 6px; font-weight: 600; }
.evento-data .ano { display: block; font-size: 0.66rem; color: var(--asfalto); margin-top: 4px; }

/* Imagem no fim da linha do evento */
.evento-linha--logo { grid-template-columns: 76px 1fr minmax(120px, 230px); }
.evento-logo {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	align-self: center;
	height: 100%;
}
.evento-logo img {
	max-height: 150px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
}

.evento-corpo { min-width: 0; }
.evento-titulo { font-size: 1.22rem; font-weight: 800; margin: 0 0 6px; letter-spacing: -0.02em; }
.evento-titulo a { color: var(--ink); }
.evento-meta {
	font-family: var(--mono);
	font-size: 0.78rem;
	color: var(--asfalto);
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 2px 16px;
	list-style: none;
	padding: 0;
}
.evento-acoes {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 14px;
}

/* Selo de situação — carimbo levemente girado */
.selo {
	font-family: var(--mono);
	font-size: 0.66rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	border: 2px solid currentColor;
	padding: 4px 8px;
	display: inline-block;
	transform: rotate(-2.5deg);
	color: var(--asfalto);
}
.selo--aberta, .selo--ultimas { color: var(--tape); }
.selo--esgotada, .selo--cancelado { color: var(--asfalto); }
.selo--realizado { color: var(--agua-escura); }
.selo--em-breve { color: var(--asfalto); transform: rotate(1.5deg); }

/* ============================================================
   4b. Grade de cartões (página inicial)
   ============================================================ */
.grade-eventos {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 26px;
	grid-template-columns: 1fr;
}
@media (min-width: 620px) {
	.grade-eventos { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
	.grade-eventos { grid-template-columns: repeat(3, 1fr); }
}

.cartao {
	background: var(--papel);
	border: var(--borda);
	border-top: 3px solid var(--ink);
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* A imagem respira dentro do cartão e aparece inteira, sem corte. */
.cartao-foto {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	padding: 18px;
	background: var(--papel);
}
.cartao-foto img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.45s ease;
}
.cartao:hover .cartao-foto img { transform: scale(1.03); }

/* Sem foto: fundo escuro com o motivo das raias, para não abrir um vazio */
.cartao-foto--vazia {
	background-color: var(--ink);
	background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.07) 0 3px, transparent 3px 16px);
}

.cartao-corpo {
	padding: 18px 20px 20px;
	display: flex;
	flex-direction: column;
	flex: 1;
	border-top: var(--borda);
}

/* Data abaixo da imagem */
.cartao-data {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	background: var(--ink);
	color: var(--papel);
	font-family: var(--mono);
	padding: 7px 13px;
	margin: 0 0 14px;
	align-self: flex-start;
	line-height: 1;
}
.cartao-data strong { font-size: 1.4rem; font-weight: 600; letter-spacing: -0.04em; }
.cartao-data span { font-size: 0.64rem; letter-spacing: 0.14em; color: var(--raia); }

.cartao-titulo {
	font-size: 1.14rem;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin: 0 0 8px;
	line-height: 1.2;
}
.cartao-titulo a { color: var(--ink); }
.cartao-meta {
	list-style: none;
	margin: 0 0 16px;
	padding: 0;
	font-family: var(--mono);
	font-size: 0.75rem;
	color: var(--asfalto);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.cartao-rodape {
	margin-top: auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
}

/* ============================================================
   5. Botões
   ============================================================ */
.botao {
	display: inline-block;
	font-family: var(--mono);
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 12px 20px;
	border: 2px solid var(--ink);
	background: var(--ink);
	color: var(--papel);
	border-radius: 2px;
	cursor: pointer;
}
.botao:hover { background: var(--agua-escura); border-color: var(--agua-escura); color: var(--papel); text-decoration: none; }
.botao--vazado { background: transparent; color: var(--ink); }
.botao--vazado:hover { background: var(--ink); color: var(--papel); }
.botao--inscricao { background: var(--tape); border-color: var(--tape); }
.botao--inscricao:hover { background: #a82437; border-color: #a82437; }
.botao--pequeno { padding: 8px 14px; font-size: 0.72rem; }

/* Filtros por modalidade */
.filtros {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 28px;
	padding: 0;
	list-style: none;
}
.filtros a {
	font-family: var(--mono);
	font-size: 0.74rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 8px 14px;
	border: var(--borda);
	background: var(--papel);
	color: var(--ink);
	display: block;
}
.filtros a:hover, .filtros .ativo a {
	text-decoration: none;
	background: var(--ink);
	border-color: var(--ink);
	color: var(--papel);
}

/* ============================================================
   6. Página do evento
   ============================================================ */
.evento-topo {
	background: var(--ink);
	color: var(--papel);
	padding: 44px 0 40px;
	position: relative;
}
.evento-topo > .container { position: relative; z-index: 2; }

/* Capa grande: a foto entra como fundo, com escurecimento para o texto ler bem */
.evento-topo--capa {
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
	padding-top: 120px;
	padding-bottom: 44px;
}
.evento-topo--capa::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 26, 36, 0.35) 0%,
		rgba(10, 26, 36, 0.62) 45%,
		rgba(10, 26, 36, 0.88) 100%
	);
	z-index: 1;
}
@media (min-width: 900px) {
	.evento-topo--capa { min-height: 520px; padding-top: 160px; }
}

.evento-topo-dados {
	list-style: none;
	margin: 14px 0 20px;
	padding: 0;
	font-family: var(--mono);
	font-size: 0.86rem;
	color: var(--raia);
	display: flex;
	flex-wrap: wrap;
	gap: 4px 18px;
}
.evento-topo-acoes {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
}
.evento-topo h1 { color: var(--papel); margin-bottom: 0; max-width: 26ch; }
.evento-topo .olho { color: var(--raia); }
.evento-topo .selo { color: #fff; border-color: #fff; }
.evento-topo .selo--aberta, .evento-topo .selo--ultimas { color: #ff8d9c; border-color: #ff8d9c; }

.evento-capa { margin: 0; }
.evento-capa img { width: 100%; max-height: 460px; object-fit: cover; }

.evento-layout {
	display: grid;
	gap: 40px;
	grid-template-columns: 1fr;
	padding: 44px 0 70px;
}
@media (min-width: 900px) {
	.evento-layout { grid-template-columns: 1fr 320px; gap: 56px; }
}

.conteudo { font-size: 1.05rem; }
.conteudo > * { margin-top: 0; margin-bottom: 1.1em; }
.conteudo h2 { margin-top: 1.8em; }
.conteudo ul, .conteudo ol { padding-left: 1.3em; }
.conteudo img { border-radius: 2px; }
.conteudo blockquote {
	border-left: 3px solid var(--agua);
	margin-left: 0;
	padding-left: 18px;
	color: var(--asfalto);
}
.conteudo .wp-block-gallery { margin-bottom: 1.6em; }

/* Ficha técnica */
.ficha {
	background: var(--papel);
	border: var(--borda);
	border-top: 3px solid var(--ink);
	padding: 22px;
	position: sticky;
	top: 96px;
}
.ficha h2 {
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 600;
	margin: 0 0 16px;
	color: var(--agua-escura);
}
.ficha dl { margin: 0; }
.ficha dt {
	font-family: var(--mono);
	font-size: 0.68rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--asfalto);
	margin-top: 14px;
}
.ficha dd { margin: 2px 0 0; font-weight: 600; }
.ficha dt:first-of-type { margin-top: 0; }
.ficha .botao { width: 100%; text-align: center; margin-top: 20px; }

.arquivos { list-style: none; margin: 24px 0 0; padding: 0; }
.arquivos li { border-top: var(--borda); }
.arquivos a {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	align-items: baseline;
	padding: 12px 0;
	color: var(--ink);
	font-weight: 600;
}
.arquivos a:hover { color: var(--agua-escura); }
.arquivos .tipo {
	font-family: var(--mono);
	font-size: 0.64rem;
	letter-spacing: 0.1em;
	color: var(--asfalto);
	text-transform: uppercase;
	white-space: nowrap;
}

/* ============================================================
   7. Páginas comuns, busca e paginação
   ============================================================ */
.pagina { padding: 50px 0 70px; }
.pagina-topo { border-bottom: 2px solid var(--ink); padding-bottom: 18px; margin-bottom: 32px; }
.folha {
	background: var(--papel);
	border: var(--borda);
	padding: 28px;
}
@media (min-width: 700px) { .folha { padding: 44px; } }

.paginacao {
	margin-top: 36px;
	font-family: var(--mono);
	font-size: 0.8rem;
}
.paginacao .page-numbers {
	display: inline-block;
	padding: 8px 13px;
	border: var(--borda);
	background: var(--papel);
	margin: 0 4px 6px 0;
	color: var(--ink);
}
.paginacao .current, .paginacao a:hover {
	background: var(--ink);
	color: var(--papel);
	border-color: var(--ink);
	text-decoration: none;
}

.aviso-vazio {
	background: var(--papel);
	border: 1px dashed var(--raia);
	padding: 28px;
	font-family: var(--mono);
	font-size: 0.9rem;
	color: var(--asfalto);
}

.busca { display: flex; gap: 8px; max-width: 420px; }
.busca input[type="search"] {
	flex: 1;
	padding: 11px 14px;
	border: 2px solid var(--ink);
	background: var(--papel);
	font-family: var(--sans);
	font-size: 1rem;
	border-radius: 2px;
	min-width: 0;
}

/* ============================================================
   8. Patrocinadores
   ============================================================ */
.patrocinadores {
	background: var(--ink);
	padding: 44px 0 46px;
}
.patrocinadores-titulo {
	text-align: center;
	margin-bottom: 28px;
	color: var(--raia);
}
/* Encostada no rodapé, sem emenda clara, mas com uma divisão sutil. */
.patrocinadores + .rodape {
	margin-top: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.patrocinadores-lista {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 18px 34px;
}
.patrocinador img {
	width: auto;
	object-fit: contain;
	opacity: 0.92;
	transition: opacity 0.18s ease;
}
.patrocinador a:hover img { opacity: 1; }

.patrocinador--master img { max-height: 84px; max-width: 260px; }
.patrocinador--ouro img   { max-height: 58px; max-width: 190px; }
.patrocinador--apoio img  { max-height: 42px; max-width: 150px; }

/* Separador discreto entre as cotas */
.patrocinadores-lista { position: relative; }

@media (max-width: 600px) {
	.patrocinadores { padding: 32px 0 34px; }
	.patrocinadores-lista { gap: 16px 24px; }
	.patrocinador--master img { max-height: 62px; max-width: 180px; }
	.patrocinador--ouro img   { max-height: 46px; max-width: 140px; }
	.patrocinador--apoio img  { max-height: 34px; max-width: 120px; }
}

/* ============================================================
   9. Contato na página inicial
   ============================================================ */
.secao--contato {
	background: var(--papel);
	border-top: var(--borda);
	border-bottom: var(--borda);
}
.contato-home {
	display: grid;
	gap: 32px;
	grid-template-columns: 1fr;
}
@media (min-width: 900px) {
	.contato-home { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
	.contato-home-texto { position: sticky; top: 96px; }
}
.contato-home-texto h2 { margin-bottom: 12px; }
.contato-home-texto p { color: var(--asfalto); max-width: 40ch; }
.contato-home .cs-bloco { max-width: none; }

/* ============================================================
   10. Rodapé
   ============================================================ */
.rodape {
	background: var(--ink);
	color: var(--raia);
	padding: 48px 0 32px;
	margin-top: 20px;
	font-size: 0.94rem;
}
.rodape a { color: var(--papel); }
.rodape-colunas {
	display: grid;
	gap: 28px;
	grid-template-columns: 1fr;
	margin-bottom: 34px;
}
@media (min-width: 700px) { .rodape-colunas { grid-template-columns: 1.4fr 1fr 1fr; } }
.rodape h3 {
	font-family: var(--mono);
	font-size: 0.7rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--papel);
	margin-bottom: 12px;
}
.rodape ul { list-style: none; margin: 0; padding: 0; }
.rodape li { margin-bottom: 7px; }
.rodape-base {
	border-top: 1px solid rgba(255, 255, 255, 0.16);
	padding-top: 20px;
	font-family: var(--mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.6);
}

/* Acessibilidade */
.pular-para-conteudo {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--papel);
	padding: 12px 18px;
	z-index: 100;
}
.pular-para-conteudo:focus { left: 12px; top: 12px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
	.selo { transform: none; }
}

/* Telas pequenas */
@media (max-width: 520px) {
	.evento-linha { grid-template-columns: 62px 1fr; gap: 0 14px; padding: 16px; }
	.evento-linha--logo { grid-template-columns: 62px 1fr minmax(70px, 96px); }
	.evento-logo img { max-height: 96px; }
	.evento-data .dia { font-size: 1.7rem; }
	.proximo { padding: 20px; }
	.ficha { position: static; }
}

/* Lista de inscritos em largura total, na página da prova */
.evento-inscritos {
	padding-bottom: 60px;
	margin-top: -20px;
}