/**
 * In Madra - Madra Story (About) Page
 * Layout follows Figma "Madra Story". Full-bleed sections, max width 1920px.
 */

.im-story-page {
	background: #FFFFFF;
	color: #1C1B18;
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	overflow-x: hidden;
}

.im-story-page img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ── 1. Hero ─────────────────────────────────────────────── */
.im-story-hero {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	height: min(100vh, 900px);
	min-height: 580px;
	background-size: cover;
	background-position: center;
	color: #FFFFFF;
	overflow: hidden;
}

.im-story-hero-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.12) 0%, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.18) 100%);
	pointer-events: none;
}

.im-story-hero-inner {
	position: relative;
	height: 100%;
	padding: 0 12px;
}

/* 1.0 Hero Breadcrumbs (Matching Attached 1) */
.im-story-breadcrumbs-bar {
	position: absolute;
	top: clamp(105px, 12.5vh, 125px);
	left: 12px;
	z-index: 10;
}

.im-story-breadcrumbs {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--im-font-body, 'Stack Sans Text', 'Plus Jakarta Sans', sans-serif);
	font-size: 0.72rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.im-story-breadcrumbs .im-bc-link {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s ease;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.im-story-breadcrumbs .im-bc-link:hover {
	color: #FFFFFF;
}

.im-story-breadcrumbs .im-bc-sep {
	color: rgba(255, 255, 255, 0.5);
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.im-story-breadcrumbs .im-bc-current {
	color: #FFFFFF;
	font-weight: 500;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

/* 1.1 Pure White Script Title (Figma Match) */
.im-story-hero-title {
	position: absolute;
	top: clamp(155px, 18vh, 185px);
	left: 12px;
	margin: 0;
	font-family: var(--im-font-script, 'Nothing You Could Do', cursive);
	font-size: clamp(2.75rem, 5.8vw, 6.25rem);
	font-weight: 400;
	line-height: 0.95;
	color: #FFFFFF !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
	transform: rotate(-3.5deg);
	transform-origin: left center;
	display: flex;
	flex-direction: column;
	gap: 0.15em;
	max-width: 14ch;
	z-index: 2;
	pointer-events: none;
}

.im-story-hero-title .im-hero-title-l2 {
	padding-left: 1.2ch;
}

/* 1.2 Top Right Floating Photo Card (Enlarged to match Figma) */
.im-story-hero-card-tr {
	position: absolute;
	top: 15%;
	right: 12px;
	width: clamp(210px, 18.5vw, 340px);
	aspect-ratio: 195 / 245;
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.32);
	border-radius: 2px;
	z-index: 2;
	overflow: hidden;
	transition: transform 0.3s ease;
}

.im-story-hero-card-tr:hover {
	transform: translateY(-4px);
}

.im-story-hero-card-tr img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 1.3 Bottom Left Polaroid Card with Tape & Caption (Enlarged to match Figma) */
.im-story-hero-polaroid-wrap {
	position: absolute;
	left: 12px;
	bottom: 3.5rem;
	display: flex;
	align-items: flex-end;
	gap: 1.75rem;
	z-index: 2;
	max-width: 680px;
}

.im-story-hero-polaroid {
	position: relative;
	width: clamp(230px, 21.5vw, 380px);
	flex-shrink: 0;
	filter: drop-shadow(0 14px 35px rgba(0, 0, 0, 0.35));
	padding-top: 14px;
}

/* Paper Masking Tape / Sticker */
.im-story-polaroid-tape {
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%) rotate(-1.5deg);
	width: clamp(75px, 8vw, 110px);
	height: clamp(22px, 2.2vw, 30px);
	z-index: 5;
	pointer-events: none;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.22));
}

.im-story-polaroid-tape svg {
	width: 100%;
	height: 100%;
	display: block;
}

/* Polaroid White Frame - Always surrounds any replaced photo */
.im-story-polaroid-frame {
	position: relative;
	background: #FFFFFF;
	padding: clamp(8px, 0.8vw, 12px) clamp(8px, 0.8vw, 12px) clamp(10px, 1.2vw, 16px) clamp(8px, 0.8vw, 12px);
	border-radius: 2px;
	box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.15);
	overflow: hidden;
}

.im-story-polaroid-frame img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	display: block;
}

