/**
 * AtlasHomeDeco — homepage sections
 */

/* -------------------------------------------------------------------------
 * 1. Hero
 * ---------------------------------------------------------------------- */

.hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(96vh, 940px);
	background: var(--ahd-charcoal-deep);
	color: var(--ahd-text-invert);
	overflow: hidden;
}

.hero__inner {
	padding-block: calc(var(--ahd-header-h) + 3rem) clamp(3rem, 2rem + 5vw, 6rem);
}

@media (max-width: 640px) {
	.hero {
		min-height: min(88vh, 720px);
	}
}

.hero__media {
	position: absolute;
	inset: 0;
}

.hero__media picture,
.hero__media img,
.hero__media .ahd-placeholder {
	width: 100%;
	height: 100%;
	border-radius: 0;
	aspect-ratio: auto;
}

.hero__img {
	object-fit: cover;
	object-position: center;
	/* A very slow drift keeps a static photograph from feeling dead. */
	animation: ahd-hero-drift 26s ease-in-out infinite alternate;
}

@keyframes ahd-hero-drift {
	from { transform: scale(1.02); }
	to { transform: scale(1.08); }
}

@media (prefers-reduced-motion: reduce) {
	.hero__img {
		animation: none;
	}
}

.hero__inner {
	position: relative;
}

.hero__content {
	max-width: 40rem;
}

.hero__title {
	font-size: var(--ahd-display-lg);
	line-height: var(--ahd-leading-tight);
	color: var(--ahd-text-invert);
	margin-bottom: var(--ahd-space-md);
	text-wrap: balance;
}

.hero__title .accent {
	color: var(--ahd-terracotta-soft);
}

.hero__text {
	font-size: var(--ahd-text-lg);
	line-height: 1.55;
	color: rgba(246, 241, 233, 0.86);
	max-width: 42ch;
	margin-bottom: var(--ahd-space-xl);
}

.hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahd-space-sm);
	margin-bottom: var(--ahd-space-xl);
}

.hero__facts {
	list-style: none;
	margin: 0;
	padding: var(--ahd-space-md) 0 0;
	border-top: 1px solid rgba(246, 241, 233, 0.22);
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahd-space-xs) var(--ahd-space-lg);
	font-size: var(--ahd-text-xs);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: rgba(246, 241, 233, 0.6);
}

.hero__facts li {
	position: relative;
	padding-left: 16px;
}

.hero__facts li::before {
	content: "◆";
	position: absolute;
	left: 0;
	font-size: 0.5rem;
	top: 0.28em;
	color: var(--ahd-terracotta-soft);
}

.hero__scroll {
	position: absolute;
	left: 50%;
	bottom: 18px;
	transform: translateX(-50%);
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(246, 241, 233, 0.3);
	border-radius: 50%;
	color: rgba(246, 241, 233, 0.75);
	animation: ahd-nudge 2.4s var(--ahd-ease) infinite;
}

.hero__scroll:hover {
	color: var(--ahd-text-invert);
	border-color: var(--ahd-text-invert);
}

@keyframes ahd-nudge {
	0%, 100% { transform: translate(-50%, 0); }
	50% { transform: translate(-50%, 5px); }
}

