/* AIP Platform — 課程總覽 page, reproduced 1:1 from course-catalog.html +
 * tokens.css. Self-contained, scoped under .aip-catalog. */

.aip-catalog {
	--surface: oklch(0.992 0.004 90); --paper: oklch(0.975 0.008 88); --paper-2: oklch(0.945 0.014 86);
	--paper-3: oklch(0.905 0.020 84); --paper-4: oklch(0.855 0.030 83);
	--line: oklch(0.850 0.022 82); --line-soft: oklch(0.900 0.018 84);
	--ink: oklch(0.27 0.012 64); --ink-soft: oklch(0.46 0.016 62);
	--bark: oklch(0.40 0.034 68); --clay: oklch(0.60 0.045 62);
	--mist: oklch(0.77 0.028 160); --mist-ink: oklch(0.585 0.040 160);
	--gold: oklch(0.655 0.078 80); --gold-bright: oklch(0.740 0.078 82); --gold-deep: oklch(0.525 0.066 79);
	--gold-hairline: linear-gradient(90deg, transparent, var(--gold-deep) 16%, var(--gold-bright) 50%, var(--gold-deep) 84%, transparent);
	--seal: oklch(0.42 0.115 30); --seal-bright: oklch(0.475 0.125 31);
	--on-dark: oklch(0.945 0.016 86);
	--shadow-sm: 0 1px 2px rgba(72,54,32,.07), 0 2px 6px rgba(72,54,32,.05);
	--shadow-md: 0 4px 12px rgba(72,54,32,.09), 0 14px 30px rgba(72,54,32,.07);
	--shadow-lg: 0 10px 26px rgba(72,54,32,.11), 0 26px 64px rgba(72,54,32,.10);
	--shadow-seal: 0 6px 22px rgba(122,42,36,.20);
	--grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.05'/%3E%3C/svg%3E");
	--gua-wash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='none' stroke='%238a6d3b' stroke-width='3' stroke-linecap='round'%3E%3Cline x1='30' y1='34' x2='150' y2='34'/%3E%3Cline x1='30' y1='52' x2='72' y2='52'/%3E%3Cline x1='108' y1='52' x2='150' y2='52'/%3E%3Cline x1='30' y1='70' x2='150' y2='70'/%3E%3Cline x1='30' y1='118' x2='72' y2='118'/%3E%3Cline x1='108' y1='118' x2='150' y2='118'/%3E%3Cline x1='30' y1='136' x2='150' y2='136'/%3E%3Cline x1='30' y1='154' x2='72' y2='154'/%3E%3Cline x1='108' y1='154' x2='150' y2='154'/%3E%3C/g%3E%3C/svg%3E");
	--torn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='14' viewBox='0 0 180 14'%3E%3Cpath d='M0 14 V6 C12 9 20 2 33 5 C44 7 52 1 64 4 C76 7 84 2 97 5 C108 8 117 2 129 5 C141 8 150 3 162 5 C170 6 175 9 180 6 V14 Z' fill='%23000'/%3E%3C/svg%3E");
	--font-display: "Noto Serif TC", "Source Han Serif TC", "Songti TC", serif;
	--font-body: "Noto Sans TC", "PingFang TC", system-ui, sans-serif;
	--font-en-display: "Playfair Display", Georgia, serif;
	--fs-h1: clamp(1.9rem, 3.4vw, 2.5rem); --fs-h2: clamp(1.5rem, 2.4vw, 1.875rem);
	--fs-body: 1.0625rem; --fs-small: 0.8125rem;
	--sp-sm: 8px; --sp-md: 16px; --sp-lg: 24px; --sp-xl: 40px; --sp-d: 108px;
	--r-sm: 4px; --r-md: 8px; --r-lg: 12px; --maxw: 1200px;
	--ease: cubic-bezier(0.22, 1, 0.36, 1); --dur: 420ms; --dur-slow: 600ms;

	width: 100%; max-width: 100%; margin-inline: 0;
	background-color: var(--paper); color: var(--ink);
	font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.75; text-align: left;
}
.aip-catalog * { box-sizing: border-box; }
.aip-catalog h2, .aip-catalog h3 { font-family: var(--font-display); color: var(--ink); line-height: 1.2; font-weight: 700; margin: 0; }
.aip-catalog h2 { font-size: var(--fs-h2); }
.aip-catalog p { margin: 0 0 1em; }
.aip-catalog a { color: var(--seal); text-decoration: none; }
.aip-catalog img { display: block; max-width: 100%; }
.aip-catalog .wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: var(--sp-lg); }
.aip-catalog section { padding-block: var(--sp-d); position: relative; }
.aip-catalog .zone-paper { background: var(--paper); }
.aip-catalog .zone-paper2 { background: var(--paper-2); }
.aip-catalog .overline { font-family: var(--font-body); font-size: var(--fs-small); letter-spacing: 0.22em; text-transform: uppercase; color: var(--clay); font-weight: 600; }
.aip-catalog .btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-size: 1rem; font-weight: 600; padding: 13px 30px; border-radius: var(--r-sm); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease); border: 1px solid transparent; }
.aip-catalog .btn-primary { background: var(--seal); color: var(--on-dark); box-shadow: var(--shadow-sm); }
.aip-catalog .btn-primary:hover { background: var(--seal-bright); transform: translateY(-1px); }
.aip-catalog .btn-ghost { background: transparent; color: var(--bark); border-color: var(--bark); }
.aip-catalog .btn-ghost:hover { background: var(--bark); color: var(--on-dark); }
.aip-catalog .seal-chip { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 6px; background: var(--seal); color: var(--on-dark); font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; }
@media (prefers-reduced-motion: no-preference) {
	.aip-catalog .reveal { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }
	.aip-catalog .reveal.in { opacity: 1; transform: none; }
}
.aip-catalog .hexgrain { position: relative; isolation: isolate; }
.aip-catalog .hexgrain > .wrap { position: relative; z-index: 1; }
.aip-catalog .hexgrain::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-image: var(--gua-wash); background-repeat: repeat; background-position: center top; background-size: 200px auto; opacity: .055; mix-blend-mode: multiply; }
.aip-catalog .seam { height: 0; position: relative; z-index: 3; }
.aip-catalog .seam::before { content:""; position:absolute; left:8%; right:8%; top:0; height:1px; background: var(--gold-hairline); opacity:.7; }
.aip-catalog .seam::after { content:""; position:absolute; left:8%; right:8%; top:-6px; height:7px; background: color-mix(in oklch, var(--gold) 30%, transparent); -webkit-mask: var(--torn) repeat-x top center / 180px 7px; mask: var(--torn) repeat-x top center / 180px 7px; opacity:.5; }
.aip-catalog .sec-head-d{ display:grid; grid-template-columns:auto 1fr; column-gap: var(--sp-md); align-items:center; max-width:46em; margin-bottom: var(--sp-xl); }
.aip-catalog .sec-head-d.center{ display:block; text-align:center; max-width:46em; margin-inline:auto; }
.aip-catalog .sec-head-d.center h2{ font-size: var(--fs-h1); }

