/*
 * Ashley brand landing pages — styles (nectar / modmax / next-gen-nuvella / dreamcloud).
 * Hosted on CDN; referenced by templates/ashley-landing-page/page.nectar-modmax-nuvella.liquid.
 * Markup (class names, data-* attributes) lives in that Liquid template — keep selectors in sync.
 */

body, footer {
	background-color: #fff !important;
}

.amn-page {
	--amn-primary: #01158A;
	--amn-nuvella: #30afa9;
	--amn-max: 1152px;
	--amn-gap: 1.5rem;
	color: #363636;
	line-height: 1.5;
}

.amn-page *,
.amn-page *::before,
.amn-page *::after {
	box-sizing: border-box;
}

.amn-container {
	width: 100%;
	max-width: var(--amn-max);
	margin: 0 auto;
	padding: 0 1rem;
}

.amn-container img { max-width: 100%; }

/* ---- Typography ---- */
.amn-h2 {
	font-size: clamp(1.5rem, 3.5vw, 2rem);
	font-weight: 700;
	line-height: 1.15;
	margin: 0;
}

.amn-h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}

.amn-primary { color: var(--amn-primary); }
.amn-text-white { color: #fff; }
.amn-text-black { color: #000; }
.amn-text-center { text-align: center; }
.amn-mb { margin-bottom: 1rem; }
.amn-nuvella-bg { background-color: var(--amn-nuvella); }

/* ---- Sections / spacing ---- */
.amn-section { margin: 3rem 0; }
.amn-section-sm { margin: 1.5rem auto; }
.amn-logo { margin: 3rem 0; text-align: center; }
.amn-logo--dreamcloud img { max-width: 320px; width: 100%; height: auto; }

/* ---- Buttons ---- */
.amn-btn {
	display: inline-block;
	margin-top: 1rem;
	padding: .7em 1.4em;
	background: var(--amn-primary);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	line-height: 1;
	transition: opacity .2s ease, transform .2s ease;
}
.amn-btn:hover { opacity: .88; transform: translateY(-1px); }

/* ---- Banner (background image + overlaid text) ---- */
.amn-banner-section {
	position: relative;
	margin: 3rem 0;
}

.amn-banner {
	width: 100%;
	height: 0;
	padding-bottom: 37%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
}

.amn-banner--tall { padding-bottom: 45%; }

.amn-banner-text {
	width: 50%;
	position: absolute;
	top: 25%;
	left: 0;
	padding: 1rem 1.5rem;
}
.amn-banner-text p { margin: .75rem 0 0; }

.amn-banner-section--plain { text-align: center; }

/* ---- Feature row (circular image + centered copy) ---- */
.amn-features {
	display: flex;
	flex-wrap: wrap;
	gap: var(--amn-gap);
	margin: 3rem 0;
}
.amn-feature {
	flex: 1 1 260px;
	text-align: center;
}
.amn-feature-img {
	width: 128px;
	height: 128px;
	border-radius: 9999px;
	object-fit: cover;
	display: block;
	margin: 0 auto 1rem;
}
/* Show the full image, uncropped (for wide / non-square thumbnails) */
.amn-feature-img--full {
	width: auto;
	height: auto;
	max-width: 100%;
	border-radius: 0;
	object-fit: initial;
}
/* SVG icon rendered inside the same 128px circular frame as photo bubbles */
.amn-feature-icon {
	width: 128px;
	height: 128px;
	border-radius: 9999px;
	background: rgba(1, 21, 138, .08);
	color: var(--amn-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 1rem;
}
.amn-feature-icon svg {
	width: 60px;
	height: 60px;
}
.amn-feature-text { padding: .5rem; }

/* ---- Media (image beside text) ---- */
.amn-media {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: var(--amn-gap);
	margin: 3rem 0;
}
.amn-media-figure,
.amn-media-body {
	flex: 1 1 300px;
	min-width: 0;
}
.amn-media-figure img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.amn-media-body {
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.amn-media-body p { margin: .5rem 0 0; }
.amn-media-body--fill { padding: 1.25rem; }
.amn-media-body--fill p { color: #fff; }

/* ---- Video ---- */
.amn-video { margin: 3rem 0; }
.amn-video video {
	display: block;
	width: 100%;
	height: auto;
}

/* ---- RTE text block ---- */
.amn-rte { padding: 1rem; margin: 3rem 0; }

/* ---- Config logos row ---- */
.amn-logos {
	display: flex;
	flex-wrap: wrap;
	gap: var(--amn-gap);
	justify-content: center;
}
.amn-logo-item {
	flex: 1 1 120px;
	max-width: 200px;
	text-align: center;
}
.amn-logo-item img { display: inline-block; }

/* ---- Products grid ---- */
.amn-products {
	display: flex;
	flex-wrap: wrap;
	gap: var(--amn-gap);
}
.amn-product { flex: 1 1 200px; min-width: 0; }

/* ---- Mosaic ---- */
.amn-mosaic {
	display: flex;
	flex-wrap: wrap;
	gap: var(--amn-gap);
	margin: 3rem 0;
}
.amn-mosaic-main { flex: 2 1 340px; }
.amn-mosaic-side { flex: 1 1 240px; }
.amn-mosaic-box {
	position: relative;
	margin: 0 0 var(--amn-gap);
}
.amn-mosaic-box:last-child { margin-bottom: 0; }
.amn-mosaic-image {
	width: 100%;
	height: 0;
	padding-bottom: 50%;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	display: block;
}
.amn-mosaic-side .amn-mosaic-image { padding-bottom: 65%; }
.amn-mosaic-text {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	padding: 1rem;
}
.amn-mosaic-text p { margin: .5rem 0 0; }

/* ---- Scroll reveal (progressive enhancement) ---- */
.amn-js [data-amn-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition: opacity .6s ease, transform .6s ease;
}
.amn-js [data-amn-reveal].amn-in {
	opacity: 1;
	transform: none;
}
@media (prefers-reduced-motion: reduce) {
	.amn-js [data-amn-reveal] {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ---- Responsive ---- */
@media screen and (max-width: 767px) {
	.amn-banner {
		padding-bottom: 60%;
	}
	.amn-banner--tall { padding-bottom: 65%; }

	.amn-banner-text,
	.amn-mosaic-text {
		width: 100%;
		position: static;
		padding: 1rem 0;
		color: var(--amn-primary);
	}
	.amn-banner-text p,
	.amn-mosaic-text p { color: var(--amn-primary); }

	.amn-mosaic-image {
		padding-bottom: 60%;
	}
	.amn-mosaic-side .amn-mosaic-image { padding-bottom: 60%; }

	/* keep the coloured nuvella panels readable on mobile */
	.amn-media-body--fill,
	.amn-media-body--fill p { color: #fff; }
}