/*
 * AEO Editorial Cards — style.css
 * CSS do front-end. Carregado no site e no editor.
 * Independente de tema. Sem !important. Sem inline styles.
 * ============================================================ */

/* ── Classe base universal ────────────────────────────────── */
/* Gancho para CSS futuro. Todas as variantes carregam essa classe. */
.aeo-card {
	--aeo-warm-bg:      #f7f1e8;
	--aeo-warm-border:  #d9c9ae;
	--aeo-warm-accent:  #8b6b3f;
	--aeo-warm-label:   #7a5c2e;
	--aeo-green-bg:     #eef6f1;
	--aeo-green-border: #b8d4c4;
	--aeo-green-accent: #2d6a4f;
	--aeo-text-dark:    #1c1c1c;
	--aeo-text-body:    #2d2d2d;
	--aeo-text-muted:   #4a4a4a;
	--aeo-radius:       16px;
	--aeo-shadow:       0 4px 18px rgba(0, 0, 0, 0.07);
	box-sizing:  border-box;
	max-width:   100%;  /* segurança em containers flex/grid de temas */
}

/* ── Box — base para direct-answer, summary, concept ──────── */
.aeo-box {
	background:    var(--aeo-warm-bg);
	border:        1px solid var(--aeo-warm-border);
	border-radius: var(--aeo-radius);
	padding:       28px 26px;
	margin:        2.25rem 0;
}

.aeo-box-label {
	font-size:      0.68rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:          var(--aeo-warm-label);
	font-weight:    700;
	margin:         0 0 8px 0;
	line-height:    1.4;
}

/* h2–h6 — !important necessário porque o Dynamik usa reset global com
   !important em font-family e font-size sobre h3, h4, h5, h6, p juntos.
   Sem ele, o tema vence independente de especificidade. O !important aqui
   fica contido dentro do seletor específico do plugin — não polui nada. */
.aeo-card.aeo-box h2.aeo-box-heading,
.aeo-card.aeo-box h3.aeo-box-heading,
.aeo-card.aeo-box h4.aeo-box-heading,
.aeo-card.aeo-box h5.aeo-box-heading,
.aeo-card.aeo-box h6.aeo-box-heading {
	font-size:      20px !important;
	font-weight:    700 !important;
	line-height:    1.3 !important;
	margin:         0 0 12px 0 !important;
	color:          var(--aeo-text-dark) !important;
	border:         none !important;
	padding:        0 !important;
	background:     none !important;
	box-shadow:     none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family:    inherit !important;
}

.aeo-box-main {
	margin:      0 0 0 0;
	color:       var(--aeo-text-body);
	line-height: 1.7;
	font-size:   1rem;
}

.aeo-box-secondary {
	margin:      10px 0 0 0;
	color:       var(--aeo-text-muted);
	line-height: 1.65;
	font-size:   0.94rem;
}

.aeo-box-final {
	margin:      16px 0 0 0;
	padding-top: 14px;
	border-top:  1px solid var(--aeo-warm-border);
	font-weight: 700;
	color:       var(--aeo-text-dark);
	line-height: 1.5;
	font-size:   0.97rem;
}

/* Remove margem do último filho */
.aeo-box > *:last-child {
	margin-bottom: 0;
}

/* ── Highlight — Destaque / Virada cognitiva ──────────────── */
.aeo-highlight {
	background:    #ffffff;
	border-left:   5px solid var(--aeo-warm-accent);
	border-radius: 0 10px 10px 0;
	padding:       22px 24px;
	margin:        2.25rem 0;
	box-shadow:    0 6px 22px rgba(0, 0, 0, 0.08);
}

.aeo-highlight p {
	margin:      0;
	font-size:   1.18rem;
	line-height: 1.55;
	color:       var(--aeo-text-dark);
	font-weight: 600;
}

/* ── Soft — CTA discreto ──────────────────────────────────── */
.aeo-soft {
	background:    var(--aeo-green-bg);
	border:        1px solid var(--aeo-green-border);
	border-radius: var(--aeo-radius);
	padding:       24px 26px;
	margin:        2.25rem 0;
}

.aeo-soft .aeo-cta-text {
	margin:      0 0 12px 0;
	color:       var(--aeo-text-body);
	line-height: 1.7;
}

.aeo-soft > *:last-child {
	margin-bottom: 0;
}

.aeo-soft p:last-child {
	margin-bottom: 0;
}

.aeo-cta-link {
	display:              inline-block;
	color:                var(--aeo-green-accent);
	font-weight:          600;
	text-decoration:      underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1.5px;
	transition:           color 0.15s ease;
}

.aeo-cta-link:hover,
.aeo-cta-link:focus {
	color:           #1a4a38;
	text-decoration: underline;
}

/* ── Responsividade ───────────────────────────────────────── */
@media ( max-width: 640px ) {
	.aeo-box,
	.aeo-soft {
		padding:       20px 18px;
		margin:        1.75rem 0;
		border-radius: 12px;
	}

	.aeo-highlight {
		padding:       18px 18px;
		margin:        1.75rem 0;
		border-radius: 0 8px 8px 0;
	}

	.aeo-card.aeo-box h2.aeo-box-heading,
	.aeo-card.aeo-box h3.aeo-box-heading,
	.aeo-card.aeo-box h4.aeo-box-heading,
	.aeo-card.aeo-box h5.aeo-box-heading,
	.aeo-card.aeo-box h6.aeo-box-heading {
		font-size: 18px !important;
	}

	.aeo-highlight p {
		font-size: 1.06rem;
	}
}