/**
 * About Page Styles - matches design-remaining-pages-v1.html
 *
 * Sections: hero, story, fabric features, certifications,
 * reviews (with polaroid lightbox), joy.
 *
 * @package PNZA
 */

/* ==========================================================================
   Hero
   ========================================================================== */

.pnza-about {
	background: #F5F0E8;
	color: #38392E;
	position: relative;
	overflow: clip;
}

.pnza-about__hero {
	text-align: center;
	padding: var(--sp-14) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	position: relative;
}

.pnza-about__hero-inner {
	max-width: 800px;
	margin: 0 auto;
}

.pnza-about__hero-title,
.pnza-about__hero h1 {
	font-size: var(--fs-display-lg);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	text-transform: lowercase;
	color: #000;
	max-width: 600px;
	margin: 0 auto;
}

/* ==========================================================================
   Handwrite labels - orange and tilted globally
   ========================================================================== */

.pnza-about .pnza-handwrite {
	display: inline-block;
	transform: rotate(-3deg);
	transform-origin: left center;
}

/* Vary angles per section for fun */
.pnza-about__story-header .pnza-handwrite {
	transform: rotate(2.5deg);
	transform-origin: right center;
}

.pnza-about__certs-header .pnza-handwrite {
	transform: rotate(-2deg);
	transform-origin: right center;
}

.pnza-about__fabric .pnza-handwrite {
	transform: rotate(-3.5deg);
}

.pnza-about__reviews .pnza-handwrite {
	transform: rotate(2deg);
}

.pnza-about__joy .pnza-handwrite {
	transform: rotate(-2.5deg);
}

/* ==========================================================================
   Story
   ========================================================================== */

.pnza-about__story {
	position: relative;
}

.pnza-about__story-inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	padding: var(--sp-14) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	align-items: center;
}

.pnza-about__story-header {
	position: relative;
	margin-bottom: var(--sp-4);
}

.pnza-about__story-header .pnza-handwrite {
	position: absolute;
	top: -38px;
	left: -20px;
	z-index: 1;
}

.pnza-about__story-header {
	padding-top: 12px;
}

.pnza-about__story-image {
	position: relative;
	background: #fff;
	padding: 16px 16px 16px;
	box-shadow: 2px 4px 20px rgba(0, 0, 0, 0.08);
}

.pnza-about__story-image-inner {
	position: relative;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--home-bg);
}

.pnza-about__story-image-inner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	position: relative;
	z-index: 1;
}

.pnza-about__story-caption {
	font-family: 'Amatic SC', cursive;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-eyebrow);
	color: #38392E;
	text-align: center;
	margin-top: var(--sp-2);
	position: relative;
	z-index: 4;
}

.pnza-about__story-text h2 {
	font-size: var(--fs-display-md);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-display);
	text-transform: lowercase;
	color: #000;
	margin-bottom: 0;
}

.pnza-about__story-text p {
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: #666;
	margin-bottom: var(--sp-3);
}

/* ==========================================================================
   Fabric Features (always dark)
   ========================================================================== */

.pnza-about__fabric {
	background: #000;
	color: #F5F0E8;
	padding: var(--sp-14) max(24px, calc((100vw - var(--mw-site)) / 2)) var(--sp-14);
	position: relative;
	overflow: hidden;
}

.pnza-about__fabric-title,
.pnza-about__fabric h2 {
	font-size: var(--fs-display-lg);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-tight);
	text-transform: lowercase;
	color: #F5F0E8;
	margin-bottom: var(--sp-2);
}

.pnza-about__fabric-sub {
	font-size: var(--fs-16);
	color: #888;
	line-height: var(--lh-loose);
	max-width: var(--mw-prose);
	margin-bottom: var(--sp-8);
}

.pnza-about__features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.pnza-about__feature {
	border: 1px solid #333;
	padding: 32px 24px;
	position: relative;
}

.pnza-about .pnza-tape {
	width: 140px;
}

.pnza-about__feature-icon {
	width: 64px;
	height: 64px;
	margin-bottom: var(--sp-4);
	overflow: visible;
	flex-shrink: 0;
}

