/* =============================================================
 * SECTION LOOKBOOK PRO — tokenized to design contract.
 * Grid layout: avatars (left) + main hero image (center) +
 * heading/product card/nav (right). Scenes switch by JS toggle.
 *
 * Section-local var:
 *   --lkpro-hero-radius — 28px curvature là intentional brand
 *   curvature, vượt khỏi --radius-* scale (xl=16, pill=999).
 * ============================================================= */

.section_lookbook_pro {
	--lkpro-hero-radius: 28px;

	padding: var(--section-py-lg) 0;
	min-height: 740px;
	box-sizing: border-box;
}
.section_lookbook_pro > .container {
	height: 100%;
}
.section_lookbook_pro .lkpro {
	height: 100%;
	display: grid;
	/* Centre column is fluid (minmax 0→680px): caps at the 680px design width on
	   wide screens but shrinks to fit narrower ones (e.g. 13" Mac, where the
	   1230px container only gives ~1200px inner — a fixed 680px hero + 100/360px
	   rails + gaps would total 1236px and spill past the margin). */
	grid-template-columns: 100px minmax(0, 680px) 360px;
	column-gap: var(--space-7);
	row-gap: var(--space-5);
	align-items: stretch;
	justify-content: start;
}

/* ---------- Avatars (left rail) — centered vertically ---------- */
.section_lookbook_pro .lkpro__avatars {
	display: flex;
	flex-direction: column;
	/* align-items: center; */
	/* justify-content: center; */
	gap: var(--space-3);
}
.section_lookbook_pro .lkpro__avatar {
	width: 80px;
	height: 80px;
	border-radius: var(--radius-circle);
	border: 2px solid transparent;
	padding: var(--space-1);
	background: transparent;
	cursor: pointer;
	overflow: hidden;
	transition: width var(--duration-base) var(--ease-out),
				height var(--duration-base) var(--ease-out),
				border-color var(--duration-base) var(--ease-out),
				transform var(--duration-base) var(--ease-out);
}
.section_lookbook_pro .lkpro__avatar img {
	width: 100%;
	height: 100%;
	border-radius: var(--radius-circle);
	object-fit: cover;
	display: block;
}
.section_lookbook_pro .lkpro__avatar.is-active {
	width: 100px;
	height: 100px;
	border-color: var(--setago-orange);
}
.section_lookbook_pro .lkpro__avatar:hover {
	transform: scale(1.05);
}

/* ---------- Main hero image ---------- */
.section_lookbook_pro .lkpro__main {
	position: relative;
	width: 100%;
	max-width: 680px;
	aspect-ratio: 1 / 1;
	/* start-aligned so the square keeps its ratio instead of stretching to the
	   section's min-height; scenes inside are inset:0 so they follow this box. */
	align-self: start;
	border-radius: var(--lkpro-hero-radius);
	overflow: hidden;
	background: var(--color-bg-muted);
}
.section_lookbook_pro .lkpro__scene {
	position: absolute;
	inset: 0;
	opacity: 0;
	transition: opacity var(--duration-slow) var(--ease-out);
	pointer-events: none;
}
.section_lookbook_pro .lkpro__scene.is-active {
	opacity: 1;
	pointer-events: auto;
}
.section_lookbook_pro .lkpro__scene img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.section_lookbook_pro .lkpro__hotspot {
	position: absolute;
	left: var(--x);
	top: var(--y);
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	border: none;
	border-radius: var(--radius-circle);
	background: rgba(255, 255, 255, .95);
	color: var(--color-neutral-900);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-light);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	box-shadow: var(--shadow-md);
	transition: transform var(--duration-base) var(--ease-out),
				background-color var(--duration-base) var(--ease-out),
				color var(--duration-base) var(--ease-out);
	z-index: 2;
}
.section_lookbook_pro .lkpro__hotspot:hover,
.section_lookbook_pro .lkpro__hotspot.is-active {
	background: var(--setago-orange);
	color: var(--color-text-inverse);
	transform: translate(-50%, -50%) scale(1.08);
}
.section_lookbook_pro .lkpro__hotspot-icon {
	line-height: 1;
}

