/**
 * Premium Design Layer
 * Transforms functional layouts into architectural-grade visual experiences.
 * Loads AFTER design-system.css — adds rhythm, depth, and personality.
 *
 * Philosophy: Bulthaup kitchen, not IKEA catalog.
 * One signature move per block. Negative space is the design.
 *
 * @package YCDesignSystem
 * @since 1.1.0
 */

/* ============================================
   1. SECTION RHYTHM — Alternating backgrounds
   ============================================ */

/*
 * Even/odd alternation on direct children of the main content area.
 * This is the single most impactful change: breaks the white wall.
 */
.entry-content > .wp-block-group:nth-child(even) {
	background-color: var(--bouw-color-surface);
}

/* Explicit surface classes for template control */
.bouw-surface {
	background-color: var(--bouw-color-surface);
}

.bouw-surface-warm {
	background-color: var(--bouw-color-surface-warm);
}

.bouw-surface-primary {
	background: linear-gradient(135deg, var(--bouw-color-primary) 0%, var(--color-primary-light, #1976d2) 100%);
	color: var(--bouw-color-base);
}

.bouw-surface-primary h2,
.bouw-surface-primary h3,
.bouw-surface-primary p {
	color: var(--bouw-color-base);
}

.bouw-surface-dark {
	background-color: var(--bouw-color-contrast);
	color: var(--bouw-color-base);
}

.bouw-surface-dark h2,
.bouw-surface-dark h3,
.bouw-surface-dark p {
	color: var(--bouw-color-base);
}


/* ============================================
   2. SECTION INTRO PATTERN — Typography hierarchy
   ============================================ */

/*
 * The section-intro pattern replaces naked centered H2s.
 * Adds a lead paragraph, optional accent line, breathing room.
 * Usage: add class "bouw-section-intro" to the heading group.
 */
.bouw-section-intro {
	text-align: center;
	max-width: 680px;
	margin-inline: auto;
	margin-bottom: var(--bouw-space-lg);
}

.bouw-section-intro h2 {
	font-family: var(--bouw-font-family-heading);
	font-size: var(--bouw-font-size-xl);
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: var(--bouw-line-height-tight);
	margin-bottom: var(--bouw-space-sm);
	color: var(--bouw-color-contrast);
}

.bouw-section-intro p {
	font-size: var(--bouw-font-size-lg);
	line-height: var(--bouw-line-height-relaxed);
	color: var(--bouw-color-muted);
	max-width: 55ch;
	margin-inline: auto;
}

/* Accent line under section intro */
.bouw-section-intro::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--bouw-color-primary);
	margin: var(--bouw-space-md) auto 0;
	border-radius: 2px;
}

/* On dark/primary surfaces, invert the accent */
.bouw-surface-primary .bouw-section-intro::after,
.bouw-surface-dark .bouw-section-intro::after {
	background: var(--bouw-color-base);
	opacity: 0.6;
}


/* ============================================
   3. SECTION SPACING — Generous vertical rhythm
   ============================================ */

/*
 * Override the cramped default 4rem padding with proper breathing room.
 * Homepage sections need space to breathe.
 */

/* Target ONLY content sections — NOT the header or footer */
.entry-content > .wp-block-group {
	padding-block: var(--bouw-space-xl);
}

/* Full-width sections inside content area */
.entry-content > .alignfull {
	padding-block: var(--bouw-space-xl);
}

/* First section after hero gets extra top spacing */
.entry-content > .wp-block-cover + .wp-block-group {
	padding-top: var(--bouw-space-xl);
}


/* ============================================
   4. HEADING UPGRADES — Kill the ALL-CAPS monotony
   ============================================ */

/*
 * The default WP block headings with has-text-align-center are fine
 * but need visual weight differentiation. We style them contextually.
 */

/* Section headings in the main content flow */
.entry-content > .wp-block-group > h2.has-text-align-center,
.entry-content > .wp-block-group h2.has-text-align-center {
	font-family: var(--bouw-font-family-heading);
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 700;
	letter-spacing: -0.02em;
	text-transform: none;
	color: var(--bouw-color-contrast);
	margin-bottom: var(--bouw-space-lg);
	position: relative;
}

/* Add subtle accent line under standalone section headings */
.entry-content > .wp-block-group > h2.has-text-align-center::after,
.entry-content > .wp-block-group h2.has-text-align-center::after {
	content: "";
	display: block;
	width: 48px;
	height: 3px;
	background: var(--bouw-color-primary);
	margin: var(--bouw-space-sm) auto 0;
	border-radius: 2px;
}

/* On dark surfaces */
.bouw-surface-primary > h2.has-text-align-center::after,
.bouw-surface-dark > h2.has-text-align-center::after {
	background: rgba(255, 255, 255, 0.5);
}

.bouw-surface-primary > h2.has-text-align-center,
.bouw-surface-dark > h2.has-text-align-center {
	color: var(--bouw-color-base);
}


/* ============================================
   5. CTA BREAK PATTERN — Full-width interruption
   ============================================ */