.pnza-about__feature-icon svg {
	width: 64px;
	height: auto;
	fill: #C9B681;
	overflow: visible;
	clip-path: none !important;
}

.pnza-about__feature-icon svg g {
	clip-path: none !important;
}

.pnza-about__feature h3 {
	font-family: 'Amatic SC', cursive;
	font-size: var(--fs-eyebrow-lg);
	font-weight: 700;
	letter-spacing: var(--ls-eyebrow);
	line-height: var(--lh-eyebrow);
	color: #C9B681;
	text-transform: none;
	margin-bottom: var(--sp-3);
}

.pnza-about__feature p {
	font-size: var(--fs-16);
	color: #888;
	line-height: var(--lh-loose);
}

/* ==========================================================================
   Certifications
   ========================================================================== */

.pnza-about__certs {
	padding: var(--sp-14) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	text-align: center;
	background: #F5F0E8;
}

.pnza-about__certs-header {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: var(--sp-6);
}

.pnza-about__certs-title,
.pnza-about__certs h2 {
	font-size: var(--fs-display-md);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-display);
	text-transform: lowercase;
	color: #000;
	margin-bottom: 0;
}

.pnza-about__certs-grid {
	display: grid;
	grid-template-columns: repeat(4, 100px);
	gap: 32px;
	justify-content: center;
	align-items: center;
}

.pnza-about__cert {
	width: 100px;
	height: 100px;
	background: #fff !important;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
	padding: 16px;
}

.pnza-about__cert img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

.pnza-about__cert-placeholder {
	font-family: var(--font-mono);
	font-size: var(--fs-16);
	text-transform: uppercase;
	letter-spacing: var(--ls-uppercase);
	color: #aaa;
	text-align: center;
}

/* ==========================================================================
   Reviews
   ========================================================================== */

.pnza-about__reviews {
	padding: var(--sp-14) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	background: #F5F0E8;
	text-align: center;
}

.pnza-about__reviews-title,
.pnza-about__reviews h2 {
	font-size: var(--fs-display-md);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-display);
	text-transform: lowercase;
	color: #000;
	margin-bottom: var(--sp-6);
}

.pnza-about__reviews-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 32px;
	max-width: 900px;
	margin: 0 auto;
}

.pnza-about__review {
	background: #fff;
	padding: 28px 24px;
	text-align: left;
	position: relative;
}

.pnza-about__review-img {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	margin-bottom: var(--sp-4);
	cursor: pointer;
	transition: transform 0.2s ease;
	border-radius: 2px;
}

.pnza-about__review-img:hover {
	transform: scale(1.03);
}

.pnza-about__review-stars {
	color: #d9b36e;
	font-size: var(--fs-16);
	letter-spacing: 2px;
	margin-bottom: var(--sp-3);
}

.pnza-about__review-text {
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: #555;
	margin-bottom: var(--sp-4);
	font-style: italic;
}

.pnza-about__review-author {
	font-family: 'Space Mono', monospace;
	font-size: var(--fs-16);
	text-transform: uppercase;
	letter-spacing: var(--ls-uppercase);
	color: #999;
}

.pnza-about__reviews-note {
	font-family: 'Space Mono', monospace;
	font-size: var(--fs-16);
	text-transform: uppercase;
	letter-spacing: var(--ls-uppercase);
	color: #aaa;
	margin-top: var(--sp-5);
}

/* ==========================================================================
   Joy
   ========================================================================== */

.pnza-about__joy {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 60px;
	padding: var(--sp-14) max(24px, calc((100vw - var(--mw-site)) / 2)) var(--sp-14);
	align-items: center;
	background: #F5F0E8;
	position: relative;
}

.pnza-about__joy-text h2 {
	font-size: var(--fs-display-md);
	font-weight: 800;
	letter-spacing: var(--ls-tight);
	line-height: var(--lh-display);
	text-transform: lowercase;
	color: #000;
	margin-bottom: var(--sp-4);
}