/* 天頭 */
.aip-catalog .catalog-top{ overflow:hidden; }
.aip-catalog .catalog-top .lead{ max-width:34em; margin:0 auto var(--sp-lg); text-align:center; color:var(--ink-soft); font-size:1.15rem; }
.aip-catalog .top-colophon{ display:flex; align-items:center; justify-content:center; gap:var(--sp-md); max-width:42em; margin:0 auto; color:var(--bark); font-family:var(--font-display); font-weight:700; font-size:clamp(1.06rem,2vw,1.32rem); letter-spacing:.06em; }
.aip-catalog .top-colophon::before, .aip-catalog .top-colophon::after{ content:""; flex:1 1 auto; max-width:120px; height:1px; background:var(--gold-hairline); opacity:.85; }

/* 篩選列 */
.aip-catalog .filterbar{ max-width:var(--maxw); }
.aip-catalog .filter-group{ margin-bottom: var(--sp-lg); }
.aip-catalog .filter-group:last-child{ margin-bottom:0; }
.aip-catalog .filter-legend{ display:flex; align-items:baseline; gap:10px; margin-bottom: var(--sp-md); font-family:var(--font-display); color:var(--bark); font-size:1.02rem; font-weight:700; }
.aip-catalog .filter-legend .en{ font-family:var(--font-en-display); font-style:italic; color:var(--gold-deep); font-size:.82rem; letter-spacing:.06em; }
.aip-catalog .chips{ display:flex; flex-wrap:wrap; gap:10px; }
@media (max-width:560px){ .aip-catalog .chips{ flex-wrap:nowrap; overflow-x:auto; padding-bottom:6px; -webkit-overflow-scrolling:touch; } .aip-catalog .chip{ flex:0 0 auto; } }
.aip-catalog .chip{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:.92rem; font-weight:500; color:var(--ink-soft); padding:8px 16px; border-radius:999px; background:color-mix(in srgb, var(--surface) 70%, transparent); border:1px solid var(--line); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold) 12%, transparent); user-select:none; white-space:nowrap; transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background var(--dur) var(--ease); }
.aip-catalog .chip:hover{ border-color: color-mix(in oklch, var(--gold) 55%, var(--line)); color:var(--ink); }
.aip-catalog .chip.is-active{ color:var(--seal); font-weight:700; background: color-mix(in srgb, var(--seal) 6%, var(--surface)); border-color: var(--seal); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 60%, transparent); }
.aip-catalog .chip .dot{ width:6px; height:6px; border-radius:50%; background:var(--seal); display:inline-block; }
.aip-catalog .chip.is-reserved{ color:var(--mist-ink); border-style:dashed; border-color:color-mix(in oklch, var(--mist) 70%, var(--line)); box-shadow:none; }
.aip-catalog .chip.is-reserved .tag{ font-size:.72rem; color:var(--mist-ink); opacity:.9; }

