/* [amulet_about_addition] shortcode styles.
 * Tokens match the live About Us page's computed styles (read via
 * getComputedStyle on production, not guessed): H2 = Noto Serif 800
 * uppercase #110729, body = Manrope, page bg #FAFBFC, gold accents
 * #C9A573 / #B86B0B (same family as .ala-accent in latest-articles.css),
 * dark block #231508 / cream #FFFCF2 (same pairing as the live founder
 * quote block on /about-us/).
 */
.aa-wrap{
	--aa-ink:#110729;
	--aa-text:#120A03;
	--aa-text-soft:#6b5b4a;
	--aa-gold:#C9A573;
	--aa-gold-strong:#B86B0B;
	--aa-cream:#FFFCF2;
	--aa-line:#e9ddc9;
	--aa-dark:#231508;
	font-family:"Manrope",sans-serif;
	color:var(--aa-text);
}
html[lang="th"] .aa-wrap{font-family:"IBM Plex Sans Thai",sans-serif;}

.aa-section{margin:56px 0;}
.aa-h2{
	font-family:"Noto Serif",serif;
	font-weight:800;
	font-size:30px;
	margin:0 0 18px;
	color:var(--aa-ink);
	text-transform:uppercase;
}
.aa-eyebrow{
	display:inline-block;
	font-family:"Manrope",sans-serif;
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
	color:#fff;
	background:var(--aa-gold-strong);
	padding:4px 10px;
	border-radius:4px;
	margin-bottom:12px;
}
.aa-lead{font-size:16px;color:var(--aa-text-soft);max-width:720px;margin:0 0 24px;}

/* Founder */
.aa-founder{
	display:flex;
	gap:32px;
	align-items:flex-start;
	background:#fff;
	border:1px solid var(--aa-line);
	border-radius:14px;
	padding:32px;
}
.aa-founder img{
	width:120px;height:120px;border-radius:12px;object-fit:cover;flex:none;
}
.aa-founder .aa-name{font-family:"Noto Serif",serif;font-weight:800;font-size:19px;margin:0 0 2px;color:var(--aa-ink);}
.aa-founder .aa-role{font-family:"Manrope",sans-serif;font-size:12.5px;color:var(--aa-gold-strong);text-transform:uppercase;letter-spacing:.05em;margin:0 0 14px;font-weight:700;}
.aa-founder p{margin:0 0 12px;font-size:15px;color:var(--aa-text);}
.aa-founder p:last-child{margin-bottom:0;}
@media (max-width:640px){.aa-founder{flex-direction:column;}}

