/* css/nisim/pages/content.css - article pages (view/pages/content.tpl + dblocks/home_promoted_products.tpl +
   components/product-promoted-item.tpl).
   Shared components used from base.css: .nis-pagehero--compact, .nis-crumbs-bar, .nis-side, .nis-rich (--measure),
   .nis-prodcard (--related), .nis-formpanel + the automatic lead-form styling, .nis-pager, .nis-cta (closing band).
   Page blocks: .nis-art (layout shell of the generic family), .nis-promo, .nis-art__form. */

/* == SHARED nis-art shell - identical copy in content.css, privacy.css, sitemap.css, thanks_form.css, thanks.css: start == */
.nis-art {
	padding: clamp(48px, 5vw, 80px) var(--nis-gutter) var(--nis-sec-y);
}
.nis-art__main {
	min-width: 0;
}
@media (max-width: 1099.98px) {
	.nis-art {
		padding-top: 28px;
	}
}
@media (max-width: 599.98px) {
	.nis-art {
		padding-top: 24px;
		padding-bottom: 48px;
	}
}
/* == SHARED nis-art shell: end == */

/* ---- layout: side menu (first in the DOM = right column in RTL) + article column */
.nis-art--side {
	display: grid;
	grid-template-columns: minmax(0, 270px) minmax(0, 1fr);
	gap: clamp(28px, 3.4vw, 56px);
	align-items: start;
}
.nis-art--side .nis-side a {
	line-height: 1.45;
}
@supports selector(:has(*)) {
	/* an article without siblings: no empty card, single column */
	.nis-art--side:not(:has(.nis-side li)) {
		grid-template-columns: minmax(0, 1fr);
	}
	.nis-art--side:not(:has(.nis-side li)) > .nis-side {
		display: none;
	}
}

/* ---- optional top images (CMS crops: 2 x 553x273 or 1 x 1136x300) */
.nis-art__media {
	max-width: 900px;
	margin: 0 0 clamp(24px, 2.6vw, 36px);
}
.nis-art__media--pair {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--nis-gap-tiles);
}
.nis-art__img img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--nis-r-card);
	background: var(--nis-mist);
}

/* ---- CMS text: what .nis-rich does not neutralise (spans pasted from a word processor, wide floated pictures) */
.nis-art__text span[style*="font-family"] {
	color: inherit !important;
	background-color: transparent !important;
	white-space: normal !important;
}
.nis-art__text img[style*="float"] {
	max-width: 44% !important;
}

/* ---- promoted products (dynamic block home_promoted_products + product-promoted-item) */
.nis-promo {
	margin-top: clamp(36px, 4vw, 56px);
}
.nis-promo__title {
	margin: 0 0 clamp(20px, 2.2vw, 30px);
	color: var(--nis-navy);
	font-size: var(--nis-fs-title-sm);
	font-weight: 300;
	line-height: 1.25;
	letter-spacing: var(--nis-ls-title);
}
.nis-promo__title:empty {
	display: none;
}
.nis-promo__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
	gap: clamp(14px, 1.6vw, 22px);
}
.nis-promo__grid > li {
	display: flex;
	min-width: 0;
}
.nis-promo__grid .nis-prodcard {
	--nis-prodcard-img-h: 210px;
	flex: 1 1 auto;
}
@supports selector(:has(*)) {
	@media (min-width: 1250px) {
		/* exactly four cards: one row of four instead of 3 + 1 */
		.nis-promo__grid:has(> li:nth-child(4):last-child) {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}
	}
	@media (min-width: 700px) {
		/* exactly three cards: one row of three instead of 2 + 1 (narrow article column of tablets and small laptops) */
		.nis-promo__grid:has(> li:nth-child(3):last-child) {
			grid-template-columns: repeat(3, minmax(0, 1fr));
		}
	}
}
.nis-promo .nis-prodcard__well {
	display: block;
}
.nis-promo .nis-prodcard__well .img {
	display: block;
}
/* the second pinned anchor ("view product", current host) is the stretched card link (.nis-prodcard__link);
   its text is shown as the badge on the lower corner of the picture well */
