/* =========================================================
TaengRak Premium 组件库（薰衣草紫「静奢」）
在 app.css 之后引入；类名统一 tr- 前缀，不影响旧样式
旧变量名（--tr-blush-* / --tr-rose-* / --tr-gold*）保留，值已换成新色
========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Trirong:wght@300;400;500&family=Noto+Sans+Thai:wght@300;400;500;600&family=Cormorant+Garamond:ital,wght@0,500;0,600;1,400;1,500&display=swap");
:root {
/* 旧令牌（变量名不变，值换新） */
--tr-blush-50: #F9F7FC; /* pearl：页面底色 */
--tr-blush-100: #F0ECF8; /* mist：浅紫底 */
--tr-rose-200: #E4DEF0; /* line：分隔线 */
--tr-rose-300: #CEC6E0; /* line-strong：次按钮边框 */
--tr-rose-600: #5B4CA8; /* violet：链接 / 强调文字（白底对比度 ≈ 6.9:1） */
--tr-rose-700: #2E2449; /* aubergine：悬停 / 深色文字 */
--tr-gold: #8E84D0; /* lavender：细线 / 编号 */
--tr-gold-text: #6A5FA8; /* label：英文小标签文字 */
--tr-ink: #2A2140; /* 标题 */
--tr-muted: #5E5773; /* 正文（≈ 6.4:1） */
--tr-line: #E4DEF0;
--tr-surface: #FFFFFF;
/* 新令牌 */
--tr-pearl: #F9F7FC;
--tr-mist: #F0ECF8;
--tr-line-strong: #CEC6E0;
--tr-aubergine: #2E2449;
--tr-aubergine-dark: #221B38;
--tr-footer: #221B38;
--tr-violet: #5B4CA8;
--tr-lavender: #8E84D0;
--tr-label: #6A5FA8;
--tr-pink: #E48FA7; /* 仅用于引号等点缀 */
--tr-on-dark: #CFC6F2;
--tr-on-dark-strong: #E4DEF5;
--tr-on-dark-soft: #B7AEE6;
/* 字体 */
--tr-serif: "Trirong", "Noto Serif Thai", serif;
--tr-sans: "Noto Sans Thai", "Poppins", sans-serif;
--tr-accent: "Cormorant Garamond", Georgia, serif;
/* 静奢风格：无圆角、无阴影 */
--tr-radius: 0px;
--tr-shadow: none;
--tr-shadow-hover: none;
}
/* ---------- 布局 ---------- */
.tr-section { padding: 110px 0; position: relative; }
.tr-section--tint { background: var(--tr-mist); }
.tr-container { max-width: 1280px; margin: 0 auto; padding: 0 24px; box-sizing: border-box; }
.tr-container--narrow { max-width: 880px; }
@media (max-width: 767px) {
.tr-section { padding: 60px 0; }
.tr-container { padding: 0 16px; }
}
/* ---------- 标题组 ---------- */
.tr-section-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.tr-section-head--left { text-align: left; margin-left: 0; }
/* 英文大写小标签：左侧 32px 细线；居中时两侧各一条 */
.tr-eyebrow {
display: inline-flex; align-items: center; gap: 14px; margin: 0 0 16px;
font-family: var(--tr-sans); font-style: normal; font-weight: 400;
font-size: 12px; line-height: 1.5; letter-spacing: .3em; text-transform: uppercase;
color: var(--tr-label);
}
.tr-eyebrow::before,
.tr-eyebrow--center::after,
.tr-page-banner .tr-eyebrow::after,
.tr-section-head:not(.tr-section-head--left) .tr-eyebrow::after {
content: ""; flex: none; width: 32px; height: 1px; background: var(--tr-lavender);
}
/* 字距会在末尾多出一段空白，右侧细线往回收 */
.tr-eyebrow--center::after,
.tr-page-banner .tr-eyebrow::after,
.tr-section-head:not(.tr-section-head--left) .tr-eyebrow::after { margin-left: -.3em; }
.tr-eyebrow--light { color: var(--tr-on-dark); }
.tr-eyebrow--light::before, .tr-eyebrow--light::after { background: var(--tr-on-dark-soft); }
/* 泰文小标签：不加字距、不转大写
注意：全站 ，:lang(th) 会命中所有元素，所以只认元素自身的 lang 属性或 .tr-eyebrow--th */
.tr-eyebrow--th,
.tr-eyebrow[lang|="th"] { letter-spacing: 0; text-transform: none; font-size: 14px; }
.tr-eyebrow--th::after,
.tr-eyebrow[lang|="th"]::after { margin-left: 0 !important; }
@media (max-width: 767px) {
.tr-eyebrow { font-size: 11px; letter-spacing: .26em; gap: 12px; }
.tr-eyebrow::before, .tr-eyebrow::after { width: 28px !important; }
.tr-eyebrow--center::after,
.tr-page-banner .tr-eyebrow::after,
.tr-section-head:not(.tr-section-head--left) .tr-eyebrow::after { margin-left: -.26em; }
.tr-eyebrow--th, .tr-eyebrow[lang|="th"] { font-size: 13px; letter-spacing: 0; }
}
/* app.css 对 h1–h6 使用了 !important 字体，这里同级覆盖 */
.tr-title, h1.tr-title, h2.tr-title, h3.tr-title {
font-family: var(--tr-serif) !important; font-weight: 300 !important;
font-size: clamp(28px, 3.1vw, 44px) !important; line-height: 1.4 !important;
color: var(--tr-ink); margin: 0 0 16px; letter-spacing: 0; text-wrap: balance;
}
.tr-title em { font-style: normal; color: var(--tr-violet); }
.tr-title--xl, h1.tr-title--xl { font-size: clamp(36px, 4.3vw, 62px) !important; line-height: 1.3 !important; }
.tr-lead { font-family: var(--tr-sans); font-size: 17px; line-height: 1.9; color: var(--tr-muted); margin: 0; }
@media (max-width: 767px) {
.tr-section-head { margin-bottom: 32px; }
.tr-title, h1.tr-title, h2.tr-title, h3.tr-title { font-size: clamp(26px, 7.6vw, 30px) !important; line-height: 1.45 !important; }
.tr-title--xl, h1.tr-title--xl { font-size: clamp(32px, 9.8vw, 38px) !important; line-height: 1.38 !important; }
.tr-lead { font-size: 16px; }
}
/* ---------- 按钮：直角；主按钮深紫，次按钮白底细边框 ---------- */
.tr-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 10px;
min-height: 56px; padding: 0 34px; border-radius: 0; border: 1px solid var(--tr-aubergine);
font-family: var(--tr-sans); font-size: 16px; font-weight: 500; line-height: 1.2; letter-spacing: 0;
text-align: center; text-decoration: none; box-shadow: none;
color: #F9F7FC !important; background: var(--tr-aubergine); cursor: pointer;
transition: background-color .2s, border-color .2s, color .2s;
}
.tr-btn:hover { background: var(--tr-aubergine-dark); border-color: var(--tr-aubergine-dark); color: #FFFFFF !important; }
.tr-btn--ghost { background: #FFFFFF; color: var(--tr-aubergine) !important; border-color: var(--tr-line-strong); font-size: 15px; font-weight: 400; padding: 0 28px; }
.tr-btn--ghost:hover { background: #FFFFFF; color: var(--tr-aubergine) !important; border-color: var(--tr-aubergine); }
.tr-btn:focus-visible { outline: 2px solid var(--tr-violet); outline-offset: 3px; }
.tr-actions { display: flex; flex-wrap: wrap; gap: 14px; }
@media (max-width: 575px) {
.tr-actions .tr-btn { flex: 1 1 100%; width: 100%; }
}
/* 文字链接：薰衣草下划线 */
.tr-link { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--tr-sans); font-size: 15px; color: var(--tr-violet); text-decoration: underline; text-decoration-color: var(--tr-lavender); text-decoration-thickness: 1px; text-underline-offset: 6px; }
.tr-link:hover { color: var(--tr-aubergine); }
/* ---------- 事实条（替代无法证实的数字） ---------- */
.tr-facts { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 0; }
.tr-facts li { display: flex; align-items: center; gap: 10px; font-family: var(--tr-sans); font-size: 15px; color: var(--tr-ink); }
.tr-facts li::before {
content: ""; flex: none; width: 16px; height: 16px;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%235B4CA8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E") center/16px no-repeat;
}
/* ---------- 标签 ---------- */
.tr-chip { display: inline-block; font-family: var(--tr-sans); font-size: 13px; line-height: 1; padding: 7px 11px; border-radius: 0; color: var(--tr-aubergine); background: var(--tr-mist); }
.tr-chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 0; }
/* ---------- 网格 ---------- */
.tr-grid { display: grid; gap: 28px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.tr-grid--3 { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.tr-grid--center { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(240px, 280px)); }
@media (max-width: 575px) {
.tr-grid, .tr-grid--3 { grid-template-columns: 1fr; gap: 16px; }
.tr-grid--center { grid-template-columns: 1fr; }
.tr-grid--2up { grid-template-columns: 1fr 1fr; gap: 12px; }
}
/* ---------- 卡片通用：白底 + 1px 细边框，无圆角无阴影；悬停只加深边框 ---------- */
.tr-person, .tr-member, .tr-post {
text-decoration: none; color: inherit; background: var(--tr-surface);
border: 1px solid var(--tr-line); border-radius: 0; box-shadow: none; overflow: hidden; height: 100%;
transition: border-color .2s ease;
}
.tr-person:hover, .tr-member:hover, .tr-post:hover { transform: none; box-shadow: none; border-color: var(--tr-line-strong); color: inherit; }
a.tr-person:focus-visible, a.tr-member:focus-visible, a.tr-post:focus-visible { outline: 2px solid var(--tr-violet); outline-offset: 2px; }
/* ---------- 顾问卡片（照片 3:4） ---------- */
.tr-person { display: block; }
.tr-person__photo { position: relative; aspect-ratio: 3 / 4; background: var(--tr-mist); overflow: hidden; border-radius: 0; }
.tr-person__photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.tr-person__body { padding: 16px 18px 20px; }
.tr-person__name { font-family: var(--tr-serif) !important; font-size: 19px; font-weight: 400; color: var(--tr-ink); margin: 0 0 4px; line-height: 1.4; }
.tr-person__role { font-family: var(--tr-sans); font-size: 14px; color: var(--tr-muted); margin: 0; line-height: 1.5; }
/* ---------- 会员卡片（照片 4:5） ---------- */
.tr-member { display: flex; flex-direction: column; }
.tr-member__photo { position: relative; aspect-ratio: 4 / 5; background: var(--tr-mist); overflow: hidden; border-radius: 0; }
.tr-member__photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-member__badge {
position: absolute; left: 14px; top: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 6px;
min-height: 28px; padding: 0 11px; border-radius: 0; background: rgba(255, 255, 255, .94);
font-family: var(--tr-sans); font-size: 12px; line-height: 1.2; color: var(--tr-violet);
}
.tr-member__body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.tr-member__name { font-family: var(--tr-serif) !important; font-size: 20px; font-weight: 400; color: var(--tr-ink); margin: 0; line-height: 1.4; }
.tr-member__meta { font-family: var(--tr-sans); font-size: 14px; color: var(--tr-muted); margin: 0; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575px) {
.tr-member__badge { left: 8px; top: 8px; min-height: 24px; padding: 0 8px; font-size: 11px; }
.tr-member__body { padding: 12px 12px 16px; }
.tr-member__name { font-size: 16px; }
.tr-member__meta { font-size: 13px; }
}
/* ---------- 隐私肖像兜底：光斑背景 + 拱形框 + 首字母 ----------
结构：อ
*/
.tr-portrait-fallback {
container-type: inline-size;
position: relative; display: flex; align-items: flex-end; justify-content: center;
width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
background:
radial-gradient(38% 30% at 28% 28%, rgba(228, 143, 167, .32) 0%, rgba(228, 143, 167, 0) 100%),
radial-gradient(48% 42% at 74% 64%, rgba(142, 132, 208, .42) 0%, rgba(142, 132, 208, 0) 100%),
linear-gradient(170deg, #F4F0FB 0%, #E2DAF2 100%);
}
/* 放在照片框里时铺满 */
.tr-member__photo > .tr-portrait-fallback,
.tr-person__photo > .tr-portrait-fallback,
.tr-profile__photo > .tr-portrait-fallback { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
.tr-portrait-fallback__arch {
display: flex; align-items: center; justify-content: center;
width: 50%; height: 60%;
border: 1px solid rgba(91, 76, 168, .32); border-bottom: 0;
border-radius: 9999px 9999px 0 0;
background: rgba(255, 255, 255, .4);
}
.tr-portrait-fallback__arch > span {
font-family: var(--tr-serif); font-weight: 300; font-size: 48px; font-size: 22cqw; line-height: 1;
color: var(--tr-violet);
}
/* ---------- 文章卡片 ---------- */
.tr-post { display: flex; flex-direction: column; }
.tr-post__cover { position: relative; aspect-ratio: 16 / 10; background: linear-gradient(150deg, #F1ECF9, #DCD3EF); overflow: hidden; }
.tr-post__cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tr-post__body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; }
.tr-post__date { font-family: var(--tr-sans); font-size: 13px; color: var(--tr-label); }
.tr-post__title { font-family: var(--tr-serif) !important; font-size: 20px; font-weight: 400; line-height: 1.55; color: var(--tr-ink); margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tr-post__excerpt { font-family: var(--tr-sans); font-size: 14px; line-height: 1.8; color: var(--tr-muted); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
@media (max-width: 575px) {
.tr-post__title { font-size: 18px; }
}
/* ---------- 杂志封面兜底（资讯无图时）----------
结构：TaengRak JournalLove
*/
.tr-cover-fallback {
container-type: inline-size;
position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
background: linear-gradient(150deg, #F1ECF9, #DCD3EF);
}
.tr-post__cover > .tr-cover-fallback,
.tr-article__cover > .tr-cover-fallback { position: absolute; inset: 0; width: auto; height: auto; aspect-ratio: auto; }
.tr-cover-fallback::after { content: ""; width: 28px; height: 1px; background: var(--tr-lavender); }
.tr-cover-fallback__kicker {
position: absolute; left: 14px; top: 12px;
font-family: var(--tr-sans); font-size: 10px; line-height: 1.4; letter-spacing: .24em; text-transform: uppercase;
color: var(--tr-label);
}
.tr-cover-fallback__word {
max-width: 90%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
font-family: var(--tr-accent); font-style: italic; font-weight: 500; font-size: 36px; font-size: clamp(28px, 13cqw, 56px); line-height: 1.1;
color: var(--tr-aubergine);
}
/* ---------- 页面横幅：珍珠紫光晕 + 拱形细线（伪元素），不用图片 ---------- */
.tr-page-banner {
position: relative; overflow: hidden; isolation: isolate;
padding: 96px 0 80px; text-align: center;
background:
radial-gradient(50% 70% at 50% 0%, #FFFFFF 0%, rgba(255, 255, 255, 0) 70%),
radial-gradient(38% 60% at 88% 100%, rgba(142, 132, 208, .20) 0%, rgba(142, 132, 208, 0) 100%),
radial-gradient(30% 45% at 10% 85%, rgba(228, 143, 167, .12) 0%, rgba(228, 143, 167, 0) 100%),
linear-gradient(180deg, var(--tr-pearl) 0%, #F2EEF9 100%);
border-bottom: 1px solid var(--tr-line);
}
.tr-page-banner::before {
content: ""; position: absolute; z-index: -1; left: 50%; bottom: 0;
width: min(600px, 84vw); height: calc(100% - 28px);
transform: translateX(-50%);
border: 1px solid rgba(142, 132, 208, .5); border-bottom: 0;
border-radius: 9999px 9999px 0 0;
pointer-events: none;
}
.tr-page-banner .tr-title { margin-bottom: 12px; }
.tr-page-banner .tr-lead { max-width: 640px; margin: 0 auto; }
@media (max-width: 767px) {
.tr-page-banner { padding: 56px 0 48px; }
.tr-page-banner::before { height: calc(100% - 16px); }
}
/* ---------- 四大支柱 ---------- */
.tr-pillars { display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.tr-pillar { background: var(--tr-surface); border: 1px solid var(--tr-line); border-radius: 0; padding: 32px 28px; box-shadow: none; transition: border-color .2s ease; }
.tr-pillar:hover { border-color: var(--tr-line-strong); }
.tr-pillar__icon { width: 48px; height: 48px; border-radius: 0; display: grid; place-items: center; background: transparent; border: 1px solid var(--tr-line); color: var(--tr-violet); margin-bottom: 20px; }
.tr-pillar__icon svg { width: 24px; height: 24px; }
.tr-pillar__en { font-family: var(--tr-accent); font-style: italic; font-size: 18px; color: var(--tr-label); margin: 0 0 4px; }
.tr-pillar__title { font-family: var(--tr-serif) !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--tr-ink); margin: 0 0 10px; }
.tr-pillar__text { font-family: var(--tr-sans); font-size: 15px; line-height: 1.85; color: var(--tr-muted); margin: 0; }
/* ---------- 富文本（后台内容） ---------- */
.tr-prose { font-family: var(--tr-sans); font-size: 17px; line-height: 1.9; color: var(--tr-ink); max-width: 72ch; }
.tr-prose p { margin: 0 0 14px; }
.tr-prose a { color: var(--tr-violet); text-decoration: underline; text-decoration-color: var(--tr-lavender); text-underline-offset: 3px; }
.tr-prose b, .tr-prose strong { font-family: var(--tr-sans) !important; font-weight: 600; }
.tr-prose h2, .tr-prose h3 { font-family: var(--tr-serif) !important; font-weight: 400 !important; color: var(--tr-ink); margin: 28px 0 10px; }
.tr-prose img { max-width: 100%; height: auto; border-radius: 0; }
.tr-prose hr { border: 0; height: 1px; background: var(--tr-line); margin: 32px 0; opacity: 1; }
@media (max-width: 767px) { .tr-prose { font-size: 16px; } }
/* ---------- 引言块 ---------- */
.tr-quote-block { border-left: 1px solid var(--tr-lavender); padding: 4px 0 4px 20px; }
/* ---------- CTA 横条 ---------- */
.tr-cta-band { background: linear-gradient(120deg, #F0ECF8 0%, #E7E0F4 100%); border: 1px solid var(--tr-line); border-radius: 0; box-shadow: none; padding: 56px 56px; display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
.tr-cta-band .tr-title { font-size: clamp(26px, 2.8vw, 40px) !important; margin: 0 0 8px; }
@media (max-width: 767px) { .tr-cta-band { padding: 36px 20px; } }
/* ---------- 工具类 ---------- */
.tr-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 空状态：文字上方加一枚薰衣草线描标记，避免只有一行字显得像出错 */
.tr-empty { text-align: center; color: var(--tr-muted); font-family: var(--tr-sans); padding: 32px 0; }
.tr-empty::before {
content: ""; display: block; width: 52px; height: 52px; margin: 0 auto 14px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* 细分隔线 */
.tr-rule { border: 0; height: 1px; background: var(--tr-line); margin: 0; opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.tr-person, .tr-member, .tr-post, .tr-btn, .tr-pillar { transition: none; }
}
/* ---------- 接口图片加载：完成前显示柔光占位，完成后淡入 ----------
后台部分原图很大（数 MB 的 PNG），浏览器会逐行显示出半张图；layout.js 给未加载完的图片加 .tr-img-wait */
@keyframes tr-img-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.tr-img-loading { position: relative; }
.tr-img-loading::after {
content: ""; position: absolute; inset: 0; pointer-events: none;
background: linear-gradient(100deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 80%);
animation: tr-img-shimmer 1.6s ease-in-out infinite;
}
img.tr-img-wait { opacity: 0; transition: opacity .45s ease, transform .5s; }
img.tr-img-wait.is-loaded { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
.tr-img-loading::after { animation: none; }
img.tr-img-wait { transition: none; }
}