.im-story-hero-polaroid-desc {
	margin: 0;
	max-width: 290px;
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.75rem, 0.88vw, 0.875rem);
	font-weight: 400;
	line-height: 1.6;
	color: #FFFFFF !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	padding-bottom: 0.5rem;
}

/* 1.4 Bottom Right Poetic Script Quote (Figma Attached 2) */
.im-story-hero-quote {
	position: absolute;
	right: 12px;
	bottom: 15%;
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
	font-family: var(--im-font-script, 'Nothing You Could Do', cursive);
	font-size: clamp(1.25rem, 2.2vw, 2.25rem);
	line-height: 1.15;
	color: #FFFFFF !important;
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.25);
	transform: rotate(-3deg);
	z-index: 2;
	pointer-events: none;
}

.im-story-hero-quote p {
	margin: 0;
	color: #FFFFFF !important;
}

.im-story-hero-quote .im-quote-part2 {
	padding-left: 1.8ch;
}

/* ── 2. Intro editorial (Figma 1416x1228, pure white background, 12px lateral margin) ── */
.im-story-intro {
	background: #FFFFFF;
	padding: clamp(3.5rem, 6vw, 6.5rem) 0;
}

.im-story-intro-container {
	width: 100%;
	max-width: var(--im-container-max, 1440px);
	margin: 0 auto;
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.im-story-intro-grid {
	display: grid;
	grid-template-columns: minmax(180px, 1fr) minmax(340px, 2.2fr) minmax(180px, 1fr);
	column-gap: clamp(1.5rem, 3.5vw, 3rem);
	row-gap: 2.5rem;
	align-items: start;
}

/* Left Column */
.im-story-intro-col-left {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 3.5vw, 3.5rem);
}

.im-story-intro-text p {
	margin: 0;
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.75rem, 0.9vw, 0.875rem);
	line-height: 1.65;
	color: #1C1B18;
}

.im-story-intro-img-wrap {
	width: 100%;
}

.im-story-intro-col-left .im-story-intro-img-wrap img {
	width: 100%;
	aspect-ratio: 227 / 233;
	object-fit: cover;
	display: block;
}

/* Center Column (Tall Dominant Image) */
.im-story-intro-col-center {
	width: 100%;
}

.im-story-intro-center-fig {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
}

.im-story-intro-center-fig img {
	width: 100%;
	aspect-ratio: 559 / 835;
	object-fit: cover;
	display: block;
}

/* Caption Below Center Image: generous gap & refined body typography (Attached 4 Match) */
.im-story-intro-center-fig figcaption,
.im-story-intro-center-caption {
	margin-top: clamp(2rem, 3vw, 2.75rem); /* ~44px generous gap matching Attached 4 */
	max-width: 520px;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	font-family: var(--im-font-body, 'Stack Sans Text', 'Plus Jakarta Sans', sans-serif);
	font-size: 0.875rem; /* ~14px refined body size matching Attached 4 */
	font-weight: 400;
	line-height: 1.65;
	color: #1C1B18;
}

/* Right Column (Staggered Down) */
.im-story-intro-col-right {
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 3.5vw, 3.5rem);
	padding-top: clamp(5.5rem, 11vw, 12rem);
}

.im-story-intro-col-right .im-story-intro-img-wrap img {
	width: 100%;
	aspect-ratio: 228 / 327;
	object-fit: cover;
	display: block;
}

/* ── 3. Wide feature (Figma: 1440x959, 12px lateral padding) ─────── */
.im-story-wide {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	aspect-ratio: 1440 / 959;
	min-height: 520px;
	overflow: hidden;
}

.im-story-wide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.im-story-wide-text {
	position: absolute;
	top: 32px;
	margin: 0;
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.75rem, 0.88vw, 0.875rem);
	font-weight: 300 !important;
	line-height: 1.65;
	color: #FFFFFF !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
	z-index: 2;
}

.im-story-wide-text-left {
	left: 12px;
	max-width: 224px;
	font-weight: 300 !important;
	text-align: left;
}

.im-story-wide-text-right {
	right: 12px;
	max-width: clamp(280px, 28vw, 420px);
	font-weight: 300 !important;
	text-align: left;
}

/* ── 4. Infinite Auto-Slide Gallery (Figma Attached 3 Match) ─ */
.im-story-gallery-section,
.im-story-tri {
	max-width: 100%;
	margin: 0 auto;
	padding: clamp(3rem, 5vw, 4.5rem) 0 clamp(4rem, 6vw, 5.5rem);
	background: #FFFFFF;
	box-sizing: border-box;
	overflow: hidden;
}

