/**
 * Making-of Page Styles
 *
 * Specific styles for the Making-of page based on Figma design
 */

/* ==========================================================================
   Hero Section - Uses Homepage Hero Styles
   ========================================================================== */
/* Making-of hero inherits all styles from layout/hero.css */
/* Custom alignment options for hero content */

.hero-align-center .hero-container {
	text-align: center;
	align-items: center;
}

.hero-align-right .hero-container {
	text-align: right;
	align-items: flex-end;
}

/* ==========================================================================
   Image with Claim Section
   ========================================================================== */
.making-of-image-claim {
	background: #FFFFFF;
	padding: 312px 48px 116px;
}

.making-of-image-claim__container {
	max-width: 1344px;
	margin: 0 auto;
	position: relative;
}

.claim-image {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
	position: relative;
}

.claim-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* Claims Overlay - Positioned on top of image */
.claim-text {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translate(-50%, -50%);
	display: flex;
	flex-direction: column;
	gap: 26px;
	z-index: 10;
}

.claim-item {
	font-family: 'Ingra', serif;
	font-weight: 700;
	font-size: 78px;
	line-height: 1.2;
	color: #F6F4F2;
	text-align: left;
	padding: 1px 25px;
	border-radius: 4px;
	background-color: #6837A0;
	box-shadow: -5px 7px 9px 0px rgba(0, 0, 0, 0.25);
	white-space: nowrap;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	transform: rotate(-4deg);
	transform-origin: center center;
	width: fit-content;
}

/* ==========================================================================
   Image Collage Section - Figma Exact Layout
   ========================================================================== */
.making-of-collage {
	background: #FFFFFF;
	padding: 80px 48px;
	position: relative;
}

.making-of-collage__container {
	max-width: 1344px;
	margin: 0 auto;
	position: relative;
}

/* Title overlay positioned at top-left */
.collage-title {
	position: absolute;
	top: 45px;
	left: 129px;
	width: 447px;
	height: 320px;
	z-index: 10;
	font-family: 'Ingra', serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 1.25em;
	letter-spacing: 0.02em;
	color: #6837A0;
	text-align: right;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Grid container with absolute positioning for exact Figma layout */
.collage-grid {
	position: relative;
	width: 1296px;
	height: 4447px;
	/* Total height from Figma */
	margin: 0 auto;
}

.collage-item {
	position: absolute;
	overflow: hidden;
	border-radius: 12px;
	transition: transform 0.3s ease;
}

.collage-item:hover {
	transform: scale(1.02);
	z-index: 5;
}

.collage-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Specific positioning for each image based on Figma coordinates */
.collage-item--pos-1 {
	top: 0px;
	right: 0px;
	width: 672px;
	height: 996px;
}

.collage-item--pos-2 {
	top: 438px;
	left: 0px;
	width: 576px;
	height: 837px;
}

.collage-item--pos-3 {
	top: 1047px;
	left: 624px;
	width: 288px;
	height: 399px;
}

.collage-item--pos-4 {
	top: 1463px;
	right: 0px;
	width: 648px;
	height: 399px;
}

.collage-item--pos-5 {
	top: 1463px;
	left: 336px;
	width: 288px;
	height: 399px;
}

.collage-item--pos-6 {
	top: 1886px;
	left: 336px;
	width: 288px;
	height: 396px;
}

.collage-item--pos-7 {
	top: 1886px;
	left: 648px;
	width: 504px;
	height: 815px;
}

.collage-item--pos-8 {
	top: 2306px;
	left: 336px;
	width: 288px;
	height: 432px;
}

.collage-item--pos-9 {
	top: 2725px;
	left: 648px;
	width: 312px;
	height: 432px;
}

.collage-item--pos-10 {
	top: 2078px;
	left: 0px;
	width: 312px;
	height: 431px;
}

.collage-item--pos-11 {
	top: 3181px;
	left: 648px;
	width: 312px;
	height: 429px;
}

.collage-item--pos-12 {
	top: 2763px;
	left: 96px;
	width: 528px;
	height: 384px;
}

.collage-item--pos-13 {
	top: 2725px;
	right: 0px;
	width: 312px;
	height: 286px;
}

.collage-item--pos-14 {
	top: 3634px;
	left: 648px;
	width: 552px;
	height: 730px;
}

.collage-item--pos-15 {
	top: 3287px;
	left: 318px;
	width: 306px;
	height: 422px;
}

.collage-item--pos-16 {
	top: 3733px;
	left: 48px;
	width: 576px;
	height: 714px;
}

.collage-item--pos-17 {
	top: 3035px;
	right: 0px;
	width: 312px;
	height: 467px;
}

/* Fallback placeholder */
.collage-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-size: 48px;
	background: #6837A0;
}

