/* ==========================================================================
   messe-display — Home
   Figma frame "Home" 18:10 (1440x4690). Section order and every measurement
   below comes from the node JSON, not from the PNG render.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hero slider — Figma "Hero" 1440x680.
   Slides come from the ACF page "Banners on Home Page" (post 21); see
   md-hero.php. Crossfade rather than a sliding track: the slides are complete
   artworks, so a fade keeps focus on the image and avoids a horizontal
   transform that would need the track width recalculated on resize.
   -------------------------------------------------------------------------- */
.md-hero {
	position: relative;
	height: 680px;
	background: var(--md-black);
	overflow: hidden;
}
.md-hero__track { position: absolute; inset: 0; }

.md-hero__slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity .7s ease;
}
.md-hero__slide.is-active { opacity: 1; visibility: visible; }
.md-hero__slide a,
.md-hero__slide picture { display: block; width: 100%; height: 100%; }
.md-hero__slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

/* Designed hero (no banners configured): text over the image.
   hero-content 718x308 @143,278 -> 142px from the left, vertically centred. */
.md-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
	max-width: calc(718px + 142px);
	padding-left: 142px;
}
.md-hero__title { margin: 0; max-width: 718px; }
.md-hero__copy  { margin: 16px 0 0; max-width: 279px; }
.md-hero__cta   { margin-top: 26px; align-self: flex-start; }

/* Arrows — 48x48, fill #FFFFFF, cornerRadius 24, ~24px from each edge. */
.md-hero__arrow {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	margin-top: -24px;
	border-radius: 24px;
	background: var(--md-white);
	color: var(--md-black);
	box-shadow: none;
	transition: opacity .18s ease;
}
.md-hero__arrow:hover { opacity: .85; }
.md-hero__arrow--prev { left: 24px; }
.md-hero__arrow--next { right: 22px; }

/* Dots — 20x20 RECTANGLES with cornerRadius 4, fill #787878, 12px apart. */
.md-hero__dots {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 32px;
	z-index: 3;
	display: flex;
	justify-content: center;
	gap: 12px;
}
.md-hero__dots button {
	width: 20px;
	height: 20px;
	border-radius: var(--md-r-4);
	background: var(--md-grey-3);
	opacity: .55;
	transition: opacity .18s ease, background-color .18s ease;
}
.md-hero__dots button:hover { opacity: .8; }
.md-hero__dots button.is-active { opacity: 1; background: var(--md-white); }
/* --------------------------------------------------------------------------
   Deal of the week — 1440x887, pad=50,15,50,15.
   Header row 1410x50: title left, countdown, "See All" right.
   -------------------------------------------------------------------------- */
.md-deal { padding: 50px var(--md-gutter); }
.md-deal__products { padding-top: 50px; }        /* Figma "Products" pad-top 50 */

/* Countdown — 233.75x49.6, fill #342155, 20px inner side padding.
   Digits Inter 700/20 #FFF; labels Inter 400/12 lh 15.6 capitalised. */
.md-countdown {
	display: inline-flex;
	align-items: center;
	gap: 20px;
	height: 49.6px;
	padding: 0 20px;
	background: var(--md-purple);
}
.md-countdown__unit { text-align: center; }
.md-countdown__num { display: block; }
.md-countdown__label { display: block; }
.md-countdown__sep {
	font-family: var(--md-font);
	font-weight: 700;
	font-size: 20px;
	line-height: 20px;               /* same line box as .md-count-num */
	letter-spacing: .75px;
	color: var(--md-white);
	/* Reserve the label's height below the colon so flex centring puts it on the
	   digits' line, matching the product page. See product.css for the detail. */
	margin-bottom: 15.6px;           /* = .md-count-label line-height */
}

/* --------------------------------------------------------------------------
   Split promos.
   "Enjoy free Sheeping"  1440x576 — image left 705x514, text right.
   "Main collection"      1440x568 — text left, image right 705x514.
   Both sit in the 1410 container (2 x 705).
   -------------------------------------------------------------------------- */
.md-promo {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: center;
	padding-inline: var(--md-gutter);
}
.md-promo__media { aspect-ratio: 705 / 514; overflow: hidden; }
.md-promo__media img { width: 100%; height: 100%; object-fit: cover; }

/* Text column: inner block is 634.5 wide, offset 70.5px from the column edge. */
.md-promo__body { padding-left: 70.5px; }
.md-promo--reverse .md-promo__body { padding-left: 50px; padding-right: 70.5px; }
.md-promo--reverse .md-promo__media { order: 2; }
.md-promo--reverse .md-promo__body  { order: 1; }

