/**
 * About Page Styles
 * 
 * @package FusionFood
 */

/* =========================================================================
   About Page Hero
   ========================================================================= */
.about-hero {
	position: relative;
	background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
	padding: var(--ff-space-3xl) var(--ff-space-md);
	text-align: center;
	overflow: hidden;
}

.about-hero::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4a853' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.about-hero__inner {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.about-hero__badge {
	display: inline-block;
	padding: 0.5rem 1.5rem;
	background: rgba(212, 168, 83, 0.15);
	border: 1px solid rgba(212, 168, 83, 0.3);
	border-radius: 50px;
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #d4a853;
	margin-bottom: var(--ff-space-lg);
}

.about-hero__title {
	font-family: var(--ff-font-stylish);
	font-size: clamp(2.5rem, 6vw, 4rem);
	font-weight: 400;
	color: #fff;
	margin: 0 0 var(--ff-space-md) 0;
	line-height: 1.2;
}

.about-hero__subtitle {
	font-size: 1.25rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: #d4a853;
	margin: 0;
}

/* =========================================================================
   About Content Section
   ========================================================================= */
.about-content {
	background: var(--ff-color-background);
	padding: var(--ff-space-3xl) var(--ff-space-md);
}

.about-content__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--ff-space-2xl);
	align-items: center;
}

@media (min-width: 768px) {
	.about-content__inner {
		grid-template-columns: 1fr 1fr;
		gap: var(--ff-space-3xl);
	}
}

.about-content__text {
	order: 2;
}

@media (min-width: 768px) {
	.about-content__text {
		order: 1;
	}
}

.about-content__heading {
	font-family: var(--ff-font-stylish);
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--ff-header-accent);
	margin: 0 0 var(--ff-space-xs) 0;
}

.about-content__title {
	font-size: 1.125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--ff-color-text);
	margin: 0 0 var(--ff-space-lg) 0;
	padding-bottom: var(--ff-space-sm);
	border-bottom: 3px solid var(--ff-header-accent);
	display: inline-block;
}

.about-content__desc {
	font-size: 1rem;
	line-height: 1.8;
	color: var(--ff-color-text-muted);
	margin: 0 0 var(--ff-space-lg) 0;
}

.about-content__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-sm);
	padding: 0.875rem 2rem;
	font-size: 0.875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #fff;
	background: linear-gradient(135deg, var(--ff-header-accent) 0%, #c49a47 100%);
	border: none;
	border-radius: 6px;
	text-decoration: none;
	transition: all 0.3s ease;
	box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
}

.about-content__btn:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212, 168, 83, 0.4);
}

.about-content__btn svg {
	width: 18px;
	height: 18px;
}

.about-content__image {
	order: 1;
	position: relative;
}

@media (min-width: 768px) {
	.about-content__image {
		order: 2;
	}
}

.about-content__img-wrapper {
	position: relative;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

.about-content__img-wrapper::before {
	content: '';
	position: absolute;
	top: -10px;
	left: -10px;
	right: 10px;
	bottom: 10px;
	border: 3px solid var(--ff-header-accent);
	border-radius: 12px;
	z-index: -1;
}

.about-content__img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
}

/* =========================================================================
   Testimonial Section
   ========================================================================= */
.about-testimonial {
	position: relative;
	background: linear-gradient(135deg, #2d3436 0%, #1a1a1a 100%);
	padding: var(--ff-space-3xl) var(--ff-space-md);
	overflow: hidden;
}

.about-testimonial::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 600px;
	height: 600px;
	background: radial-gradient(circle, rgba(212, 168, 83, 0.08) 0%, transparent 70%);
	pointer-events: none;
}

.about-testimonial__inner {
	position: relative;
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.about-testimonial__quote-icon {
	width: 60px;
	height: 60px;
	color: var(--ff-header-accent);
	margin-bottom: var(--ff-space-lg);
	opacity: 0.6;
}

.about-testimonial__text {
	font-size: 1.125rem;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.9);
	font-style: italic;
	margin: 0 0 var(--ff-space-xl) 0;
}

.about-testimonial__stars {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-bottom: var(--ff-space-md);
}

.about-testimonial__star {
	width: 24px;
	height: 24px;
	color: #d4a853;
}

