/* ==========================================================================
   About: Explore chapters
   The "Get to know us" chapter list with the coloured preview card. HTML: page-templates/about-page.php
   ========================================================================== */

.chap { --sc: #a78bfa; display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.chap__list { position: relative; display: flex; flex-direction: column; padding-left: 26px; }
.chap__track { left: 0; top: 10px; bottom: 10px; }
.chap__tab { --tc: #a78bfa; position: relative; display: flex; align-items: center; gap: 18px; width: 100%; padding: 16px 6px; border: 0; border-bottom: 1px solid var(--border); background: none; color: var(--muted); text-align: left; transition: color .3s; }
.chap__tab::before { content: ""; position: absolute; left: -31px; top: 50%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--bg); border: 2px solid color-mix(in srgb, var(--tc) 55%, transparent); transition: background .3s, box-shadow .3s; }
.chap__num { font-family: var(--font-display); font-weight: 700; font-size: .85rem; color: color-mix(in srgb, var(--tc) 70%, var(--muted)); }
.chap__name { font-family: var(--font-display); font-weight: 700; font-size: clamp(1.3rem, 2.4vw, 1.9rem); letter-spacing: -.02em; transition: transform .45s var(--ease), color .3s; }
.chap__arrow { margin-left: auto; opacity: 0; transform: translateX(-10px); color: var(--tc); transition: opacity .3s, transform .4s var(--ease); }
.chap__tab:hover, .chap__tab.is-active { color: #fff; }
.chap__tab.is-active .chap__name { color: var(--tc); transform: translateX(8px); }
.chap__tab.is-active .chap__arrow, .chap__tab:hover .chap__arrow { opacity: 1; transform: none; }
.chap__tab.is-active::before { background: var(--tc); border-color: var(--tc); box-shadow: 0 0 14px var(--tc); }
.chap__panels { position: relative; }
.chap__panel {
	--pc: #a78bfa; --pc2: #7c3aed;
	position: relative;
	overflow: hidden;
	padding: clamp(26px, 3.5vw, 44px);
	border-radius: 28px;
	min-height: 420px;
	padding-top: 116px !important;
	display: flex; flex-direction: column; justify-content: flex-end;
	background: radial-gradient(100% 70% at 100% 0%, color-mix(in srgb, var(--pc) 40%, transparent), transparent 60%), radial-gradient(70% 60% at 0% 100%, color-mix(in srgb, var(--pc2) 30%, transparent), transparent 60%), #0d0828;
	border: 1px solid color-mix(in srgb, var(--pc) 45%, transparent);
	box-shadow: 0 40px 80px -36px var(--pc);
}
.chap__panel[hidden] { display: none; }
.chap__panel.is-active { animation: step-in .55s var(--ease) both; }
.chap__mark { position: absolute; right: -50px; top: -40px; color: color-mix(in srgb, var(--pc) 14%, transparent); }
.chap__icon { position: absolute; top: 28px; left: clamp(26px, 3.5vw, 44px); width: 62px; height: 62px; display: grid; place-items: center; border-radius: 18px; background: linear-gradient(135deg, var(--pc), var(--pc2)); color: #0b0620; box-shadow: 0 14px 30px -12px var(--pc); }
.chap__kicker { display: block; margin-bottom: 8px; font-family: var(--font-display); font-weight: 700; font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; color: var(--pc); }
.chap__title { font-size: clamp(1.6rem, 3vw, 2.3rem); margin-bottom: 10px; }
.chap__text { color: #d8d3f0; margin-bottom: 18px; max-width: 460px; }
.chap__points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 8px; }
.chap__points li { display: flex; align-items: center; gap: 10px; color: #f1eefc; font-size: .94rem; }
.chap__points .std-icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: color-mix(in srgb, var(--pc) 25%, transparent); color: var(--pc); stroke-width: 2.8; }
.chap__btn { align-self: flex-start; background: linear-gradient(120deg, var(--pc2), var(--pc)); color: #fff; box-shadow: 0 12px 28px -12px var(--pc); }
.chap__btn:hover { color: #fff; transform: translateY(-2px); }

@media (max-width: 900px) {
	.chap { grid-template-columns: 1fr; }
	.chap__list { display: none; }
	.chap__panels { display: grid; gap: 16px; }
	.chap__panel, .chap__panel[hidden] { display: flex; min-height: 0; padding-top: 110px; animation: none; }
}