/* Journeys grid */
.aa-journey-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	grid-auto-rows:190px;
	gap:16px;
}
.aa-journey-card{
	position:relative;
	display:block;
	border-radius:14px;
	overflow:hidden;
	text-decoration:none;
	color:#fff;
	background:var(--aa-gold);
}
.aa-journey-card img{
	position:absolute;inset:0;
	width:100%;height:100%;
	object-fit:cover;
	transition:transform .4s ease;
}
.aa-journey-card:hover img{transform:scale(1.07);}
.aa-journey-card:before{
	content:"";
	position:absolute;inset:0;
	background:linear-gradient(180deg,rgba(35,21,8,0) 35%,rgba(35,21,8,.9) 100%);
	z-index:1;
}
.aa-jc-tag{
	position:absolute;top:12px;left:12px;z-index:2;
	font-family:"Manrope",sans-serif;
	font-size:10.5px;font-weight:700;
	letter-spacing:.05em;text-transform:uppercase;
	background:rgba(255,255,255,.18);
	backdrop-filter:blur(2px);
	color:#fff;
	padding:4px 9px;
	border-radius:4px;
}
.aa-jc-content{
	position:absolute;left:0;right:0;bottom:0;z-index:2;
	padding:16px;
}
.aa-jc-date{
	font-family:"Manrope",sans-serif;
	font-size:11px;font-weight:700;
	letter-spacing:.04em;text-transform:uppercase;
	color:var(--aa-gold);
	display:block;margin:0 0 5px;
}
.aa-jc-title{
	font-family:"Manrope",sans-serif;
	font-size:14.5px;font-weight:700;line-height:1.32;
	margin:0;color:#fff;
}
.aa-jc-excerpt{
	font-size:12.5px;color:var(--aa-cream);
	margin:8px 0 0;
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.aa-jc-play{
	position:absolute;top:50%;left:50%;z-index:2;
	width:56px;height:56px;
	transform:translate(-50%,-50%);
	border-radius:50%;
	background:rgba(35,21,8,.55);
	backdrop-filter:blur(1px);
	transition:transform .25s ease,background .25s ease;
}
.aa-jc-play:before{
	content:"";
	position:absolute;top:50%;left:56%;
	transform:translate(-50%,-50%);
	border-style:solid;
	border-width:9px 0 9px 15px;
	border-color:transparent transparent transparent #fff;
}
.aa-journey-card.aa-has-video:hover .aa-jc-play{
	background:var(--aa-gold-strong);
	transform:translate(-50%,-50%) scale(1.08);
}
.aa-journey-card.aa-featured .aa-jc-play{width:74px;height:74px;}
.aa-journey-card.aa-featured .aa-jc-play:before{border-width:12px 0 12px 20px;}

.aa-journey-card.aa-featured{grid-column:span 2;grid-row:span 2;}
.aa-journey-card.aa-featured .aa-jc-date{font-size:12px;}
.aa-journey-card.aa-featured .aa-jc-title{font-family:"Noto Serif",serif;font-size:22px;font-weight:800;text-transform:none;}
.aa-journey-card.aa-featured .aa-jc-tag{font-size:11px;padding:5px 11px;}
@media (max-width:760px){
	.aa-journey-grid{grid-template-columns:1fr 1fr;grid-auto-rows:170px;}
	.aa-journey-card.aa-featured{grid-column:span 2;grid-row:span 2;}
}
@media (max-width:520px){
	.aa-journey-grid{grid-template-columns:1fr;grid-auto-rows:220px;}
	.aa-journey-card.aa-featured{grid-column:span 1;grid-row:span 1;}
	.aa-journey-card.aa-featured .aa-jc-title{font-size:18px;}
}

.aa-blog-cta{
	text-align:center;
	margin-top:28px;
	font-family:"Manrope",sans-serif;
	font-size:14px;
}
.aa-blog-cta a{color:var(--aa-gold-strong);font-weight:700;text-decoration:none;}

/* Standards - reuses the existing .tp-card markup from [trust_pillar],
 * just wrapped in this shortcode's own grid so About Us gets the same
 * cards already used on the homepage without duplicating their CSS. */
.aa-standards-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}
@media (max-width:800px){.aa-standards-grid{grid-template-columns:repeat(2,1fr);}}
/* Matches the homepage's Elementor row for this same [trust_pillar] content
 * (flex_direction_tablet:"column" + width_mobile:100%, no mobile override,
 * so it cascades to one full-width card per row below Elementor's 768px
 * mobile breakpoint) - keep this grid in sync with that on mobile. */
@media (max-width:640px){.aa-standards-grid{grid-template-columns:1fr;}}

/* [trust_pillar] only gets its card background/shadow/hover on the homepage
 * via trust-pillar.css's ".e-con.e-child:has(.tp-card)" rule, which targets
 * the Elementor container it's normally wrapped in. Here the shortcode is
 * echoed straight into this grid with no Elementor wrapper, so .tp-card is
 * a direct child - reapply the same treatment scoped to that instead. */
.aa-standards-grid .tp-card{
	background:#fff;
	border-radius:14px;
	padding:28px 22px;
	box-shadow:0 1px 2px rgba(15,23,42,.04),0 10px 24px rgba(15,23,42,.06);
	transition:transform .2s ease,box-shadow .2s ease;
}
.aa-standards-grid .tp-card:hover{
	transform:translateY(-4px);
	box-shadow:0 12px 28px rgba(35,21,8,.14);
}

/* Promise */
.aa-promise{
	background:var(--aa-dark);
	border-radius:14px;
	padding:36px;
}
.aa-promise-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:12px;}
.aa-promise-list li{display:flex;gap:10px;font-size:15px;align-items:flex-start;color:var(--aa-cream);}
.aa-promise-list li:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--aa-gold);margin-top:8px;flex:none;}
.aa-cta-btn{
	display:inline-block;
	background:var(--aa-gold-strong);
	color:#fff;
	font-family:"Manrope",sans-serif;
	font-weight:700;
	font-size:14px;
	padding:13px 26px;
	border-radius:8px;
	text-decoration:none;
}