@media (max-width: 900px) {
	.hero__scroll {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * 3. One of a Kind
 * ---------------------------------------------------------------------- */

.section--ooak {
	position: relative;
	background: var(--ahd-charcoal-deep);
	color: var(--ahd-text-invert);
	overflow: hidden;
}

/* A very large, very quiet word behind the grid. */
.ooak__watermark {
	position: absolute;
	top: -0.24em;
	left: 50%;
	transform: translateX(-50%);
	font-family: var(--ahd-font-display);
	font-size: clamp(8rem, 22vw, 20rem);
	font-style: italic;
	line-height: 1;
	color: rgba(246, 241, 233, 0.035);
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

.ooak__head {
	position: relative;
	max-width: 56ch;
	margin-inline: auto;
	text-align: center;
	margin-bottom: clamp(2.5rem, 1.5rem + 4vw, 4.5rem);
}

.ooak__title {
	font-size: var(--ahd-display-md);
	color: var(--ahd-text-invert);
	margin-bottom: var(--ahd-space-md);
}

.ooak__text {
	color: rgba(246, 241, 233, 0.74);
	font-size: var(--ahd-text-lg);
	line-height: 1.6;
	margin: 0;
}

.ooak__grid {
	position: relative;
}

/* Gallery-style staggering: the middle piece sits lower, like a hang. */
@media (min-width: 900px) {
	.products--ooak > .product {
		transition: transform var(--ahd-dur) var(--ahd-ease);
	}

	.products--ooak > .product:nth-child(even) {
		transform: translateY(2.5rem);
	}

	.products--ooak > .product:nth-child(even):hover {
		transform: translateY(2.1rem);
	}

	.products--ooak > .product:hover {
		transform: translateY(-0.4rem);
	}
}

.section--ooak .product-card__title a,
.section--ooak .product-card__price,
.section--ooak .product-card__dimension {
	color: var(--ahd-text-invert);
}

.section--ooak .product-card__dimension,
.section--ooak .product-card__price {
	color: rgba(246, 241, 233, 0.7);
}

.section--ooak .product-card__title a:hover {
	color: var(--ahd-terracotta-soft);
}

.section--ooak .badge {
	background: var(--ahd-ivory);
	color: var(--ahd-charcoal);
}

.section--ooak .quick-view-btn,
.section--ooak .wishlist-btn {
	background: rgba(28, 25, 23, 0.7);
	color: var(--ahd-text-invert);
	border-color: rgba(246, 241, 233, 0.25);
}

.ooak__foot {
	position: relative;
	margin-top: clamp(3.5rem, 2rem + 5vw, 6rem);
	text-align: center;
}

.ooak__note {
	margin-top: var(--ahd-space-md);
	font-size: var(--ahd-text-sm);
	color: rgba(246, 241, 233, 0.5);
	max-width: 52ch;
	margin-inline: auto;
}

/* -------------------------------------------------------------------------
 * 5. Shop by space
 * ---------------------------------------------------------------------- */

.spaces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(0.75rem, 0.4rem + 1vw, 1.5rem);
	grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 720px) {
	.spaces {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 1100px) {
	/* A 12-column bed lets the first row run wide and the second sit in four. */
	.spaces {
		grid-template-columns: repeat(12, 1fr);
	}

	.spaces__item {
		grid-column: span 3;
	}

	.spaces__item:nth-child(1),
	.spaces__item:nth-child(2) {
		grid-column: span 6;
	}

	.spaces__item:nth-child(1) .space-card__media,
	.spaces__item:nth-child(2) .space-card__media {
		aspect-ratio: 16 / 9;
	}
}

.space-card {
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: var(--ahd-radius);
	text-decoration: none;
	color: var(--ahd-text-invert);
	background: var(--ahd-charcoal);
}

.space-card__media {
	display: block;
	aspect-ratio: 5 / 4;
	overflow: hidden;
}

.space-card__media img,
.space-card__media .ahd-placeholder {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
	border-radius: 0;
	transition: transform 900ms var(--ahd-ease), filter var(--ahd-dur) var(--ahd-ease);
	filter: brightness(0.88);
}

.space-card:hover .space-card__media img {
	transform: scale(1.06);
	filter: brightness(0.76);
}

.space-card__body {
	position: absolute;
	inset-inline: 0;
	bottom: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--ahd-space-sm);
	padding: var(--ahd-space-md);
	background: linear-gradient(180deg, rgba(28, 25, 23, 0) 0%, rgba(28, 25, 23, 0.72) 100%);
}

.space-card__title {
	font-family: var(--ahd-font-display);
	font-size: var(--ahd-text-lg);
	letter-spacing: 0.02em;
}

.space-card__arrow {
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--ahd-dur) var(--ahd-ease), transform var(--ahd-dur) var(--ahd-ease);
}

.space-card:hover .space-card__arrow,
.space-card:focus-visible .space-card__arrow {
	opacity: 1;
	transform: none;
}

/* -------------------------------------------------------------------------
 * 6. Story
 * ---------------------------------------------------------------------- */

.story__media {
	position: relative;
	padding-bottom: clamp(2rem, 6vw, 4rem);
	padding-right: clamp(2rem, 6vw, 4rem);
}

.story__media-main {
	aspect-ratio: 4 / 5;
}

.story__media-inset {
	position: absolute;
	right: 0;
	bottom: 0;
	width: clamp(120px, 34%, 220px);
	aspect-ratio: 1 / 1;
	border: 6px solid var(--ahd-bg);
	border-radius: var(--ahd-radius);
	overflow: hidden;
	box-shadow: var(--ahd-shadow);
}

.section--story.alt .story__media-inset {
	border-color: var(--ahd-bg-alt);
}

/* -------------------------------------------------------------------------
 * 7. Custom rug
 * ---------------------------------------------------------------------- */

.custom-cta {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4rem);
	align-items: center;
}

