/**
 * Product "Gallery Content" section (below the gallery).
 *
 * Rendered by inc/product-gallery-content.php on
 * woocommerce_after_single_product_summary (priority 5), so the section is a
 * direct child of `div.product`, sitting after `.summary` and before the tabs.
 *
 * Two layout contexts must be handled:
 *  1. Float layout (simple products, and variable products below 992px): the
 *     parent floats `.woocommerce-product-gallery` left and `.summary` right,
 *     so the section must clear both.
 *  2. Flex layout (variable products at >= 992px): `div.product` becomes
 *     `display:flex; flex-wrap:wrap` with a 64% gallery column and a 36%
 *     summary (see the inline CSS in functions.php). The section is the next
 *     flex child and must occupy a full-width wrapped row beneath them.
 *
 * @package Konte Child
 */

.konte-child-gallery-content {
	clear: both;
	width: 100%;
	box-sizing: border-box;
	padding: 40px 15px;
}

.konte-child-gallery-content__inner {
	margin: 0 auto;
	max-width: 900px;
}

.konte-child-gallery-content__media {
	margin-bottom: 24px;
}

.konte-child-gallery-content__media img,
.konte-child-gallery-content__media video,
.konte-child-gallery-content__media .wp-video {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
}

.konte-child-gallery-content__text > *:first-child {
	margin-top: 0;
}

.konte-child-gallery-content__text > *:last-child {
	margin-bottom: 0;
}

@media (min-width: 992px) {
	/* Flex context: force the section onto its own full-width row below the
	   gallery column and the summary. */
	.woocommerce div.product.variable-gallery-jcrew-active > .konte-child-gallery-content {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* The variable PDP container is flush-left (padding-left: 0), so the section
	   supplies its own gutters. These match the full-width breadcrumb bar. */
	body.konte-variable-pdp .konte-child-gallery-content {
		padding-left: 32px;
		padding-right: 24px;
	}
}