.about-testimonial__author {
	font-size: 1rem;
	font-weight: 600;
	color: #d4a853;
}

/* =========================================================================
   Stats Section
   ========================================================================= */
.about-stats {
	background: var(--ff-header-accent);
	padding: var(--ff-space-2xl) var(--ff-space-md);
}

.about-stats__inner {
	max-width: 1000px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--ff-space-xl);
	text-align: center;
}

@media (min-width: 768px) {
	.about-stats__inner {
		grid-template-columns: repeat(4, 1fr);
	}
}

.about-stats__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--ff-space-xs);
}

.about-stats__number {
	font-size: clamp(2rem, 5vw, 3rem);
	font-weight: 700;
	color: #1a1a1a;
	line-height: 1;
}

.about-stats__label {
	font-size: 0.8125rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(26, 26, 26, 0.8);
}

/* =========================================================================
   FAQ Section
   ========================================================================= */
.about-faq {
	background: var(--ff-color-background-alt);
	padding: var(--ff-space-3xl) var(--ff-space-md);
}

.about-faq__inner {
	max-width: 900px;
	margin: 0 auto;
}

.about-faq__header {
	text-align: center;
	margin-bottom: var(--ff-space-2xl);
}

.about-faq__heading {
	font-family: var(--ff-font-stylish);
	font-size: 2.5rem;
	font-weight: 400;
	color: var(--ff-header-accent);
	margin: 0 0 var(--ff-space-xs) 0;
}

.about-faq__subtitle {
	font-size: 1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--ff-color-text);
	margin: 0;
}

.about-faq__list {
	display: flex;
	flex-direction: column;
	gap: var(--ff-space-md);
}

.about-faq__item {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
	overflow: hidden;
	border: 1px solid var(--ff-color-border-light);
}

.about-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ff-space-md);
	width: 100%;
	padding: 1.25rem 1.5rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--ff-color-text);
	background: transparent;
	border: none;
	text-align: left;
	cursor: pointer;
	transition: all 0.2s ease;
}

.about-faq__question:hover {
	background: rgba(212, 168, 83, 0.05);
}

.about-faq__question[aria-expanded="true"] {
	background: rgba(212, 168, 83, 0.1);
	color: var(--ff-header-accent);
}

.about-faq__icon {
	width: 24px;
	height: 24px;
	flex-shrink: 0;
	color: var(--ff-header-accent);
	transition: transform 0.3s ease;
}

.about-faq__question[aria-expanded="true"] .about-faq__icon {
	transform: rotate(45deg);
}

.about-faq__answer {
	display: none;
	padding: 0 1.5rem 1.25rem;
}

.about-faq__answer.is-open {
	display: block;
}

.about-faq__answer p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--ff-color-text-muted);
}

.about-faq__answer ul {
	margin: var(--ff-space-sm) 0;
	padding-left: var(--ff-space-lg);
}

.about-faq__answer li {
	font-size: 0.9375rem;
	line-height: 1.6;
	color: var(--ff-color-text-muted);
	margin-bottom: var(--ff-space-xs);
}

.about-faq__answer strong {
	color: var(--ff-color-text);
}

/* =========================================================================
   CTA Section
   ========================================================================= */
.about-cta {
	position: relative;
	background: linear-gradient(135deg, #1a1a1a 0%, #2d3436 100%);
	padding: var(--ff-space-3xl) var(--ff-space-md);
	text-align: center;
}

.about-cta__inner {
	max-width: 700px;
	margin: 0 auto;
}

.about-cta__heading {
	font-family: var(--ff-font-stylish);
	font-size: 2.5rem;
	font-weight: 400;
	color: #d4a853;
	margin: 0 0 var(--ff-space-sm) 0;
}

.about-cta__text {
	font-size: 1.125rem;
	color: rgba(255, 255, 255, 0.8);
	margin: 0 0 var(--ff-space-xl) 0;
}

.about-cta__buttons {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--ff-space-md);
}

.about-cta__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--ff-space-sm);
	padding: 1rem 2rem;
	font-size: 0.9375rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-radius: 6px;
	transition: all 0.3s ease;
}

.about-cta__btn--primary {
	color: #1a1a1a;
	background: linear-gradient(135deg, #d4a853 0%, #c49a47 100%);
	box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
}

.about-cta__btn--primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 20px rgba(212, 168, 83, 0.4);
}