.pnza-about__joy-text p {
	font-size: var(--fs-16);
	line-height: var(--lh-loose);
	color: #666;
	margin-bottom: var(--sp-3);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1099px) {
	.pnza-about__hero {
		padding: var(--sp-10) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	}

	.pnza-about__hero-title,
	.pnza-about__hero h1 {
		font-size: var(--fs-display-md);
	}

	.pnza-about__story {
		overflow: hidden;
	}

	.pnza-about__story-inner {
		grid-template-columns: 1fr;
		padding: var(--sp-10) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
		gap: var(--sp-6);
	}

	.pnza-about__story-header {
		flex-direction: column;
		gap: var(--sp-2);
	}

	.pnza-about__certs-header {
		flex-direction: column;
		gap: var(--sp-2);
	}

	.pnza-about__story-image {
		transform: rotate(-1deg) !important;
	}

	.pnza-about__story-text h2,
	.pnza-about__joy-text h2 {
		font-size: var(--fs-display-sm);
	}

	.pnza-about__certs h2,
	.pnza-about__reviews h2 {
		font-size: var(--fs-display-sm);
	}

	.pnza-about__fabric h2 {
		font-size: var(--fs-display-md);
	}

	.pnza-about__fabric {
		padding: var(--sp-10) max(24px, calc((100vw - var(--mw-site)) / 2)) var(--sp-10);
	}

	.pnza-about__features {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}

	.pnza-about__certs {
		padding: var(--sp-10) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	}

	.pnza-about__certs-grid {
		grid-template-columns: repeat(2, 100px);
	}

	.pnza-about__reviews {
		padding: var(--sp-10) max(24px, calc((100vw - var(--mw-site)) / 2)) 0;
	}

	.pnza-about__reviews-grid {
		grid-template-columns: 1fr;
		gap: var(--sp-5);
	}

	.pnza-about__joy {
		grid-template-columns: 1fr;
		padding: var(--sp-10) max(24px, calc((100vw - var(--mw-site)) / 2)) var(--sp-10);
		gap: var(--sp-6);
	}
}

/* ============================================================
   Dark Mode - About
   ============================================================ */

[data-theme="dark"] .pnza-about {
	background: var(--home-bg);
	color: #F5F0E8;
}

/* Hero */
[data-theme="dark"] .pnza-about__hero {
	background: var(--home-bg);
}

[data-theme="dark"] .pnza-about__hero-title,
[data-theme="dark"] .pnza-about__hero h1 {
	color: #F5F0E8;
}

/* Story */
[data-theme="dark"] .pnza-about__story {
	background: var(--home-bg);
}

[data-theme="dark"] .pnza-about__story-image {
	background: #fff;
}

[data-theme="dark"] .pnza-about__story-caption {
	color: #38392E;
}

[data-theme="dark"] .pnza-about__story-text h2 {
	color: #F5F0E8;
}

[data-theme="dark"] .pnza-about__story-text p {
	color: #888;
}

/* Fabric section stays #000 always - no override needed */

/* Certifications */
[data-theme="dark"] .pnza-about__certs {
	background: var(--home-bg);
}

[data-theme="dark"] .pnza-about__certs-title,
[data-theme="dark"] .pnza-about__certs h2 {
	color: #F5F0E8;
}

[data-theme="dark"] .pnza-about__cert {
	background: #fff !important;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
}

/* Reviews */
[data-theme="dark"] .pnza-about__reviews {
	background: var(--home-bg);
}

[data-theme="dark"] .pnza-about__reviews-title,
[data-theme="dark"] .pnza-about__reviews h2 {
	color: #F5F0E8;
}

[data-theme="dark"] .pnza-about__review {
	background: #fff;
	color: #38392E;
}

[data-theme="dark"] .pnza-about__review-stars {
	color: #d9b36e;
}

[data-theme="dark"] .pnza-about__review-text {
	color: #555;
}

[data-theme="dark"] .pnza-about__review-author {
	color: #999;
}

/* Lightbox polaroid stays white */

/* Joy */
[data-theme="dark"] .pnza-about__joy {
	background: var(--home-bg);
}

[data-theme="dark"] .pnza-about__joy-text h2 {
	color: #F5F0E8;
}

[data-theme="dark"] .pnza-about__joy-text p {
	color: #888;
}