/* ---------- Right column ---------- */
.section_lookbook_pro .lkpro__right {
	display: flex;
	flex-direction: column;
	gap: var(--space-5);
	min-height: 0;
	max-height: 100%;
}
.section_lookbook_pro .lkpro__heading {
	flex: 0 0 auto;
	padding: var(--space-1);
}
.section_lookbook_pro .lkpro__pretitle {
	margin: 0 0 var(--space-2);
	color: var(--color-neutral-900);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}
.section_lookbook_pro .lkpro__title {
	margin: 0;
	font-size: var(--font-size-4xl);
	line-height: var(--line-height-tight);
	font-weight: var(--font-weight-medium);
	color: var(--color-neutral-900);
	letter-spacing: var(--tracking-tight);
}

/* ---------- Product card ---------- */
.section_lookbook_pro .lkpro__cards {
	position: relative;
	background: var(--color-bg-surface);
	border-radius: var(--radius-xl);
	overflow: hidden;
	border: 1px solid var(--color-border-strong);
	box-shadow: var(--shadow-sm);
	flex: 1 1 auto;
	min-height: 0;
	display: flex;
	flex-direction: column;
}
.section_lookbook_pro .lkpro__card {
	flex: 1 1 auto;
	min-height: 0;
	display: none;
}
.section_lookbook_pro .lkpro__card.is-active {
	display: flex;
	flex-direction: column;
}
.section_lookbook_pro .lkpro__card-image-wrap {
	position: relative;
	overflow: hidden;
	background: var(--color-bg-muted);
	flex: 1 1 auto;
	min-height: 0;
}
.section_lookbook_pro .lkpro__card-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.section_lookbook_pro .lkpro__card-body {
	padding: var(--space-4) var(--space-5) var(--space-5);
	flex: 0 0 auto;
}
.section_lookbook_pro .lkpro__card-vendor {
	margin: 0 0 var(--space-2);
	font-size: var(--font-size-xs);
	color: var(--color-neutral-900);
	font-weight: var(--font-weight-medium);
}
.section_lookbook_pro .lkpro__card-name {
	display: block;
	color: var(--color-neutral-900);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	line-height: var(--line-height-snug);
	margin-bottom: var(--space-3);
	transition: color var(--duration-fast) var(--ease-out);
}
.section_lookbook_pro .lkpro__card-name:hover {
	color: var(--setago-orange);
	text-decoration: none;
}
.section_lookbook_pro .lkpro__card-variants {
	display: flex;
	gap: var(--space-2);
}
.section_lookbook_pro .lkpro__card-variant {
	width: 34px;
	height: 34px;
	border-radius: var(--radius-circle);
	overflow: hidden;
	background: var(--color-bg-muted);
	border: 1px solid var(--color-border-strong);
	flex-shrink: 0;
	cursor: pointer;
}
.section_lookbook_pro .lkpro__card-variant.is-selected {
	border-color: var(--setago-orange);
	box-shadow: 0 0 0 2px var(--setago-orange);
}
.section_lookbook_pro .lkpro__card-variant img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---------- Nav (pill, separate from card) ---------- */
.section_lookbook_pro .lkpro__nav {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	padding: var(--space-2) var(--space-3);
	background: var(--color-bg-surface);
	border: 1px solid var(--color-border-strong);
	border-radius: var(--radius-pill);
	align-self: flex-start;
	flex: 0 0 auto;
	box-shadow: var(--shadow-xs);
}
.section_lookbook_pro .lkpro__nav-btn {
	width: 32px;
	height: 32px;
	border-radius: var(--radius-circle);
	background: transparent;
	border: none;
	color: var(--color-neutral-900);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: var(--font-size-xs);
	transition: background-color var(--duration-fast) var(--ease-out),
				color var(--duration-fast) var(--ease-out);
}
.section_lookbook_pro .lkpro__nav-btn:hover {
	background: rgba(0, 0, 0, .05);
	color: var(--setago-orange);
}
.section_lookbook_pro .lkpro__progress {
	position: relative;
	width: 96px;
	height: 3px;
	background: var(--color-neutral-200);
	border-radius: var(--radius-pill);
	overflow: hidden;
}
.section_lookbook_pro .lkpro__progress-bar {
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	background: var(--color-neutral-900);
	transition: left var(--duration-base) var(--ease-out),
				width var(--duration-base) var(--ease-out);
	width: 33%;
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
	.section_lookbook_pro .lkpro {
		/* tighter rails + gap so the fluid hero keeps more room on 992–1199px */
		grid-template-columns: 100px minmax(0, 620px) 340px;
		column-gap: var(--space-6);
	}
	.section_lookbook_pro .lkpro__title {
		font-size: var(--font-size-3xl);
	}
}

