/*
 * Invest LatAm – styles for HTML inside post content (migrated from Ghost).
 * Layout, colours and typography of templates live in Beaver Builder / Themer;
 * this file only covers markup that comes from the editor: headings, links,
 * figures, bookmark cards and embeds inside .il-article.
 */

:root {
	--il-navy: var(--fl-global-navy, #304059);
	--il-ink: var(--fl-global-ink, #09090b);
	--il-body: var(--fl-global-body-text, #3f3f46);
	--il-subtle: var(--fl-global-subtle, #71717a);
	--il-border: var(--fl-global-border, #e4e4e7);
	--il-wash: var(--fl-global-wash, #f4f4f5);
	--il-serif: Spectral, Georgia, serif;
}

/* Themer layouts own the page; Astra still wraps them in #primary with a 4em margin. */
.fl-theme-builder-singular #primary.content-area,
.fl-theme-builder-archive #primary.content-area,
.fl-builder #primary.content-area {
	margin: 0;
}

/* ---------------------------------------------------------------- prose */

.il-article .fl-module-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}
.il-article,
.il-article p,
.il-article li {
	font-family: var(--il-serif);
	font-size: 20px;
	line-height: 1.78;
	color: var(--il-body);
}
.il-article p,
.il-article ul,
.il-article ol {
	margin: 0 0 1.4em;
}
.il-article h2,
.il-article h3,
.il-article h4 {
	font-family: var(--il-serif);
	font-weight: 700;
	color: var(--il-ink);
	letter-spacing: 0;
}
.il-article h2 { font-size: 33px; line-height: 1.2; margin: 1.8em 0 .6em; }
.il-article h3 { font-size: 27px; line-height: 1.3; margin: 1.6em 0 .5em; }
.il-article h4 { font-size: 22px; line-height: 1.35; margin: 1.4em 0 .5em; }
.il-article strong { color: var(--il-ink); }
.il-article a {
	color: var(--il-navy);
	font-weight: 500;
	text-decoration: underline;
	text-decoration-thickness: 1px;
}
.il-article hr {
	border: 0;
	border-top: 1px solid var(--il-border);
	margin: 2.4em 0;
}
.il-article blockquote {
	border-left: 3px solid var(--il-navy);
	margin: 1.6em 0;
	padding: 0 0 0 1em;
	font-style: italic;
}

/* ---------------------------------------------------------------- figures */

.il-article .il-figure {
	margin: 2em 0;
}
.il-article .il-figure img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}
.il-article .il-figure figcaption {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: var(--il-subtle);
	text-align: center;
	margin-top: .75em;
}

/* ---------------------------------------------------------------- embeds */

.il-article iframe[src*="youtube"],
.il-article .wp-block-embed iframe {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 8px;
	margin: 2em 0;
}

/* ---------------------------------------------------------------- bookmark card */

.il-article .il-bookmark {
	margin: 2em 0;
}
.il-article .il-bookmark__link {
	display: flex;
	min-height: 148px;
	border: 1px solid var(--il-border);
	border-radius: 12px;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	font-weight: 400;
	transition: border-color .2s ease;
}
.il-article .il-bookmark__link:hover {
	border-color: var(--il-subtle);
}
.il-article .il-bookmark__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
	padding: 20px;
	font-family: Arial, Helvetica, sans-serif;
}
.il-article .il-bookmark__title {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--il-ink);
}
.il-article .il-bookmark__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 14px;
	line-height: 1.5;
	color: var(--il-subtle);
}
.il-article .il-bookmark__meta {
	margin-top: auto;
	font-size: 13px;
	font-weight: 500;
	color: var(--il-ink);
}
.il-article .il-bookmark__thumb {
	flex: 0 0 33%;
	max-width: 240px;
	background: var(--il-wash);
}
.il-article .il-bookmark__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

@media (max-width: 640px) {
	.il-article,
	.il-article p,
	.il-article li { font-size: 18px; }
	.il-article h2 { font-size: 27px; }
	.il-article h3 { font-size: 23px; }
	.il-article .il-bookmark__link { flex-direction: column-reverse; }
	.il-article .il-bookmark__thumb { flex-basis: auto; max-width: none; height: 160px; }
}

/* ---------------------------------------------------------------- post cards (Posts module, class il-cards) */

/* Ghost card rhythm: 20px all round, image and text share the same inset. */
.il-cards .fl-post-grid-post {
	padding: 20px;
}
.il-cards .fl-post-grid-text {
	padding: 0;
}
.il-cards .fl-post-grid-image {
	margin-bottom: 20px;
}
.il-cards .fl-post-grid-title {
	margin-bottom: 8px;
}
.il-cards .fl-post-grid-image img,
.il-cards .fl-post-image img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border-radius: 8px;
}
.il-cards .fl-post-grid-post,
.il-cards .fl-post-column > * {
	transition: transform .3s ease-out, box-shadow .3s ease-out;
}
.il-cards .fl-post-grid-post:hover {
	transform: translateY(-4px);
	box-shadow: 0 20px 25px -5px rgba(228, 228, 231, .5), 0 8px 10px -6px rgba(228, 228, 231, .5);
}
.il-cards .fl-post-grid-content p,
.il-cards .fl-post-excerpt p {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}
@media (prefers-reduced-motion: reduce) {
	.il-cards .fl-post-grid-post:hover { transform: none; }
}

/* ---------------------------------------------------------------- homepage category tabs (menu module, class il-tabs) */

.il-tabs .menu {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.il-tabs .menu::-webkit-scrollbar {
	display: none;
}
.il-tabs .menu > li {
	flex: 0 0 auto;
	float: none;
}
.il-tabs .menu a {
	text-decoration: none;
	white-space: nowrap;
}
.il-tabs .menu > li:first-child > a {
	padding-left: 0;
}
.il-tabs .menu .current-menu-item > a {
	color: var(--il-ink);
	font-weight: 700;
}
.il-cards a {
	text-decoration: none;
}

/* ---------------------------------------------------------------- lead-magnet landing pages */

.il-lead-list ul {
	margin: 0 0 0 1.1em;
	padding: 0;
}
.il-lead-list li {
	margin-bottom: .55em;
	padding-left: .2em;
}
.il-lead-list li::marker {
	color: rgba(255, 255, 255, .55);
	font-size: .8em;
}