/* 課程卡 grid */
.aip-catalog .course-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap: clamp(20px, 2.4vw, 30px); }
@media (max-width:980px){ .aip-catalog .course-grid{ grid-template-columns:repeat(2, 1fr); } }
@media (max-width:600px){ .aip-catalog .course-grid{ grid-template-columns:1fr; } }
.aip-catalog .rc{ position:relative; display:flex; flex-direction:column; overflow:hidden; background: var(--surface); border-radius: var(--r-lg); border:1px solid color-mix(in oklch, var(--gold) 22%, var(--line)); box-shadow: var(--shadow-sm); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); }
.aip-catalog .rc:hover{ transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: color-mix(in oklch, var(--gold) 48%, var(--line)); }
.aip-catalog .rc::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px; background:var(--gold-hairline); opacity:0; transition:opacity var(--dur) var(--ease); z-index:4; }
.aip-catalog .rc:hover::before{ opacity:.9; }
.aip-catalog .rc .cover{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--paper-2); border-bottom:1px solid var(--line-soft); }
.aip-catalog .rc .cover img{ width:100%; height:100%; object-fit:cover; transition:transform var(--dur-slow) var(--ease); }
.aip-catalog .rc:hover .cover img{ transform:scale(1.04); }
.aip-catalog .rc .cover.ph{ display:grid; place-items:center; background: repeating-linear-gradient(135deg, var(--paper-2), var(--paper-2) 12px, var(--paper-3) 12px, var(--paper-3) 24px); }
.aip-catalog .rc .cover.ph::after{ content:""; position:absolute; inset:0; background-image:var(--gua-wash); background-size:150px; opacity:.07; mix-blend-mode:multiply; }
.aip-catalog .rc .cover .seal-water{ position:absolute; inset:0; display:grid; place-items:center; font-family:var(--font-display); font-weight:900; font-size:clamp(2.6rem,7vw,4.2rem); color:color-mix(in oklch, var(--seal) 12%, transparent); z-index:0; }
.aip-catalog .rc .cover .ph-label{ position:relative; z-index:2; }
.aip-catalog .rc .cover .ph-label span{ font-family:var(--font-display); color:var(--clay); font-size:.92rem; letter-spacing:.06em; padding:6px 12px; background: color-mix(in srgb, var(--paper) 80%, transparent); border-radius:4px; }
.aip-catalog .rc .flag{ position:absolute; top:12px; left:12px; z-index:3; font-family:var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.12em; padding:5px 11px; border-radius:4px; }
.aip-catalog .rc .flag.flagship{ background:var(--seal); color:var(--on-dark); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 65%, transparent), var(--shadow-seal); }
.aip-catalog .rc .flag.trial{ background: color-mix(in srgb, var(--surface) 86%, transparent); color:var(--gold-deep); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 60%, var(--line)); }
.aip-catalog .rc .seq{ position:absolute; top:12px; right:12px; z-index:3; display:inline-grid; place-items:center; width:30px; height:30px; border-radius:6px; font-family:var(--font-display); font-weight:700; font-size:.92rem; color:var(--gold-deep); background: color-mix(in srgb, var(--surface) 80%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--gold-bright) 60%, var(--line)); }
.aip-catalog .rc .body{ padding: var(--sp-lg) var(--sp-lg) calc(var(--sp-lg) + 4px); display:flex; flex-direction:column; flex:1 1 auto; }
.aip-catalog .rc .topic{ font-size:var(--fs-small); letter-spacing:.16em; text-transform:uppercase; color:var(--clay); font-weight:600; margin-bottom:6px; }
.aip-catalog .rc h3{ font-size:1.28rem; line-height:1.32; margin:0 0 8px; transition:color var(--dur) var(--ease); }
.aip-catalog .rc:hover h3{ color:var(--seal); }
.aip-catalog .rc .by{ display:flex; align-items:center; gap:8px; color:var(--ink-soft); font-size:.86rem; margin-bottom:10px; }
.aip-catalog .rc .by .bar{ width:18px; height:1px; background:var(--gold-hairline); }
.aip-catalog .rc .intro{ color:var(--ink-soft); font-size:.95rem; line-height:1.7; margin:0 0 var(--sp-md); flex:1 1 auto; }
.aip-catalog .rc .go{ display:inline-flex; align-items:center; gap:7px; font-family:var(--font-display); font-weight:700; font-size:.95rem; color:var(--seal); margin-top:auto; transition:gap var(--dur) var(--ease); }
.aip-catalog .rc:hover .go{ gap:12px; }
.aip-catalog .rc .stretch{ position:absolute; inset:0; z-index:5; }
@media (min-width:601px){
	.aip-catalog .rc.feature{ grid-column: span 2; }
	.aip-catalog .rc.feature .body{ padding: var(--sp-xl); }
	.aip-catalog .rc.feature h3{ font-size:1.62rem; }
}

/* CTA */
.aip-catalog .zone-3{ background:var(--paper-3); position:relative; }
.aip-catalog .zone-3::before{ content:""; position:absolute; inset:0; pointer-events:none; background-image:var(--grain); mix-blend-mode:multiply; opacity:.55; }
.aip-catalog .zone-3 > section{ position:relative; z-index:1; }
.aip-catalog .closing{ max-width:40em; margin-inline:auto; text-align:center; }
.aip-catalog .closing h2{ font-size:var(--fs-h2); margin-bottom: var(--sp-md); }
.aip-catalog .closing p{ color:var(--ink-soft); margin-bottom: var(--sp-lg); }
.aip-catalog .closing .ctas{ display:flex; gap:var(--sp-md); justify-content:center; flex-wrap:wrap; }