/* ============================================================
   Mobile layout (≤991px) — redesigned for touch UX.
   Flow:
     1. Heading (pretitle + title)        ← context first
     2. Avatars row (horizontal, story)   ← navigation second
     3. Hero 4:3                          ← visual content
     4. Product card                      ← context for current hotspot
     5. Nav arrows + progress             ← discoverability
   Implementation: flex column on .lkpro with `display: contents` on
   .lkpro__right so heading / cards / nav can each receive their own
   `order` value at the .lkpro level.
   ============================================================ */
@media (max-width: 991px) {
	.section_lookbook_pro {
		padding: var(--section-py-md) 0;
		height: auto;
		min-height: 0;
	}
	.section_lookbook_pro > .container {
		height: auto;
	}
	.section_lookbook_pro .lkpro {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}
	/* Flatten .lkpro__right so its children participate in .lkpro's flex flow */
	.section_lookbook_pro .lkpro__right {
		display: contents;
	}

	/* Order on mobile */
	.section_lookbook_pro .lkpro__heading  { order: 1; }
	.section_lookbook_pro .lkpro__avatars  { order: 2; }
	.section_lookbook_pro .lkpro__main     { order: 3; }
	.section_lookbook_pro .lkpro__cards    { order: 4; }
	.section_lookbook_pro .lkpro__nav      { order: 5; }

	/* Heading: compact, centered */
	.section_lookbook_pro .lkpro__heading {
		text-align: center;
		padding: 0;
	}
	.section_lookbook_pro .lkpro__pretitle {
		text-align: center;
		margin-bottom: var(--space-1);
		font-size: var(--font-size-xs);
	}
	.section_lookbook_pro .lkpro__title {
		font-size: var(--font-size-2xl);
		text-align: center;
	}

	/* Avatars: story-style horizontal row */
	.section_lookbook_pro .lkpro__avatars {
		flex-direction: row;
		justify-content: center;
		gap: var(--space-2);
		padding: 0;
		flex-wrap: wrap;
	}
	.section_lookbook_pro .lkpro__avatar,
	.section_lookbook_pro .lkpro__avatar.is-active {
		width: 56px;
		height: 56px;
	}

	/* Hero: 4:3 aspect (saves ~25% vertical vs 1:1) */
	.section_lookbook_pro .lkpro__main {
		height: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	/* Hotspot: bigger touch target (44px = Apple HIG / Material standard) */
	.section_lookbook_pro .lkpro__hotspot {
		width: 36px;
		height: 36px;
		font-size: var(--font-size-lg);
	}

	/* Card image: shorter ratio to leave room for product info */
	.section_lookbook_pro .lkpro__card-image-wrap {
		aspect-ratio: 16 / 11;
		flex: 0 1 auto;
	}

	/* Nav: compact, centered */
	.section_lookbook_pro .lkpro__nav {
		align-self: center;
		gap: var(--space-3);
	}
}

/* Phone (≤575px): tighter sizing for 320–414px viewports */
@media (max-width: 575px) {
	.section_lookbook_pro .lkpro {
		gap: var(--space-3);
	}
	.section_lookbook_pro .lkpro__title {
		font-size: var(--font-size-xl);
	}
	.section_lookbook_pro .lkpro__avatar,
	.section_lookbook_pro .lkpro__avatar.is-active {
		width: 48px;
		height: 48px;
	}
	.section_lookbook_pro .lkpro__avatars {
		gap: var(--space-1);
	}
	.section_lookbook_pro .lkpro__hotspot {
		width: 32px;
		height: 32px;
	}
	.section_lookbook_pro .lkpro__card-body {
		padding: var(--space-3);
	}
}