/* About page. */

.about-header {
	position: relative;
	min-height: 68vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background-size: cover;
	background-position: center;
	padding: calc(var(--nav-h) + 30px) 20px 0;
}
.about-overlay { position: absolute; inset: 0; background: rgba(26,11,46,.45); }
.header-content { position: relative; z-index: 2; text-align: center; color: var(--white); max-width: 800px; }
.header-content h1 {
	font-size: clamp(2.4rem, 6vw, 4.5rem);
	color: var(--white);
	margin: 0 0 18px;
	text-shadow: 0 4px 15px rgba(0,0,0,.6);
	text-wrap: balance;
}
.header-content p { font-size: clamp(1.05rem, 2.4vw, 1.5rem); text-shadow: 0 2px 5px rgba(0,0,0,.6); margin: 0; }

.story-section { padding: var(--space-section) 10%; text-align: center; }
.story-container { max-width: 900px; margin: 0 auto; }
.story-section h2 { font-size: clamp(1.9rem, 4vw, 3rem); margin: 0 0 36px; }
.story-text p { font-size: 1.2rem; line-height: 1.8; color: #555; margin: 0 0 26px; }
.story-highlight { color: var(--deep-purple); font-weight: 700; }
.story-close { font-size: 1.4rem !important; margin-top: 36px !important; color: var(--deep-purple); font-weight: 800; font-family: var(--font-display); }

/* Series comparison cards — only rendered when more than one series exists. */
.about-series { padding: var(--space-section) 5%; background: var(--light-purple); }
.about-series__title { text-align: center; font-size: clamp(1.7rem, 3.5vw, 2.6rem); margin: 0 0 clamp(30px, 4vw, 50px); }
.about-series__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 30px;
	max-width: 1100px;
	margin: 0 auto;
}
.about-series__card {
	background: var(--white);
	border-radius: var(--radius-lg);
	padding: 40px 32px;
	text-decoration: none;
	box-shadow: var(--shadow-card);
	border-top: 5px solid var(--accent);
	transition: transform .3s ease, box-shadow .3s ease;
}
.about-series__card:hover { transform: translateY(-8px); box-shadow: var(--shadow-float); }
.about-series__age {
	display: inline-block;
	font-family: var(--font-display);
	font-size: .75rem;
	font-weight: 800;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin-bottom: 12px;
}
.about-series__card h3 { font-size: 1.5rem; margin: 0 0 12px; }
.about-series__card p { color: var(--text-muted); line-height: 1.7; margin: 0 0 20px; }
.about-series__cta { font-family: var(--font-display); font-weight: 800; color: var(--accent-dark); }

.magic-break {
	background: linear-gradient(135deg, #ffffff 0%, #FFF8E1 100%);
	padding: var(--space-section) 5%;
	text-align: center;
	border-top: 1px solid var(--hairline);
	border-bottom: 1px solid var(--hairline);
}
.magic-video-container {
	max-width: 800px;
	margin: 0 auto;
	border-radius: 30px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,.1);
	border: 8px solid #fff;
}
/* aspect-ratio holds the box before the poster decodes. Without it the
   element falls back to the 300x150 default and the page jumps. */
.magic-video-container video { width: 100%; display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.magic-caption {
	font-size: clamp(1.2rem, 3vw, 1.8rem);
	margin: 36px 0 0;
	font-weight: 800;
	color: var(--deep-purple);
	font-family: var(--font-display);
}

.values-section { padding: var(--space-section) 10%; background: var(--light-purple); }
.values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 40px; text-align: center; }
.value-card {
	background: var(--white);
	padding: 48px 30px;
	border-radius: var(--radius-lg);
	box-shadow: 0 15px 35px rgba(0,0,0,.1);
	transition: transform .3s ease;
}
.value-card:hover { transform: translateY(-10px); }
.value-icon { font-size: 2.8rem; margin-bottom: 18px; display: block; }
.value-card h3 { font-size: 1.4rem; margin: 0 0 14px; }
.value-card p { color: var(--text-muted); line-height: 1.6; margin: 0; }