/* ==========================================================================
   Inner Pages Premium Styles
   ========================================================================== */

/* --- Page Header Premium --- */
.page-header--premium {
	position: relative;
	overflow: hidden;
}

.page-header--with-image.page-header--premium {
	min-height: 420px;
	display: flex;
	align-items: flex-end;
}

.page-header--with-image .page-header-bg {
	overflow: hidden;
}

.page-header--with-image .page-header-bg img {
	will-change: transform;
}

.page-header--premium .page-title .split-word {
	overflow: hidden;
}

.page-header--premium .container {
	position: relative;
	z-index: 1;
}

.page-header-breadcrumb {
	font-size: 0.8125rem;
	color: var(--color-gray-text);
	margin-bottom: 1rem;
}

.page-header--with-image .page-header-breadcrumb {
	color: rgba(255, 255, 255, 0.6);
}

/* --- Timeline Premium --- */
.timeline-item {
	opacity: 1;
}

.timeline-marker {
	transition: box-shadow 0.3s ease;
}

.timeline-item:hover .timeline-marker {
	box-shadow: 0 0 0 6px rgba(200, 162, 76, 0.2);
}

/* --- About Page --- */
.section-about-intro {
	padding-top: clamp(2.5rem, 5vw, 4rem);
	padding-bottom: 0;
}

.section-label--center {
	text-align: center;
	margin-bottom: 0;
}

.bio-portrait-wrap {
	position: relative;
}

.bio-accent-block {
	position: absolute;
	bottom: -1.5rem;
	right: -1.5rem;
	width: 40%;
	height: 60%;
	background: var(--color-gold);
	opacity: 0.15;
	border-radius: var(--radius-lg);
	z-index: -1;
}

.section-mission {
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.about-mission {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.about-mission-statement {
	font-family: var(--font-serif);
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 700;
	color: var(--color-navy);
	line-height: 1.35;
	margin: 1rem 0 1.5rem;
}

.about-mission-closing {
	font-size: 1.125rem;
	font-style: italic;
	color: var(--color-gray-text);
	line-height: 1.6;
	margin: 0;
}

.bio-portrait-wrap .section-label {
	margin-bottom: 1rem;
}

.bio-portrait {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.bio-portrait img {
	width: 100%;
	aspect-ratio: 3/4;
	object-fit: cover;
}

.bio-placeholder {
	font-family: var(--font-serif);
	font-size: 1.25rem;
	font-style: italic;
	color: var(--color-gold);
	padding: 1rem 1.25rem;
	background: rgba(200, 162, 76, 0.08);
	border-left: 3px solid var(--color-gold);
	border-radius: 0 var(--radius) var(--radius) 0;
	margin-bottom: 1.5rem;
}

.gallery-item {
	position: relative;
	overflow: hidden;
	cursor: pointer;
}

.gallery-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1rem 1.25rem;
	background: linear-gradient(to top, rgba(11, 46, 79, 0.85), transparent);
	color: var(--color-white);
	font-size: 0.8125rem;
	font-weight: 500;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.gallery-item:hover .gallery-caption {
	opacity: 1;
}


.gallery-item::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(11, 46, 79, 0.5), transparent 60%);
	opacity: 0;
	transition: opacity 0.4s ease;
}

.gallery-item:hover::after {
	opacity: 1;
}

.gallery-item img {
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* --- Card Premium Hover --- */
.card {
	will-change: transform;
	position: relative;
}

.card::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: var(--radius-lg);
	border: 2px solid transparent;
	transition: border-color 0.3s ease;
	pointer-events: none;
	z-index: 1;
}

.card:hover::before {
	border-color: var(--color-gold);
}

/* --- Experience Item Premium --- */
.experience-item {
	transition: background 0.3s ease;
	border-radius: var(--radius);
	padding-left: 1rem;
	padding-right: 1rem;
	margin-left: -1rem;
	margin-right: -1rem;
}

.experience-item:hover {
	background: var(--color-gray-light);
}

.experience-detail h4 {
	transition: color 0.3s ease;
}

.experience-item:hover .experience-detail h4 {
	color: var(--color-navy);
}

/* --- Story Card Premium --- */
.story-card {
	will-change: transform;
}

.story-play {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

.story-card:hover .story-play {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1.1);
}

/* --- Resource Item Premium --- */
.resource-item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.resource-item:hover {
	transform: translateX(4px);
}

/* --- Contact Premium --- */
.contact-form-wrapper {
	transition: box-shadow 0.3s ease;
}

.contact-form-wrapper:focus-within {
	box-shadow: 0 12px 40px rgba(11, 46, 79, 0.12);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
	box-shadow: 0 0 0 3px rgba(200, 162, 76, 0.15);
}

.contact-detail {
	transition: transform 0.3s ease;
}

.contact-detail:hover {
	transform: translateX(4px);
}

/* --- Book Premium --- */
.book-cover {
	overflow: hidden;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-lg);
}

.book-cover img {
	transition: transform 0.6s ease;
}

.book-cover:hover img {
	transform: scale(1.03);
}

/* --- Themes Premium --- */
.theme-item {
	transition: all 0.3s ease;
}

.theme-item:hover {
	border-color: var(--color-gold);
	transform: translateX(4px);
}

/* --- Category Header --- */
.category-header-image {
	overflow: hidden;
	border-radius: var(--radius-lg);
}

.category-header-image img {
	width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
}

/* --- CTA on inner pages --- */
.cta-banner--inner {
	position: relative;
	overflow: hidden;
}

.cta-banner--inner::before {
	content: '';
	position: absolute;
	top: -50%;
	right: -20%;
	width: 400px;
	height: 400px;
	border-radius: 50%;
	background: rgba(200, 162, 76, 0.08);
	pointer-events: none;
}

/* --- Highlights --- */
.highlights-col {
	padding: 2rem;
	border-radius: var(--radius-lg);
	border: 1px solid var(--color-gray-mid);
	transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

.highlights-col:hover {
	border-color: var(--color-gold);
	box-shadow: var(--shadow-sm);
}

/* --- Newsletter --- */
.newsletter-box {
	transition: transform 0.3s ease;
}

.newsletter-box:hover {
	transform: translateY(-2px);
}

/* --- Coming Soon --- */
.coming-soon {
	padding: 3rem;
	border: 2px dashed var(--color-gray-mid);
	border-radius: var(--radius-lg);
}

/* --- Page transition feel --- */
.site-main {
	animation: pageFadeIn 0.5s ease;
}

@keyframes pageFadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.site-main {
		animation: none;
	}
}