/* boyu.tw — 版面樣式。數值一律用 theme.json 產生的 CSS 變數（與 tim.blog 同一套 token）。 */
:root {
	--bx-primary: var(--wp--preset--color--primary);
	--bx-secondary: var(--wp--preset--color--secondary);
	--bx-accent: var(--wp--preset--color--accent);
	--bx-fg1: var(--wp--preset--color--foreground-1);
	--bx-fg3: var(--wp--preset--color--foreground-3);
	--bx-fg4: var(--wp--preset--color--foreground-4);
	--bx-bg1: var(--wp--preset--color--background-1);
	--bx-bg2: var(--wp--preset--color--background-2);
	--bx-bg3: var(--wp--preset--color--background-3);
	--bx-bg4: var(--wp--preset--color--background-4);
	--bx-wide: var(--wp--style--global--wide-size, 1200px);
	--bx-gutter: max(16px, var(--wp--preset--spacing--medium));
	--bx-r: 10px;
}
body { background: var(--bx-bg1); color: var(--bx-fg1); }
.bx-home { margin: 0; }
.bx-home h2 { font-size: var(--wp--preset--font-size--x-large); margin: 0 0 var(--wp--preset--spacing--medium); }
.bx-wrap { max-width: var(--bx-wide); margin: 0 auto; padding: 0 var(--bx-gutter); }
.bx-bg-2 { background: var(--bx-bg2); }
.bx-bg-3 { background: var(--bx-bg3); }
.bx-blue { color: var(--bx-primary); }
.bx-muted { color: var(--bx-fg4); }
.bx-lead { color: var(--bx-fg3); font-size: var(--wp--preset--font-size--regular); }
.bx-kicker { color: var(--bx-secondary); font-weight: 600; letter-spacing: .02em; margin: 0 0 var(--wp--preset--spacing--small); }