.md-promo__eyebrow { margin: 0 0 24px; }        /* Figma pad-bottom 24 */
.md-promo__title   { margin: 0 0 26px; }        /* Figma pad-bottom 26 */

/* --------------------------------------------------------------------------
   Full-bleed dark banner — "Modern Led pannels" 1440x494, pad=0,15,0,15.
   Link 1410x460 with an IMAGE fill; text block starts 762px into the
   container and is white throughout.
   -------------------------------------------------------------------------- */
.md-banner { padding: 0 var(--md-gutter); }
.md-banner__inner {
	position: relative;
	display: flex;
	align-items: center;
	height: 460px;
	background: var(--md-black) center/cover no-repeat;
	overflow: hidden;
}
.md-banner__body {
	position: relative;
	z-index: 2;
	margin-left: 54%;                              /* 762 / 1410 */
	max-width: 618px;
	text-align: left;
}
.md-banner__eyebrow,
.md-banner__title { color: var(--md-white); }
.md-banner__eyebrow { margin: 0 0 4px; }
.md-banner__title   { margin: 0 0 34px; }
.md-banner__cta     { margin-left: 128px; }      /* Figma: 1034 - 906 */

/* --------------------------------------------------------------------------
   Bestsellers — 1440x667, pad=50,15,0,15; 4-up grid; ruled heading.
   -------------------------------------------------------------------------- */
.md-bestsellers { padding: 50px var(--md-gutter) 0; }
.md-bestsellers .md-grid { --md-cols: 4; padding-top: 58px; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1099px) {
	.md-hero { height: 560px; }
	.md-hero__content { padding-left: 48px; }
	.md-hero__title { font-size: 52px; line-height: 56px; }
	.md-promo__body { padding-left: 40px; }
	.md-promo--reverse .md-promo__body { padding-left: 0; padding-right: 40px; }
	.md-banner__body { margin-left: 45%; }
	.md-banner__cta { margin-left: 0; }
	.md-bestsellers .md-grid { --md-cols: 3; }
}

@media (max-width: 759px) {
	.md-hero { height: 480px; }
	.md-hero__content { padding-left: 16px; padding-right: 16px; }
	.md-hero__title { font-size: 34px; line-height: 38px; }
	.md-hero__copy { font-size: 15px; line-height: 24px; max-width: none; }
	.md-hero__arrow { display: none; }

	.md-deal { padding: 32px var(--md-gutter); }
	.md-deal__products { padding-top: 24px; }
	.md-sec-head { flex-wrap: wrap; gap: 16px; min-height: 0; }
	.md-sec-head__see { margin-left: auto; }

	.md-promo { grid-template-columns: 1fr; gap: 24px; }
	.md-promo__body,
	.md-promo--reverse .md-promo__body { padding: 0; order: 2; }
	.md-promo--reverse .md-promo__media { order: 1; }
	.md-promo__title { font-size: 28px; line-height: 34px; letter-spacing: 1.5px; }

	.md-banner__inner { height: auto; min-height: 380px; padding: 40px 20px; }
	.md-banner__body { margin-left: 0; }
	.md-banner__title { font-size: 26px; line-height: 32px; letter-spacing: 1px; }
	.md-banner__cta { margin-left: 0; }

	.md-bestsellers { padding-top: 32px; }
	.md-bestsellers .md-grid { --md-cols: 2; padding-top: 24px; }
}

/* --------------------------------------------------------------------------
   Vertical rhythm — `--md-sec-gap` and the `.md-sec` rules now live in
   base.css, so every page gets the same spacing; /exhibition-custom and /print
   stack the same kind of blocks but do not load this sheet.
   -------------------------------------------------------------------------- */

/* Bestsellers already carries 50px of its own top padding — don't double it. */
.md-sec.md-bestsellers { padding-top: 0; }

/* Banner video — fills the block exactly like the background image it replaces. */
.md-banner__inner--video { background: var(--md-black); }
.md-banner__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* Sale-alert copy from the ACF page (post 7329). The Figma header row has no
   description slot — it only appears while a sale window is open and the
   operator has actually written one, so it sits under the header row rather
   than being squeezed into it. */
.md-deal__copy {
	max-width: 860px;
	margin: 18px 0 0;
	font-family: var(--md-font);
	font-size: 15px;
	line-height: 24px;
	color: var(--md-grey-2);
}