/*
 * A full-width colored bar between sections. Breaks the scroll monotony.
 * Usage: add class "bouw-cta-break" to a wp:group block.
 */
.bouw-cta-break {
	background: linear-gradient(135deg, var(--bouw-color-primary) 0%, #1976d2 100%);
	color: var(--bouw-color-base);
	padding: var(--bouw-space-lg) var(--bouw-responsive-gutter);
	text-align: center;
	position: relative;
	overflow: hidden;
}

.bouw-cta-break::before {
	content: "";
	position: absolute;
	inset: 0;
	background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.04'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
	pointer-events: none;
}

.bouw-cta-break h2,
.bouw-cta-break h3 {
	color: var(--bouw-color-base);
	font-size: var(--bouw-font-size-xl);
	margin-bottom: var(--bouw-space-xs);
}

.bouw-cta-break p {
	color: rgba(255, 255, 255, 0.85);
	font-size: var(--bouw-font-size-lg);
	margin-bottom: var(--bouw-space-md);
}

.bouw-cta-break .wp-block-buttons {
	justify-content: center;
}

.bouw-cta-break .wp-block-button__link {
	background: var(--bouw-color-base);
	color: var(--bouw-color-primary);
	font-weight: 700;
	padding: 1rem 2.5rem;
	border-radius: var(--bouw-radius-md);
	transition: transform var(--bouw-transition-fast), box-shadow var(--bouw-transition-fast);
}

.bouw-cta-break .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #ffffff;
	border: 2px solid rgba(255, 255, 255, 0.8);
	box-shadow: none;
}

.bouw-cta-break .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.15);
	box-shadow: none;
}

.bouw-cta-break .wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}


/* ============================================
   6. CARD ELEVATION — Depth & hover personality
   ============================================ */

/*
 * Service cards, testimonial cards, realization cards — all need
 * more presence. Think: objects on a table, not stickers on a wall.
 */

/* Service grid cards */
.wp-block-bouw-services-grid .bouw-service-card {
	border-radius: var(--bouw-radius-lg);
	overflow: hidden;
	transition: transform var(--bouw-transition-base),
	            box-shadow var(--bouw-transition-base);
}

.wp-block-bouw-services-grid .bouw-service-card:hover {
	transform: translateY(-4px);
	box-shadow: var(--bouw-shadow-xl);
}

/* Realization gallery cards */
.wp-block-bouw-realizations-gallery .bouw-realization-card {
	border-radius: var(--bouw-radius-lg);
	overflow: hidden;
	transition: transform var(--bouw-transition-base),
	            box-shadow var(--bouw-transition-base);
}

.wp-block-bouw-realizations-gallery .bouw-realization-card:hover {
	transform: translateY(-4px) scale(1.01);
	box-shadow: var(--bouw-shadow-xl);
}

/* Image zoom on card hover */
.wp-block-bouw-services-grid .bouw-service-card img,
.wp-block-bouw-realizations-gallery .bouw-realization-card img {
	transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.wp-block-bouw-services-grid .bouw-service-card:hover img,
.wp-block-bouw-realizations-gallery .bouw-realization-card:hover img {
	transform: scale(1.05);
}


/* ============================================
   7. TESTIMONIAL POLISH
   ============================================ */

.wp-block-bouw-testimonials-grid .bouw-testimonial-card {
	background: var(--bouw-color-base);
	border-radius: var(--bouw-radius-lg);
	padding: 0;
	box-shadow: var(--bouw-shadow-sm);
	border: 1px solid rgba(0, 0, 0, 0.06);
	position: relative;
	transition: box-shadow var(--bouw-transition-base);
}

.wp-block-bouw-testimonials-grid .bouw-testimonial-card:hover {
	box-shadow: var(--bouw-shadow-md);
}

/* Quote mark accent */
.wp-block-bouw-testimonials-grid .bouw-testimonial-card::before {
	content: "\201C";
	position: absolute;
	top: 0.35rem;
	left: 0.6rem;
	font-size: 3.2rem;
	font-family: Georgia, serif;
	color: var(--bouw-color-primary);
	opacity: 0.15;
	line-height: 1;
	pointer-events: none;
	z-index: 0;
}

/* Star rating color */
.wp-block-bouw-testimonials-grid .bouw-testimonial-stars {
	color: #f59e0b;
}

.wp-block-bouw-testimonials-grid .bouw-card {
	height: 100%;
	display: flex;
	flex-direction: column;
}

.wp-block-bouw-testimonials-grid .bouw-card-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1.2rem 1.4rem;
}

.wp-block-bouw-testimonials-grid .bouw-testimonial-text {
	flex: 1;
	margin-bottom: 0.75rem;
}

.wp-block-bouw-testimonials-grid .bouw-testimonial-meta {
	margin-top: auto;
}


/* ============================================
   8. BRANDS CAROUSEL — Premium treatment
   ============================================ */

.wp-block-bouw-brands-carousel .bouw-brand-card {
	background: var(--bouw-color-base);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: var(--bouw-radius-md);
	padding: var(--bouw-space-md);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
	transition: border-color var(--bouw-transition-base),
	            box-shadow var(--bouw-transition-base);
}

