/* =========================================================
   MEGA VALE ATIVOS · AGENDA DE LEILÕES
   Card do leilão (mosaico de fotos dos lotes) + página do evento
   Citricus.Digital · by Lucas Barbosa
   ========================================================= */

.mva-ag, .mva-ag * { box-sizing: border-box; }

.mva-ag {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #1a1a1a;
	--mva-ag-red: #E30613;
	--mva-ag-ink: #16181c;
	--mva-ag-muted: #6b7280;
	--mva-ag-line: #e6e8ec;
	--mva-ag-bg: #f6f7f9;
}
/* Reset defensivo: o tema costuma injetar margem e tamanho em h2/h3/p. */
.mva-ag h2, .mva-ag h3, .mva-ag p { margin: 0; padding: 0; }

/* Bloco de shortcode na home: respiro entre Agenda e Lotes. */
section.mva-ag { display: block; margin: 0 0 44px; }
section.mva-ag:last-child { margin-bottom: 0; }

/* ============ CABEÇALHO DO BLOCO (home) ============ */
.mva-ag-header {
	display: flex; align-items: baseline; justify-content: space-between;
	gap: 16px; margin: 0 0 18px;
}
.mva-ag .mva-ag-h {
	font-size: 26px !important; font-weight: 800 !important;
	letter-spacing: -0.4px !important; line-height: 1.2 !important;
	text-transform: none !important; font-family: inherit !important;
	color: var(--mva-ag-ink); margin: 0 !important; padding: 0 !important;
}
.mva-ag-all {
	font-size: 14px; font-weight: 600; color: var(--mva-ag-muted);
	text-decoration: none; white-space: nowrap;
}
.mva-ag-all:hover { color: var(--mva-ag-red); }

/* ============ GRADE ============ */
.mva-ag-grid { display: grid; gap: 24px; }
.mva-ag-cols-1 { grid-template-columns: 1fr; }
.mva-ag-cols-2 { grid-template-columns: repeat(2, 1fr); }
.mva-ag-cols-3 { grid-template-columns: repeat(3, 1fr); }
.mva-ag-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
	.mva-ag-cols-3, .mva-ag-cols-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
	.mva-ag-grid { grid-template-columns: 1fr !important; gap: 18px; }
	.mva-ag-h { font-size: 21px; }
}

/* ============ CARD ============ */
.mva-ag-card {
	background: #fff;
	border: 1px solid var(--mva-ag-line);
	border-radius: 10px;
	overflow: hidden;
	display: flex; flex-direction: column;
	transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
}
.mva-ag-card:hover {
	box-shadow: 0 8px 28px rgba(16,18,22,0.10);
	border-color: #d8dbe0;
	transform: translateY(-2px);
}

/* ---- Capa: mosaico com as fotos dos primeiros lotes ---- */
.mva-ag-cover {
	position: relative; display: grid; gap: 3px;
	background: var(--mva-ag-bg);
	aspect-ratio: 16 / 10;
	overflow: hidden;
	text-decoration: none;
}
/* Navegadores sem aspect-ratio (Safari antigo): altura fixa de segurança. */
@supports not (aspect-ratio: 16 / 10) {
	.mva-ag-cover { height: 220px; }
}
/* minmax(0,…): sem isso a linha da grade cresce até a altura natural da
   foto e o aspect-ratio da capa é ignorado — o card estica sem limite. */
.mva-ag-m1 { grid-template-columns: minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.mva-ag-m2 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); }
.mva-ag-m3 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(0,1fr); }
.mva-ag-m3 .mva-ag-ph:first-child { grid-row: span 2; }
.mva-ag-m4 { grid-template-columns: minmax(0,1fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr) minmax(0,1fr); }