.nis-promo__more {
	position: absolute;
	inset-inline-start: 14px;
	bottom: calc(100% - var(--nis-prodcard-img-h) + 14px);
	padding: 8px 18px;
	border-radius: var(--nis-r-pill);
	background: rgba(18, 35, 59, .85);
	color: var(--nis-on-navy);
	font-size: 13.5px;
	font-weight: 500;
	line-height: var(--nis-lh);
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .35s var(--nis-ease);
}
.nis-promo .nis-prodcard:focus-within .nis-promo__more {
	opacity: 1;
	transform: none;
}
@media (hover: hover) {
	.nis-promo .nis-prodcard:hover .nis-promo__more {
		opacity: 1;
		transform: none;
	}
}
@media (hover: none) {
	.nis-promo__more {
		opacity: 1;
		transform: none;
	}
}
.nis-promo__tag {
	position: absolute;
	top: 14px;
	inset-inline-start: 14px;
	z-index: 2;
	padding: 6px 14px;
	border-radius: var(--nis-r-pill);
	background: var(--nis-gold);
	color: var(--nis-white);
	font-size: 13px;
	font-weight: 600;
}
.nis-promo__foot {
	margin-top: clamp(20px, 2.2vw, 30px);
}

/* ---- lead form = the design's form panel (.nis-formpanel of base.css; white, because the page ground is cream) with
   a one-row form. The panel lives inside the text-valued microdata container div[itemprop=text], so its design copy
   (kicker, default title, sub-line, note) sits in data-nis-text / data-nis-b attributes and is printed by css: no new
   text node enters the microdata value. A filled CMS titleform replaces the default title. */
.nis-art__form {
	margin-top: clamp(36px, 4vw, 56px);
	background: var(--nis-white);
	box-shadow: var(--nis-sh-rest);
}
.nis-art__form [data-nis-text]::before {
	content: attr(data-nis-text);
}
.nis-art__form-kicker {
	font-size: 15px;
	letter-spacing: .34em;
}
.nis-art__form-title {
	font-size: clamp(26px, 2.6vw, 38px);
}
.nis-art__form-title:empty::after {
	content: " " attr(data-nis-b);
	font-weight: var(--nis-b-weight);
}
.nis-art__form-title:not(:empty)::before {
	content: none;
}
.nis-art__form-title * {
	margin: 0;
	color: inherit !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: inherit !important;
}
.nis-art__form-text {
	margin: 14px 0 clamp(22px, 2.4vw, 30px);
}
.nis-art__form-note {
	margin-top: 16px;
}

/* ---- previous / next article (.nis-pager of base.css) */
.nis-art__pager {
	margin-top: clamp(36px, 4vw, 56px);
}
.nis-art__pager .nis-pager__item {
	max-width: calc(50% - 8px);
}
@supports selector(:has(*)) {
	.nis-art__pager:not(:has(a)) {
		display: none;
	}
}

/* ---- >= 1100px: guard for the FALLBACK toggle driver only (legacy slideToggle leaves an inline display:none on the
   list when it was closed on a narrow window and the window is widened); harmless with the class-based driver */
@media (min-width: 1100px) {
	.nis-art--side .nis-side > .sideMenu {
		display: block !important;
		height: auto !important;
	}
}

/* ---- <= 1099.98px: one column; base.css turns .nis-side into a collapsible bar above the article */
@media (max-width: 1099.98px) {
	.nis-art--side {
		grid-template-columns: minmax(0, 1fr);
		gap: 24px;
	}
}

/* ---- <= 599.98px: phone */
@media (max-width: 599.98px) {
	.nis-art__media--pair {
		grid-template-columns: minmax(0, 1fr);
	}
	.nis-art__text img[style*="float"] {
		max-width: 100% !important;
	}
	/* promoted products: one swipeable row instead of a long stack */
	.nis-promo__grid {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(76%, 280px);
		gap: 12px;
		margin-inline: calc(var(--nis-gutter) * -1);
		padding: 4px var(--nis-gutter) 14px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--nis-gutter);
		scrollbar-width: none;
	}
	.nis-promo__grid::-webkit-scrollbar {
		display: none;
	}
	.nis-promo__grid > li {
		scroll-snap-align: start;
	}
	.nis-promo__grid .nis-prodcard {
		--nis-prodcard-img-h: 180px;
	}
	.nis-promo__more {
		padding: 6px 14px;
		font-size: 12.5px;
	}
	.nis-art__form {
		padding: 26px 20px 24px;
	}
	.nis-art__form-note {
		align-items: flex-start;
		line-height: 1.6;
	}
	.nis-art__form-note .ph-light {
		margin-top: 2px;
	}
	.nis-art__pager .nis-pager__item {
		max-width: none;
	}
}