/**
 * Texture Layer — CSS Generative Ornaments
 * Axis 3 of the 3-axis design system.
 *
 * Auto-applies to existing block HTML.
 * No manual classes needed — reads --bouw-tex-* tokens.
 * Everything pure CSS, no JS, scales infinitely.
 *
 * @package YCDesignSystem
 * @since 1.3.0
 */


/* ============================================
   1. SECTION DIVIDERS
   Auto-applied between adjacent wp-block-group sections.
   Uses the divider-height token — when 1px it's a clean
   line, when larger it gets the clip-path shape.
   ============================================ */

.entry-content > .wp-block-group + .wp-block-group {
	position: relative;
}

.entry-content > .wp-block-group + .wp-block-group::before {
	content: '';
	position: absolute;
	top: 0;
	left: 10%;
	right: 10%;
	height: var(--bouw-tex-divider-height, 1px);
	background: var(--divider-subtle, rgba(60, 42, 20, 0.08));
	pointer-events: none;
	z-index: 1;
}


/* ============================================
   2. BACKGROUND ORNAMENT — Dot pattern
   Auto-applied on even sections (the ones with
   surface background from premium-layer.css).
   Only renders when ornament-opacity > 0.
   ============================================ */

.entry-content > .wp-block-group:nth-child(even) {
	position: relative;
}

.entry-content > .wp-block-group:nth-child(even)::after {
	content: '';
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 0;
	opacity: var(--bouw-tex-ornament-opacity, 0);
	background-image: radial-gradient(
		var(--bouw-tex-ornament-color, currentColor) 1px,
		transparent 1px
	);
	background-size:
		var(--bouw-tex-ornament-size, 24px)
		var(--bouw-tex-ornament-size, 24px);
}

/* Content above the ornament pattern */
.entry-content > .wp-block-group:nth-child(even) > * {
	position: relative;
	z-index: 1;
}


/* ============================================
   3. HERO ORNAMENT — Grid overlay
   Auto-applied on the hero block.
   Opacity from token — 0 means invisible.
   ============================================ */

/* Hero texture styles moved to css/blocks/hero.css */


/* ============================================
   4. CARD CORNER ACCENT
   Auto-applied to service cards.
   Size from token — 0px means no corner.
   ============================================ */

.bouw-service-card {
	position: relative;
	overflow: hidden;
}

.bouw-service-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: var(--bouw-tex-card-corner-size, 0px);
	height: var(--bouw-tex-card-corner-size, 0px);
	background: var(--bouw-primary, #1565c0);
	opacity: 0.1;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	pointer-events: none;
	z-index: 1;
	transition: opacity var(--motion-fast, 150ms) ease;
}

.bouw-service-card:hover::before {
	opacity: 0.18;
}

/* Same for project/realization cards */
.bouw-project-card {
	position: relative;
	overflow: hidden;
}

.bouw-project-card::before {
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	width: var(--bouw-tex-card-corner-size, 0px);
	height: var(--bouw-tex-card-corner-size, 0px);
	background: var(--bouw-primary, #1565c0);
	opacity: 0.1;
	clip-path: polygon(0 0, 100% 0, 100% 100%);
	pointer-events: none;
	z-index: 1;
	transition: opacity var(--motion-fast, 150ms) ease;
}

.bouw-project-card:hover::before {
	opacity: 0.18;
}


/* ============================================
   5. HEADING ACCENT LINE
   Auto-applied under section headings.
   Width from token — 0px means no accent.
   ============================================ */

.bouw-section-intro::after {
	content: '';
	display: block;
	width: var(--bouw-tex-accent-width, 48px);
	height: var(--bouw-tex-accent-thickness, 3px);
	background: var(--bouw-primary, var(--bouw-color-primary, #1565c0));
	margin: var(--bouw-spacing-sm, 0.5rem) auto 0;
	border-radius: 2px;
}

/* Section headings in content flow */
.entry-content > .wp-block-group h2.has-text-align-center::after {
	content: '';
	display: block;
	width: var(--bouw-tex-accent-width, 48px);
	height: var(--bouw-tex-accent-thickness, 3px);
	background: var(--bouw-primary, var(--bouw-color-primary, #1565c0));
	margin: var(--bouw-spacing-sm, 0.5rem) auto 0;
	border-radius: 2px;
}


/* ============================================
   6. CTA BREAK PATTERN OVERLAY
   The existing bouw-cta-break gets a subtle
   texture if ornament tokens are set.
   ============================================ */

.bouw-cta-break {
	position: relative;
}

.bouw-cta-break::before {
	opacity: var(--bouw-tex-ornament-opacity, 0);
}


/* ============================================
   7. REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
	.bouw-service-card::before,
	.bouw-project-card::before {
		transition: none;
	}
}