/**
 * LuksPlayZ homepage sections – Stealth Gaming.
 *
 * Reads the child theme's tokens (--lpz-*) with fallbacks, so the sections still
 * render sensibly under another theme. Loaded on the front end and in the editor.
 *
 * Brand icons (YouTube, TikTok, Instagram, Discord): Font Awesome Free, CC BY 4.0,
 * https://fontawesome.com/license/free – the same set Astra ships.
 */

.lpz-section {
	--s-bg: var(--lpz-bg, #0b0d12);
	--s-surface: var(--lpz-surface, #171a23);
	--s-raised: var(--lpz-surface-raised, #1e2230);
	--s-border: rgb(255 255 255 / 0.07);
	--s-border-strong: var(--lpz-border-strong, #3a4050);
	--s-accent: var(--lpz-accent, #8b5cf6);
	--s-accent-hover: var(--lpz-accent-hover, #a78bfa);
	--s-text: var(--lpz-text, #f5f5f7);
	--s-muted: var(--lpz-text-muted, #9ca3af);
	--s-on-accent: var(--lpz-on-accent, #0b0d12);
	--s-tile: #e4e4e7; /* Behind product photos; close to their light-grey studio backgrounds. */
	--s-radius: 20px;
	--s-button-radius: var(--lpz-radius-sm, 8px);
	--s-ease: var(--lpz-ease, cubic-bezier(0.2, 0.7, 0.2, 1));
	--s-gutter: var(--lpz-gutter, 20px);
	--s-width: var(--ast-normal-container-width, 1200px); /* Customizer → Global → Container → Container width. */
	--s-pad-top: clamp(3.5rem, 2.4rem + 3.5vw, 6rem);
	--s-pad-bottom: var(--s-pad-top);

	position: relative;
	margin: 0;
	padding: var(--s-pad-top) 0 var(--s-pad-bottom);
	color: var(--s-text);
}

/*
 * No flow-layout gaps between full-width sections. Astra also pads every top-level
 * group (.entry-content > .wp-block-group, 1.5–3em on each side); sections set their own.
 */
.entry-content > .lpz-section,
.entry-content > .lpz-section + .lpz-section {
	margin-block: 0;
}

.entry-content > .wp-block-group.lpz-section {
	padding: var(--s-pad-top) 0 var(--s-pad-bottom);
}

.lpz-section--surface {
	background: #0f1219;
	border-block: 1px solid rgb(255 255 255 / 0.04);
}

.lpz-container,
.wp-block-columns.lpz-container {
	width: min(var(--s-width), 100% - 2 * var(--s-gutter));
	max-width: none;
	margin-inline: auto;
	margin-block: 0;
}

/* Full-width page: let the first section sit directly under the header. */
body:has(.lpz-hero) #primary {
	margin-top: 0;
	padding-top: 0;
}

body:has(.lpz-hero) .entry-content > .lpz-hero:first-child {
	margin-top: 0;
}

/* ---------------------------------------------------------- Typography */

.lpz-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0 0 1rem;
	color: var(--s-accent-hover);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	line-height: 1.4;
	text-transform: uppercase;
}

.lpz-eyebrow::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	border-radius: 2px;
	background: currentColor;
}

.lpz-section .lpz-section-title {
	margin: 0 0 1rem;
	color: var(--s-text);
	font-size: clamp(1.875rem, 1.35rem + 2vw, 2.875rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: -0.025em;
	text-wrap: balance;
}

.lpz-section .lpz-section-lead {
	max-width: 60ch;
	margin: 0;
	color: var(--s-muted);
	font-size: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	line-height: 1.65;
}

.lpz-section p {
	color: var(--s-muted);
}

.lpz-section-head {
	margin-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem);
}

.lpz-section-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
}

.lpz-section-head--split .lpz-section-title {
	margin-bottom: 0;
}

.lpz-section-head--center {
	text-align: center;
}

.lpz-section-head--center .lpz-eyebrow {
	justify-content: center;
}

.lpz-section-head--center .lpz-section-lead {
	margin-inline: auto;
}

.lpz-link-more {
	margin: 0;
}

.lpz-link-more a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--s-text);
	font-weight: 700;
	text-decoration: none;
}

/* Card-style links are not body-text links: no underline (base.css underlines links inside .entry-content). */
.lpz-section p.lpz-link-more a,
.lpz-section .lpz-cat-grid a.lpz-cat,
.lpz-section .lpz-video-grid a.lpz-video {
	text-decoration: none;
}

.lpz-link-more a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--lpz-icon-arrow) center / contain no-repeat;
	mask: var(--lpz-icon-arrow) center / contain no-repeat;
	transition: translate 0.25s var(--s-ease);
}

.lpz-link-more a:hover {
	color: var(--s-accent-hover);
}

.lpz-link-more a:hover::after {
	translate: 4px 0;
}

/* ------------------------------------------------------------- Buttons */

.lpz-section {
	--lpz-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E");
	--lpz-icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

.lpz-section .wp-block-buttons {
	gap: 0.75rem;
}

/*
 * Shape and size only; primary colours come from the Customizer (Global → Buttons).
 * Selectors are long enough to beat Astra's outline-button preset (pill, 16px, weight 500, purple text).
 */
.lpz-section .wp-block-buttons > .wp-block-button > .wp-block-button__link.wp-element-button {
	padding: 0.95rem 1.6rem;
	border-radius: var(--s-button-radius);
	font-size: 0.875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	line-height: 1.2;
	transition: background-color 0.2s var(--s-ease), border-color 0.2s var(--s-ease), color 0.2s var(--s-ease), transform 0.2s var(--s-ease);
}

.lpz-section .wp-block-buttons > .wp-block-button > .wp-block-button__link.wp-element-button:hover {
	transform: translateY(-1px);
}

/* Secondary (outline) buttons: quiet ghost style, same size as the primary button. */
.lpz-section .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	background: transparent;
	border: 1px solid var(--s-border-strong);
	color: var(--s-text);
}

.lpz-section .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover,
.lpz-section .wp-block-buttons > .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:focus-visible {
	background: var(--s-raised);
	border-color: var(--s-accent);
	color: var(--s-text);
}

/* --------------------------------------------------------------- Hero */

.lpz-hero {
	--s-pad-top: clamp(2.5rem, 1rem + 4.5vw, 5.5rem);
	--s-pad-bottom: clamp(2.5rem, 1rem + 3vw, 4.5rem);

	overflow: hidden;
	isolation: isolate;
}

/* One restrained purple glow behind the photo, plus a faint grid that fades out. */
.lpz-hero::before {
	content: "";
	position: absolute;
	top: -18%;
	right: -12%;
	z-index: -1;
	width: min(70vw, 900px);
	aspect-ratio: 1;
	background: radial-gradient(closest-side, rgb(139 92 246 / 0.2), transparent 72%);
	pointer-events: none;
}

.lpz-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background-image:
		linear-gradient(rgb(255 255 255 / 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgb(255 255 255 / 0.035) 1px, transparent 1px);
	background-size: 56px 56px;
	-webkit-mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 75%);
	mask-image: radial-gradient(ellipse 70% 60% at 70% 40%, #000 0%, transparent 75%);
	pointer-events: none;
}

.lpz-hero__grid {
	gap: clamp(2rem, 0.5rem + 5vw, 6rem);
}

/* The headline scales with its own column, so "MOJE KREACIJE." stays on one line at every width. */
.lpz-hero__copy {
	container-type: inline-size;
}

.lpz-section .lpz-hero__title {
	margin: 0 0 1.5rem;
	color: var(--s-text);
	font-size: clamp(2.25rem, 1.2rem + 5vw, 5.25rem); /* Browsers without container units. */
	font-size: clamp(2.125rem, 12cqi, 5.25rem);
	font-weight: 700;
	line-height: 1.02;
	letter-spacing: -0.035em;
	text-wrap: balance;
}

.lpz-hero__title strong {
	color: var(--s-accent-hover);
	font-weight: inherit;
}

.lpz-section .lpz-hero__lead {
	max-width: 40ch;
	margin: 0;
	color: var(--s-muted);
	font-size: clamp(1.125rem, 1rem + 0.5vw, 1.375rem);
	line-height: 1.55;
}

.lpz-hero__actions {
	margin-top: 2.25rem;
}

.lpz-section .lpz-hero__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.75rem;
	margin: 2.75rem 0 0;
	padding: 0;
	list-style: none;
	color: var(--s-muted);
	font-size: 0.9375rem;
}

