/**
 * Composition Layer — Text/Image Proportions
 * Axis 2 of the 3-axis design system.
 *
 * Reads --bouw-comp-* CSS variables from config.
 * Selectors match actual block render.php output classes.
 *
 * @package YCDesignSystem
 * @since 1.3.0
 */


/* ============================================
   1. HERO PROPORTIONS
   ============================================ */

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


/* ============================================
   2. HEADING SCALE
   ============================================ */

.entry-content h2,
.entry-content .wp-block-heading {
	font-size: var(--bouw-comp-heading-max-size, clamp(2rem, 4vw, 3rem));
}

.entry-content h3 {
	font-size: var(--bouw-comp-subheading-size, clamp(1.125rem, 1.75vw, 1.5rem));
}


/* ============================================
   3. GRID PROPORTIONS
   Blocks use bouw-grid-{n} classes from render.php,
   but composition can override the default column count.
   ============================================ */

/* Service grid */
.bouw-services-grid,
.wp-block-bouw-services-grid .bouw-services-grid,
.wp-block-bouw-services-grid .bouw-services-grid-container {
	grid-template-columns: repeat(
		var(--bouw-comp-grid-columns, 3),
		1fr
	);
}

/* Realization gallery — only apply grid columns when NOT in masonry mode */
.bouw-realizations-gallery-container:not(.bouw-gallery-masonry),
.wp-block-bouw-realizations-gallery .bouw-realizations-gallery-container:not(.bouw-gallery-masonry) {
	grid-template-columns: repeat(
		var(--bouw-comp-grid-columns, 3),
		1fr
	);
}

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

@media (min-width: 1200px) {
	.bouw-services-grid,
	.bouw-realizations-gallery-container:not(.bouw-gallery-masonry),
	.wp-block-bouw-services-grid .bouw-services-grid,
	.wp-block-bouw-services-grid .bouw-services-grid-container,
	.wp-block-bouw-realizations-gallery .bouw-realizations-gallery-container:not(.bouw-gallery-masonry) {
		grid-template-columns: repeat(
			var(--bouw-comp-grid-columns-lg, var(--bouw-comp-grid-columns, 3)),
			1fr
		);
	}
}

@media (max-width: 768px) {
	.bouw-services-grid,
	.bouw-realizations-gallery-container:not(.bouw-gallery-masonry),
	.bouw-testimonials-grid-container,
	.wp-block-bouw-services-grid .bouw-services-grid,
	.wp-block-bouw-services-grid .bouw-services-grid-container,
	.wp-block-bouw-realizations-gallery .bouw-realizations-gallery-container:not(.bouw-gallery-masonry),
	.wp-block-bouw-testimonials-grid .bouw-testimonials-grid-container {
		grid-template-columns: 1fr;
	}
}


/* ============================================
   4. CARD IMAGE PROPORTIONS
   ============================================ */

.wp-block-bouw-services-grid .bouw-service-card:not(.bouw-service-card--has-image) .bouw-card-image,
.wp-block-bouw-realizations-gallery .bouw-realizations-gallery-container:not(.bouw-gallery-masonry) .bouw-project-card .bouw-project-image {
	aspect-ratio: var(--bouw-comp-card-image-ratio, 3 / 2);
	max-height: var(--bouw-comp-card-image-height, 220px);
	overflow: hidden;
}

.wp-block-bouw-services-grid .bouw-service-card:not(.bouw-service-card--has-image) .bouw-card-image img,
.wp-block-bouw-realizations-gallery .bouw-realizations-gallery-container:not(.bouw-gallery-masonry) .bouw-project-card .bouw-project-main-image {
	width: 100%;
	height: 100%;
	object-fit: cover;
}


/* ============================================
   5. TEXT/IMAGE SPLIT SECTIONS
   ============================================ */

.bouw-split-section,
.wp-block-columns.bouw-split {
	display: grid;
	grid-template-columns:
		var(--bouw-comp-text-weight, 50)fr
		var(--bouw-comp-image-weight, 50)fr;
	gap: var(--bouw-grid-gap, 2rem);
	align-items: center;
}

@media (max-width: 768px) {
	.bouw-split-section,
	.wp-block-columns.bouw-split {
		grid-template-columns: 1fr;
	}
}


/* ============================================
   6. CONTENT DENSITY
   ============================================ */

.entry-content > .wp-block-group > .wp-block-group__inner-container,
.entry-content > .alignwide {
	max-width: var(--bouw-comp-section-max-width, 1200px);
	margin-inline: auto;
}


/* ============================================
   7. CARD TEXT TRUNCATION
   ============================================ */

.bouw-service-description,
.bouw-card-excerpt {
	display: -webkit-box;
	-webkit-line-clamp: var(--bouw-comp-card-text-lines, 3);
	-webkit-box-orient: vertical;
	overflow: hidden;
}