/* 佔位圖：真素材到位前顯示尺寸 */
.bx-ph { position: relative; background: linear-gradient(135deg, #1c2f3b, #40505a); border-radius: var(--bx-r); }
.bx-ph::after { content: attr(data-ph); position: absolute; inset: auto 12px 10px auto; font: 500 12px/1.2 var(--wp--preset--font-family--base); color: rgba(255,255,255,.7); background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 6px; }
.bx-ph--logo { display: inline-block; width: 140px; height: 40px; background: var(--bx-bg4); }
.bx-ph--logo::after { color: var(--bx-fg4); background: none; inset: 50% auto auto 50%; transform: translate(-50%,-50%); }
.bx-ph--card { aspect-ratio: 5/4; }
.bx-ph--video { aspect-ratio: 16/9; }
.bx-ph--portrait { aspect-ratio: 1080/1525; }
.bx-ph--book { aspect-ratio: 500/755; box-shadow: 0 12px 30px rgba(0,21,35,.18); }
.bx-ph--phone { width: 70%; aspect-ratio: 794/940; margin: 0 auto; border-radius: 36px; }

/* 按鈕 */
.bx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4em; padding: .625em var(--wp--preset--spacing--small); border-radius: 9999px; background: var(--bx-primary); color: var(--bx-bg1) !important; font-weight: 500; text-decoration: none !important; border: 0; cursor: pointer; transition: all .2s ease-in-out; font-size: var(--wp--preset--font-size--x-small); }
.bx-btn:hover { background: var(--bx-fg1); }
.bx-btn--light { background: var(--bx-secondary); color: var(--bx-fg1) !important; }
.bx-btn--accent { background: var(--bx-accent); color: var(--bx-fg1) !important; font-weight: 600; }
.bx-btn--accent:hover { background: var(--bx-fg1); color: var(--bx-bg1) !important; }
.bx-btn--sm { font-size: 13px; padding: .55em 1.2em; text-transform: uppercase; font-weight: 600; letter-spacing: .02em; }

/* Header：疊在 hero 上，透明 */
.bx-header { position: absolute; top: 0; left: 0; right: 0; z-index: 20; padding: 0 var(--bx-gutter); }
body:not(.home) .bx-header { position: relative; background: var(--bx-fg1); }
.bx-header__bar { max-width: var(--bx-wide); margin: 0 auto; height: 88px; display: flex; align-items: center; gap: var(--wp--preset--spacing--medium); }
.bx-logo { color: #fff !important; font-weight: 700; letter-spacing: .14em; text-decoration: none !important; font-size: 18px; }
.bx-logo--dark { color: var(--bx-fg1) !important; }
.bx-nav { display: flex; gap: 28px; margin-left: auto; margin-right: auto; }
.bx-nav a { color: #fff; text-decoration: none; font-size: 17px; font-weight: 500; }
.bx-nav a:hover { color: var(--bx-secondary); }

/* ① Hero */
.bx-hero { position: relative; min-height: min(1040px, 72vw); display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--bx-fg1); }
.bx-hero__bg { position: absolute; inset: 0; border-radius: 0; background-size: cover; background-position: left center; }
.bx-hero__bg::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,21,35,0) 30%, rgba(0,21,35,.75) 70%); }
.bx-hero__inner { position: relative; width: 100%; max-width: var(--bx-wide); margin: 0 auto; padding: 140px var(--bx-gutter) 80px; display: flex; justify-content: flex-end; }
.bx-hero__copy { width: min(100%, 590px); }
.bx-hero__title { color: #fff; font-size: clamp(2rem, 4.25vw, 3.5rem); line-height: 1.1; letter-spacing: -.02em; margin: 0 0 var(--wp--preset--spacing--medium); }
.bx-hero__lead { color: rgba(255,255,255,.85); font-size: var(--wp--preset--font-size--regular); margin: 0 0 var(--wp--preset--spacing--large); }
.bx-optin { display: flex; background: #fff; border-radius: 9999px; padding: 6px; max-width: 590px; }
.bx-optin input { flex: 1; border: 0; background: transparent; padding: 0 18px; font: inherit; font-size: 16px; color: var(--bx-fg1); min-width: 0; outline: none; }
.bx-optin .bx-btn { font-size: 17px; padding: .8em 1.4em; }

/* ② Logos */
.bx-logos { padding: var(--wp--preset--spacing--large) 0; border-bottom: 1px solid var(--bx-bg4); }
.bx-logos__label { text-align: center; color: var(--bx-fg4); font-size: 14px; letter-spacing: .08em; margin: 0 0 var(--wp--preset--spacing--small); }
.bx-logos__row { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--wp--preset--spacing--large); }

/* ③ Show */
.bx-show { padding: var(--wp--preset--spacing--giant) 0; }
.bx-split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--wp--preset--spacing--x-large); align-items: center; }
.bx-show__media { position: relative; }
.bx-show__circle { position: absolute; inset: 10% 0; aspect-ratio: 1; margin: auto; width: 85%; border-radius: 50%; background: var(--bx-bg4); }
.bx-show__media .bx-ph--phone { position: relative; }
.bx-show__copy h2 { font-size: var(--wp--preset--font-size--x-large); }
.bx-show__copy em { color: var(--bx-primary); }
.bx-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: var(--wp--preset--spacing--medium); }
.bx-pill { display: inline-flex; flex-direction: column; background: #fff; border-radius: 9999px; padding: 8px 22px; text-decoration: none !important; color: var(--bx-fg1); font-weight: 600; font-size: 15px; line-height: 1.2; box-shadow: 0 1px 0 var(--bx-bg4); }
.bx-pill small { font-weight: 500; font-size: 11px; color: var(--bx-fg3); }
.bx-more { color: var(--bx-fg3); font-weight: 600; text-decoration: none; }

/* ④⑥ 橫向卡片列 */
.bx-featured { padding: 0 0 var(--wp--preset--spacing--giant); }
.bx-h2-stack { line-height: 1.1; }
.bx-rail { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, calc((min(100vw, 1440px) - 2 * var(--bx-gutter)) / 4.6)); gap: 8px; overflow-x: auto; padding: 0 var(--bx-gutter) 8px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
@media (min-width: 1300px) { .bx-rail { padding-left: calc((100vw - var(--bx-wide)) / 2 + var(--bx-gutter) - 16px); } }
.bx-card { scroll-snap-align: start; background: #fff; border-radius: var(--bx-r); padding: 8px 8px var(--wp--preset--spacing--small); display: flex; flex-direction: column; gap: var(--wp--preset--spacing--small); }
.bx-card .bx-ph { border-radius: 8px; }
.bx-card h4 { margin: 0 12px; font-size: var(--wp--preset--font-size--medium); line-height: 1.25; }
.bx-card p { margin: 0 12px; font-size: 15px; color: var(--bx-fg3); flex: 1; }
.bx-play { margin: 0 12px; color: var(--bx-primary); text-decoration: none; font-size: 16px; font-weight: 500; }
.bx-card:hover .bx-play, .bx-tile:hover .bx-play { color: var(--bx-secondary); }

/* ⑤ Tools */
.bx-tools { padding: var(--wp--preset--spacing--giant) 0; }
.bx-row-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: var(--wp--preset--spacing--large); }
.bx-row-head h2 { margin: 0 !important; }
.bx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--wp--preset--spacing--medium); }
.bx-tile { display: flex; flex-direction: column; gap: 10px; background: var(--bx-bg2); border-radius: var(--bx-r); padding: var(--wp--preset--spacing--medium); text-decoration: none !important; color: var(--bx-fg1); min-height: 260px; transition: background .2s; }
a.bx-tile:hover { background: var(--bx-bg3); }
.bx-tile h3 { margin: 0; font-size: var(--wp--preset--font-size--large); }
.bx-tile p { margin: 0; color: var(--bx-fg3); flex: 1; }
.bx-tile__tag { font-size: 13px; font-weight: 600; color: var(--bx-primary); letter-spacing: .04em; }
.bx-tile--soon { opacity: .75; }
.bx-tile .bx-play { margin: 0; }