.lpz-hero__facts li {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
}

.lpz-hero__facts li::before {
	content: "";
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	background: var(--s-accent-hover);
	-webkit-mask: var(--lpz-icon-check) center / contain no-repeat;
	mask: var(--lpz-icon-check) center / contain no-repeat;
}

/* Photo frame with a thin offset outline. */
.lpz-hero__media,
.lpz-creator__media {
	position: relative;
}

.lpz-hero__media::before {
	content: "";
	position: absolute;
	inset: 1.75rem -1.25rem -1.25rem 1.75rem;
	border: 1px solid rgb(167 139 250 / 0.35);
	border-radius: 30px;
	pointer-events: none;
}

.lpz-section .lpz-frame {
	position: relative;
	z-index: 1;
	margin: 0;
	overflow: hidden;
	border: 1px solid rgb(255 255 255 / 0.08);
	border-radius: 24px;
	background: var(--s-surface);
	box-shadow: 0 30px 80px rgb(0 0 0 / 0.45);
}

.lpz-section .lpz-frame img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

/* Entrance on page load (CSS only, so it never blocks content). */
@keyframes lpz-rise {
	from {
		opacity: 0;
		translate: 0 18px;
	}
}

.lpz-hero__copy > * {
	animation: lpz-rise 0.8s var(--s-ease) both;
}

