/*
 * MarinaNova home sections below the fold: marquee spacing, bento category tiles, story band,
 * size help, FAQ, Instagram, newsletter, trust strip, reserved product-story slot.
 * Loaded on the front page only. The hero is in home-critical.css (inlined); product rows and
 * cards are in site.css (shared with the catalog).
 */

/* Core flow layout adds block-gap margins between children: sections manage their own spacing. */
.mn-section.is-layout-flow > *,
.mn-band__inner.is-layout-flow > *,
.mn-insta.is-layout-flow > *,
.mn-step.is-layout-flow > * {
	margin-block-start: 0;
}
.mn-section__head h2,
.mn-section__head p,
.mn-band__inner h2 {
	margin: 0;
}
.mn-section > h2 {
	margin: 0 0 var(--wp--preset--spacing--50);
}

/* ---------- Bento category tiles ---------- */
.mn-tiles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-auto-rows: 12.5rem;
	grid-auto-flow: dense;
	gap: var(--wp--preset--spacing--30);
	margin: 0;
	padding: 0;
	list-style: none;
}
.mn-tiles > li:first-child {
	grid-column: span 2;
}
.mn-tiles > li:last-child:nth-child(4) {
	grid-column: span 2;
}
@media (min-width: 64em) {
	.mn-tiles {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		grid-auto-rows: 15rem;
		gap: var(--wp--preset--spacing--40);
	}
	.mn-tiles > li:first-child {
		grid-column: span 2;
		grid-row: span 2;
	}
	.mn-tiles > li:last-child:nth-child(4) {
		grid-column: span 2;
	}
}
.mn-tile {
	position: relative;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: 100%;
	overflow: hidden;
	border-radius: var(--mn-r-xl);
	background: var(--mn-surface);
	color: var(--mn-ink);
	text-decoration: none;
	transition: background-color var(--mn-base) var(--mn-ease);
}
.mn-tile:hover {
	background: var(--mn-surface-2);
	color: var(--mn-ink);
}
.mn-tile img {
	position: absolute;
	inset: 0 0 18% 0;
	z-index: -1;
	width: 100%;
	height: 82%;
	padding: 6%;
	object-fit: contain;
	mix-blend-mode: multiply;
	transition: transform var(--mn-xl) var(--mn-expo);
}
.mn-tile__label {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0.75rem;
	padding: 0.7rem 0.7rem 0.7rem 1.1rem;
	border-radius: var(--mn-r-pill);
	background: var(--mn-paper);
	box-shadow: var(--mn-shadow-sm);
	font: 800 var(--wp--preset--font-size--medium) / 1.1 var(--mn-font-display);
	text-transform: uppercase;
}
.mn-tile__label .mn-icon {
	width: 1.75rem;
	height: 1.75rem;
	padding: 0.3rem;
	border-radius: 50%;
	background: var(--mn-ink);
	color: var(--mn-paper);
	transition: transform var(--mn-base) var(--mn-spring);
}
@media (hover: hover) {
	.mn-tile:hover img {
		transform: scale(1.06);
	}
	.mn-tile:hover .mn-tile__label .mn-icon {
		transform: translateX(3px) rotate(-45deg);
	}
}
.mn-tile--cyan,
.mn-tile--cyan:hover {
	background: var(--mn-cyan);
}

/* "Pogledaj sve" link inside core paragraphs: arrow drawn with a mask (no icon font, no request) */
.mn-link-arrow--text {
	position: relative;
}
.mn-link-arrow--text::before {
	content: "";
	position: absolute;
	left: 0;
	right: 1.6rem;
	bottom: 0.45rem;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mn-base) var(--mn-expo);
}
.mn-link-arrow--text::after {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--mn-arrow) center / contain no-repeat;
	mask: var(--mn-arrow) center / contain no-repeat;
	transition: transform var(--mn-base) var(--mn-spring);
}
@media (hover: hover) {
	.mn-link-arrow--text:hover::before {
		transform: scaleX(1);
	}
	.mn-link-arrow--text:hover::after {
		transform: translateX(4px);
	}
}

/* ---------- Story band (text pending owner confirmation): rounded inset panel ---------- */
.mn-band {
	width: min(calc(100% - var(--mn-gutter) * 2), var(--wp--style--global--wide-size, 90rem));
	margin-inline: auto;
	padding-block: var(--wp--preset--spacing--70);
	border-radius: var(--mn-r-xl);
	background: var(--mn-cyan-soft);
	color: var(--mn-ink);
	content-visibility: auto;
	contain-intrinsic-size: auto 24rem;
}
.mn-band .mn-container {
	max-width: none;
}
.mn-band__inner {
	display: grid;
	gap: 1.5rem;
	max-width: 56rem;
}
.mn-band__inner h2 {
	font-size: var(--wp--preset--font-size--display-s);
}
.mn-band__note {
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
}

/* ---------- Size help ---------- */
.mn-steps {
	gap: var(--wp--preset--spacing--40);
}
.mn-step {
	padding: 1.5rem;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
}
.mn-step__num {
	margin: 0 0 1.5rem;
	color: var(--mn-cyan-ink);
	font: 800 2.5rem / 1 var(--mn-font-display);
}
.mn-step h3 {
	margin: 0 0 0.5rem;
}
.mn-step p:last-child {
	margin: 0;
	color: var(--mn-muted);
}