.mva-ag-ph {
	position: relative; overflow: hidden; background: #eef0f3;
	display: block; min-height: 0;
}
.mva-ag-ph img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	margin: 0; border-radius: 0;
}
.mva-ag-ph-empty { background: repeating-linear-gradient(45deg, #eef0f3, #eef0f3 10px, #e6e8ec 10px, #e6e8ec 20px); }

/* Reloginho ao vivo (reaproveita cards.js) */
.mva-ag-cover .mva-card-timer {
	position: absolute; left: 10px; bottom: 10px; z-index: 3;
	background: rgba(16,18,22,0.86); color: #fff;
	font-size: 12px; font-weight: 700; letter-spacing: .2px;
	padding: 5px 10px; border-radius: 999px;
	backdrop-filter: blur(2px);
}
.mva-ag-cover .mva-card-timer.is-urgent { background: var(--mva-ag-red); }
.mva-ag-cover .mva-card-timer.is-ended { background: rgba(16,18,22,0.6); }

/* Selo de situação — só aparece quando NÃO é um leilão simplesmente aberto,
   porque é aí que o comprador precisa ser avisado. */
.mva-ag-flag {
	position: absolute; top: 10px; left: 10px; z-index: 3;
	font-size: 11px; font-weight: 700; letter-spacing: .4px;
	text-transform: uppercase;
	padding: 5px 10px; border-radius: 999px; color: #fff;
	background: rgba(16,18,22,0.86);
}
.mva-ag-flag-futuro { background: #b45309; }
.mva-ag-flag-encerrando { background: var(--mva-ag-red); }
.mva-ag-flag-encerrado { background: rgba(16,18,22,0.6); }
.mva-ag-date2 { display: block; color: #9ca3af; font-size: 12.5px; margin-top: 2px; }

/* ---- Corpo ---- */
.mva-ag-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }

.mva-ag-sub {
	font-size: 11px; font-weight: 700; letter-spacing: 1px;
	text-transform: uppercase; color: var(--mva-ag-muted); margin: 0;
}
/* Blindagem contra o tema: numa página montada no Avada o H2/H3 herda o
   estilo de título global (corpo enorme, caixa alta) e estoura o card. */
.mva-ag .mva-ag-title,
.mva-ag .mva-ag-title a {
	font-size: 15px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
}
.mva-ag .mva-ag-title { margin: 0 !important; padding: 0 !important; }
.mva-ag-title a { color: var(--mva-ag-ink); text-decoration: none; }
.mva-ag-title a:hover { color: var(--mva-ag-red); }

.mva-ag-date {
	margin: 0; font-size: 13px; color: var(--mva-ag-muted);
	padding-top: 8px; border-top: 1px solid #eef0f3;
}
.mva-ag-foot { margin: 0; font-size: 13px; margin-top: auto; }
.mva-ag-foot a { color: var(--mva-ag-muted); text-decoration: none; }
.mva-ag-foot a:hover { color: var(--mva-ag-red); text-decoration: underline; }
.mva-ag-bid { font-size: 15px; font-weight: 800; color: var(--mva-ag-ink); }

/* Card que leva para fora do site: seta discreta de "abre em nova aba". */
.mva-ag-ext-icon { display: inline-block; margin-left: 5px; font-size: 12px; opacity: .75; }
.mva-ag-ext .mva-ag-foot a:hover .mva-ag-ext-icon { opacity: 1; }
/* Fallback caso o tema não defina a classe de leitor de tela. */
.mva-ag .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px;
	overflow: hidden; clip: rect(1px,1px,1px,1px); white-space: nowrap;
}

/* Estado encerrado: card apagado */
.mva-ag-st-encerrado .mva-ag-cover { filter: grayscale(1); opacity: .72; }
.mva-ag-st-encerrado .mva-ag-title a { color: var(--mva-ag-muted); }

/* ============ PÁGINA DO LEILÃO ============ */
.mva-ag-crumb {
	font-size: 13px; color: var(--mva-ag-muted);
	margin: 0 0 22px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
}
.mva-ag-crumb a { color: var(--mva-ag-muted); text-decoration: none; }
.mva-ag-crumb a:hover { color: var(--mva-ag-red); }
.mva-ag-crumb strong { color: var(--mva-ag-ink); font-weight: 600; }

.mva-ag-evento { display: grid; grid-template-columns: minmax(0,1fr) 330px; gap: 32px; align-items: start; }
@media (max-width: 900px) {
	.mva-ag-evento { grid-template-columns: 1fr; gap: 24px; }
}

.mva-ag-lots-head {
	display: flex; align-items: center; gap: 10px;
	margin: 8px 0 18px;
}
.mva-ag-count {
	background: var(--mva-ag-bg); border: 1px solid var(--mva-ag-line);
	border-radius: 999px; padding: 2px 10px;
	font-size: 12px; font-weight: 700; color: var(--mva-ag-muted);
}

.mva-ag-panel {
	background: #fff; border: 1px solid var(--mva-ag-line);
	border-radius: 10px; padding: 18px; position: sticky; top: 24px;
}
.mva-ag-panel-title {
	font-size: 13px; font-weight: 700; text-transform: uppercase;
	letter-spacing: 1px; color: var(--mva-ag-muted);
	margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3;
}
.mva-ag-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.mva-ag-table th, .mva-ag-table td {
	text-align: left; vertical-align: top;
	padding: 8px 0; border-bottom: 1px solid #f2f3f5;
}
.mva-ag-table th { width: 42%; color: var(--mva-ag-muted); font-weight: 600; }
.mva-ag-table td { color: var(--mva-ag-ink); font-weight: 500; }
.mva-ag-table tr:last-child th, .mva-ag-table tr:last-child td { border-bottom: 0; }
.mva-ag-panel .mvax-btn-main { display: block; text-align: center; margin-top: 16px; }