.about-cta__btn--secondary {
	color: #fff;
	background: transparent;
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.about-cta__btn--secondary:hover {
	border-color: #d4a853;
	color: #d4a853;
}

.about-cta__btn svg {
	width: 20px;
	height: 20px;
}

/* =========================================================================
   About Page Animations
   ========================================================================= */

/* Slide from right animation */
.ff-js .ff-animate-inview .ff-animate-slide-right {
	opacity: 0;
	transform: translateX(60px);
}

.ff-js .ff-animate-inview.is-inview .ff-animate-slide-right {
	opacity: 1;
	transform: translateX(0);
}

/* Scale in animation */
.ff-js .ff-animate-inview .ff-animate-scale-in {
	opacity: 0;
	transform: scale(0.5);
}

.ff-js .ff-animate-inview.is-inview .ff-animate-scale-in {
	opacity: 1;
	transform: scale(1);
}

/* Star animation - sequential pop */
.ff-js .ff-animate-inview .ff-animate-star {
	opacity: 0;
	transform: scale(0) rotate(-180deg);
	transition: opacity 0.4s ease, transform 0.4s ease;
	transition-delay: calc(var(--star-order, 0) * 0.1s + 0.3s);
}

.ff-js .ff-animate-inview.is-inview .ff-animate-star {
	opacity: 1;
	transform: scale(1) rotate(0deg);
}

/* Count/stats animation */
.ff-js .ff-animate-inview .ff-animate-count {
	opacity: 0;
	transform: translateY(30px) scale(0.9);
}

.ff-js .ff-animate-inview.is-inview .ff-animate-count {
	opacity: 1;
	transform: translateY(0) scale(1);
}

/* Hero specific animations */
.about-hero .ff-animate-item {
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.ff-js .about-hero .about-hero__badge {
	opacity: 0;
	transform: translateY(-20px);
}

.ff-js .about-hero.is-inview .about-hero__badge {
	opacity: 1;
	transform: translateY(0);
}

.ff-js .about-hero .about-hero__title {
	opacity: 0;
	transform: translateY(30px);
}

.ff-js .about-hero.is-inview .about-hero__title {
	opacity: 1;
	transform: translateY(0);
}

.ff-js .about-hero .about-hero__subtitle {
	opacity: 0;
	transform: translateY(20px);
}

.ff-js .about-hero.is-inview .about-hero__subtitle {
	opacity: 1;
	transform: translateY(0);
}

/* Floating animation for decorative elements */
@keyframes float {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-10px);
	}
}

.about-testimonial__quote-icon {
	animation: float 3s ease-in-out infinite;
}

/* Pulse animation for buttons */
@keyframes pulse {
	0% {
		box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
	}
	50% {
		box-shadow: 0 4px 25px rgba(212, 168, 83, 0.5);
	}
	100% {
		box-shadow: 0 4px 15px rgba(212, 168, 83, 0.3);
	}
}

.about-content__btn:not(:hover),
.about-cta__btn--primary:not(:hover) {
	animation: pulse 2s ease-in-out infinite;
}

/* Stats number hover effect */
.about-stats__item {
	transition: transform 0.3s ease;
}

.about-stats__item:hover {
	transform: translateY(-5px);
}

.about-stats__number {
	transition: transform 0.3s ease;
}

.about-stats__item:hover .about-stats__number {
	transform: scale(1.1);
}

/* FAQ item hover effect */
.about-faq__item {
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.about-faq__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}

/* Image hover effect */
.about-content__img-wrapper {
	transition: transform 0.4s ease;
}

.about-content__image:hover .about-content__img-wrapper {
	transform: scale(1.02);
}

.about-content__img {
	transition: transform 0.6s ease;
}

.about-content__image:hover .about-content__img {
	transform: scale(1.05);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.about-testimonial__quote-icon,
	.about-content__btn,
	.about-cta__btn--primary {
		animation: none;
	}
	
	.ff-js .ff-animate-inview .ff-animate-slide-right,
	.ff-js .ff-animate-inview .ff-animate-scale-in,
	.ff-js .ff-animate-inview .ff-animate-star,
	.ff-js .ff-animate-inview .ff-animate-count {
		opacity: 1;
		transform: none;
	}
}