/* ---------- FAQ (core Details block): rounded rows ---------- */
.mn-faq .wp-block-details {
	margin: 0 0 0.5rem;
	padding-inline: 1.25rem;
	border: 0;
	border-radius: var(--mn-r-lg);
	background: var(--mn-surface);
	transition: background-color var(--mn-fast) var(--mn-ease);
}
.mn-faq .wp-block-details[open] {
	background: var(--mn-cyan-soft);
}
.mn-faq .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding-block: 0.5rem;
	font-weight: 600;
	cursor: pointer;
	list-style: none;
}
.mn-faq .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.mn-faq .wp-block-details summary::after {
	content: "+";
	display: grid;
	flex: none;
	place-items: center;
	width: 2rem;
	height: 2rem;
	border-radius: 50%;
	background: var(--mn-paper);
	font: 400 1.25rem / 1 var(--mn-font-text);
	transition: transform var(--mn-base) var(--mn-spring);
}
.mn-faq .wp-block-details[open] summary::after {
	content: "\2212";
	transform: rotate(180deg);
}
.mn-faq .wp-block-details > :not(summary) {
	max-width: 46rem;
	margin: 0 0 1.25rem;
	color: var(--mn-ink);
}

/* ---------- Instagram link block ---------- */
.mn-insta {
	padding: var(--wp--preset--spacing--60);
	border-radius: var(--mn-r-xl);
	background: var(--mn-surface);
}
.mn-insta h2 {
	margin: 0 0 0.5rem;
}
.mn-insta p {
	margin: 0 0 1.25rem;
	color: var(--mn-muted);
}
.mn-insta .wp-block-buttons {
	margin: 0;
}
.mn-insta .wp-block-button.is-style-outline .wp-block-button__link {
	border: 1px solid var(--mn-ink);
	background: transparent;
	color: var(--mn-ink);
}
.mn-insta .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--mn-ink);
	color: var(--mn-paper);
}

/* ---------- Newsletter band (form comes from a plugin shortcode): rounded inset panel ---------- */
.mn-newsletter {
	width: min(calc(100% - var(--mn-gutter) * 2), var(--wp--style--global--wide-size, 90rem));
	margin: var(--wp--preset--spacing--70) auto;
	padding-block: var(--wp--preset--spacing--70);
	border-radius: var(--mn-r-xl);
}
.mn-newsletter .mn-container {
	max-width: none;
}
.mn-newsletter__inner {
	display: grid;
	gap: 1.5rem 3rem;
	align-items: center;
}
@media (min-width: 48em) {
	.mn-newsletter__inner {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	}
}
.mn-newsletter__title {
	margin: 0 0 0.75rem;
	font-size: var(--wp--preset--font-size--display-s);
}
.mn-newsletter__copy p {
	margin: 0;
	font-size: var(--wp--preset--font-size--medium);
}
.mn-newsletter__form input[type="email"],
.mn-newsletter__form input[type="text"] {
	width: 100%;
	min-height: 3rem;
	padding: 0.6rem 1rem;
	border: 1px solid var(--mn-ink);
	border-radius: var(--mn-r-field);
	background: var(--mn-paper);
	color: var(--mn-ink);
	font: inherit;
}
.mn-newsletter__form button,
.mn-newsletter__form input[type="submit"] {
	min-height: 3rem;
	padding: 0.8rem 1.75rem;
	border: 1px solid var(--mn-ink);
	border-radius: var(--mn-r-pill);
	background: var(--mn-ink);
	color: var(--mn-paper);
	font: 600 var(--wp--preset--font-size--small) / 1.2 var(--mn-font-text);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
}
.mn-newsletter--hint {
	width: auto;
	margin: 0;
	padding: 1rem 0;
	border-radius: 0;
	background: var(--wp--preset--color--warning-soft);
	color: var(--mn-ink);
}
.mn-newsletter--hint p {
	margin: 0;
}
.mn-newsletter--hint a {
	color: var(--mn-ink);
}

/* ---------- Trust strip (renders only items the owner enabled) ---------- */
.mn-usp {
	border-bottom: 1px solid var(--mn-line);
}
.mn-usp__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1rem 2rem;
	margin: 0 auto;
	padding-block: 1.25rem;
	list-style: none;
}
.mn-usp__item {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
}
.mn-usp__title {
	margin: 0;
	font-weight: 600;
}
.mn-usp__text {
	margin: 0;
	color: var(--mn-muted);
	font-size: var(--wp--preset--font-size--small);
}

/* ---------- Reserved slot: product story (3D / scrollytelling). Hooks only, not active. ---------- */
.mn-story {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-radius: var(--mn-r-xl);
	background: var(--mn-surface);
}
.mn-story__stage {
	display: grid;
	place-items: center;
	min-height: 24rem;
}
.mn-story__chapter {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 60vh;
	padding: var(--wp--preset--spacing--60) var(--mn-gutter);
}
@media (min-width: 64em) {
	.mn-story {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
	}
	.mn-story__stage {
		position: sticky;
		top: var(--wp--custom--layout--header-height-lg);
		height: calc(100svh - var(--wp--custom--layout--header-height-lg));
	}
}