.wp-block-bouw-brands-carousel .bouw-brand-card:hover {
	border-color: var(--bouw-color-primary);
	box-shadow: var(--bouw-shadow-sm);
}

.wp-block-bouw-brands-carousel .bouw-brand-card img {
	filter: grayscale(100%);
	opacity: 0.6;
	transition: filter var(--bouw-transition-base), opacity var(--bouw-transition-base);
}

.wp-block-bouw-brands-carousel .bouw-brand-card:hover img {
	filter: grayscale(0%);
	opacity: 1;
}


/* ============================================
   9. FAQ & ACCORDION — Cleaner, more spacious
   ============================================ */

.wp-block-bouw-faq-accordion .bouw-faq-item,
.wp-block-bouw-accordion .bouw-accordion-item {
	border: none;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
	padding: var(--bouw-space-sm) 0;
}

.wp-block-bouw-faq-accordion .bouw-faq-item:first-child,
.wp-block-bouw-accordion .bouw-accordion-item:first-child {
	border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.wp-block-bouw-faq-accordion .bouw-faq-question,
.wp-block-bouw-accordion .bouw-accordion-trigger {
	font-family: var(--bouw-font-family-heading);
	font-weight: 600;
	font-size: var(--bouw-font-size-base);
	padding: var(--bouw-space-sm) 0;
	cursor: pointer;
	transition: color var(--bouw-transition-fast);
}

.wp-block-bouw-faq-accordion .bouw-faq-question:hover,
.wp-block-bouw-accordion .bouw-accordion-trigger:hover {
	color: var(--bouw-color-primary);
}


/* ============================================
   10. WORKFLOW STEPS — Connected timeline feel
   ============================================ */

.wp-block-bouw-workflow-steps .bouw-step-number {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--bouw-color-primary);
	color: var(--bouw-color-base);
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--bouw-font-family-heading);
	font-weight: 700;
	font-size: var(--bouw-font-size-lg);
	margin-bottom: var(--bouw-space-sm);
	box-shadow: 0 4px 12px rgba(21, 101, 192, 0.3);
}


/* ============================================
   11. CONTENT TABS — Refined tab bar
   ============================================ */

.wp-block-bouw-content-tabs .bouw-tab-button {
	font-family: var(--bouw-font-family-heading);
	font-weight: 600;
	padding: var(--bouw-space-xs) var(--bouw-space-md);
	border-bottom: 3px solid transparent;
	transition: color var(--bouw-transition-fast),
	            border-color var(--bouw-transition-fast);
	color: var(--bouw-color-muted);
}

.wp-block-bouw-content-tabs .bouw-tab-button:hover {
	color: var(--bouw-color-primary);
}