.lpz-hero__copy > :nth-child(2) { animation-delay: 80ms; }
.lpz-hero__copy > :nth-child(3) { animation-delay: 160ms; }
.lpz-hero__copy > :nth-child(4) { animation-delay: 240ms; }
.lpz-hero__copy > :nth-child(5) { animation-delay: 320ms; }

.lpz-hero__media {
	animation: lpz-rise 1s var(--s-ease) 0.2s both;
}

/* Desktop: a slightly smaller photo keeps the hero within one screen. */
@media (min-width: 782px) {
	.lpz-section .lpz-hero__grid > .wp-block-column.lpz-hero__media {
		max-width: 460px;
		margin-left: auto;
	}
}

/*
 * Tablet (600–781px): keep the split layout instead of a full-width stacked photo.
 * Core stacks columns below 782px with !important, so the override needs it too.
 */
@media (min-width: 600px) and (max-width: 781px) {
	.lpz-section .wp-block-columns.lpz-hero__grid,
	.lpz-section .wp-block-columns.lpz-creator__grid {
		flex-wrap: nowrap !important;
		gap: 2rem;
	}

	.lpz-section .lpz-hero__grid > .wp-block-column.lpz-hero__copy {
		flex-basis: 60% !important;
		flex-grow: 0;
	}

	.lpz-section .lpz-hero__grid > .wp-block-column.lpz-hero__media {
		flex-basis: 0 !important;
		flex-grow: 1;
	}

	.lpz-section .lpz-hero__lead {
		font-size: 1.0625rem;
	}

	.lpz-section .lpz-hero__facts {
		flex-direction: column;
		margin-top: 2rem;
	}
}

@media (max-width: 781px) {
	.lpz-hero__media::before {
		inset: 1rem -0.75rem -0.75rem 1rem;
	}
}

/* Phones: copy first, then a compact photo. */
@media (max-width: 599px) {
	/* max-width, not width: core forces flex-basis 100% on stacked columns. */
	.lpz-section .lpz-hero__grid > .wp-block-column.lpz-hero__media {
		max-width: 300px;
		margin-inline: auto;
	}

	.lpz-hero__actions {
		margin-top: 1.75rem;
	}

	.lpz-section .lpz-hero__facts {
		margin-top: 2rem;
	}
}

/* ----------------------------------------------------- Category cards */

.lpz-cat-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
	gap: 1.25rem;
}

.lpz-cat {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius);
	background: var(--s-surface);
	color: var(--s-text);
	text-decoration: none;
	transition:
		opacity 0.6s ease var(--lpz-delay, 0ms),
		translate 0.6s var(--s-ease) var(--lpz-delay, 0ms),
		transform 0.3s var(--s-ease),
		border-color 0.3s var(--s-ease),
		box-shadow 0.3s var(--s-ease);
}

.lpz-cat:hover,
.lpz-cat:focus-visible {
	transform: translateY(-4px);
	border-color: rgb(167 139 250 / 0.45);
	/* The accent at 45%: purple on LuksPlayZ Shop (same colour as above), gold where the 3D PrintXpress layer re-points the accent. */
	border-color: color-mix(in srgb, var(--lpz-accent-hover, #a78bfa) 45%, transparent);
	box-shadow: 0 18px 44px rgb(0 0 0 / 0.4);
	color: var(--s-text);
}

.lpz-cat__media {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--s-tile);
}

/* Category tiles are illustrative, so the photo fills the tile (no white frame). */
.lpz-cat__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s var(--s-ease);
}

.lpz-cat:hover .lpz-cat__img {
	transform: scale(1.05);
}

.lpz-cat__body {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 1.25rem 4.5rem 1.5rem 1.5rem;
}

.lpz-cat__name {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.lpz-cat__count {
	color: var(--s-muted);
	font-size: 0.9375rem;
}

.lpz-cat__arrow {
	position: absolute;
	right: 1.25rem;
	bottom: 1.5rem;
	width: 2.5rem;
	height: 2.5rem;
	border: 1px solid var(--s-border-strong);
	border-radius: 999px;
	transition: background-color 0.3s var(--s-ease), border-color 0.3s var(--s-ease);
}

.lpz-cat__arrow::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--s-text);
	-webkit-mask: var(--lpz-icon-arrow) center / 1rem no-repeat;
	mask: var(--lpz-icon-arrow) center / 1rem no-repeat;
}

.lpz-cat:hover .lpz-cat__arrow {
	background: var(--s-accent);
	border-color: var(--s-accent);
}

.lpz-cat:hover .lpz-cat__arrow::before {
	background: var(--s-on-accent);
}

/* Tablet: three compact cards in one row instead of two plus an orphan. */
@media (min-width: 600px) and (max-width: 921px) {
	.lpz-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}

	.lpz-cat__body {
		padding: 1rem 3.5rem 1.125rem 1.125rem;
	}

	.lpz-cat__name {
		font-size: 1.0625rem;
		line-height: 1.3;
	}

	.lpz-cat__count {
		font-size: 0.875rem;
	}

	.lpz-cat__arrow {
		right: 1rem;
		bottom: 1.125rem;
		width: 2.25rem;
		height: 2.25rem;
	}
}