.im-story-gallery-header {
	width: 100%;
	max-width: 1920px;
	margin: 0 auto clamp(1.5rem, 2.5vw, 2.25rem);
	padding: 0 12px;
	box-sizing: border-box;
}

.im-story-gallery-title,
.im-story-tri-title {
	margin: 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--im-color-border, #E6E2DA);
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.75rem, 0.85vw, 0.875rem);
	font-weight: 300 !important;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: #1C1B18;
}

/* Infinite Marquee Track */
.im-story-gallery-marquee-wrap {
	position: relative;
	width: 100%;
	overflow: hidden;
	user-select: none;
}

.im-story-gallery-track {
	display: flex;
	width: max-content;
	will-change: transform;
	animation: imStoryGallerySlide 42s linear infinite;
}

.im-story-gallery-marquee-wrap:hover .im-story-gallery-track,
.im-story-gallery-marquee-wrap:focus-within .im-story-gallery-track {
	animation-play-state: paused;
}

.im-story-gallery-set {
	display: flex;
	gap: 8px;
	flex-shrink: 0;
	padding-right: 8px;
}

.im-story-gallery-item,
.im-story-tri-item {
	margin: 0;
	display: flex;
	flex-direction: column;
	width: clamp(260px, 26vw, 400px);
	flex-shrink: 0;
}

.im-story-gallery-img-wrap {
	position: relative;
	width: 100%;
	aspect-ratio: 3 / 4;
	overflow: hidden;
	background: #F4F1EA;
}

.im-story-gallery-img-wrap img,
.im-story-tri-item img {
	width: 100%;
	height: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.im-story-gallery-item:hover .im-story-gallery-img-wrap img {
	transform: scale(1.03);
}

.im-story-gallery-item figcaption,
.im-story-tri-item figcaption {
	padding: 0.65rem 0 0;
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: 0.6875rem;
	font-weight: 300 !important;
	letter-spacing: 0.05em;
	color: #76746F;
	text-transform: uppercase;
}

/* Smooth continuous hardware-accelerated translation */
@keyframes imStoryGallerySlide {
	0% {
		transform: translate3d(0, 0, 0);
	}
	100% {
		transform: translate3d(-50%, 0, 0);
	}
}

/* ── 5. Closing banner (Figma Match) ─────────────────────── */
.im-story-close {
	position: relative;
	max-width: 1920px;
	margin: 0 auto;
	min-height: 820px;
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	padding: clamp(3rem, 5vw, 4.5rem) 12px clamp(4.5rem, 8vw, 7.5rem);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
}

.im-story-close-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.18) 0%, rgba(0, 0, 0, 0.05) 45%, rgba(0, 0, 0, 0.22) 100%);
	pointer-events: none;
	z-index: 1;
}

/* 5.1 Top Section Title (Figma Attached 4: Line on top, right-aligned, font-weight 300) */
.im-story-close-top {
	position: relative;
	z-index: 2;
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	border-top: 1px solid rgba(255, 255, 255, 0.35);
	padding-top: 1.25rem;
	margin-bottom: clamp(2rem, 3.5vw, 3.5rem);
	box-sizing: border-box;
}

.im-story-close-top-text {
	margin: 0;
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.6875rem, 0.78vw, 0.8125rem);
	font-weight: 300 !important;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: #FFFFFF !important;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.45);
	text-align: right;
}

/* 5.2 Editorial 2-Column Grid Container */
.im-story-close-container {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 1220px;
	margin: 0 auto;
}

.im-story-close-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(280px, 1fr));
	column-gap: clamp(2.5rem, 6.5vw, 7rem);
	row-gap: 2.5rem;
	align-items: start;
}

/* 5.3 Asymmetric Stagger (Figma Match: Left card is lower, Right card starts higher) */
.im-story-close-card {
	position: relative;
	width: 100%;
	max-width: 480px;
}

.im-story-close-card-left {
	margin-right: auto;
	margin-top: clamp(2.5rem, 5.5vw, 5.5rem);
}

.im-story-close-card-right {
	margin-left: auto;
	margin-top: 0;
}