/* Active tab: white text on primary bg (pill style from bouw-blocks.css) */
.wp-block-bouw-content-tabs .bouw-tab-button.active,
.wp-block-bouw-content-tabs .bouw-tab-button.bouw-tab-active,
.wp-block-bouw-content-tabs .bouw-tab-button[aria-selected="true"] {
	background: var(--bouw-color-primary, #1565c0);
	color: #ffffff;
	border-bottom: none;
}


/* ============================================
   12. TEAM MEMBERS — Photo-first, human
   ============================================ */

.wp-block-bouw-team-members .bouw-team-card {
	text-align: center;
	border-radius: var(--bouw-radius-lg);
	overflow: hidden;
	background: var(--bouw-color-base);
	box-shadow: var(--bouw-shadow-sm);
	transition: box-shadow var(--bouw-transition-base),
	            transform var(--bouw-transition-base);
}

.wp-block-bouw-team-members .bouw-team-card:hover {
	box-shadow: var(--bouw-shadow-lg);
	transform: translateY(-2px);
}

.wp-block-bouw-team-members .bouw-team-photo {
	aspect-ratio: 1;
	object-fit: cover;
	width: 100%;
}

.wp-block-bouw-team-members .bouw-team-name {
	font-family: var(--bouw-font-family-heading);
	font-weight: 700;
	margin-top: var(--bouw-space-sm);
}

.wp-block-bouw-team-members .bouw-team-position {
	color: var(--bouw-color-muted);
	font-size: var(--bouw-font-size-sm);
}


/* ============================================
   13. HERO REFINEMENTS
   ============================================ */

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


/* ============================================
   14. SCROLL REVEAL — Subtle entrance animations
   ============================================ */

/*
 * CSS-only reveal using scroll-timeline (progressive enhancement).
 * Falls back gracefully — elements are always visible.
 */
@supports (animation-timeline: view()) {
	.wp-block-bouw-services-grid,
	.wp-block-bouw-realizations-gallery,
	.wp-block-bouw-testimonials-grid,
	.wp-block-bouw-brands-carousel,
	.wp-block-bouw-faq-accordion,
	.wp-block-bouw-workflow-steps,
	.wp-block-bouw-content-tabs,
	.wp-block-bouw-accordion,
	.wp-block-bouw-team-members,
	.wp-block-bouw-contact-form {
		animation: bouw-fade-up ease-out both;
		animation-timeline: view();
		animation-range: entry 0% entry 30%;
	}

	@keyframes bouw-fade-up {
		from {
			opacity: 0.3;
			transform: translateY(24px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
}


/* ============================================
   15. CONTACT SECTION — Premium finish
   ============================================ */

.wp-block-bouw-contact-form .bouw-form-wrapper {
	max-width: 680px;
	margin-inline: auto;
}

/* Form inputs — more refined */
.wp-block-bouw-contact-form input[type="text"],
.wp-block-bouw-contact-form input[type="email"],
.wp-block-bouw-contact-form input[type="tel"],
.wp-block-bouw-contact-form select,
.wp-block-bouw-contact-form textarea {
	border: 1px solid rgba(0, 0, 0, 0.12);
	border-radius: var(--bouw-radius-md);
	padding: 0.875rem var(--bouw-space-sm);
	font-size: var(--bouw-font-size-base);
	transition: border-color var(--bouw-transition-fast),
	            box-shadow var(--bouw-transition-fast);
	background: var(--bouw-color-base);
}

.wp-block-bouw-contact-form input:focus,
.wp-block-bouw-contact-form select:focus,
.wp-block-bouw-contact-form textarea:focus {
	outline: none;
	border-color: var(--bouw-color-primary);
	box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.1);
}


/* ============================================
   16. GLOBAL BUTTON REFINEMENT
   ============================================ */

/* Primary button — warmer, more confident */
.wp-block-button__link.has-accent-background-color {
	background: linear-gradient(135deg, #ff9800 0%, #f57c00 100%);
	box-shadow: 0 4px 12px rgba(255, 152, 0, 0.35);
	transition: transform var(--bouw-transition-fast),
	            box-shadow var(--bouw-transition-fast);
}

.wp-block-button__link.has-accent-background-color:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(255, 152, 0, 0.4);
}

/* Ghost/outline button polish */
.wp-block-button__link.has-base-background-color {
	border: 2px solid currentColor;
	transition: background var(--bouw-transition-fast),
	            color var(--bouw-transition-fast),
	            transform var(--bouw-transition-fast);
}

.wp-block-button__link.has-base-background-color:hover {
	background: var(--bouw-color-primary);
	color: var(--bouw-color-base);
	transform: translateY(-1px);
}


/* ============================================
   17. UTILITY — Spacer refinement
   ============================================ */

/* Kill the jarring hard spacer blocks */
.wp-block-spacer {
	display: none;
}

/* (placeholder removed — bare text nodes handled in functions.php inline script) */

/* Section divider — subtle line between sections */
.bouw-divider {
	border: none;
	height: 1px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		rgba(0, 0, 0, 0.08) 20%,
		rgba(0, 0, 0, 0.08) 80%,
		transparent 100%
	);
	margin: 0;
}


/* ============================================
   18. RESPONSIVE REFINEMENTS - Mobile-First
   ============================================ */

/* Mobile base styles */
/* Tighter section spacing on mobile */
.entry-content > .wp-block-group {
	padding-block: var(--bouw-space-lg);
}

/* Section headings smaller on mobile */
.entry-content h2.has-text-align-center {
	font-size: clamp(1.5rem, 5vw, 2rem);
}

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

/* Desktop: restore larger spacing and row layout */
@media (min-width: 769px) {
	.entry-content > .wp-block-group {
		padding-block: var(--bouw-space-xl, 4rem);
	}

	.entry-content h2.has-text-align-center {
		font-size: clamp(2rem, 5vw, 3rem);
	}

	.bouw-hero .wp-block-columns {
		flex-direction: row;
	}

	.bouw-hero .wp-block-column:first-child {
		flex-basis: 60%;
	}

	.bouw-hero .wp-block-column:last-child {
		flex-basis: 40%;
	}
}

@media (min-width: 1024px) {
	/* Even more generous spacing on large screens */
	.entry-content > .wp-block-group {
		padding-block: var(--bouw-space-2xl);
	}
}

/* ═══════════════════════════════════════════════════
   19. Phase 5 Visual Polish Fixes
   ═══════════════════════════════════════════════════ */

/* VISL-02: Gradient overlay must sit flush at card bottom — no gap */
.page-template-page-homepage-voorstel .bouw-project-card .bouw-card-body {
	margin-bottom: 0;
}

/* VISL-03: Remove border/line above "Meer info" button on service cards */
.bouw-service-card .bouw-card-footer {
	border-top: none;
}
.bouw-service-card .bouw-card-footer .bouw-btn {
	border-top: none;
}

/* VISL-01: Stretched link for project cards linking to single post */
.page-template-page-homepage-voorstel .bouw-project-card .bouw-project-link::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 2;
}


/* ═══════════════════════════════════════════════════
   20. BRANDS SECTION — Clean logo grid
   ═══════════════════════════════════════════════════ */

/* Grid layout: 3 columns, no carousel */
.wp-block-bouw-brands-carousel .bouw-brands-carousel-track {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--bouw-space-lg, 3rem);
	transform: none;
	overflow: visible;
}

