/**
 * Nightshift section library (patterns/*.php with the "ns-lib" class).
 *
 * Only what native block settings cannot express: layered cards, overlaps,
 * offsets, the category mosaic, the typographic index and compact product
 * rows. Colours come from the palette; everything collapses to one column on
 * small screens. Loaded only on pages that use a library section.
 */

/* Centred sections (alignment set by class so markup is the same on WP 6.9 and 7.x) */
.ns-lib-center { text-align: center; }
.ns-lib-center :is(.is-style-eyebrow, p.is-style-eyebrow) { justify-content: center; }
.ns-lib-center .is-style-lead, .ns-lib-center .ns-lib-statement { margin-inline: auto; }

/* Layered card over an image ------------------------------------------- */
.ns-lib-layer { position: relative; }
.ns-lib-layer > .wp-block-image { margin: 0; }
.ns-lib-layer > .ns-lib-layer__card {
	position: absolute;
	z-index: 2;
	left: calc(-1 * var(--wp--preset--spacing--50));
	bottom: var(--wp--preset--spacing--50);
	max-width: min(320px, 70%);
	margin: 0 !important;
	box-shadow: 0 30px 60px -30px color-mix(in srgb, var(--wp--custom--color--shadow, #000) 70%, transparent);
}
.ns-lib-layer > .ns-lib-layer__card--end { left: auto; right: var(--wp--preset--spacing--50); bottom: calc(-1 * var(--wp--preset--spacing--50)); }
@media (max-width: 1023px) {
	.ns-lib-layer > .ns-lib-layer__card,
	.ns-lib-layer > .ns-lib-layer__card--end { position: relative; left: auto; right: auto; bottom: auto; max-width: none; margin: calc(-1 * var(--wp--preset--spacing--50)) var(--wp--preset--spacing--30) 0 !important; }
}

/* Very large editorial headline ---------------------------------------- */
.wp-block-heading.ns-lib-mega { font-size: clamp(3rem, 9.5vw, 9.5rem) !important; line-height: .9 !important; }

/* Offset image (asymmetric compositions) ------------------------------- */
@media (min-width: 782px) { .ns-lib-offset { margin-top: var(--wp--preset--spacing--80) !important; } }

/* Intro column that stays in view beside a long list ------------------- */
@media (min-width: 1024px) { .ns-lib-sticky { position: sticky; top: calc(var(--ns-header-h, 80px) + 32px); } }

/* Layered split: text card overlapping the image ----------------------- */
@media (min-width: 1024px) {
	.ns-lib-overlap > .wp-block-column:last-child { position: relative; z-index: 2; margin-left: -8% !important; }
}
@media (max-width: 1023px) {
	.ns-lib-overlap > .wp-block-column:last-child { margin: calc(-1 * var(--wp--preset--spacing--60)) var(--wp--preset--spacing--40) 0 !important; position: relative; z-index: 2; }
}

/* Product grids inside library sections -------------------------------- */
.ns-lib-hero-grid .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
.wp-block-column .ns-products:not(.ns-lib-hero-grid) .wc-block-product-template { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Compact product rows -------------------------------------------------- */
.ns-lib-rows .wc-block-product-template {
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 var(--wp--preset--spacing--50);
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.ns-lib-rows .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; border-bottom: 1px solid var(--wp--preset--color--border); }
.ns-lib-row { padding-block: var(--wp--preset--spacing--30); position: relative; }
.ns-lib-row__image { flex: 0 0 88px; width: 88px; margin: 0 !important; }
.ns-lib-row__image img { aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.ns-lib-row__body > * { margin: 0 !important; }
.ns-lib-row .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ns-lib-row .wp-block-post-title a::after { content: ""; position: absolute; inset: 0; }
.ns-lib-row:hover .wp-block-post-title a { color: var(--wp--preset--color--accent); }
@media (max-width: 599px) { .ns-lib-rows .wc-block-product-template { grid-template-columns: 1fr; } }

/* Single product spotlight --------------------------------------------- */
.ns-lib-spotlight .wc-block-product-template { display: block !important; list-style: none; margin: var(--wp--preset--spacing--40) 0 0; padding: 0; }
.ns-lib-spotlight .wc-block-product-template > li { width: auto !important; max-width: none !important; margin: 0 !important; }
.ns-lib-spot__image img { border-radius: 24px; aspect-ratio: 1; object-fit: cover; }
.ns-lib-spot .wp-block-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ns-lib-spot :is(.wp-block-woocommerce-product-button, .wc-block-components-product-button) { align-items: flex-start !important; justify-content: flex-start !important; text-align: left !important; margin-inline: 0 !important; }
.ns-lib-spot .wp-block-post-title { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.ns-lib-spot .wp-block-post-terms a { color: var(--wp--preset--color--contrast-muted); text-decoration: none; }

/* Category mosaic ------------------------------------------------------- */
.ns-lib-mosaic .wp-block-term-template {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: minmax(220px, auto);
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-lib-mosaic .wp-block-term-template > li { margin: 0; min-width: 0; }
.ns-lib-mosaic .wp-block-term-template > li:first-child { grid-column: span 2; grid-row: span 2; }
.ns-lib-tile {
	position: relative;
	height: 100%;
	min-height: 220px;
	overflow: hidden;
	border-radius: 20px;
	background: var(--wp--preset--color--surface-raised);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
.ns-lib-tile > .nsc-term-image { position: absolute; inset: 0; margin: 0; }
.ns-lib-tile > .nsc-term-image img { width: 100%; height: 100% !important; aspect-ratio: auto !important; object-fit: cover; border-radius: 0; }
.ns-lib-tile:has(.nsc-term-image img)::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, color-mix(in srgb, var(--wp--preset--color--base) 85%, transparent), transparent 55%);
	pointer-events: none;
}
.ns-lib-tile__label { position: relative; z-index: 1; margin: 0 !important; padding: var(--wp--preset--spacing--40); }
.ns-lib-tile__label > * { margin: 0 !important; }
.ns-lib-tile .wp-block-term-name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ns-lib-tile .wp-block-term-name a::after { content: ""; position: absolute; inset: 0; z-index: 2; }
.ns-lib-tile:hover .wp-block-term-name a { color: var(--wp--preset--color--accent); }
@media (max-width: 781px) {
	.ns-lib-mosaic .wp-block-term-template { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(180px, auto); }
	.ns-lib-mosaic .wp-block-term-template > li:last-child:nth-child(even) { grid-column: span 2; }
}

/* Typographic category index ------------------------------------------- */
.ns-lib-index .wp-block-term-template { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--wp--preset--color--border); }
.ns-lib-index .wp-block-term-template > li { margin: 0; border-bottom: 1px solid var(--wp--preset--color--border); }
.ns-lib-index__row { position: relative; padding-block: var(--wp--preset--spacing--30); gap: var(--wp--preset--spacing--30); }
.ns-lib-index__row > * { margin: 0 !important; }
.ns-lib-index__row .wp-block-term-name { line-height: 1; }
.ns-lib-index__row .wp-block-term-name a { color: var(--wp--preset--color--contrast); text-decoration: none; transition: color .2s, padding .3s; }
.ns-lib-index__row .wp-block-term-name a::after { content: ""; position: absolute; inset: 0; }
.ns-lib-index__row:hover .wp-block-term-name a,
.ns-lib-index__row:focus-within .wp-block-term-name a { color: var(--wp--preset--color--accent); padding-inline-start: .25em; }
@media (prefers-reduced-motion: reduce) { .ns-lib-index__row .wp-block-term-name a { transition: none; } }

/* Category quick links -------------------------------------------------- */
.ns-lib-chips .wp-block-term-template { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.ns-lib-chips .wp-block-term-template > li { margin: 0; }
.ns-lib-chips .wp-block-term-name a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--border-strong);
	border-radius: var(--ns-button-radius);
	font-size: .9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: border-color .2s, color .2s;
}
.ns-lib-chips .wp-block-term-name a:hover { border-color: var(--wp--preset--color--accent); color: var(--wp--preset--color--accent); }

/* Attribute / goal cards ------------------------------------------------ */
.ns-lib-cards .wp-block-term-template {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}
.ns-lib-cards .wp-block-term-template > li { margin: 0; }
.ns-lib-card { position: relative; height: 100%; }
.ns-lib-card > * + * { margin-block-start: var(--wp--preset--spacing--20) !important; }
.ns-lib-card > :first-child { margin-block-start: 0 !important; }
.ns-lib-card .wp-block-term-name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.ns-lib-card .wp-block-term-name a::after { content: ""; position: absolute; inset: 0; }
.ns-lib-card .wp-block-term-description { color: var(--wp--preset--color--contrast-muted); }
.ns-lib-card .wp-block-term-description p { margin: 0; }

/* Editorial details ----------------------------------------------------- */
.ns-lib-statement { line-height: 1.2 !important; letter-spacing: -.01em; text-wrap: balance; }
.ns-lib-year { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--accent); line-height: 1; }
.ns-lib-quote-mark { font-family: var(--wp--preset--font-family--display); font-size: clamp(5rem, 10vw, 8rem); line-height: .6; color: var(--wp--preset--color--accent); margin-bottom: 0 !important; }
.ns-lib-benefit { padding-top: var(--wp--preset--spacing--30); border-top: 2px solid var(--wp--preset--color--accent); }
.ns-lib-benefit > * { margin: 0; }

/* Promotion tiles -------------------------------------------------------- */
.ns-lib-promo { height: 100%; }
.wp-block-column > .wp-block-group:has(> .ns-lib-promo) { height: 100%; display: flex; flex-direction: column; }
.wp-block-column > .wp-block-group > .ns-lib-promo { flex: 1; }

/* Newsletter inside library sections ------------------------------------ */
.ns-lib-news { display: grid; gap: var(--wp--preset--spacing--30); }
.ns-lib-news > * { margin: 0; }
@media (min-width: 1024px) {
	.ns-lib-news--band { grid-template-columns: 1fr 1fr; align-items: center; column-gap: var(--wp--preset--spacing--70); }
	.ns-lib-news--band > :not(.nsc-newsletter__form) { grid-column: 1; }
	.ns-lib-news--band > .nsc-newsletter__form { grid-column: 2; grid-row: 1 / span 3; }
}

/* Image mosaic: two columns on small screens ---------------------------- */
@media (max-width: 781px) {
	.ns-lib-grid.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.ns-lib-grid > :first-child { grid-column: span 2 !important; grid-row: auto !important; }
}
.ns-lib-grid > .wp-block-image { margin: 0; }
.ns-lib-grid > .wp-block-image img { width: 100%; height: 100% !important; object-fit: cover; }

/* Quote inside library sections ---------------------------------------- */
.ns-lib-quote { margin: 0; padding: 0 0 0 var(--wp--preset--spacing--40); border-left: 2px solid var(--wp--preset--color--accent); }
.ns-lib-quote > * { margin: 0; }
.ns-lib-quote > * + * { margin-block-start: var(--wp--preset--spacing--20); }
.ns-lib-quote p:first-child { font-family: var(--wp--preset--font-family--display); color: var(--wp--preset--color--contrast); line-height: 1.2; }

/* Signup form colours follow the section's scheme (the 1.0 newsletter sits on the accent colour). */
.ns-lib-news .nsc-newsletter__form :is(input[type="email"], input[type="text"]) {
	background: var(--wp--preset--color--base) !important;
	border: 1px solid var(--wp--preset--color--border-strong) !important;
	color: var(--wp--preset--color--contrast) !important;
}
.ns-lib-news .nsc-newsletter__form :is(input[type="submit"], button) {
	background: var(--wp--preset--color--accent) !important;
	color: var(--wp--preset--color--on-accent) !important;
}

/* Store-driven sections hide on the site until the store has something to show
   (no featured products, no categories, no approved reviews, no signup form). They always show
   in the editor, with a hint. The product hero is kept ("ns-lib-keep"). */
body:not(.editor-styles-wrapper):not(.block-editor-page) .ns-lib:not(.ns-lib-keep):has(.wp-block-woocommerce-product-collection):not(:has(.wc-block-product)),
body:not(.editor-styles-wrapper):not(.block-editor-page) .ns-lib:has(.wp-block-terms-query):not(:has(.wp-block-term)),
body:not(.editor-styles-wrapper):not(.block-editor-page) .ns-lib-needs-reviews:not(:has(.nsc-reviews__list)),
body:not(.editor-styles-wrapper):not(.block-editor-page) .ns-lib-needs-form:not(:has(.nsc-newsletter__form)) { display: none; }

/* Editor-only notes for store-driven blocks (assets/js/editor/store-hints.js). */
.ns-editor-hint {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	align-items: baseline;
	max-width: var(--wp--style--global--wide-size);
	margin: 0 auto 12px !important;
	padding: 10px 14px;
	border: 1px dashed currentColor;
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--accent) 12%, var(--wp--preset--color--base));
	color: var(--wp--preset--color--contrast);
	font: 500 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	letter-spacing: 0;
	text-transform: none;
}
.ns-editor-hint strong { font-weight: 700; }
.ns-editor-hint__actions { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.ns-editor-hint a { color: inherit; font-weight: 700; text-decoration: underline; }
.ns-editor-hint--info { background: transparent; opacity: .8; }