/* Calendário Trail Run - listagem (index.php) e detalhe do evento (evento/detalhe.php) */
:root { --cal-cor: #c2410c; --cal-cor-escura: #9a3412; --cal-borda: #e6e6e6; }

/* ===== Listagem ===== */
.cal-wrap { padding: 8px 12px 32px; font-family: 'Bai Jamjuree', system-ui, sans-serif; }
.cal-breadcrumb { font-size: 13px; color: #777; margin: 0 0 4px; }
.cal-breadcrumb a { color: #777 !important; text-decoration: underline; }
.cal-wrap h1 { font-size: 28px; font-weight: 800; margin: 4px 0 8px; color: #222; }
.cal-intro { color: #555; font-size: 15px; max-width: 760px; margin-bottom: 18px; }

.cal-filtros { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.cal-chip { display: inline-block; padding: 4px 10px; border: 1px solid #ddd; border-radius: 999px; font-size: 13px; color: #333 !important; background: #fff; white-space: nowrap; }
.cal-chip:hover { border-color: var(--cal-cor); color: var(--cal-cor) !important; }
.cal-chip.is-ativo { background: var(--cal-cor); border-color: var(--cal-cor); color: #fff !important; }
.cal-chip small { color: inherit; opacity: .7; }
@media (max-width: 575px) { .cal-filtros { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; } }

.cal-meses { display: flex; gap: 6px; overflow-x: auto; padding: 6px 0 12px; margin-bottom: 8px; border-bottom: 1px solid #eee; position: sticky; top: 0; background: #fff; z-index: 5; }
.cal-meses a { font-size: 13px; font-weight: 600; color: #555 !important; padding: 4px 10px; border-radius: 4px; white-space: nowrap; }
.cal-meses a:hover { background: #f3f3f3; }

.cal-mes { scroll-margin-top: 56px; }
.cal-mes h2 { font-size: 20px; font-weight: 800; color: #222; margin: 26px 0 12px; padding-left: 10px; border-left: 4px solid var(--cal-cor); }
.cal-mes h2 small { font-size: 13px; font-weight: 400; color: #888; margin-left: 6px; }

/* Celular: lista compacta (logo à esquerda). A partir de 576px: grade de cards */
.cal-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 576px) { .cal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } }
@media (min-width: 768px) { .cal-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 992px) { .cal-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .cal-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }

.cal-card { display: flex; flex-direction: row; align-items: center; border: 1px solid var(--cal-borda); border-radius: 6px; overflow: hidden; background: #fff; color: #222 !important; transition: box-shadow .15s, border-color .15s; height: 100%; }
.cal-card:hover { box-shadow: 0 3px 10px rgba(0,0,0,.08); border-color: #d0d0d0; color: #222 !important; }
.cal-card__img { flex: 0 0 72px; width: 72px; height: 72px; background: #fff; border-right: 1px solid #f0f0f0; }
.cal-card__img img { display: block; width: 100%; height: 100%; object-fit: contain; padding: 4px; margin: 0; border: 0; }
.cal-card__corpo { padding: 6px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; }
.cal-card__data { color: var(--cal-cor); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; }
.cal-card__nome { font-size: 13.5px; font-weight: 700; line-height: 1.25; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cal-card__local { font-size: 12px; color: #777; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (min-width: 576px) {
	.cal-card { flex-direction: column; align-items: stretch; }
	.cal-card__img { flex: none; width: 100%; height: 96px; border-right: 0; border-bottom: 1px solid #f0f0f0; }
	.cal-card__img img { padding: 6px; }
	.cal-card__corpo { padding: 7px 9px 9px; }
	.cal-card__nome { font-size: 13px; }
}

.cal-card.is-cancelado .cal-card__img img { filter: grayscale(1); opacity: .5; }
.cal-card.is-cancelado .cal-card__nome { text-decoration: line-through; color: #888; }

.cal-status { align-self: flex-start; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 3px; color: #fff; margin-top: 3px; }
.cal-status--cancelado { background: #8a8a8a; }
.cal-status--adiado { background: #a16207; }
.cal-status--novadata { background: #15803d; }

.cal-vazio { padding: 40px 0; color: #666; }
.cal-vazio a { color: var(--cal-cor) !important; text-decoration: underline; }
.cal-ad { margin: 26px 0 6px; min-height: 100px; }

/* ===== Detalhe do evento ===== */
.det { padding: 8px 12px 32px; color: #222; font-family: 'Bai Jamjuree', system-ui, sans-serif; }
.det a:not(.det-btn):not(.cal-card) { color: var(--cal-cor) !important; text-decoration: underline; }
.det-breadcrumb { font-size: 13px; color: #777; margin: 0 0 14px; }
.det .det-breadcrumb a { color: #777 !important; }

.det-topo { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 22px; }
.det-logo { flex: 0 0 150px; width: 150px; height: 150px; border: 1px solid var(--cal-borda); border-radius: 10px; background: #fff; overflow: hidden; }
.det-logo img { width: 100%; height: 100%; object-fit: contain; padding: 8px; }
.det-topo__info { flex: 1; min-width: 0; }
.det-data { display: inline-block; color: var(--cal-cor); font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; }
.det-contagem { display: inline-block; margin-left: 8px; font-size: 12px; font-weight: 600; color: #555; background: #f2f2f2; padding: 2px 8px; border-radius: 999px; }
.det h1 { font-size: 30px; font-weight: 800; line-height: 1.15; margin: 4px 0 6px; }
.det-local { font-size: 15px; color: #555; margin: 0 0 10px; font-style: normal; }
.det-status { display: inline-block; font-size: 12px; font-weight: 700; text-transform: uppercase; padding: 3px 8px; border-radius: 4px; color: #fff; margin-bottom: 10px; }
.det-status--cancelado { background: #8a8a8a; }
.det-status--adiado { background: #a16207; }
.det-status--novadata { background: #15803d; }
.det-aviso { background: #fff7e0; border: 1px solid #f0d58a; border-radius: 6px; padding: 8px 12px; font-size: 14px; margin-bottom: 10px; }

.det-acoes { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.det-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 6px; font-size: 14px; font-weight: 700; border: 1px solid #ddd; background: #fff; color: #333 !important; white-space: nowrap; }
.det-btn:hover { border-color: #bbb; background: #fafafa; }
.det-btn--principal { background: var(--cal-cor); border-color: var(--cal-cor); color: #fff !important; }
.det-btn--principal:hover { background: var(--cal-cor-escura); border-color: var(--cal-cor-escura); }
.det-btn--epic { background: #2a0a5e; border-color: #2a0a5e; color: #fff !important; }
.det-btn svg { width: 16px; height: 16px; flex: none; }

.det-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 992px) { .det-grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.det h2 { font-size: 19px; font-weight: 800; margin: 0 0 12px; padding-left: 10px; border-left: 4px solid var(--cal-cor); }
.det-secao { margin-bottom: 30px; }
.det-texto { font-size: 15.5px; line-height: 1.6; color: #333; }
.det-texto img { max-width: 100%; height: auto; }

.det-ficha { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--cal-borda); border-radius: 8px; overflow: hidden; margin: 0; }
@media (min-width: 576px) { .det-ficha { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.det-ficha > div { padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
.det-ficha dt { font-size: 11.5px; font-weight: 700; text-transform: uppercase; color: #888; letter-spacing: .03em; margin: 0 0 2px; }
.det-ficha dd { font-size: 15px; margin: 0; color: #222; }
.det-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.det-chip { background: #f3f3f3; border-radius: 999px; padding: 2px 10px; font-size: 13.5px; font-weight: 600; }

.det-circuitos { display: flex; flex-wrap: wrap; gap: 10px; }
.det-circuitos span { display: block; width: 90px; height: 90px; border: 1px solid var(--cal-borda); border-radius: 8px; overflow: hidden; background: #fff; }
.det-circuitos img { width: 100%; height: 100%; object-fit: contain; padding: 6px; }

.det-foto img { width: 100%; height: auto; border-radius: 8px; }
.det-mapa { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 8px; overflow: hidden; border: 1px solid var(--cal-borda); background: #f3f3f3; }
.det-mapa iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.det-mapa-link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; }
.det-hospedagem iframe { width: 100%; height: 600px; border: 0; border-radius: 8px; }

.det-lista { display: grid; gap: 8px; margin-bottom: 10px; }
.det-lista-mais { font-size: 14px; font-weight: 600; }
.det-lista .cal-card { flex-direction: row; align-items: center; }
.det-lista .cal-card__img { flex: 0 0 64px; width: 64px; height: 64px; border-right: 1px solid #f0f0f0; border-bottom: 0; }
.det-lista .cal-card__img img { padding: 4px; }
.det-lista .cal-card__corpo { padding: 5px 10px; }

@media (max-width: 575px) {
	.det-topo { flex-direction: column; gap: 12px; }
	.det-logo { flex: none; width: 110px; height: 110px; }
	.det h1 { font-size: 24px; }
	.det-btn { flex: 1 1 auto; justify-content: center; }
	.det-hospedagem iframe { height: 520px; }
}

/* ===== Anúncios automáticos do AdSense =====
   O Auto ads insere <ins>/<div class="google-auto-placed"> dentro dos containers flex/grid.
   Aqui eles ocupam sempre a linha inteira, sem espremer o layout. */
.det-topo { flex-wrap: wrap; }
.det-topo > .det-logo { flex: 0 0 150px; }
.det-topo > .det-topo__info { flex: 1 1 300px; }
.det-topo > :not(.det-logo):not(.det-topo__info),
.det-acoes > :not(.det-btn),
.cal-filtros > :not(.cal-chip),
.cal-meses > :not(a),
.det-ficha > :not(div),
.det-circuitos > :not(span) { flex: 0 0 100%; width: 100%; grid-column: 1 / -1; }
.det-grid > :not(article):not(aside),
.cal-grid > :not(.cal-card),
.det-lista > :not(.cal-card) { grid-column: 1 / -1; width: 100%; }
.google-auto-placed { clear: both; max-width: 100%; margin: 16px 0; }
@media (max-width: 575px) { .det-topo > .det-logo { flex: none; } }

/* Detalhe do evento mais estreito no desktop (as páginas .inst definem a própria largura) */
.det { max-width: 1100px; }
@media (min-width: 992px) { .det-grid { grid-template-columns: minmax(0, 1fr) 300px; gap: 40px; } }
@media (min-width: 1200px) { .det-grid { grid-template-columns: minmax(0, 680px) 300px; justify-content: space-between; gap: 72px; } }