/* =========================================================
   VIVI About Page
   Scope: /brand-introduction/
   Purpose: 關於我們 Lite Page，完全接回網站基礎設定的色票、字級、間距、按鈕與卡片規範
========================================================= */

body.vivi-about-page {
	min-height: 100vh;
	background: var(--vivi-color-bg);
	color: var(--vivi-color-text);
	font-family: var(--vivi-font-body);
	font-size: var(--vivi-fs-body);
	font-weight: var(--vivi-fw-regular);
	line-height: var(--vivi-lh-body);
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

.vivi-about-main {
	background:
		radial-gradient(circle at 12% 8%, color-mix(in srgb, var(--vivi-color-primary) 9%, transparent), transparent 34%),
		linear-gradient(180deg, var(--vivi-color-bg) 0%, var(--vivi-color-bg-soft) 45%, var(--vivi-color-bg) 100%);
}

.vivi-about-container {
	width: min(var(--vivi-container-wide), calc(100% - 20px));
	margin: 0 auto;
}

.vivi-about-hero {
	padding: var(--vivi-page-main-padding-top) 0 var(--vivi-page-main-padding-bottom);
}

.vivi-about-hero-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(340px, 0.72fr);
	gap: var(--vivi-space-2xl, 40px);
	align-items: stretch;
}

.vivi-about-hero-copy {
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.vivi-about-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--vivi-space-xs);
	margin: 0 0 var(--vivi-space-sm);
	color: var(--vivi-color-primary);
	font-size: var(--vivi-fs-small);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-compact);
	letter-spacing: .12em;
	text-transform: uppercase;
}

.vivi-about-hero h1,
.vivi-about-section h2 {
	margin: 0;
	color: var(--vivi-color-heading);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-heading);
}

.vivi-about-hero h1 {
	max-width: 820px;
	font-size: var(--vivi-fs-hero);
	letter-spacing: -.04em;
}

.vivi-about-lead {
	max-width: 760px;
	margin: var(--vivi-space-lg) 0 0;
	color: var(--vivi-color-text);
	font-size: var(--vivi-fs-h3);
	font-weight: var(--vivi-fw-regular);
	line-height: 1.8;
}

.vivi-about-lead.is-sub {
	margin-top: var(--vivi-space-sm);
	font-size: var(--vivi-fs-body-lg);
	color: var(--vivi-color-text-muted);
}

.vivi-about-cta-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vivi-space-sm);
	margin-top: var(--vivi-space-xl);
}

.vivi-about-hero-card {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	min-height: 100%;
	padding: var(--vivi-space-xl);
	border: 1px solid color-mix(in srgb, var(--vivi-color-border) 86%, transparent);
	border-radius: var(--vivi-radius-xl);
	background: color-mix(in srgb, var(--vivi-color-card) 84%, transparent);
	box-shadow: var(--vivi-shadow-hero);
	backdrop-filter: blur(12px);
}

.vivi-about-hero-card::before {
	content: "";
	position: absolute;
	top: -82px;
	right: -82px;
	width: 190px;
	height: 190px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--vivi-color-primary) 13%, transparent);
}

.vivi-about-year {
	position: relative;
	margin: 0;
	color: var(--vivi-color-heading);
	font-size: clamp(58px, 7vw, 96px);
	font-weight: var(--vivi-fw-bold);
	line-height: .9;
	letter-spacing: -.08em;
}

.vivi-about-hero-card p {
	position: relative;
	margin: var(--vivi-space-lg) 0 0;
	color: var(--vivi-color-text);
	font-size: var(--vivi-fs-body-lg);
	font-weight: var(--vivi-fw-regular);
	line-height: 1.8;
}

.vivi-about-chip-row {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	gap: var(--vivi-space-xs);
	margin-top: var(--vivi-space-xl);
}

.vivi-about-chip-row span {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 7px 13px;
	border: 1px solid color-mix(in srgb, var(--vivi-color-primary) 24%, transparent);
	border-radius: var(--vivi-radius-pill);
	background: color-mix(in srgb, var(--vivi-color-card) 72%, transparent);
	color: var(--vivi-color-black-soft);
	font-size: var(--vivi-fs-small);
	font-weight: var(--vivi-fw-bold);
	line-height: 1.2;
}

.vivi-about-section {
	padding: var(--vivi-section-padding-y) 0;
}

.vivi-about-section.is-soft {
	background: color-mix(in srgb, var(--vivi-color-card) 48%, transparent);
}