/* 5.4 Card Link & Header (Title + CTA + Thin Line) */
.im-story-close-card-link {
	display: block;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}

.im-story-close-card-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	padding-bottom: 0.65rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.65);
	margin-bottom: 0;
	transition: border-color 0.3s ease;
}

.im-story-close-card-link:hover .im-story-close-card-header {
	border-bottom-color: #FFFFFF;
}

.im-story-close-card-title {
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.75rem, 0.88vw, 0.875rem);
	font-weight: 500;
	letter-spacing: 0.03em;
	color: #FFFFFF !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
}

.im-story-close-card-cta {
	font-family: var(--im-font-body, 'Plus Jakarta Sans', sans-serif);
	font-size: clamp(0.625rem, 0.72vw, 0.6875rem);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #FFFFFF !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.35);
	transition: transform 0.3s ease;
}

.im-story-close-card-link:hover .im-story-close-card-cta {
	transform: translateX(4px);
}

/* 5.5 Card Image Box */
.im-story-close-card-img-wrap {
	width: 100%;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: rgba(0, 0, 0, 0.1);
	box-shadow: 0 14px 38px rgba(0, 0, 0, 0.28);
}

.im-story-close-card-img-wrap img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.75s cubic-bezier(0.16, 1, 0.3, 1);
}

.im-story-close-card-link:hover .im-story-close-card-img-wrap img {
	transform: scale(1.035);
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
	.im-story-hero {
		height: auto;
		min-height: 640px;
		padding-bottom: 2.5rem;
	}

	.im-story-hero-inner {
		padding: 0 12px;
	}

	.im-story-breadcrumbs-bar {
		top: 95px;
		left: 12px;
	}

	.im-story-hero-title {
		left: 12px;
		top: 135px;
		font-size: 2.4rem;
	}

	.im-story-hero-card-tr {
		width: clamp(140px, 32vw, 190px);
		right: 12px;
		top: 10%;
	}

	.im-story-hero-polaroid-wrap {
		left: 12px;
		bottom: 7.5rem;
		gap: 1rem;
		max-width: calc(100% - 24px);
	}

	.im-story-hero-polaroid {
		width: clamp(160px, 42vw, 240px);
	}

	.im-story-hero-polaroid-desc {
		font-size: 0.75rem;
		max-width: 220px;
	}

	.im-story-hero-quote {
		right: 12px;
		bottom: 1.75rem;
		font-size: 1.15rem;
		gap: 0.4rem;
	}

	.im-story-intro {
		padding: 3rem 0 2.5rem;
	}

	.im-story-intro-container {
		padding-left: 12px;
		padding-right: 12px;
	}

	.im-story-intro-grid {
		grid-template-columns: 1fr;
		row-gap: 2.5rem;
	}

	.im-story-intro-col-right {
		padding-top: 0;
	}

	.im-story-intro-center-fig img {
		max-width: 480px;
		margin: 0 auto;
	}

	.im-story-intro-col-left .im-story-intro-img-wrap img,
	.im-story-intro-col-right .im-story-intro-img-wrap img {
		max-width: 320px;
	}

	.im-story-wide {
		aspect-ratio: 4 / 5;
		min-height: 480px;
	}

	.im-story-wide-text {
		font-size: 0.75rem;
		line-height: 1.55;
	}

	.im-story-wide-text-left {
		left: 12px;
		top: 1.5rem;
		max-width: calc(100% - 24px);
	}

	.im-story-wide-text-right {
		right: 12px;
		top: auto;
		bottom: 1.5rem;
		max-width: calc(100% - 24px);
		text-align: left;
	}

	.im-story-gallery-section,
	.im-story-tri {
		padding: 2.5rem 0 3rem;
	}

	.im-story-gallery-item,
	.im-story-tri-item {
		width: clamp(210px, 58vw, 280px);
	}

	.im-story-close {
		min-height: auto;
		padding: 3rem 12px 4rem;
	}

	.im-story-close-container {
		padding-left: 0;
		padding-right: 0;
	}

	.im-story-close-top {
		margin-bottom: 2rem;
	}

	.im-story-close-grid {
		grid-template-columns: 1fr;
		row-gap: 2.75rem;
		max-width: 440px;
		margin: 0 auto;
	}

	.im-story-close-card-left,
	.im-story-close-card-right {
		margin-top: 0;
		max-width: 100%;
	}
}