/* ---------------------------------------------------- Product grids */

/*
 * Columns: 4 on desktop, 2 from 921px down, 1 below 360px. The `body … :not(.elementor-grid)`
 * selector outranks Astra's own grid rules (3 columns on tablet, 2 on phones).
 */
.lpz-products ul.products,
body .lpz-products .woocommerce ul.products:not(.elementor-grid) {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0;
	padding: 0;
}

.lpz-products ul.products::before,
.lpz-products ul.products::after {
	display: none;
}

/* One card in a promotion. */
.lpz-promo .lpz-products ul.products,
body .lpz-section.lpz-promo .lpz-products .woocommerce ul.products {
	grid-template-columns: minmax(0, 1fr);
}

/* A single 3D PrintXpress category keeps a normal card size instead of filling the page. */
.lpz-needs-categories .lpz-cat-grid {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr));
}

/*
 * Card rules start with `body` so they outrank Astra's equally specific
 * `.woocommerce-js ul.products li.product …` rules regardless of stylesheet order.
 */
body .lpz-products ul.products li.product {
	position: relative;
	display: flex;
	flex-direction: column;
	float: none;
	width: auto;
	margin: 0;
	padding: 0;
	overflow: visible; /* The anchor-price tooltip must not be cut off; the photo area clips itself. */
	border: 1px solid var(--s-border);
	border-radius: 18px;
	background: var(--s-surface);
	text-align: left;
	transition:
		opacity 0.6s ease var(--lpz-delay, 0ms),
		translate 0.6s var(--s-ease) var(--lpz-delay, 0ms),
		transform 0.3s var(--s-ease),
		border-color 0.3s var(--s-ease),
		box-shadow 0.3s var(--s-ease);
}

body .lpz-products ul.products li.product:hover {
	transform: translateY(-4px);
	border-color: rgb(167 139 250 / 0.45);
	box-shadow: 0 18px 44px rgb(0 0 0 / 0.4);
}

body .lpz-products ul.products li.product .astra-shop-thumbnail-wrap {
	display: block;
	position: relative;
	aspect-ratio: 1;
	overflow: hidden;
	border-radius: 17px 17px 0 0;
	background: var(--s-tile);
}

/* Product photos: never cropped (contain), edge to edge so their own studio background meets the tile. */
body .lpz-products ul.products li.product img {
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	object-fit: contain;
	transition: transform 0.6s var(--s-ease);
}

body .lpz-products ul.products li.product:hover img {
	transform: scale(1.05);
}

body .lpz-products ul.products li.product .astra-shop-summary-wrap {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 0.375rem;
	padding: 1.125rem 1.25rem 1.25rem;
}

body .lpz-products ul.products li.product .ast-woo-product-category {
	display: block;
	overflow: hidden;
	margin: 0;
	color: var(--s-muted);
	opacity: 1; /* Astra fades it to 60%, too faint on the dark card. */
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	line-height: 1.4;
	text-overflow: ellipsis;
	text-transform: uppercase;
	white-space: nowrap;
}

body .lpz-products ul.products li.product .woocommerce-loop-product__title {
	margin: 0;
	padding: 0;
	color: var(--s-text);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

/* Price, anchor price and button sit at the bottom of every card, so they line up across a row. */
body .lpz-products ul.products li.product .price {
	display: block;
	margin: auto 0 1rem;
	padding-top: 0.5rem;
	color: var(--s-text);
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.3;
}

body .lpz-products ul.products li.product .price del {
	opacity: 1;
	margin-right: 0.375rem;
	font-size: 0.875em;
	font-weight: 400;
}

/* MJDD Sidrena Cijena owns its output and styles. Position only: its tooltip opens to the right, so on the
   last card of a row it opens to the left and stays on screen. Without this rule it would run off the edge. */
@media (min-width: 922px) {
	body .lpz-products ul.products li.product:nth-child(4n) .sidrena-cijena__tooltip {
		right: 0;
		left: auto;
	}

	body .lpz-products ul.products li.product:nth-child(4n) .sidrena-cijena__tooltip::after {
		right: 1.2em;
		left: auto;
	}
}

@media (min-width: 360px) and (max-width: 921px) {
	body .lpz-products ul.products li.product:nth-child(2n) .sidrena-cijena__tooltip {
		right: 0;
		left: auto;
	}

	body .lpz-products ul.products li.product:nth-child(2n) .sidrena-cijena__tooltip::after {
		right: 1.2em;
		left: auto;
	}
}

body .lpz-products ul.products li.product .astra-shop-summary-wrap .button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: var(--lpz-touch, 44px);
	margin: 0;
	padding: 0.625rem 1rem;
	border-radius: var(--s-button-radius);
	font-size: 0.875rem;
	letter-spacing: 0.02em;
	line-height: 1.25;
	text-align: center;
	white-space: normal;
}

