/* [trust_pillar] shortcode styles.
 * Extracted from Fluent Snippets 15-trust-pillar-shortcode-authenticity.php's
 * inline <style> block (verbatim).
 */
/* Card shadow lives on the Elementor container wrapping the shortcode
 * (background/radius/padding are already set per-instance in Elementor),
 * targeted with :has() so every language/page copy gets it without
 * touching Elementor's stored JSON. Scoped to .e-child (the per-card
 * container) only - ".e-con:has()" alone also matches the row/flexbox
 * ancestors above it, stacking extra white boxes + shadows on top of
 * each other and producing a mismatched background behind the cards. */
.e-con.e-child:has(.tp-card){
	background:#fff!important;
	box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px rgba(15,23,42,.06);
	justify-content:flex-start!important;
	transition:transform .2s ease,box-shadow .2s ease;
}
.e-con.e-child:has(.tp-card):hover{
	transform:translateY(-4px);
	box-shadow:0 12px 28px rgba(35,21,8,.14);
}

/* Elementor's row sets align-items:flex-end on the 4-card flexbox, so
 * shorter cards bottom-align instead of stretching to equal height -
 * that's the "uneven / doesn't align" card heights. */
.e-flexbox-base:has(.tp-card){align-items:stretch!important;}

/* Each card also carries its own inline align-self:center (Elementor's
 * per-item "Align Self" setting), which overrides the row's
 * align-items:stretch above - align-self on a flex item always wins over
 * the container's align-items, so every card was still sizing to its own
 * content instead of matching the tallest one. Force it back to stretch. */
.e-con.e-child:has(.tp-card){align-self:stretch!important;}

.tp-card{display:flex;flex-direction:column;align-items:center;text-align:center;padding:6px;width:100%;}
.tp-card .tp-icon{width:56px;height:56px;flex:none;display:flex;align-items:center;justify-content:center;background:#fce9d8;border-radius:14px;color:#e8792b;margin-bottom:18px;}
.tp-card .tp-icon svg{width:26px;height:26px;display:block;}
.tp-card .tp-title{font-weight:700;font-size:19px;line-height:1.3;color:#1e2939;margin:0 0 12px;}
.tp-card .tp-text{font-size:14.5px;line-height:1.65;color:#64748b;margin:0;}

/* This shortcode is inserted via an Elementor "Shortcode" widget, whose own
 * typography defaults win over inherited body font - so .tp-title/.tp-text
 * were rendering in Elementor's default font instead of the theme's. Force
 * IBM Plex Sans Thai on Thai-language pages only (see blog-archive-redesign.css
 * / latest-articles.css for the same html[lang="th"] pattern). */
html[lang="th"] .tp-card .tp-title,
html[lang="th"] .tp-card .tp-text{font-family:"IBM Plex Sans Thai",sans-serif;}