/**
 * Creative Media Grid Styles
 * 5-column layout: 1 img / 2 img / video / 2 img / 1 img
 * Mobile: 3-column layout with peek images
 *
 * @package WooRelatedProductsSlider
 */

/* ==========================================================================
   Container - Mobile First (3 Column Grid with peek images)
   ========================================================================== */

.tcb-media-grid {
	width: 100%;
	padding: 40px 0;
	overflow: hidden;
	margin-bottom: -60px; /* Compensate for theme vertical spacing */
}

/* Override theme vertical spacing when media grid is present */
[data-vertical-spacing*="bottom"]:has(.tcb-media-grid),
.ct-container-full[data-vertical-spacing*="bottom"]:has(.tcb-media-grid),
div[data-vertical-spacing*="bottom"]:has(.tcb-media-grid) {
	padding-bottom: 0 !important;
}

/* Also target via Elementor wrapper if present */
[data-vertical-spacing*="bottom"]:has([data-widget_type*="shortcode"] .tcb-media-grid),
[data-vertical-spacing*="bottom"]:has(.elementor-shortcode .tcb-media-grid) {
	padding-bottom: 0 !important;
}

.tcb-media-grid__container {
	display: grid;
	grid-template-columns: 1fr minmax(0, 44vw) 1fr;
	gap: 8px;
	margin: 0;
	padding: 0;
	align-items: center;
}

/* ==========================================================================
   Column Base Styles
   ========================================================================== */

.tcb-media-grid__column {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0 -20px;
}

.tcb-media-grid__item {
	overflow: hidden;
}

.tcb-media-grid__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Mobile: Hide outer columns (1 and 5)
   ========================================================================== */

.tcb-media-grid__column--1,
.tcb-media-grid__column--5 {
	display: none;
}

/* ==========================================================================
   Column 2: Peek images (left side on mobile)
   ========================================================================== */

.tcb-media-grid__column--2 {
	margin-left: -35px;
	margin-right: 0;
}

.tcb-media-grid__item--2 {
	height: 110px;
}

.tcb-media-grid__item--3 {
	height: 130px;
}

/* ==========================================================================
   Column 3: Video - Central dominant element
   ========================================================================== */

.tcb-media-grid__video {
	overflow: hidden;
	aspect-ratio: 9 / 16;
}

.tcb-media-grid__video video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ==========================================================================
   Column 4: Peek images (right side on mobile)
   ========================================================================== */

.tcb-media-grid__column--4 {
	margin-right: -35px;
	margin-left: 0;
}

.tcb-media-grid__item--4 {
	height: 130px;
}

.tcb-media-grid__item--5 {
	height: 110px;
}

/* ==========================================================================
   Responsive - Tablet (768px+) - Show all 5 columns
   ========================================================================== */

@media (min-width: 768px) {
	.tcb-media-grid {
		padding: 80px 0;
		overflow: visible;
	}

	.tcb-media-grid__container {
		grid-template-columns: 100px 100px 1fr 100px 100px;
		gap: 12px;
		padding: 0 40px;
		margin: 0 auto;
		max-width: 1700px;
	}

	/* Show outer columns on tablet+ */
	.tcb-media-grid__column--1,
	.tcb-media-grid__column--5 {
		display: flex;
	}

	.tcb-media-grid__column {
		margin: 0;
	}

	.tcb-media-grid__column--2,
	.tcb-media-grid__column--4 {
		margin: 0;
	}

	.tcb-media-grid__column {
		gap: 12px;
	}

	.tcb-media-grid__item {
		border-radius: 0;
	}

	/* Column 1 */
	.tcb-media-grid__item--1 {
		height: 255px;
	}

	/* Column 2 */
	.tcb-media-grid__item--2 {
		height: 160px;
	}

	.tcb-media-grid__item--3 {
		height: 180px;
	}

	/* Video */
	.tcb-media-grid__video {
		aspect-ratio: 3 / 4;
	}

	/* Column 4 */
	.tcb-media-grid__item--4 {
		height: 180px;
	}

	.tcb-media-grid__item--5 {
		height: 160px;
	}

	/* Column 5 */
	.tcb-media-grid__item--6 {
		height: 255px;
	}
}

/* ==========================================================================
   Responsive - Desktop (1024px+)
   ========================================================================== */

@media (min-width: 1024px) {
	.tcb-media-grid {
		padding: 100px 0;
	}

	.tcb-media-grid__container {
		grid-template-columns: 140px 140px 1fr 140px 140px;
		gap: 16px;
		padding: 0 60px;
	}

	.tcb-media-grid__column {
		gap: 16px;
	}

	.tcb-media-grid__item {
		border-radius: 0;
	}

	/* Column 1 */
	.tcb-media-grid__item--1 {
		height: 335px;
	}

	/* Column 2 */
	.tcb-media-grid__item--2 {
		height: 200px;
	}

	.tcb-media-grid__item--3 {
		height: 220px;
	}


	/* Column 4 */
	.tcb-media-grid__item--4 {
		height: 220px;
	}

	.tcb-media-grid__item--5 {
		height: 200px;
	}

	/* Column 5 */
	.tcb-media-grid__item--6 {
		height: 335px;
	}
}

/* ==========================================================================
   Responsive - Large Desktop (1440px+)
   ========================================================================== */

@media (min-width: 1440px) {
	.tcb-media-grid__container {
		grid-template-columns: 180px 180px 1fr 180px 180px;
		gap: 20px;
		max-width: 1700px;
	}

	.tcb-media-grid__column {
		gap: 20px;
	}

	/* Column 1 */
	.tcb-media-grid__item--1 {
		height: 415px;
	}

	/* Column 2 */
	.tcb-media-grid__item--2 {
		height: 240px;
	}

	.tcb-media-grid__item--3 {
		height: 260px;
	}

	/* Column 4 */
	.tcb-media-grid__item--4 {
		height: 260px;
	}

	.tcb-media-grid__item--5 {
		height: 240px;
	}

	/* Column 5 */
	.tcb-media-grid__item--6 {
		height: 415px;
	}
}

/* ==========================================================================
   Responsive - Extra Large Desktop (1700px+)
   ========================================================================== */

@media (min-width: 1700px) {
	.tcb-media-grid {
		padding: 120px 0;
	}

	.tcb-media-grid__container {
		grid-template-columns: 220px 220px 1fr 220px 220px;
		gap: 24px;
		padding: 0 80px;
	}

	.tcb-media-grid__column {
		gap: 24px;
	}

	/* Column 1 */
	.tcb-media-grid__item--1 {
		height: 500px;
	}

	/* Column 2 */
	.tcb-media-grid__item--2 {
		height: 290px;
	}

	.tcb-media-grid__item--3 {
		height: 310px;
	}

	/* Column 4 */
	.tcb-media-grid__item--4 {
		height: 310px;
	}

	.tcb-media-grid__item--5 {
		height: 290px;
	}

	/* Column 5 */
	.tcb-media-grid__item--6 {
		height: 500px;
	}
}