body .lpz-products ul.products li.product .onsale {
	top: 0.75rem;
	left: 0.75rem;
	right: auto;
	z-index: 2;
	margin: 0;
}

@media (max-width: 921px) {
	.lpz-products ul.products,
	body .lpz-products .woocommerce ul.products:not(.elementor-grid) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 1rem;
	}
}

/* Phones: two narrower columns. */
@media (max-width: 599px) {
	.lpz-products ul.products,
	body .lpz-products .woocommerce ul.products:not(.elementor-grid) {
		gap: 0.75rem;
	}

	body .lpz-products ul.products li.product .astra-shop-summary-wrap {
		gap: 0.25rem;
		padding: 0.875rem 0.875rem 1rem;
	}

	body .lpz-products ul.products li.product .ast-woo-product-category {
		font-size: 0.6875rem;
		letter-spacing: 0.06em;
	}

	body .lpz-products ul.products li.product .woocommerce-loop-product__title {
		font-size: 0.9375rem;
	}

	body .lpz-products ul.products li.product .price {
		margin-bottom: 0.875rem;
		font-size: 1rem;
	}

	body .lpz-products ul.products li.product .astra-shop-summary-wrap .button {
		padding: 0.5rem 0.625rem;
		font-size: 0.8125rem;
		letter-spacing: 0.01em;
	}
}

@media (max-width: 359px) {
	.lpz-products ul.products,
	body .lpz-products .woocommerce ul.products:not(.elementor-grid) {
		grid-template-columns: minmax(0, 1fr);
	}

}

/* ----------------------------------------------------------- Creator */

.lpz-creator__grid {
	gap: clamp(2.5rem, 1rem + 5vw, 6rem);
}

.lpz-creator__media::before {
	content: "";
	position: absolute;
	inset: -1.25rem 1.75rem 1.75rem -1.25rem;
	border-radius: 30px;
	background: radial-gradient(closest-side, rgb(139 92 246 / 0.16), transparent);
	pointer-events: none;
}

.lpz-creator__copy .wp-block-buttons {
	margin-top: 2.25rem;
}

/* Lead in full text colour, body in muted; both kept to a comfortable line length. */
.lpz-section .lpz-creator__copy .lpz-section-lead {
	max-width: 30em;
	margin-top: 1.5rem;
	color: var(--s-text);
	font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3125rem);
	line-height: 1.6;
}

.lpz-section .lpz-creator__copy p:not(.lpz-eyebrow):not(.lpz-section-lead) {
	max-width: 36em;
	margin-top: 1.25rem;
	margin-bottom: 0;
	font-size: 1.0625rem;
	line-height: 1.75;
}

/* Tablet: photo beside the text (see the hero for why !important is needed). */
@media (min-width: 600px) and (max-width: 781px) {
	.lpz-section .lpz-creator__grid > .wp-block-column.lpz-creator__media {
		flex-basis: 38% !important;
		flex-grow: 0;
	}

	.lpz-section .lpz-creator__grid > .wp-block-column.lpz-creator__copy {
		flex-basis: 0 !important;
		flex-grow: 1;
	}
}

@media (max-width: 599px) {
	.lpz-section .lpz-creator__grid > .wp-block-column.lpz-creator__media {
		max-width: 300px;
		margin-inline: auto;
	}

	.lpz-section .lpz-creator__copy p:not(.lpz-eyebrow):not(.lpz-section-lead) {
		font-size: 1rem;
		line-height: 1.7;
	}

	.lpz-creator__copy .wp-block-buttons {
		margin-top: 1.75rem;
	}
}

/* ------------------------------------------------------ Partnerships */

.lpz-section .lpz-panel {
	gap: clamp(2rem, 1rem + 4vw, 4.5rem);
	margin: 0;
	padding: clamp(2rem, 1rem + 4vw, 4.5rem);
	border: 1px solid var(--s-border);
	border-radius: 28px;
	background:
		radial-gradient(120% 120% at 0% 0%, rgb(139 92 246 / 0.12), transparent 50%),
		var(--s-surface);
}

.lpz-collab__intro .wp-block-buttons {
	margin-top: 2rem;
}

.lpz-collab__formats {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem;
	align-content: center;
}

/* margin: 0 cancels the flow layout's top margin, which staggered the grid. */
.lpz-section .lpz-collab__formats > .lpz-feature {
	margin: 0;
}

.lpz-feature {
	padding: 1.5rem;
	border: 1px solid var(--s-border);
	border-radius: 16px;
	background: rgb(255 255 255 / 0.02);
	transition: border-color 0.3s var(--s-ease), background-color 0.3s var(--s-ease);
}

.lpz-feature:hover {
	border-color: rgb(167 139 250 / 0.35);
	background: rgb(255 255 255 / 0.035);
}

.lpz-feature::before {
	content: "";
	display: block;
	width: 1.75rem;
	height: 3px;
	margin-bottom: 1.125rem;
	border-radius: 3px;
	background: var(--s-accent);
}