/* ==========================================================================
   Equal Two Column Section (1/2 - 1/2) - Figma Design
   ========================================================================== */
.equal-columns {
	background: #FFFFFF;
	padding: 116px 120px;
}

.equal-columns .two-column-container {
	max-width: 1440px;
	margin: 0 auto;
}

.equal-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: stretch;
	height: 407px; /* Total height minus padding from Figma */
}

.equal-columns .column-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}

.equal-columns .column-text .text-wrapper {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.equal-columns .section-title-purple {
	font-family: 'Ingra', serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 1.25em;
	letter-spacing: 0.02em;
	color: #6837A0;
	margin: 0;
	text-align: left;
}

.equal-columns .column-image {
	background-color: var(--off-white, #F6F4F2);
	border-radius: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.equal-columns .column-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.equal-columns .image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--off-white, #F6F4F2);
	color: #999;
	font-size: 24px;
}

/* ==========================================================================
   Asymmetric Two Column Section (1/3 - 2/3) - Figma Design
   ========================================================================== */
.asymmetric-columns {
	padding: 48px 72px;
}

.asymmetric-columns .two-column-container {
	max-width: 1440px;
	margin: 0 auto;
}

.asymmetric-grid {
	display: grid;
	grid-template-columns: 384px 1fr;
	gap: 48px;
	align-items: stretch;
	height: 530px;
}

.column-narrow {
	background-color: var(--off-white, #F6F4F2);
	border-radius: 10px;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.narrow-image {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.narrow-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.image-placeholder {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E0E0E0;
	color: #999;
	font-size: 24px;
}

.column-wide {
	background-color: #6837A0;
	border-radius: 12px;
	position: relative;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.content-wrapper {
	padding: 75px 60px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	width: 744px;
}

.column-title-purple {
	font-family: 'Ingra', serif;
	font-weight: 700;
	font-size: 64px;
	line-height: 1.25em;
	letter-spacing: 0.02em;
	color: #F6F4F2;
	margin: 0;
	height: 73px;
	display: flex;
	align-items: center;
}

.column-subtitle {
	font-family: 'Ingra', serif;
	font-weight: 400;
	font-size: 20px;
	line-height: 31px; /* 155% */
	letter-spacing: 0.4px;
	color: var(--Off-White, #F6F4F2);
	margin: 0;
}

.content-image {
	width: 100%;
	border-radius: 12px;
	overflow: hidden;
}

.content-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ==========================================================================
   Section Title Styles
   ========================================================================== */
.section-title-purple {
	font-family: 'Ingra', serif;
	font-weight: 700;
	font-size: 36px;
	line-height: 1.47;
	letter-spacing: 0.01em;
	color: #6837A0;
	margin: 0 0 36px 0;
	text-align: left;
	width: 100%;
}

/* ==========================================================================
   Collage Responsive Design
   ========================================================================== */
@media (max-width: 1440px) {
	.making-of-collage__container {
		max-width: 100%;
		padding: 0 24px;
	}

	.collage-grid {
		width: 100%;
		height: auto;
		transform: scale(0.9);
		transform-origin: top center;
	}

	.collage-title {
		font-size: 56px;
		width: 400px;
		height: 280px;
	}
}

@media (max-width: 1200px) {
	.collage-grid {
		transform: scale(0.75);
	}

	.collage-title {
		font-size: 48px;
		width: 350px;
		height: 240px;
		top: 35px;
		left: 100px;
	}
}

@media (max-width: 992px) {
	.making-of-collage {
		padding: 60px 24px;
	}

	.collage-grid {
		position: static;
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
		transform: none;
		width: 100%;
		height: auto;
	}

	.collage-item {
		position: static;
		width: 100% !important;
		height: 250px !important;
		grid-column: span 1;
	}

	.collage-item--pos-1,
	.collage-item--pos-2,
	.collage-item--pos-7,
	.collage-item--pos-14,
	.collage-item--pos-16 {
		grid-column: span 2;
		height: 300px !important;
	}

	.collage-title {
		position: static;
		width: 100%;
		height: auto;
		font-size: 36px;
		text-align: center;
		margin-bottom: 40px;
		display: block;
	}
}

@media (max-width: 768px) {
	.collage-grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.collage-item,
	.collage-item--pos-1,
	.collage-item--pos-2,
	.collage-item--pos-7,
	.collage-item--pos-14,
	.collage-item--pos-16 {
		grid-column: span 1;
		height: 200px !important;
	}

	.collage-title {
		font-size: 28px;
		margin-bottom: 30px;
	}
}

@media (max-width: 480px) {
	.making-of-collage {
		padding: 40px 16px;
	}

	.collage-item {
		height: 180px !important;
	}

	.collage-title {
		font-size: 24px;
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   Responsive Design - Other Sections
   ========================================================================== */
@media (max-width: 1200px) {
	.making-of-image-claim {
		padding: 60px 40px;
	}

	.claim-item {
		font-size: 64px;
		padding: 1px 20px;
	}

	.claim-text {
		gap: 22px;
	}

	.asymmetric-columns {
		padding: 40px 60px;
	}
	
	.asymmetric-grid {
		grid-template-columns: 320px 1fr;
		gap: 40px;
		height: auto;
		min-height: 450px;
	}
	
	.content-wrapper {
		padding: 60px 50px;
		width: auto;
	}
	
	.column-title-purple {
		font-size: 52px;
		height: auto;
	}
	
	.equal-columns {
		padding: 80px 60px;
	}
	
	.equal-grid {
		gap: 40px;
		height: auto;
	}
	
	.equal-columns .section-title-purple {
		font-size: 52px;
	}

	.collage-grid {
		grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
		gap: 20px;
	}

	.asymmetric-grid {
		gap: 60px;
	}
}

@media (max-width: 992px) {
	.making-of-image-claim {
		padding: 50px 30px;
	}

	.claim-item {
		font-size: 52px;
		padding: 1px 18px;
	}

	.claim-text {
		gap: 20px;
	}

	.asymmetric-columns {
		padding: 40px 30px;
	}
	
	.asymmetric-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		height: auto;
	}
	
	.column-narrow {
		order: 2;
	}
	
	.column-wide {
		order: 1;
	}
	
	.content-wrapper {
		padding: 40px 30px;
		width: auto;
	}
	
	.column-title-purple {
		font-size: 44px;
	}
	
	.column-subtitle {
		font-size: 18px;
	}
	
	.equal-columns {
		padding: 60px 30px;
	}
	
	.equal-grid {
		grid-template-columns: 1fr;
		gap: 30px;
		height: auto;
	}
	
	.equal-columns .section-title-purple {
		font-size: 44px;
	}

	.making-of-collage {
		padding: 60px 30px;
	}

	.collage-grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 16px;
	}

	.collage-item--large,
	.collage-item--wide {
		grid-column: span 1;
	}

	.collage-item--tall {
		grid-row: span 1;
	}

	.asymmetric-grid {
		grid-template-columns: 1fr;
		gap: 40px;
	}

	.column-narrow {
		position: static;
	}

	.column-title-purple,
	.section-title-purple {
		font-size: 32px;
	}
}

@media (max-width: 768px) {
	.making-of-image-claim {
		padding: 40px 20px;
	}

	.claim-item {
		font-size: 40px;
		padding: 1px 15px;
	}

	.claim-text {
		gap: 18px;
	}

	.making-of-collage {
		padding: 40px 20px;
	}

	.collage-grid {
		gap: 12px;
	}

	.collage-placeholder {
		font-size: 32px;
	}

	.asymmetric-columns {
		padding: 30px 20px;
	}
	
	.content-wrapper {
		padding: 30px 20px;
	}
	
	.column-title-purple {
		font-size: 36px;
	}
	
	.column-subtitle {
		font-size: 16px;
		line-height: 1.5em;
	}
	
	.equal-columns {
		padding: 40px 20px;
	}
	
	.equal-columns .section-title-purple {
		font-size: 36px;
	}
	
	.section-title-purple {
		font-size: 28px;
		margin-bottom: 24px;
	}

	.content-wrapper {
		gap: 30px;
	}
}

@media (max-width: 480px) {
	.making-of-image-claim {
		padding: 30px 16px;
	}

	.making-of-image-claim__container {
		gap: 30px;
	}

	.claim-item {
		font-size: 32px;
		padding: 1px 12px;
	}

	.claim-text {
		gap: 15px;
	}

	.making-of-collage {
		padding: 30px 16px;
	}

	.collage-grid {
		grid-template-columns: 1fr;
		gap: 10px;
	}

	.collage-item--large,
	.collage-item--wide,
	.collage-item--tall {
		grid-column: span 1;
		grid-row: span 1;
		min-height: 150px;
	}

	.asymmetric-columns {
		padding: 25px 16px;
	}
	
	.content-wrapper {
		padding: 25px 16px;
		gap: 20px;
	}
	
	.column-title-purple {
		font-size: 28px;
	}
	
	.column-subtitle {
		font-size: 14px;
		line-height: 1.4em;
	}
	
	.equal-columns {
		padding: 30px 16px;
	}
	
	.equal-columns .section-title-purple {
		font-size: 28px;
	}
	
	.section-title-purple {
		font-size: 24px;
		margin-bottom: 20px;
	}
}