/* ============================================================
   Facility Gallery — Real Manufacturing Photos
   Matches sonamanaturals.com design system
   ============================================================ */

:root {
	--facility-overlay: linear-gradient(0deg, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.15) 60%, rgba(0,0,0,0.05) 100%);
	--facility-radius: 12px;
	--facility-transition: 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ============================================================
   FACILITY HERO BANNER (Factory Exterior)
   ============================================================ */
.facility-hero-banner {
	position: relative;
	width: 100%;
	min-height: 380px;
	background-size: cover;
	background-position: center 25%;
	background-repeat: no-repeat;
	border-radius: var(--facility-radius);
	overflow: hidden;
	margin-bottom: 2rem;
}
.facility-hero-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(17,17,17,0.65) 0%, rgba(17,17,17,0.1) 50%, rgba(17,17,17,0.0) 100%);
	z-index: 1;
}
.facility-hero-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 2rem 2.5rem;
	z-index: 2;
	color: #FFFFFF;
}
.facility-hero-overlay h3 {
	color: #FFFFFF;
	margin-bottom: 0.35rem;
	font-size: clamp(1.25rem, 3vw, 1.75rem);
}
.facility-hero-overlay p {
	opacity: 0.85;
	font-size: 0.9rem;
	margin: 0;
}

/* ============================================================
   PHOTO CARD (Used in Manufacturing Section & Gallery)
   ============================================================ */
.photo-card {
	position: relative;
	border-radius: var(--facility-radius);
	overflow: hidden;
	background: var(--color-white);
	box-shadow: 0 2px 12px rgba(0,0,0,0.07);
	transition: transform var(--facility-transition), box-shadow var(--facility-transition);
	cursor: pointer;
	aspect-ratio: 4 / 3;
}
.photo-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 30px rgba(0,0,0,0.13);
}
.photo-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.photo-card:hover img {
	transform: scale(1.06);
}
.photo-card .card-label {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.25rem 1rem 1rem;
	background: linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.7) 100%);
	color: #FFFFFF;
	z-index: 2;
}
.photo-card .card-label h4 {
	color: #FFFFFF;
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.2rem;
	line-height: 1.3;
}
.photo-card .card-label span {
	font-size: 0.78rem;
	opacity: 0.75;
	display: block;
}

/* wide variant — 2x width in grid */
.photo-card.photo-card-wide {
	aspect-ratio: 2 / 1;
}
/* tall variant */
.photo-card.photo-card-tall {
	aspect-ratio: 3 / 4;
}

/* ============================================================
   PHOTO GALLERY GRID (Inside Our Facility)
   ============================================================ */
.facility-gallery {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1rem;
}
@media (max-width: 1024px) {
	.facility-gallery {
		grid-template-columns: repeat(3, 1fr);
	}
}
@media (max-width: 768px) {
	.facility-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.75rem;
	}
}
@media (max-width: 480px) {
	.facility-gallery {
		grid-template-columns: 1fr 1fr;
		gap: 0.5rem;
	}
}

/* ============================================================
   MACHINE SHOWCASE GRID (Homepage Manufacturing Section)
   ============================================================ */
.machine-showcase {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}
@media (max-width: 900px) {
	.machine-showcase {
		grid-template-columns: repeat(2, 1fr);
	}
}
@media (max-width: 540px) {
	.machine-showcase {
		grid-template-columns: 1fr;
	}
}
.machine-showcase .photo-card {
	aspect-ratio: 4 / 3;
}

/* ============================================================
   SECTION LABEL BADGE
   ============================================================ */
.facility-badge {
	display: inline-block;
	background: var(--color-primary-light);
	color: var(--color-primary);
	padding: 0.3rem 0.9rem;
	border-radius: 20px;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-bottom: 0.5rem;
}

/* ============================================================
   UTILITY GRID (Infrastructure photos)
   ============================================================ */
.utility-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1rem;
}
.utility-grid .photo-card {
	aspect-ratio: 4 / 3;
}

/* ============================================================
   TWO-COLUMN PHOTO + TEXT LAYOUT (Service Pages)
   ============================================================ */
.photo-text-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2.5rem;
	align-items: center;
	margin-bottom: 3rem;
}
.photo-text-row.reverse .photo-col {
	order: 1;
}
.photo-text-row.reverse .text-col {
	order: 0;
}
.photo-text-row .photo-col img {
	width: 100%;
	border-radius: var(--facility-radius);
	box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
@media (max-width: 768px) {
	.photo-text-row {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}
	.photo-text-row.reverse .photo-col,
	.photo-text-row.reverse .text-col {
		order: 0;
	}
}

/* ============================================================
   FULL-WIDTH PHOTO STRIP (for interior shots)
   ============================================================ */
.photo-strip {
	width: 100%;
	border-radius: var(--facility-radius);
	overflow: hidden;
	margin: 2rem 0;
	box-shadow: 0 2px 16px rgba(0,0,0,0.06);
}
.photo-strip img {
	width: 100%;
	display: block;
}

/* ============================================================
   HERO BACKGROUND OVERLAY (Subtle factory bg behind hero)
   ============================================================ */
.hero-with-facility-bg {
	position: relative;
	overflow: hidden;
}
.hero-with-facility-bg::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	opacity: 0.08;
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}

/* ============================================================
   LIGHTBOX TRIGGER (for future lightbox enhancement)
   ============================================================ */
.photo-card::after {
	content: '🔍';
	position: absolute;
	top: 0.75rem;
	right: 0.75rem;
	font-size: 1rem;
	opacity: 0;
	transition: opacity 0.25s ease;
	z-index: 3;
	filter: drop-shadow(0 1px 3px rgba(0,0,0,0.4));
}
.photo-card:hover::after {
	opacity: 1;
}

/* ============================================================
   SECTION ANCHOR SPACER
   ============================================================ */
.section-space {
	padding: 60px 0;
}
@media (max-width: 768px) {
	.section-space {
		padding: 40px 0;
	}
}

/* ============================================================
   SECTION META LINE (small tag above heading)
   ============================================================ */
.section-meta-tag {
	color: var(--color-gold);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 0.4rem;
	display: block;
}