.vivi-about-section.is-dark {
	background: var(--vivi-color-black);
	color: var(--vivi-color-text-inverse);
}

.vivi-about-section-head {
	max-width: 820px;
	margin-bottom: var(--vivi-space-xl);
}

.vivi-about-section-head h2,
.vivi-about-section h2 {
	font-size: var(--vivi-fs-h1);
	letter-spacing: -.03em;
}

.vivi-about-section-head p:not(.vivi-about-kicker),
.vivi-about-two-col p,
.vivi-about-ticket-grid p,
.vivi-about-webplus-card p,
.vivi-about-join-grid p {
	margin: var(--vivi-space-md) 0 0;
	color: var(--vivi-color-text);
	font-size: var(--vivi-fs-body-lg);
	font-weight: var(--vivi-fw-regular);
	line-height: 1.85;
}

.vivi-about-section.is-dark .vivi-about-kicker,
.vivi-about-section.is-dark h2,
.vivi-about-section.is-dark h3 {
	color: var(--vivi-color-text-inverse);
}

.vivi-about-section.is-dark p {
	color: color-mix(in srgb, var(--vivi-color-text-inverse) 78%, transparent);
}

.vivi-about-magazine-grid,
.vivi-about-card-grid,
.vivi-about-faq-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--vivi-space-lg);
}

.vivi-about-magazine-card,
.vivi-about-feature-card,
.vivi-about-faq-card,
.vivi-about-pillar-card {
	border: 1px solid var(--vivi-color-border);
	border-radius: var(--vivi-radius-xl);
	background: var(--vivi-color-card);
	box-shadow: var(--vivi-shadow-soft);
}

.vivi-about-magazine-card {
	min-height: 100%;
	padding: var(--vivi-space-xl);
}

.vivi-about-magazine-card h3,
.vivi-about-feature-card h3,
.vivi-about-faq-card h3,
.vivi-about-pillar-card h3,
.vivi-about-dark-card h3 {
	margin: 0;
	color: var(--vivi-color-heading);
	font-size: var(--vivi-fs-h3);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-compact);
}

.vivi-about-magazine-card p,
.vivi-about-feature-card p,
.vivi-about-faq-card p,
.vivi-about-pillar-card p,
.vivi-about-dark-card p {
	margin: var(--vivi-space-sm) 0 0;
	color: var(--vivi-color-text);
	font-size: var(--vivi-fs-small);
	font-weight: var(--vivi-fw-regular);
	line-height: 1.85;
}

.vivi-about-two-col,
.vivi-about-ticket-grid,
.vivi-about-join-grid,
.vivi-about-webplus-card {
	display: grid;
	grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
	gap: var(--vivi-space-xl);
	align-items: start;
}

.vivi-about-pillar-grid {
	display: grid;
	gap: var(--vivi-space-md);
}

.vivi-about-pillar-card,
.vivi-about-feature-card {
	position: relative;
	padding: var(--vivi-space-xl);
}

.vivi-about-pillar-card i,
.vivi-about-feature-card i {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	margin-bottom: var(--vivi-space-md);
	border-radius: 999px;
	background: color-mix(in srgb, var(--vivi-color-primary) 10%, transparent);
	color: var(--vivi-color-primary);
	font-size: 22px;
	line-height: 1;
}

.vivi-about-feature-card a {
	display: inline-flex;
	align-items: center;
	margin-top: var(--vivi-space-lg);
	color: var(--vivi-color-primary);
	font-size: var(--vivi-fs-button);
	font-weight: var(--vivi-fw-bold);
	line-height: var(--vivi-lh-compact);
}

.vivi-about-feature-card a:hover,
.vivi-about-feature-card a:focus-visible {
	color: var(--vivi-color-heading);
}

.vivi-about-join-grid {
	align-items: center;
}

.vivi-about-dark-card {
	padding: var(--vivi-space-xl);
	border: 1px solid color-mix(in srgb, var(--vivi-color-text-inverse) 18%, transparent);
	border-radius: var(--vivi-radius-xl);
	background: color-mix(in srgb, var(--vivi-color-text-inverse) 8%, transparent);
	box-shadow: none;
}

.vivi-about-dark-card h3,
.vivi-about-dark-card p {
	color: var(--vivi-color-text-inverse);
}

.vivi-about-dark-card p {
	color: color-mix(in srgb, var(--vivi-color-text-inverse) 76%, transparent);
}