@media (min-width: 900px) {
	.custom-cta {
		grid-template-columns: 1fr 1fr;
	}
}

.custom-cta__media {
	aspect-ratio: 4 / 3;
}

.custom-cta__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--ahd-space-lg);
}

/* -------------------------------------------------------------------------
 * 8. Final CTA & newsletter
 * ---------------------------------------------------------------------- */

.section--final-cta {
	padding-block: var(--ahd-section);
}

.final-cta {
	display: grid;
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	align-items: center;
	padding: clamp(2rem, 1.5rem + 3vw, 4rem);
	background: var(--ahd-bg-alt);
	border-radius: var(--ahd-radius);
}

.section--final-cta.alt .final-cta {
	background: var(--ahd-bg);
}

@media (min-width: 880px) {
	.final-cta {
		grid-template-columns: 1.15fr 1fr;
	}
}

.final-cta__title {
	font-size: var(--ahd-display-sm);
	margin-bottom: var(--ahd-space-sm);
	max-width: 18ch;
}

.final-cta__text {
	color: var(--ahd-text-soft);
	font-size: var(--ahd-text-lg);
	max-width: 46ch;
	margin-bottom: var(--ahd-space-lg);
}

.final-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ahd-space-sm);
}

.final-cta__aside {
	padding-left: clamp(0rem, 2vw, 2.5rem);
	border-left: 1px solid var(--ahd-line);
}

@media (max-width: 879px) {
	.final-cta__aside {
		padding-left: 0;
		padding-top: var(--ahd-space-xl);
		border-left: 0;
		border-top: 1px solid var(--ahd-line);
	}
}

/* -------------------------------------------------------------------------
 * Shop help strip (bottom of the shop archive)
 * ---------------------------------------------------------------------- */

.shop-help {
	display: grid;
	gap: var(--ahd-space-xl);
}

@media (min-width: 760px) {
	.shop-help {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2rem, 4vw, 4rem);
	}
}

.shop-help__item .ahd-icon {
	color: var(--ahd-terracotta);
	margin-bottom: var(--ahd-space-sm);
}

.shop-help__item h2 {
	font-size: var(--ahd-text-xl);
	margin-bottom: var(--ahd-space-xs);
}

.shop-help__item p {
	color: var(--ahd-text-soft);
	max-width: 46ch;
	margin-bottom: var(--ahd-space-md);
}


/* -------------------------------------------------------------------------
 * Hero — Layout 2: split
 *
 * The photograph sits beside the text at full height instead of being cropped
 * into a letterbox. That matters for this shop specifically: the pieces are
 * tall, and a 16:9 band cuts the top and bottom off a hanging rug.
 * ---------------------------------------------------------------------- */