.lpz-section .lpz-feature__title {
	margin: 0 0 0.375rem;
	color: var(--s-text);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

.lpz-feature p {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.6;
}

/* Tablet and phones: the panel stacks; tighter padding and smaller cards. Desktop is unchanged. */
@media (max-width: 781px) {
	.lpz-section .lpz-panel {
		gap: 2rem;
		padding: clamp(1.5rem, 0.75rem + 3vw, 2.5rem);
		border-radius: 22px;
	}

	.lpz-collab__intro .wp-block-buttons {
		margin-top: 1.5rem;
	}

	.lpz-collab__formats {
		gap: 0.75rem;
	}

	.lpz-feature {
		padding: 1.125rem 1.25rem;
		border-radius: 14px;
	}

	.lpz-feature::before {
		margin-bottom: 0.75rem;
	}

	.lpz-section .lpz-feature__title {
		font-size: 1rem;
	}

	.lpz-feature p {
		font-size: 0.875rem;
		line-height: 1.55;
	}
}

/* Phones: one column, accent bar on the left instead of on top to save height. */
@media (max-width: 599px) {
	.lpz-collab__formats {
		grid-template-columns: minmax(0, 1fr);
	}

	.lpz-feature {
		display: grid;
		grid-template-columns: 3px minmax(0, 1fr);
		column-gap: 0.875rem;
		padding: 1rem 1.125rem;
	}

	.lpz-feature::before {
		grid-row: 1 / span 2;
		width: 3px;
		height: auto;
		margin: 0;
	}

	.lpz-feature > * {
		grid-column: 2;
	}
}

/* --------------------------------------------------------- Community */

.lpz-social-buttons {
	justify-content: center;
}

.lpz-section .wp-block-buttons > .wp-block-button.lpz-sb > .wp-block-button__link.wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 0.625rem;
	letter-spacing: 0.02em;
}

.lpz-sb .wp-block-button__link::before {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	background: currentColor;
	-webkit-mask: var(--lpz-sb-icon) center / contain no-repeat;
	mask: var(--lpz-sb-icon) center / contain no-repeat;
}