.vivi-about-check-list {
	display: grid;
	gap: var(--vivi-space-sm);
	margin: 0;
	padding: 0;
	list-style: none;
}

.vivi-about-check-list li {
	position: relative;
	padding: var(--vivi-space-md) var(--vivi-space-md) var(--vivi-space-md) calc(var(--vivi-space-xl) + 10px);
	border: 1px solid var(--vivi-color-border);
	border-radius: var(--vivi-radius-lg);
	background: var(--vivi-color-card);
	box-shadow: var(--vivi-shadow-soft);
	color: var(--vivi-color-text);
	font-size: var(--vivi-fs-small);
	font-weight: var(--vivi-fw-regular);
	line-height: 1.65;
}

.vivi-about-check-list li::before {
	content: "";
	position: absolute;
	left: var(--vivi-space-md);
	top: 50%;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	border-radius: 999px;
	background: var(--vivi-color-primary);
}

.vivi-about-check-list li::after {
	content: "";
	position: absolute;
	left: calc(var(--vivi-space-md) + 6px);
	top: 50%;
	width: 6px;
	height: 10px;
	border: solid var(--vivi-color-text-inverse);
	border-width: 0 2px 2px 0;
	transform: translateY(-62%) rotate(45deg);
}

.vivi-about-faq-grid {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vivi-about-faq-card {
	padding: var(--vivi-space-xl);
}

.vivi-about-webplus {
	padding-bottom: var(--vivi-page-main-padding-bottom);
}

.vivi-about-webplus-card {
	align-items: center;
	padding: var(--vivi-space-xl);
	border: 1px solid var(--vivi-color-border);
	border-radius: var(--vivi-radius-xl);
	background: var(--vivi-color-card);
	box-shadow: var(--vivi-shadow-card);
}

.vivi-about-webplus-actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--vivi-space-sm);
}

@media (max-width: 1120px) {
	.vivi-about-hero-grid,
	.vivi-about-two-col,
	.vivi-about-ticket-grid,
	.vivi-about-join-grid,
	.vivi-about-webplus-card {
		grid-template-columns: 1fr;
	}

	.vivi-about-magazine-grid,
	.vivi-about-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.vivi-about-webplus-actions {
		justify-content: flex-start;
	}
}

@media (max-width: 860px) {
	.vivi-about-hero {
		padding: var(--vivi-mobile-page-main-padding-top) 0 var(--vivi-mobile-section-padding-y);
	}

	.vivi-about-section {
		padding: var(--vivi-mobile-section-padding-y) 0;
	}

	.vivi-about-hero-grid {
		gap: var(--vivi-space-lg);
	}

	.vivi-about-hero h1 {
		font-size: var(--vivi-fs-h1-mobile, 36px);
		letter-spacing: -.03em;
	}

	.vivi-about-section-head h2,
	.vivi-about-section h2 {
		font-size: var(--vivi-fs-h2-mobile, 28px);
		letter-spacing: -.02em;
	}

	.vivi-about-lead,
	.vivi-about-lead.is-sub,
	.vivi-about-section-head p:not(.vivi-about-kicker),
	.vivi-about-two-col p,
	.vivi-about-ticket-grid p,
	.vivi-about-webplus-card p,
	.vivi-about-join-grid p {
		font-size: var(--vivi-fs-body);
		line-height: var(--vivi-lh-body);
	}

	.vivi-about-hero-card,
	.vivi-about-magazine-card,
	.vivi-about-feature-card,
	.vivi-about-faq-card,
	.vivi-about-pillar-card,
	.vivi-about-dark-card,
	.vivi-about-webplus-card {
		padding: var(--vivi-space-lg);
		border-radius: var(--vivi-radius-lg);
	}

	.vivi-about-magazine-grid,
	.vivi-about-card-grid,
	.vivi-about-faq-grid {
		grid-template-columns: 1fr;
		gap: var(--vivi-space-md);
	}

	.vivi-about-cta-row,
	.vivi-about-webplus-actions {
		display: grid;
		grid-template-columns: 1fr;
	}

	.vivi-about-cta-row .vivi-btn,
	.vivi-about-webplus-actions .vivi-btn {
		width: 100%;
		justify-content: center;
	}

	.vivi-about-webplus {
		padding-bottom: calc(var(--vivi-mobile-section-padding-y) + var(--vivi-mobile-bottom-nav-height));
	}
}