.hero--split {
	background: var(--ahd-bg-alt);
	color: var(--ahd-text);
	min-height: min(90vh, 880px);
}

.hero--split .hero__media {
	position: absolute;
	inset: 0 0 0 auto;
	width: 46%;
}

.hero--split .hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	animation: none;
}

/* No floating header over this layout, so no header-height offset needed. */
.hero--split .hero__inner {
	width: 100%;
	padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
}

.hero--split .hero__content {
	max-width: 34rem;
	padding-right: var(--ahd-space-xl);
}

/* On the light ground the text needs the normal palette, not the inverted one. */
.hero--split .hero__title {
	color: var(--ahd-text);
}

.hero--split .eyebrow--light {
	color: var(--ahd-brown);
}

.hero--split .hero__text {
	color: var(--ahd-text-soft);
}

.hero--split .hero__facts {
	border-top-color: var(--ahd-line);
	color: var(--ahd-text-faint);
}

.hero--split .btn--outline-light {
	border-color: var(--ahd-line);
	color: var(--ahd-text);
}

.hero--split .btn--outline-light:hover {
	background: var(--ahd-charcoal);
	border-color: var(--ahd-charcoal);
	color: var(--ahd-text-invert);
}

.hero--split .hero__scroll {
	border-color: var(--ahd-line);
	color: var(--ahd-text-soft);
}

@media (max-width: 900px) {
	.hero--split {
		display: block;
		min-height: 0;
	}

	/* Stacked: the picture leads, the text follows. */
	.hero--split .hero__media {
		position: relative;
		inset: auto;
		width: 100%;
		aspect-ratio: 4 / 3;
	}

	.hero--split .hero__inner {
		padding-block: clamp(2rem, 1.5rem + 3vw, 3rem) clamp(2.5rem, 2rem + 3vw, 4rem);
	}

	.hero--split .hero__content {
		max-width: none;
		padding-right: 0;
	}
}

/* -------------------------------------------------------------------------
 * Hero — Layout 3: video background
 * ---------------------------------------------------------------------- */

.hero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: var(--ahd-charcoal-deep);
}

/* The still shown on phones when the video is desktop-only. */
.hero__img--mobile-only {
	display: none;
}

