/*
 * Imob Engine — Central de Políticas (page-politicas.php).
 * Hero próprio + grade de cards com elevação, borda animada e brilho
 * transversal. Composição adaptada da Central de Políticas do Imob Pro
 * Theme; paleta e tokens são inteiramente do Imob Engine (dourado, nunca
 * laranja), funcionando em modo claro, escuro e reduzido de movimento.
 */

/* ==========================================================================
   HERO
   ========================================================================== */
.ie-pol-hero {
	position: relative;
	margin-bottom: 2.6rem;
	padding: 4.2rem 0 5.2rem;
	color: #fdfaf2;
	text-align: center;
	background-image:
		linear-gradient(rgba(12, 10, 6, .82), rgba(12, 10, 6, .82)),
		var(--ie-pol-hero-image, none),
		linear-gradient(135deg, #171410, #2c2415 55%, #1a1710);
	background-size: cover;
	background-position: center;
	overflow: hidden;
}
.ie-pol-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--ie-brand) 22%, transparent), transparent 55%);
	pointer-events: none;
}
.ie-pol-hero::after {
	content: "";
	position: absolute;
	left: 0; bottom: -1px;
	width: 100%; height: 52px;
	background: var(--ie-bg);
	transform: skewY(-1.4deg);
	transform-origin: bottom left;
}
.ie-pol-hero__inner { position: relative; z-index: 1; }
.ie-pol-hero__title { margin: 0 0 .6rem; color: #fff; font-size: clamp(1.7rem, 4vw, 2.4rem); font-weight: 700; letter-spacing: -.01em; }
.ie-pol-hero__sub { max-width: 640px; margin: 0 auto; color: rgba(255,255,255,.86); font-size: 1rem; line-height: 1.6; }

@media (min-width: 1025px) {
	.ie-pol-hero { background-attachment: fixed; }
}

/* ==========================================================================
   GRID / CARDS
   ========================================================================== */
.ie-pol-main { padding-bottom: 4rem; }

.ie-pol-grid {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 1.6rem;
	padding-top: .5rem;
}
@media (min-width: 620px) {
	.ie-pol-grid--cols-2, .ie-pol-grid--cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 960px) {
	.ie-pol-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ie-pol-card {
	position: relative;
	display: flex;
	padding: 2px;
	border-radius: var(--ie-radius-lg);
	background: var(--ie-border);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: transform var(--ie-transition), box-shadow var(--ie-transition);
}

/* Borda animada (snake-border), revelada no hover — só quando os efeitos
   estão ativos (aba Estilos → Políticas). */
.ie-pol-grid:not(.ie-pol-grid--flat) .ie-pol-card::before {
	content: "";
	position: absolute;
	top: -50%; left: -50%;
	width: 200%; height: 200%;
	background: conic-gradient(transparent, transparent, transparent, var(--ie-brand));
	opacity: 0;
	transition: opacity var(--ie-transition);
	animation: ie-pol-spin 3.2s linear infinite;
}

.ie-pol-card__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 1.6rem 1.4rem;
	border-radius: calc(var(--ie-radius-lg) - 2px);
	background: var(--ie-surface);
	box-shadow: var(--ie-shadow-sm);
	overflow: hidden;
	transition: box-shadow var(--ie-transition);
}

/* Brilho transversal no hover — só com efeitos ativos. */
.ie-pol-grid:not(.ie-pol-grid--flat) .ie-pol-card__inner::after {
	content: "";
	position: absolute;
	top: 0; left: -120%;
	width: 60%; height: 100%;
	background: linear-gradient(to right, transparent, color-mix(in srgb, #fff 45%, transparent), transparent);
	transform: skewX(-20deg);
	pointer-events: none;
	z-index: 2;
}

.ie-pol-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	margin-bottom: 1rem;
	border-radius: var(--ie-radius);
	background: color-mix(in srgb, var(--ie-brand-fg) 14%, transparent);
	color: var(--ie-brand-fg);
	transition: transform var(--ie-transition), background var(--ie-transition), color var(--ie-transition);
}

.ie-pol-card__title { margin: 0 0 .5rem; color: var(--ie-text); font-size: 1.15rem; font-weight: 700; line-height: 1.3; transition: color var(--ie-transition-fast); }
.ie-pol-card__desc { flex-grow: 1; margin: 0 0 1rem; color: var(--ie-text-muted); font-size: .92rem; line-height: 1.55; }
.ie-pol-card__link {
	display: inline-flex; align-items: center; gap: .4rem;
	margin-top: auto;
	color: var(--ie-brand-fg);
	font-size: .78rem; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}
.ie-pol-card__link .ie-icon { transition: transform var(--ie-transition-fast); }

.ie-pol-card:hover,
.ie-pol-card:focus-visible {
	transform: translateY(-6px);
	box-shadow: var(--ie-shadow-lg);
	outline: none;
}
.ie-pol-card:focus-visible { box-shadow: var(--ie-shadow-lg), var(--ie-focus-ring); }
.ie-pol-card:hover::before, .ie-pol-card:focus-visible::before { opacity: 1; }
.ie-pol-card:hover .ie-pol-card__inner::after,
.ie-pol-card:focus-visible .ie-pol-card__inner::after { left: 140%; transition: left .8s ease-in-out; }
.ie-pol-card:hover .ie-pol-card__icon,
.ie-pol-card:focus-visible .ie-pol-card__icon { background: var(--ie-brand-fill); color: var(--ie-brand-ink); transform: scale(1.06) rotate(3deg); }
.ie-pol-card:hover .ie-pol-card__title,
.ie-pol-card:focus-visible .ie-pol-card__title { color: var(--ie-brand-fg); }
.ie-pol-card:hover .ie-pol-card__link .ie-icon,
.ie-pol-card:focus-visible .ie-pol-card__link .ie-icon { transform: translateX(4px); }

@keyframes ie-pol-spin { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: reduce) {
	.ie-pol-card, .ie-pol-card__inner, .ie-pol-card__icon, .ie-pol-card__link .ie-icon { transition: none; }
	.ie-pol-card::before { animation: none; }
	.ie-pol-hero { background-attachment: scroll; }
}