.wp-block-bouw-brands-carousel .bouw-brand-slide {
	min-width: unset;
	width: 100%;
	flex: unset;
}

.wp-block-bouw-brands-carousel .bouw-carousel-controls {
	display: none;
}

/* Kill ALL borders on brand cards */
.wp-block-bouw-brands-carousel .bouw-brand-slide,
.wp-block-bouw-brands-carousel .bouw-brand-card,
.wp-block-bouw-brands-carousel .bouw-brand-logo {
	border: none;
	box-shadow: none;
	outline: none;
	background: transparent;
}

/* Hide brand name text — only show logos */
.wp-block-bouw-brands-carousel .bouw-brand-info {
	display: none;
}

/* Make logo images larger and centered */
.wp-block-bouw-brands-carousel .bouw-brand-logo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--bouw-space-sm, 1rem);
}

.wp-block-bouw-brands-carousel .bouw-logo-image {
	width: 100%;
	max-width: 180px;
	height: auto;
	opacity: 0.7;
	transition: opacity 0.3s ease;
}

.wp-block-bouw-brands-carousel .bouw-logo-image:hover {
	opacity: 1;
}

/* Mobile-first: single column on mobile */
.wp-block-bouw-brands-carousel .bouw-brands-carousel-track {
	grid-template-columns: 1fr;
}

/* Desktop: multi-column grid */
@media (min-width: 769px) {
	.wp-block-bouw-brands-carousel .bouw-brands-carousel-track {
		grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	}
}


/* ═══════════════════════════════════════════════════
   22. DIENSTEN CARDS — Adaptive: photo-overlay when image exists,
       clean card when no image. Respects --has-image / --fallback classes.
   ═══════════════════════════════════════════════════ */

/* --- IMAGE CARDS: photo-forward overlay style --- */
.bouw-service-card--has-image .bouw-card {
	border: none;
	box-shadow: none;
	border-radius: var(--bouw-radius-lg, 12px);
	overflow: hidden;
	background: transparent;
	min-height: 320px;
	position: relative;
}

.bouw-service-card--has-image .bouw-card-image {
	position: absolute;
	inset: 0;
	height: 100%;
	overflow: hidden;
	border-radius: 0;
	background-color: rgba(0, 0, 0, 0.15);
}

.bouw-service-card .bouw-card-image-link {
	display: block;
	width: 100%;
	height: 100%;
	color: inherit;
	text-decoration: none;
}

.bouw-service-card .bouw-card-image-link:focus-visible {
	outline: 3px solid var(--color-accent, #f7941d);
	outline-offset: -3px;
}

.bouw-service-card--has-image .bouw-service-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}

.bouw-service-card--has-image:hover .bouw-service-image {
	transform: scale(1.05);
}

.bouw-service-card--has-image .bouw-card-overlay {
	display: block;
	position: absolute;
	inset: 0;
	/* Dark scrim concentrated at the bottom where the title + description live.
	   Photo stays clean in the top 45%, then ramps hard to near-black at bottom. */
	background: linear-gradient(
		to bottom,
		transparent        0%,
		transparent       42%,
		rgba(0,0,0,0.55)  58%,
		rgba(0,0,0,0.82)  75%,
		rgba(0,0,0,0.92) 100%
	);
	pointer-events: none;
	z-index: 1;
}

.bouw-service-card--has-image .bouw-service-icon-wrapper {
	display: none;
}

