/**
 * Empreendimentos — Studio Hikari
 * v1.1.0
 */

/* =====================================================================
   Custom properties
   ===================================================================== */
.emp-wrapper {
	--emp-color-title:        #163a3a;
	--emp-color-local:        #163a3a;
	--emp-pill-active-bg:     #c0f6fc;
	--emp-pill-active-text:   #004c54;
	--emp-pill-text:          #2b2b2b;
	--emp-badge-lancamentos:  #004c54;   /* Lançamento */
	--emp-badge-entregues:    #5c758e;   /* Entregue   */
	--emp-badge-default:      #004c54;   /* fallback   */
	--emp-badge-text:         #ffffff;
	--emp-radius:             16px;
	--emp-badge-radius:       4px;
	--emp-col-gap:            16px;
	--emp-row-gap:            40px;
}

/* =====================================================================
   Barra de filtros
   ===================================================================== */
.emp-filtros {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin: 0 0 28px;
}

.emp-filtro {
	appearance: none;
	border: none;
	background: transparent;
	color: var(--emp-pill-text);
	font-size: 1rem;
	line-height: 1;
	padding: 10px 24px;
	border-radius: 999px;
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
	white-space: nowrap;
}

.emp-filtro:hover           { background-color: rgba(0,0,0,.05); }
.emp-filtro.is-active       { background-color: var(--emp-pill-active-bg); color: var(--emp-pill-active-text); font-weight: 600; }
.emp-filtro.is-active:hover { background-color: var(--emp-pill-active-bg); }
.emp-filtro:focus-visible   { outline: 2px solid var(--emp-pill-active-bg); outline-offset: 2px; }

@media (max-width: 900px) {
	.emp-filtros {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		padding-bottom: 4px;
		margin-bottom: 20px;
	}
	.emp-filtros::-webkit-scrollbar { display: none; }
	.emp-filtro { flex-shrink: 0; font-size: .9rem; padding: 8px 18px; }
}
@media (max-width: 580px) {
	.emp-filtro { font-size: .85rem; padding: 8px 14px; }
}

/* =====================================================================
   Grid destaque — 2 colunas, imagem landscape 4:3
   ===================================================================== */
.emp-grid--destaque {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--emp-col-gap);
	margin-bottom: var(--emp-col-gap);
}

/* =====================================================================
   Grid regulares — 3 colunas fixas acima de 900px
   ===================================================================== */
.emp-grid--regular {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--emp-row-gap) var(--emp-col-gap);
}

.emp-grid--regular.emp-grid--cols-2 { grid-template-columns: repeat(2, 1fr); }
.emp-grid--regular.emp-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }

/* =====================================================================
   Card base
   ===================================================================== */
.emp-card { position: relative; }

.emp-card__link {
	display: block;
	color: inherit;
	text-decoration: none;
}
.emp-card__link:focus-visible {
	outline: 2px solid var(--emp-pill-active-text);
	outline-offset: 4px;
	border-radius: var(--emp-radius);
}

/* -------------------------------------------------------------------
   IMAGEM — abordagem definitiva para contornar resets do Salient.
   
   O CONTAINER define a proporção via aspect-ratio.
   O IMG usa position: absolute + !important em todas as propriedades,
   garantindo que nenhum CSS do Salient (height:auto, position:static,
   etc.) consiga criar o espaço vazio que aparecia entre imagem e badge.
   ------------------------------------------------------------------- */
.emp-card__image {
	position: relative;
	overflow: hidden;
	border-radius: var(--emp-radius);
}

/* Proporções por tipo de grid */
.emp-grid--destaque .emp-card__image { aspect-ratio: 4 / 3; max-height: 520px; }
.emp-grid--regular  .emp-card__image { aspect-ratio: 3 / 4; max-height: 620px; }

/* !important em tudo — derrota qualquer sobrescrita do tema */
.emp-card__image img {
	position:   absolute !important;
	top:        0        !important;
	left:       0        !important;
	width:      100%     !important;
	height:     100%     !important;
	object-fit: cover    !important;
	display:    block    !important;
	transition: transform .4s ease;
}

.emp-card:hover .emp-card__image img { transform: scale(1.04); }

/* =====================================================================
   Badge — abaixo da imagem, acima do título
   ===================================================================== */
.emp-card__badge {
	display: inline-flex;
	align-items: center;
	height: 23px;
	padding: 0 10px;
	border-radius: var(--emp-badge-radius);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--emp-badge-text);
	background: var(--emp-badge-default);
	white-space: nowrap;
	margin-bottom: 8px;
}

/* Badge — cor aplicada via style inline (term_meta badge_color do admin).
   Sem classes de cor fixas — cada status tem sua própria cor cadastrada
   diretamente na tela Empreendimentos → Status. */
.emp-card__badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 50px;
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #ffffff;
	background: #004c54;
	white-space: nowrap;
	margin-top: 1vh;
}

/* =====================================================================
   Corpo do card
   ===================================================================== */
.emp-card__body { padding: 14px 0 0; }

.emp-card__title {
	margin: 0 0 8px;
	font-size: 1.6rem !important;
	font-weight: 500 !important;
	line-height: 1.3;
	color: var(--emp-color-title);
}

/* Linha de tags: badge status + badge local lado a lado */
.emp-card__tags {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin-top: 1vh;
}

/* Badge padrão (status — cor via style inline) */
.emp-card__badge {
	display: inline-flex;
	align-items: center;
	height: 26px;
	padding: 0 12px;
	border-radius: 50px;
	font-size: .75rem;
	font-weight: 400;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: #ffffff;
	background: #004c54;
	white-space: nowrap;
}

/* Badge localidade — outline sem preenchimento */
.emp-card__badge--local {
	background: transparent !important;
	color: #002529;
	border: 1.5px solid #002529;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
}

.emp-grid__empty { opacity: .6; }

/* =====================================================================
   Responsivo
   ===================================================================== */
@media (max-width: 900px) {
	.emp-grid--destaque,
	.emp-grid--regular,
	.emp-grid--regular.emp-grid--cols-4 {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 580px) {
	.emp-grid--destaque,
	.emp-grid--regular,
	.emp-grid--regular.emp-grid--cols-2,
	.emp-grid--regular.emp-grid--cols-4 {
		grid-template-columns: 1fr;
		gap: 24px var(--emp-col-gap);
	}
}

/* =====================================================================
   Correções de layout Salient para CPTs customizados
   ===================================================================== */
body:not(.nectar-no-flex-height) #ajax-content-wrap,
body:not(.nectar-no-flex-height) #ajax-content-wrap .blurred-wrap,
body:not(.nectar-no-flex-height) .ocm-effect-wrap,
body:not(.nectar-no-flex-height) .ocm-effect-wrap-inner {
	display: flex;
	flex-direction: row;
	flex-grow: 1;
}

.woocommerce-checkout .nectar-global-section.before-footer,
.woocommerce-account .nectar-global-section.before-footer,
.woocommerce-cart .nectar-global-section.before-footer,
body:not(.page):not(.single-post):not(.single-portfolio) .nectar-global-section.before-footer,
.single-portfolio #regular_portfolio [data-nav-pos="in_header"] .nectar-global-section.before-footer {
	padding-top: 0px;
}