/* ⑥ Videos */
.bx-videos { padding: var(--wp--preset--spacing--giant) 0; }
.bx-videos .bx-lead { margin-top: -12px; margin-bottom: var(--wp--preset--spacing--large); }
.bx-card--video h4 { font-size: var(--wp--preset--font-size--large); line-height: 1.1; min-height: 3.3em; }

/* ⑦ About */
.bx-about { padding: var(--wp--preset--spacing--giant) 0; }
.bx-split--about { grid-template-columns: 5fr 6fr; }
.bx-about__copy h2 { font-size: var(--wp--preset--font-size--xx-large) !important; }
.bx-about__copy p { color: var(--bx-fg3); }

/* ⑧ Books */
.bx-books { padding: var(--wp--preset--spacing--giant) 0; }
.bx-books__row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--wp--preset--spacing--large); }
.bx-book { text-decoration: none !important; color: var(--bx-fg1); font-weight: 600; display: flex; flex-direction: column; gap: 14px; text-align: center; }

/* ⑨ CTA */
.bx-cta { position: relative; padding: var(--wp--preset--spacing--giant) 0; color: #fff; overflow: hidden; background: var(--bx-fg1); }
.bx-cta__bg { position: absolute; inset: 0; border-radius: 0; opacity: .55; }
.bx-cta__inner { position: relative; text-align: center; }
.bx-cta h2 { color: #fff; max-width: 800px; margin: 0 auto var(--wp--preset--spacing--large) !important; }
.bx-cta .bx-optin { margin: 0 auto; }

/* Footer */
.bx-footer { background: var(--bx-bg2); padding: var(--wp--preset--spacing--x-large) var(--bx-gutter) var(--wp--preset--spacing--medium); margin-top: 0; }
.bx-footer__grid { max-width: var(--bx-wide); margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--wp--preset--spacing--medium); }
.bx-footer h5 { margin: 0 0 10px; font-size: 15px; }
.bx-footer a:not(.bx-logo) { display: block; color: var(--bx-fg3); text-decoration: none; font-size: 15px; line-height: 2; }
.bx-footer a:hover { color: var(--bx-primary); }
.bx-footer__legal { max-width: var(--bx-wide); margin: var(--wp--preset--spacing--large) auto 0; padding-top: var(--wp--preset--spacing--small); border-top: 1px solid var(--bx-bg4); display: flex; gap: 20px; font-size: 13px; color: var(--bx-fg4); }
.bx-footer__legal a { display: inline !important; font-size: 13px !important; }

/* 內頁 */
.bx-page { padding: var(--wp--preset--spacing--x-large) var(--bx-gutter); }

/* 響應式 */
@media (max-width: 991px) {
	.bx-nav { display: none; }
	.bx-header__actions { margin-left: auto; }
	.bx-split, .bx-split--about { grid-template-columns: 1fr; }
	.bx-grid-3 { grid-template-columns: 1fr; }
	.bx-books__row { grid-template-columns: repeat(2, 1fr); }
	.bx-footer__grid { grid-template-columns: 1fr 1fr; }
	.bx-hero { min-height: 0; align-items: flex-end; }
	.bx-hero__bg::before { background: linear-gradient(180deg, rgba(0,21,35,.1) 20%, rgba(0,21,35,.9) 65%); }
	.bx-hero__inner { padding-top: 360px; }
}
@media (max-width: 600px) {
	.bx-optin { flex-direction: column; border-radius: 18px; gap: 6px; }
	.bx-optin input { padding: 12px 14px; }
	.bx-footer__grid { grid-template-columns: 1fr; }
}