.bouw-service-card--has-image .bouw-service-title {
	color: #ffffff;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.bouw-service-card--has-image .bouw-service-description {
	color: rgba(255, 255, 255, 0.9);
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* --- FALLBACK CARDS: clean card design without photo --- */
.bouw-service-card--fallback .bouw-card {
	border: 1px solid rgba(0, 0, 0, 0.08);
	background: var(--wp--preset--color--base, #ffffff);
	border-radius: var(--bouw-radius-lg, 12px);
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
	min-height: 340px;
}

.bouw-service-card--fallback .bouw-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

.bouw-service-card--fallback .bouw-service-title {
	color: var(--wp--preset--color--contrast, #111827);
	text-shadow: none;
}

.bouw-service-card--fallback .bouw-service-description {
	display: block;
	color: #4b5563;
	text-shadow: none;
}

/* --- IMAGE CARDS: Position card body over the photo --- */
/* Three-class selector (.bouw-service-card--has-image .bouw-card .bouw-card-body)
   beats bouw-blocks.css's two-class rule (.bouw-service-card .bouw-card-body)
   without needing !important. */
.bouw-service-card--has-image .bouw-card .bouw-card-body {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	top: auto;
	z-index: 2;
	padding: 1.25rem;
	background: transparent;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	height: auto;
}

/* IMAGE CARDS: Title link — clean white, no glass effect */
.bouw-service-card--has-image .bouw-service-title {
	margin: 0 0 0.5rem 0;
}

.bouw-service-card--has-image .bouw-service-link {
	color: #fff;
	font-weight: 700;
	font-size: 1.1rem;
	text-decoration: none;
	display: inline-block;
	background: none;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
}

/* IMAGE CARDS: Show footer with button — consistent with fallback cards */
.bouw-service-card--has-image .bouw-card-footer {
	display: block;
	padding: 0.5rem 0 0;
}

/* Image-card CTA: solid primary — glass at 0.15 opacity was invisible against dark overlays */
.bouw-service-card--has-image .bouw-card-footer .bouw-btn {
	background: var(--color-primary, #1565c0);
	color: #fff;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
}

.bouw-service-card--has-image .bouw-card-footer .bouw-btn:hover {
	background: var(--color-primary-dark, #0d47a1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* IMAGE CARDS: Hide fallback bg */
.bouw-service-card--has-image .bouw-service-fallback-bg {
	display: none;
}

/* --- FALLBACK CARDS: Normal flow, visible footer --- */
.bouw-service-card--fallback .bouw-card-body {
	position: relative;
	padding: 1.25rem;
	background: transparent;
}

.bouw-service-card--fallback .bouw-service-link {
	color: inherit;
	text-decoration: none;
	background: none;
	border: none;
	backdrop-filter: none;
	-webkit-backdrop-filter: none;
	padding: 0;
	display: inline;
}

.bouw-service-card--fallback .bouw-card-footer {
	display: block;
	padding: 0 1.25rem 1.25rem;
}

.bouw-service-card--fallback .bouw-card-image {
	position: relative;
	height: 120px;
	min-height: 120px;
	flex-shrink: 0;
}

.bouw-service-card--fallback .bouw-card-overlay {
	display: none;
}

/* Make all cards a stacking context for absolute positioning */
.bouw-service-card .bouw-card {
	position: relative;
}


/* --- ARTICLE-LEVEL overrides: kill legacy style.css border/padding on the wrapper --- */
.bouw-service-card {
	border: none;
	padding: 0;
	background: transparent;
	text-align: left;
}


/* ═══════════════════════════════════════════════════
   23. MATERIALEN TABS — Consistent styling
   ═══════════════════════════════════════════════════ */

/* Match border-radius with rest of site */
.bouw-content-tabs {
	border-radius: var(--bouw-radius-lg, 12px);
	border: none;
	overflow: visible;
}

/* Tab nav baseline — underline style */
.bouw-content-tabs .bouw-tab-nav {
	display: flex;
	gap: 0;
	border-bottom: 2px solid rgba(0, 0, 0, 0.08);
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.bouw-content-tabs .bouw-tab-nav::-webkit-scrollbar {
	display: none;
}

/* Tab buttons — clean underline style, not pills */
.bouw-tab-button {
	border: none;
	border-radius: 0;
	border-bottom: 3px solid transparent;
	padding: 0.75rem 1.25rem;
	font-weight: 500;
	font-size: 0.95rem;
	cursor: pointer;
	transition: color 0.2s ease, border-color 0.2s ease;
	background: transparent;
	color: var(--bouw-color-muted, #6b7280);
	min-height: 44px;
	min-width: 44px;
}

.bouw-tab-button:hover {
	color: var(--bouw-color-contrast, #111827);
}

.bouw-tab-button.bouw-tab-active {
	background: transparent;
	color: var(--bouw-color-primary, #1565c0);
	border-bottom-color: var(--bouw-color-primary, #1565c0);
	font-weight: 600;
}

/* Tab panels — no harsh borders */
.bouw-tab-panel,
[role="tabpanel"] {
	border: none;
	border-radius: 0 0 var(--bouw-radius-lg, 12px) var(--bouw-radius-lg, 12px);
}

/* Tab container border consistency (disabled for content-tabs) */
.bouw-tabs-container {
	border: 1px solid var(--bouw-card-border, var(--bouw-color-border, #e0e0e0));
	border-radius: var(--bouw-radius-lg, 12px);
	overflow: visible;
}

.bouw-content-tabs .bouw-tabs-container {
	border: none;
	background: transparent;
}

.bouw-content-tabs .bouw-tab-content {
	display: block;
	padding: 0;
	margin-top: 0.75rem;
}

.bouw-content-tabs .bouw-tab-panel {
	border: none;
	border-radius: 14px;
	background: #fff;
	padding: 1.25rem;
	margin-top: 0;
}

/* ═══════════════════════════════════════════════════
   23b. FAQ — Compact vertical accordion
   ═══════════════════════════════════════════════════ */

.bouw-faq-accordion-container {
	gap: 0.4rem;
}

.bouw-faq-item {
	border-radius: var(--bouw-radius-md, 8px);
}

.bouw-faq-button {
	padding: 0.6rem 0.9rem;
	font-size: 0.9rem;
	line-height: 1.35;
}

.bouw-faq-icon {
	width: 24px;
	height: 24px;
	font-size: 0.75rem;
}

.bouw-faq-answer-content {
	padding: 0 0.9rem 0.9rem;
	font-size: 0.85rem;
	line-height: 1.6;
}


/* ═══════════════════════════════════════════════════
   24. UNIVERSAL CARD PATTERN — One card to rule them all
   API-generatable: same CSS, different content.
   ═══════════════════════════════════════════════════ */

/*
 * Nuclear border reset: kill ALL card borders site-wide.
 * Every bouw-card, every --elevated variant, every project card.
 * Borders are the #1 visual noise problem.
 */
.bouw-card,
.bouw-card--elevated,
.bouw-card--flat,
.bouw-project-card,
.bouw-testimonial-card,
.bouw-team-card,
.bouw-step-card,
.bouw-workflow-step,
.bouw-usp-card,
[class*="bouw-card"] {
	border: none;
	box-shadow: none;
}

/* Universal card base: clean, borderless, subtle hover */
.bouw-card,
.bouw-card--elevated,
.bouw-project-card,
.bouw-testimonial-card,
.bouw-team-card {
	border-radius: var(--bouw-radius-lg, 12px);
	overflow: hidden;
	background: var(--bouw-color-base, #fff);
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Hover: gentle lift + shadow — the only visual feedback needed */
.bouw-card:hover,
.bouw-card--elevated:hover,
.bouw-project-card:hover,
.bouw-testimonial-card:hover,
.bouw-team-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

/* Card images: always fill, always rounded top */
.bouw-card-image,
.bouw-project-card .bouw-card-image {
	overflow: hidden;
	border-radius: var(--bouw-radius-lg, 12px) var(--bouw-radius-lg, 12px) 0 0;
}

.bouw-card-image img,
.bouw-project-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}

.bouw-card:hover img,
.bouw-card--elevated:hover img,
.bouw-project-card:hover img {
	transform: scale(1.04);
}

/* Card body: consistent padding */
.bouw-card-body {
	padding: var(--bouw-space-md, 1.5rem);
}

/* Werkwijze / workflow steps: simplify */
.wp-block-bouw-workflow-steps .bouw-workflow-step,
.wp-block-bouw-workflow-steps .bouw-step-card {
	background: transparent;
	text-align: center;
	padding: var(--bouw-space-md, 1.5rem);
}

.wp-block-bouw-workflow-steps .bouw-workflow-step:hover,
.wp-block-bouw-workflow-steps .bouw-step-card:hover {
	transform: none;
	box-shadow: none;
}


/* ═══════════════════════════════════════════════════
   25. GLOBAL SPACING & BORDER CLEANUP
   Kill visual noise, let the design breathe.
   ═══════════════════════════════════════════════════ */

/* More generous section spacing */
.entry-content > .wp-block-group {
	padding-block: clamp(4rem, 8vw, 7rem);
}

/* Kill the accent line under headings — cleaner without it */
.entry-content > .wp-block-group > h2.has-text-align-center::after,
.entry-content > .wp-block-group h2.has-text-align-center::after {
	display: none;
}

/* Kill borders on tabs container */
.bouw-tabs-container {
	border: none;
}

/* Content-tabs panel styling — clean card framing */
.bouw-content-tabs .bouw-tabs-container {
	border: none;
	background: transparent;
}

.bouw-content-tabs .bouw-tab-content {
	display: block;
	padding: 0;
	margin-top: 0.75rem;
}

.bouw-content-tabs .bouw-tab-panel {
	border: 1px solid var(--bouw-card-border, var(--bouw-color-border, #e0e0e0));
	border-radius: var(--bouw-radius-lg, 12px);
	background: #fff;
	padding: 1.5rem;
	margin-top: 0.5rem;
}

/* Kill borders on FAQ items — use spacing instead */
.bouw-faq-item,
.bouw-accordion-item {
	border: none;
	border-bottom: none;
	margin-bottom: var(--bouw-space-xs, 0.5rem);
	background: var(--bouw-color-surface, #f5f5f5);
	border-radius: var(--bouw-radius-md, 8px);
	padding: var(--bouw-space-sm, 1rem);
}

.bouw-faq-item:first-child,
.bouw-accordion-item:first-child {
	border-top: none;
}

/* Kill all remaining outlines and box-shadows on interactive elements */
.bouw-btn,
.bouw-service-link,
.bouw-project-link {
	outline: none;
}

/* Team cards: transparent BG for clean look (they're on a surface bg) */
.bouw-team-card {
	background: var(--bouw-color-base, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

/* Testimonial cards: subtle styling */
.bouw-testimonial-card {
	background: var(--bouw-color-base, #fff);
	padding: 0;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.bouw-testimonial-card:hover {
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* Star ratings: warm amber */
.bouw-testimonial-stars,
.bouw-rating-stars {
	color: #f59e0b;
}

/* Quote mark: subtle brand color */
.bouw-testimonial-card::before {
	color: var(--bouw-color-primary, #0d47a1);
	opacity: 0.1;
}


/* ═══════════════════════════════════════════════════
   21. FAQ — Fix doubled toggle icons
   ═══════════════════════════════════════════════════ */

/* Hide duplicate FAQ/accordion toggle icons */
/* First FAQ block: hide adjacent duplicate icon spans */
.wp-block-bouw-faq-accordion .bouw-faq-icon + .bouw-faq-icon {
	display: none;
}

/* Second accordion block: header ::after duplicates the icon span's "+" */
.wp-block-bouw-accordion .bouw-accordion-header::after {
	display: none;
}


/* ═══════════════════════════════════════════════════
   26. DESIGN POLISH — Reference: Internorm.com, Reynaers.be
   Constraints: no full-width buttons in panels, no vertical USP stacking,
   no orphaned cards, no excessive whitespace.
   ═══════════════════════════════════════════════════ */

/* --- HERO USPs: horizontal row, tight spacing, left-aligned --- */
.bouw-hero .bouw-hero-usps {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	align-items: flex-start;
	justify-content: flex-start;
}

.bouw-hero .bouw-hero-usps .wp-block-group {
	margin: 0;
}

.bouw-hero .bouw-hero-usps p {
	line-height: 1.2;
	margin: 0;
}

/* --- TAB PANEL CTA: inline, left-aligned, never full-width --- */
.bouw-tab-panel .bouw-btn,
.bouw-tab-panel .bouw-btn-primary,
.bouw-tab-panel .wp-block-button__link,
.bouw-tab-panel-content .bouw-btn,
.bouw-tab-panel-content .bouw-btn-primary {
	width: auto;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.65rem 1.5rem;
	font-size: 0.9rem;
	border-radius: var(--bouw-radius-md, 8px);
}

/* --- FALLBACK CARD: gradient header instead of bare icon --- */
.bouw-service-card--fallback .bouw-service-fallback-bg {
	background: linear-gradient(135deg, #1565c0 0%, #0d47a1 100%);
}

.bouw-service-card--fallback .bouw-service-fallback-bg .bouw-service-icon-wrapper {
	color: rgba(255, 255, 255, 0.85);
	font-size: 2.5rem;
}

/* --- TESTIMONIAL GRID: min 2 columns, natural varying heights --- */
.wp-block-bouw-testimonials-grid .bouw-testimonials-grid {
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	align-items: start;
}

/* Let cards take their natural height instead of stretching to row height */
.wp-block-bouw-testimonials-grid .bouw-testimonial-card .bouw-card {
	height: auto;
}

/* --- BRAND ITEMS: lighter, more spacious --- */
.bouw-brand-item {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: var(--bouw-radius-md, 8px);
	padding: 1rem 1.5rem;
	background: var(--bouw-color-base, #fff);
}

/* --- SECTION HEADINGS: consistent weight --- */
.entry-content h2 {
	font-weight: 700;
}

/* --- CTA BREAK BUTTONS: not too wide, consistent with hero --- */
.bouw-cta-break .wp-block-button__link {
	padding: 0.875rem 2rem;
	font-size: 1rem;
	border-radius: var(--bouw-radius-md, 8px);
}

/* Hero USPs moved to css/blocks/hero.css */

/* ============================================
   9. HERO STYLES — Moved to css/blocks/hero.css
   ============================================ */
/* All hero, hero-form, and USP styles consolidated in css/blocks/hero.css */

/* ============================================
   10. TABLET/DESKTOP BREAKPOINTS — Mobile-First
   ============================================ */

/* Mobile base: single column for all grids */
.bouw-services-grid {
	grid-template-columns: 1fr;
	gap: 1.5rem;
}

.bouw-testimonials-grid {
	grid-template-columns: 1fr;
}

.bouw-team-grid {
	grid-template-columns: 1fr;
}

/* Workflow steps: vertical on mobile */
.bouw-workflow-steps-container {
	flex-direction: column;
}

/* Trust bar layout is owned by css/blocks/hero.css. */

/* Tablet (769px): 2 columns */
@media (min-width: 769px) {
	.bouw-services-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bouw-testimonials-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.bouw-team-grid {
		grid-template-columns: repeat(2, 1fr);
	}

}

/* Desktop (1025px): 3-4 columns + hero layout */
@media (min-width: 1025px) {
	/* Service cards: 3 columns */
	.bouw-services-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Testimonials: 3 columns */
	.bouw-testimonials-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	/* Team grid: 4 columns */
	.bouw-team-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	/* Workflow steps: horizontal */
	.bouw-workflow-steps-container {
		flex-direction: row;
	}

	/* Realisatie gallery: better mobile spacing */
	.bouw-realizations-gallery {
		gap: 1rem;
	}

	.bouw-realization-card {
		aspect-ratio: 4 / 3;
	}

	/* Touch-friendly tap targets */
	.bouw-tab-button,
	.bouw-accordion-button,
	.wp-block-button__link {
		min-height: 44px;
		padding: 0.75rem 1.5rem;
	}

	/* NOTE: Form/section padding overrides removed — contact-form.css handles form widths,
	   and generic .wp-block-group padding override was too broad (broke all sections).
	   Hero padding is defined in hero.css. */
}