.lpz-sb--youtube { --lpz-sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E"); }
.lpz-sb--tiktok { --lpz-sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16.708 0.027c1.745-0.027 3.48-0.011 5.213-0.027 0.105 2.041 0.839 4.12 2.333 5.563 1.491 1.479 3.6 2.156 5.652 2.385v5.369c-1.923-0.063-3.855-0.463-5.6-1.291-0.76-0.344-1.468-0.787-2.161-1.24-0.009 3.896 0.016 7.787-0.025 11.667-0.104 1.864-0.719 3.719-1.803 5.255-1.744 2.557-4.771 4.224-7.88 4.276-1.907 0.109-3.812-0.411-5.437-1.369-2.693-1.588-4.588-4.495-4.864-7.615-0.032-0.667-0.043-1.333-0.016-1.984 0.24-2.537 1.495-4.964 3.443-6.615 2.208-1.923 5.301-2.839 8.197-2.297 0.027 1.975-0.052 3.948-0.052 5.923-1.323-0.428-2.869-0.308-4.025 0.495-0.844 0.547-1.485 1.385-1.819 2.333-0.276 0.676-0.197 1.427-0.181 2.145 0.317 2.188 2.421 4.027 4.667 3.828 1.489-0.016 2.916-0.88 3.692-2.145 0.251-0.443 0.532-0.896 0.547-1.417 0.131-2.385 0.079-4.76 0.095-7.145 0.011-5.375-0.016-10.735 0.025-16.093z'/%3E%3C/svg%3E"); }
.lpz-sb--instagram { --lpz-sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224,202.66A53.34,53.34,0,1,0,277.36,256,53.38,53.38,0,0,0,224,202.66Zm124.71-41a54,54,0,0,0-30.41-30.41c-21-8.29-71-6.43-94.3-6.43s-73.25-1.93-94.31,6.43a54,54,0,0,0-30.41,30.41c-8.28,21-6.43,71.05-6.43,94.33S91,329.26,99.32,350.33a54,54,0,0,0,30.41,30.41c21,8.29,71,6.43,94.31,6.43s73.24,1.93,94.3-6.43a54,54,0,0,0,30.41-30.41c8.35-21,6.43-71.05,6.43-94.33S357.1,182.74,348.75,161.67ZM224,338a82,82,0,1,1,82-82A81.9,81.9,0,0,1,224,338Zm85.38-148.3a19.14,19.14,0,1,1,19.13-19.14A19.1,19.1,0,0,1,309.42,189.74ZM400,32H48A48,48,0,0,0,0,80V432a48,48,0,0,0,48,48H400a48,48,0,0,0,48-48V80A48,48,0,0,0,400,32ZM382.88,322c-1.29,25.63-7.14,48.34-25.85,67s-41.4,24.63-67,25.85c-26.41,1.49-105.59,1.49-132,0-25.63-1.29-48.26-7.15-67-25.85s-24.63-41.42-25.85-67c-1.49-26.42-1.49-105.61,0-132,1.29-25.63,7.07-48.34,25.85-67s41.47-24.56,67-25.78c26.41-1.49,105.59-1.49,132,0,25.63,1.29,48.33,7.15,67,25.85s24.63,41.42,25.85,67.05C384.37,216.44,384.37,295.56,382.88,322Z'/%3E%3C/svg%3E"); }
.lpz-sb--discord { --lpz-sb-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M297.216 243.2c0 15.616-11.52 28.416-26.112 28.416-14.336 0-26.112-12.8-26.112-28.416s11.52-28.416 26.112-28.416c14.592 0 26.112 12.8 26.112 28.416zm-119.552-28.416c-14.592 0-26.112 12.8-26.112 28.416s11.776 28.416 26.112 28.416c14.592 0 26.112-12.8 26.112-28.416.256-15.616-11.52-28.416-26.112-28.416zM448 52.736V512c-64.494-56.994-43.868-38.128-118.784-107.776l13.568 47.36H52.48C23.552 451.584 0 428.032 0 398.848V52.736C0 23.552 23.552 0 52.48 0h343.04C424.448 0 448 23.552 448 52.736zm-72.96 242.688c0-82.432-36.864-149.248-36.864-149.248-36.864-27.648-71.936-26.88-71.936-26.88l-3.584 4.096c43.52 13.312 63.744 32.512 63.744 32.512-60.811-33.329-132.244-33.335-191.232-7.424-9.472 4.352-15.104 7.424-15.104 7.424s21.248-20.224 67.328-33.536l-2.56-3.072s-35.072-.768-71.936 26.88c0 0-36.864 66.816-36.864 149.248 0 0 21.504 37.12 78.08 38.912 0 0 9.472-11.52 17.152-21.248-32.512-9.728-44.8-30.208-44.8-30.208 3.766 2.636 9.976 6.053 10.496 6.4 43.21 24.198 104.588 32.126 159.744 8.96 8.96-3.328 18.944-8.192 29.44-15.104 0 0-12.8 20.992-46.336 30.464 7.68 9.728 16.896 20.736 16.896 20.736 56.576-1.792 78.336-38.912 78.336-38.912z'/%3E%3C/svg%3E"); }

.lpz-section .lpz-subhead {
	margin: clamp(3rem, 2rem + 3vw, 4.5rem) 0 1.5rem;
	color: var(--s-text);
	font-size: 1.25rem;
	font-weight: 700;
}

/* Hide the "Najnoviji videi" heading when the video block has nothing to show. */
.lpz-subhead:last-child {
	display: none;
}

.lpz-video-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
	gap: 1.25rem;
}

.lpz-video {
	display: flex;
	flex-direction: column;
	gap: 0.875rem;
	color: var(--s-text);
	text-decoration: none;
	transition:
		opacity 0.6s ease var(--lpz-delay, 0ms),
		translate 0.6s var(--s-ease) var(--lpz-delay, 0ms);
}

.lpz-video__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border: 1px solid var(--s-border);
	border-radius: 16px;
	background: var(--s-surface);
}

.lpz-video__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Crops YouTube's 4:3 letterbox bars. */
	transition: transform 0.6s var(--s-ease);
}

.lpz-video__play {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 3.5rem;
	height: 3.5rem;
	translate: -50% -50%;
	border: 1px solid rgb(255 255 255 / 0.25);
	border-radius: 999px;
	background: rgb(11 13 18 / 0.72);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: background-color 0.3s var(--s-ease), border-color 0.3s var(--s-ease);
}

.lpz-video__play::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	translate: -50% -50%;
	border-style: solid;
	border-width: 0.5rem 0 0.5rem 0.8rem;
	border-color: transparent transparent transparent #fff;
}

.lpz-video:hover .lpz-video__thumb img {
	transform: scale(1.04);
}

.lpz-video:hover .lpz-video__play {
	border-color: var(--s-accent);
	background: var(--s-accent);
}

.lpz-video__title {
	display: -webkit-box;
	overflow: hidden;
	font-weight: 700;
	line-height: 1.4;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
}

.lpz-video:hover .lpz-video__title {
	color: var(--s-accent-hover);
}

/* ------------------------------------------------- Pages (Kontakt, O meni) */

/* Under the page title the first section starts closer than on the homepage. */
.lpz-section--page,
.entry-content > .wp-block-group.lpz-section--page {
	padding-top: clamp(1rem, 0.5rem + 1.5vw, 2rem);
}

/*
 * O meni: until the owner picks a real photo, visitors see the text alone (the copy column fills the
 * row); the placeholder stays visible in the editor as the spot for the photo.
 */
.lpz-about .lpz-creator__media:has(img[src*="portrait-placeholder.svg"]) {
	display: none;
}

.editor-styles-wrapper .lpz-about .lpz-creator__media:has(img[src*="portrait-placeholder.svg"]) {
	display: block;
}

/* Text alone: one centred column, like the other section headings, instead of an empty right half. */
.lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) > .lpz-creator__copy {
	max-width: 44rem;
	margin-inline: auto;
	text-align: center;
}

.lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) .lpz-eyebrow {
	justify-content: center;
}

.lpz-section.lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) p:not(.lpz-eyebrow) {
	margin-inline: auto;
}

.lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) .wp-block-buttons {
	justify-content: center;
}

.editor-styles-wrapper .lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) > .lpz-creator__copy {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}

.editor-styles-wrapper .lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) .lpz-eyebrow,
.editor-styles-wrapper .lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) .wp-block-buttons {
	justify-content: flex-start;
}

.editor-styles-wrapper .lpz-section.lpz-about .lpz-creator__grid:has(img[src*="portrait-placeholder.svg"]) p:not(.lpz-eyebrow) {
	margin-inline: 0;
}

.lpz-section .lpz-card {
	padding: clamp(1.25rem, 0.9rem + 1.2vw, 2rem);
	border: 1px solid var(--s-border);
	border-radius: var(--s-radius);
	background: var(--s-surface);
}

.lpz-section .lpz-contact__intro {
	max-width: 40em;
	margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
	color: var(--s-text);
}

.lpz-contact__grid.wp-block-columns {
	align-items: flex-start;
	gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
	margin: 0;
}

.lpz-contact.lpz-section h2 {
	margin: 0 0 1rem;
	font-size: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
	line-height: 1.3;
}

.lpz-contact.lpz-section h3 {
	margin: 1.75rem 0 0.75rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--s-border);
	font-size: 1.0625rem;
	line-height: 1.4;
}

.lpz-contact.lpz-section p,
.lpz-contact.lpz-section li {
	color: var(--s-muted);
	line-height: 1.7;
	overflow-wrap: break-word;
}

.lpz-contact.lpz-section p {
	margin: 0 0 0.875rem;
}

.lpz-contact.lpz-section strong {
	color: var(--s-text);
}

.lpz-contact.lpz-section ul {
	margin: 0 0 1rem;
	padding-left: 1.25rem;
}

.lpz-contact.lpz-section li::marker {
	color: var(--s-accent);
}

.lpz-contact.lpz-section a {
	color: var(--s-accent-hover);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.lpz-contact.lpz-section a:hover,
.lpz-contact.lpz-section a:focus-visible {
	color: var(--s-text);
}

.lpz-contact.lpz-section a strong {
	color: inherit;
}

.lpz-contact.lpz-section p.lpz-contact__footer {
	margin: clamp(1.5rem, 1rem + 1.5vw, 2.5rem) 0 0;
	font-size: 0.875rem;
}

/* Stacked cards below the columns breakpoint (core columns stack at 781px). */
@media (max-width: 781px) {
	.lpz-contact__grid.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* ------------------------------------------------- Scroll reveal (JS) */

/* Only active once reveal.js has run; without JS everything is simply visible. */
.lpz-js .lpz-reveal .lpz-section-head,
.lpz-js .lpz-reveal .lpz-panel,
.lpz-js .lpz-reveal .lpz-creator__grid,
.lpz-js .lpz-reveal .lpz-social-buttons,
.lpz-js .lpz-reveal .lpz-stagger > *,
.lpz-js .lpz-reveal .lpz-products ul.products > li {
	opacity: 0;
	translate: 0 20px;
}

.lpz-js .lpz-reveal .lpz-section-head,
.lpz-js .lpz-reveal .lpz-panel,
.lpz-js .lpz-reveal .lpz-creator__grid,
.lpz-js .lpz-reveal .lpz-social-buttons {
	transition: opacity 0.7s ease, translate 0.7s var(--s-ease);
}

.lpz-js .lpz-reveal.is-visible .lpz-section-head,
.lpz-js .lpz-reveal.is-visible .lpz-panel,
.lpz-js .lpz-reveal.is-visible .lpz-creator__grid,
.lpz-js .lpz-reveal.is-visible .lpz-social-buttons,
.lpz-js .lpz-reveal.is-visible .lpz-stagger > *,
.lpz-js .lpz-reveal.is-visible .lpz-products ul.products > li {
	opacity: 1;
	translate: none;
}

@media (prefers-reduced-motion: reduce) {
	.lpz-hero__copy > *,
	.lpz-hero__media {
		animation: none;
	}

	.lpz-cat,
	.lpz-cat__img,
	.lpz-products ul.products li.product,
	.lpz-products ul.products li.product img,
	.lpz-video,
	.lpz-video__thumb img {
		transition: none;
	}

	.lpz-cat:hover,
	.lpz-products ul.products li.product:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------ Editor */

.editor-styles-wrapper .lpz-hero__copy > *,
.editor-styles-wrapper .lpz-hero__media {
	animation: none;
}

.lpz-editor-notice {
	margin: 0;
	padding: 1.25rem 1.5rem;
	border: 1px dashed var(--lpz-border-strong, #3a4050);
	border-radius: 12px;
	color: var(--lpz-text-muted, #9ca3af);
	font-size: 0.9375rem;
}