@media (max-width: 767px) {
	.hero--video .hero__video[data-mobile="0"] {
		display: none;
	}

	.hero--video .hero__img--mobile-only {
		display: block;
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

.hero__videotoggle {
	position: absolute;
	right: var(--ahd-gutter);
	bottom: clamp(1.25rem, 1rem + 1.5vw, 2rem);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(246, 241, 233, 0.32);
	border-radius: 50%;
	background: rgba(28, 25, 23, 0.35);
	color: var(--ahd-text-invert);
	backdrop-filter: blur(3px);
	transition: background var(--ahd-dur) var(--ahd-ease), border-color var(--ahd-dur) var(--ahd-ease);
}

.hero__videotoggle:hover {
	background: var(--ahd-text-invert);
	border-color: var(--ahd-text-invert);
	color: var(--ahd-charcoal);
}

/* Two bars while playing; a triangle once paused. */
.hero__videotoggle-icon {
	width: 12px;
	height: 12px;
	border-left: 3px solid currentColor;
	border-right: 3px solid currentColor;
}

.hero__videotoggle[aria-pressed="true"] .hero__videotoggle-icon {
	width: 0;
	height: 0;
	border: 6px solid transparent;
	border-left: 10px solid currentColor;
	border-right: 0;
	margin-left: 3px;
}

@media (max-width: 900px) {
	.hero--video .hero__scroll {
		display: none;
	}
}

/* -------------------------------------------------------------------------
 * Section 2 — New Arrivals: alternate layouts
 * ---------------------------------------------------------------------- */

/*
 * The head keeps the "view all" link on the right; the rail adds its arrows
 * beside it. The 52ch cap on .section-head--split > div is meant for the copy
 * column, not for this.
 */
.section-head__aside {
	display: flex;
	align-items: center;
	gap: var(--ahd-space-md);
	max-width: none;
}

/* Layout 2 — sliding row ------------------------------------------------- */

.rail-nav {
	display: flex;
	gap: 8px;
}

.rail-nav__btn {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 1px solid var(--ahd-line);
	border-radius: 50%;
	background: transparent;
	color: var(--ahd-text);
	cursor: pointer;
	transition: background var(--ahd-dur-fast) var(--ahd-ease),
		border-color var(--ahd-dur-fast) var(--ahd-ease),
		color var(--ahd-dur-fast) var(--ahd-ease),
		opacity var(--ahd-dur-fast) var(--ahd-ease);
}

.rail-nav__btn:hover:not(:disabled) {
	background: var(--ahd-text);
	border-color: var(--ahd-text);
	color: var(--ahd-ivory);
}

.rail-nav__btn:disabled {
	opacity: 0.3;
	cursor: default;
}

.arrivals-rail {
	position: relative;
}

/*
 * Flex rather than grid: the track needs items sized as a fraction of the
 * viewport so a partial card peeks in at the edge, which is what tells people
 * there is more to scroll to.
 */
ul.products.products--rail {
	--rail-gap: clamp(0.875rem, 0.5rem + 1.2vw, 1.75rem);

	display: flex;
	gap: var(--rail-gap);
	grid-template-columns: none;
	overflow-x: auto;
	overscroll-behavior-x: contain;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	/* Room for the focus ring, which would otherwise be clipped by the scroll. */
	padding-block: 3px;
}

ul.products.products--rail::-webkit-scrollbar {
	display: none;
}

ul.products.products--rail > li.product {
	flex: 0 0 76%;
	scroll-snap-align: start;
}

@media (min-width: 560px) {
	ul.products.products--rail > li.product {
		flex-basis: calc((100% - var(--rail-gap)) / 2);
	}
}

@media (min-width: 900px) {
	ul.products.products--rail > li.product {
		flex-basis: calc((100% - var(--rail-gap) * 2) / 3);
	}
}

@media (min-width: 1200px) {
	ul.products.products--rail > li.product {
		flex-basis: calc((100% - var(--rail-gap) * 3) / 4);
	}
}

/* Let the row run to the screen edge on phones so it reads as a rail. */
@media (max-width: 699px) {
	.arrivals-rail {
		margin-inline: calc(var(--ahd-gutter) * -1);
	}

	ul.products.products--rail {
		padding-inline: var(--ahd-gutter);
		scroll-padding-inline-start: var(--ahd-gutter);
	}
}

/* Layout 3 — featured piece + grid --------------------------------------- */

.arrivals-editorial {
	display: grid;
	gap: clamp(1.75rem, 1rem + 3vw, 3rem);
	align-items: start;
}

@media (min-width: 900px) {
	.arrivals-editorial {
		grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
		/* Both columns take the full row height so the feature can stick. */
		align-items: stretch;
	}

	/*
	 * With a long product count the grid beside the feature runs on for
	 * several screens. Holding the feature in view keeps the left half from
	 * becoming a tall empty column.
	 */
	.arrivals-editorial__feature ul.products--feature {
		position: sticky;
		top: calc(var(--ahd-header-h) + 24px);
	}
}

ul.products.products--feature {
	grid-template-columns: minmax(0, 1fr);
	/* Rows must size to content, or a stretched column distorts the card. */
	align-content: start;
}

/* The feature earns a taller frame and slightly larger type. */
.products--feature .product-card__image {
	aspect-ratio: 4 / 5;
}

@media (min-width: 900px) {
	.products--feature .product-card__image {
		aspect-ratio: 3 / 4;
	}

	.products--feature .product-card__title {
		font-size: var(--ahd-text-xl);
	}

	.products--feature .product-card__price {
		font-size: var(--ahd-text-lg);
	}
}

ul.products.products--editorial {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-content: start;
}