/* =====================================================================
   LX4Tours · Brand motifs
   Hexagonal shapes derived from the logo. Used sparingly — never on
   buttons or tap targets. Pointy-top orientation, never rotated.
   ===================================================================== */

/* Hex container — wrap an icon or image inside. */
.lx-hex {
	display: inline-grid;
	place-items: center;
	width: 64px;
	aspect-ratio: 1 / 1.1547; /* pointy-top hex */
	clip-path: var(--hex-clip);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast-strong);
}

.lx-hex--md { width: 88px; }
.lx-hex--lg { width: 120px; }

.lx-hex--muted { background: var(--wp--preset--color--muted); color: var(--wp--preset--color--primary-text); }
.lx-hex--dark  { background: var(--wp--preset--color--dark); color: var(--wp--preset--color--contrast-inverse); }
.lx-hex--outline {
	background: transparent;
	border: 0;
	position: relative;
}
.lx-hex--outline::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--primary);
	clip-path: var(--hex-clip);
}
.lx-hex--outline::after {
	content: "";
	position: absolute;
	inset: 2px;
	background: var(--wp--preset--color--base);
	clip-path: var(--hex-clip);
}
.lx-hex--outline > * { position: relative; z-index: 1; color: var(--wp--preset--color--primary-text); }

/* Hex-masked image. */
.lx-hex-image {
	clip-path: var(--hex-clip);
	aspect-ratio: 1 / 1.1547;
	object-fit: cover;
	width: 100%;
}

/* Subtle hex pattern background (watermark). */
.lx-hex-pattern {
	background-color: var(--wp--preset--color--muted);
	background-image:
		radial-gradient(circle at 50% 0,
			color-mix(in srgb, var(--wp--preset--color--primary) 15%, transparent) 0 1px,
			transparent 1px);
	background-size: 24px 28px;
}

/* Dust-dot overlay for hero. */
.lx-dust {
	position: relative;
}
.lx-dust::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(rgba(255, 255, 255, 0.12) 1.5px, transparent 1.5px);
	background-size: 18px 18px;
	opacity: 0.5;
	mix-blend-mode: screen;
}