/**
 * Card padrão de empresa (GCEP_Busca_Cards::empresa), 01/10/2026.
 *
 * Duas formas, a mesma marcação:
 *  - LINHA (celular e a lista do computador): no jeito do aplicativo. Foto à esquerda; categoria, nome,
 *    descrição e nota ao lado; embaixo, bairro e horário à esquerda, WhatsApp e coração à direita. O card
 *    inteiro abre o perfil (o link do nome cobre o card).
 *  - EM PÉ (grade da busca a partir de 640px e a home, .mg-ecard--v): o modelo aprovado pelo dono.
 *    Imagem 16:9, "Destaque" discreto no canto da imagem, categoria, nome em evidência, descrição de duas
 *    linhas, nota, bairro e horário numa linha, e embaixo "Ver perfil", WhatsApp e coração.
 *
 * Cores do manual: Azul Morro no nome e no botão, marinho no texto forte, laranja só no "Destaque",
 * verde cheio do WhatsApp (#25d366) como no aplicativo.
 *
 * @package GuiaWP
 * @author  Valoar
 * @since   01/10/2026
 */

.mg-ecard {
	--ec-azul: var(--mg-azul, #0f5132);
	--ec-azul-h: var(--mg-azul-hover, #0b3f27);
	--ec-marinho: var(--mg-marinho, #0b3a25);
	--ec-texto: var(--mg-texto, #3d4a43);
	--ec-texto-2: var(--mg-texto-2, #5a6660);
	--ec-borda: var(--mg-borda, #eae5db);
	position: relative;
	box-sizing: border-box;
	min-width: 0;
	background: #fff;
	border: 1px solid var(--ec-borda);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(11, 58, 37, .05);
	font-family: var(--mg-fonte, Poppins, system-ui, sans-serif);
	color: var(--ec-texto);
	transition: box-shadow .2s, border-color .2s;
}
.mg-ecard *, .mg-ecard *::before, .mg-ecard *::after { box-sizing: border-box; }
.mg-ecard:hover { border-color: var(--mg-borda-hover, #b9dcc8); box-shadow: 0 6px 20px rgba(11, 58, 37, .1); }
.mg-ecard :where(p, h2, h3, h4) { margin: 0; }
.mg-ecard svg { flex: none; }

/* Imagem */
.mg-ecard__img { display: block; overflow: hidden; background: #f1efe8; }
.mg-ecard__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mg-ecard__semimg { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: #a9b8cc; }
.mg-ecard__semimg svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* Selos e textos */
.mg-ecard__destaque { position: absolute; z-index: 2; padding: 4px 9px; border-radius: 8px; background: #ff7a00; color: #fff; font-size: 11.5px; font-weight: 700; line-height: 1.2; }
.mg-ecard__cat { display: inline-block; justify-self: start; align-self: start; max-width: 100%; padding: 4px 10px; border-radius: 999px; background: #f1efe8; color: var(--ec-marinho); font-size: 12px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mg-ecard__cat.is-vazio { visibility: hidden; }
.mg-ecard__nome { font-size: 1.0625rem; font-weight: 800; line-height: 1.25; color: var(--ec-marinho); }
.mg-ecard__nome a { color: inherit; text-decoration: none; }
/* O nome cobre o card: tocar em qualquer lugar abre o perfil. */
.mg-ecard__nome a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.mg-ecard:hover .mg-ecard__nome a { color: var(--ec-azul); }
.mg-ecard__nome a:focus-visible { outline: none; }
.mg-ecard:focus-within { outline: 3px solid #a9d9bf; outline-offset: 2px; }
.mg-ecard__desc { font-size: .875rem; line-height: 1.45; color: var(--ec-texto-2); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mg-ecard__nota { display: flex; align-items: center; gap: 5px; font-size: .875rem; color: var(--ec-texto-2); }
.mg-ecard__nota svg { width: 16px; height: 16px; fill: #f5a524; stroke: #f5a524; }
.mg-ecard__nota b { color: var(--ec-marinho); font-weight: 800; }
.mg-ecard__nota.is-vazio { font-size: .8125rem; color: #8494ad; }
.mg-ecard__info { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: .8125rem; color: var(--ec-texto-2); min-width: 0; }
.mg-ecard__local { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.mg-ecard__local svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.mg-ecard__preco { font-weight: 700; color: var(--ec-marinho); }
.mg-ecard .gcep-hours-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #f1ede6; color: var(--ec-texto-2); font-size: 12px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.mg-ecard .gcep-hours-chip.is-open { background: #dcfce7; color: #15803d; }
.mg-ecard .gcep-hours-chip.is-closed { background: #f1ede6; color: var(--ec-texto-2); }
.mg-ecard .gcep-hours-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; }
.mg-ecard .gcep-hours-extra { font-weight: 500; }

/* Ações: acima do link que cobre o card */
.mg-ecard__acoes { display: flex; align-items: center; gap: 8px; }
.mg-ecard__perfil, .mg-ecard__zap, .mg-ecard__fav { position: relative; z-index: 2; }
.mg-ecard__perfil { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 16px; border-radius: 10px; background: var(--ec-azul); color: #fff; font-size: .9375rem; font-weight: 700; text-decoration: none; transition: background-color .15s; }
.mg-ecard__perfil:hover { background: var(--ec-azul-h); color: #fff; }
.mg-ecard__perfil svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.mg-ecard__zap, .mg-ecard__fav { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: 12px; transition: background-color .15s, transform .15s, color .15s; }
.mg-ecard__zap { background: #25d366; color: #fff; }
.mg-ecard__zap:hover { background: #1ebe5b; color: #fff; }
.mg-ecard__zap svg { width: 22px; height: 22px; }
.mg-ecard__fav { border: 1px solid var(--ec-borda); background: #fff; color: var(--ec-marinho); cursor: pointer; padding: 0; }
.mg-ecard__fav svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linejoin: round; }
.mg-ecard__fav:hover { border-color: #f3a3ae; color: #e5213b; }
.mg-ecard__fav[aria-pressed="true"] { color: #e5213b; border-color: #f3a3ae; }
.mg-ecard__fav[aria-pressed="true"] svg { fill: currentColor; }
.mg-ecard__zap:active, .mg-ecard__fav:active { transform: scale(.94); }
.mg-ecard :is(.mg-ecard__perfil, .mg-ecard__zap, .mg-ecard__fav):focus-visible { outline: 3px solid #a9d9bf; outline-offset: 2px; }

/* ───────────── LINHA (padrão): celular e lista do computador ───────────── */
.mg-ecard {
	display: grid;
	grid-template-columns: 84px minmax(0, 1fr) auto auto;
	grid-template-areas:
		"img cat  cat  cat"
		"img nome nome nome"
		"img desc desc desc"
		"img nota nota nota"
		"info info zap fav";
	column-gap: 12px;
	row-gap: 4px;
	padding: 12px;
	align-items: start;
}
.mg-ecard__corpo, .mg-ecard__acoes { display: contents; }
.mg-ecard__img { grid-area: img; width: 84px; height: 84px; border-radius: 12px; }
.mg-ecard__cat { grid-area: cat; margin-right: 76px; }
.mg-ecard__nome { grid-area: nome; }
.mg-ecard__desc { grid-area: desc; }
.mg-ecard__nota { grid-area: nota; }
.mg-ecard__info { grid-area: info; align-self: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ec-borda); }
.mg-ecard__zap { grid-area: zap; align-self: center; margin-top: 8px; width: 40px; height: 40px; border-radius: 999px; }
.mg-ecard__fav { grid-area: fav; align-self: center; margin-top: 8px; width: 40px; height: 40px; border-radius: 999px; border: 0; background: none; }
.mg-ecard__zap, .mg-ecard__fav { padding-top: 0; }
.mg-ecard__perfil { display: none; }
.mg-ecard__destaque { top: 12px; right: 12px; }
/* A linha de baixo tem borda em cima: o WhatsApp e o coração se alinham com ela. */
.mg-ecard:has(.mg-ecard__zap) .mg-ecard__info, .mg-ecard:has(.mg-ecard__fav) .mg-ecard__info { margin-right: 0; }
.mg-ecard__zap, .mg-ecard__fav { position: relative; }

@media (min-width: 768px) {
	/* Lista do computador: foto maior, 16:9, e o "Ver perfil" volta. */
	.mg-ecard { grid-template-columns: 200px minmax(0, 1fr) auto auto auto; grid-template-areas:
		"img cat  cat  cat  cat"
		"img nome nome nome nome"
		"img desc desc desc desc"
		"img nota nota nota nota"
		"img info perfil zap fav"; column-gap: 18px; padding: 14px; }
	.mg-ecard__img { width: 200px; height: auto; aspect-ratio: 16 / 9; align-self: stretch; }
	.mg-ecard__perfil { display: inline-flex; grid-area: perfil; align-self: center; margin-top: 8px; min-height: 40px; }
	.mg-ecard__info { border-top: 0; padding-top: 0; }
	.mg-ecard__zap, .mg-ecard__fav { border-radius: 12px; }
	.mg-ecard__fav { border: 1px solid var(--ec-borda); background: #fff; }
}

/* ───────────── EM PÉ: grade da busca e a home (.mg-ecard--v) ───────────── */
.mg-ecard--v,
.mg-rlista.is-grade .mg-ecard {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}
.mg-ecard--v .mg-ecard__img,
.mg-rlista.is-grade .mg-ecard__img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0; }
.mg-ecard--v .mg-ecard__destaque,
.mg-rlista.is-grade .mg-ecard__destaque { top: 12px; right: 12px; }
.mg-ecard--v .mg-ecard__corpo,
.mg-rlista.is-grade .mg-ecard__corpo { display: flex; flex-direction: column; gap: 7px; flex: 1; padding: 14px 16px 0; }
.mg-ecard--v .mg-ecard__cat,
.mg-rlista.is-grade .mg-ecard__cat { margin-right: 0; }
.mg-ecard--v .mg-ecard__nome,
.mg-rlista.is-grade .mg-ecard__nome { font-size: 1.1875rem; }
.mg-ecard--v .mg-ecard__desc,
.mg-rlista.is-grade .mg-ecard__desc { min-height: 2.9em; }
.mg-ecard--v .mg-ecard__info,
.mg-rlista.is-grade .mg-ecard__info { align-self: stretch; margin-top: 2px; padding-top: 0; border-top: 0; }
.mg-ecard--v .mg-ecard__acoes,
.mg-rlista.is-grade .mg-ecard__acoes { display: flex; padding: 14px 16px 16px; margin-top: auto; }
.mg-ecard--v .mg-ecard__perfil,
.mg-rlista.is-grade .mg-ecard__perfil { display: inline-flex; flex: 1; margin: 0; }
.mg-ecard--v :is(.mg-ecard__zap, .mg-ecard__fav),
.mg-rlista.is-grade :is(.mg-ecard__zap, .mg-ecard__fav) { margin: 0; width: 44px; height: 44px; border-radius: 12px; }
.mg-ecard--v .mg-ecard__fav,
.mg-rlista.is-grade .mg-ecard__fav { border: 1px solid var(--ec-borda); background: #fff; }

@media (max-width: 639px) {
	/* No celular a grade da busca também usa a linha (a escolha de grade é do computador). */
	.mg-rlista.is-grade .mg-ecard { display: grid; column-gap: 12px; row-gap: 4px; align-items: start; padding: 12px; overflow: visible; height: auto; }
	.mg-rlista.is-grade .mg-ecard__img { width: 84px; height: 84px; aspect-ratio: auto; border-radius: 12px; }
	.mg-rlista.is-grade .mg-ecard__corpo, .mg-rlista.is-grade .mg-ecard__acoes { display: contents; padding: 0; }
	.mg-rlista.is-grade .mg-ecard__cat { margin-right: 76px; }
	.mg-rlista.is-grade .mg-ecard__nome { font-size: 1.0625rem; }
	.mg-rlista.is-grade .mg-ecard__desc { min-height: 0; }
	.mg-rlista.is-grade .mg-ecard__info { align-self: center; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--ec-borda); }
	.mg-rlista.is-grade .mg-ecard__perfil { display: none; }
	.mg-rlista.is-grade :is(.mg-ecard__zap, .mg-ecard__fav) { margin-top: 8px; width: 40px; height: 40px; border-radius: 999px; }
	.mg-rlista.is-grade .mg-ecard__fav { border: 0; background: none; }
}

/* Home: UMA linha de 4 (o dono: "duas linhas fica gigante"). A página traz todos os pagos e o sorteio
   (GCEP_Home_V2::script_rodizio) põe 4 na frente; daqui em diante, só os 4 primeiros aparecem. Abaixo de
   1200px, a faixa que rola, com largura máxima. */
.mgh .g6.is-rodizio > .mg-ecard:nth-child(n+5) { display: none; }
@media (min-width: 1200px) {
	.mgh .g6:has(> .mg-ecard) { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
	.mgh .g6 > .mg-ecard--v .mg-ecard__img { aspect-ratio: 16 / 9; }
	.mgh .g6 > .mg-ecard--v .mg-ecard__corpo { gap: 6px; padding: 12px 14px 0; }
	.mgh .g6 > .mg-ecard--v .mg-ecard__nome { font-size: 1.0625rem; }
	.mgh .g6 > .mg-ecard--v .mg-ecard__desc { font-size: .8125rem; }
	.mgh .g6 > .mg-ecard--v .mg-ecard__acoes { gap: 6px; padding: 12px 14px 14px; }
	.mgh .g6 > .mg-ecard--v .mg-ecard__perfil { min-height: 40px; font-size: .875rem; padding: 0 10px; }
	.mgh .g6 > .mg-ecard--v :is(.mg-ecard__zap, .mg-ecard__fav) { width: 40px; height: 40px; }
}
@media (max-width: 1199px) {
	.mgh .g6:has(> .mg-ecard) { grid-auto-columns: min(80%, 320px); gap: 14px; }
}
.mgh .mg-ecard__nome { font-family: inherit; }

@media (prefers-reduced-motion: reduce) {
	.mg-ecard, .mg-ecard__perfil, .mg-ecard__zap, .mg-ecard__fav { transition: none; }
}

/* A home pinta todo link com a cor do texto (.mgh a): o botão e o WhatsApp precisam ganhar dela. */
.mg-ecard a.mg-ecard__perfil, .mg-ecard a.mg-ecard__perfil:hover, .mg-ecard a.mg-ecard__zap, .mg-ecard a.mg-ecard__zap:hover { color: #fff; }