/* ------------------------------------------------------------------
   GLOBAL CONTAINER STYLES (Mobile First)
   ------------------------------------------------------------------ */
#primary {
	/* Mobile styles (default) */
	margin-left: 0;
	min-height: 100vh;
	padding: 0 20px; /* Base padding for mobile viewport */
	padding-top: 80px; /* USER REQUEST: 80px padding for mobile */
	box-sizing: border-box;
	font-family: "Inter", sans-serif;
}

/* ------------------------------------------------------------------
   MOBILE-FIRST LAYOUT (Stacked Columns)
   ------------------------------------------------------------------ */

/* Target the main Columns block used in the editor with the custom class */
.client-detail-layout.wp-block-columns {
	display: flex;
	flex-direction: column; /* Stack columns vertically on mobile */
	gap: 40px; /* Space between the text and media columns */
	padding: 20px 0;
}

/* Target the individual columns */
.client-detail-layout > .wp-block-column {
	/* Columns take up full width when stacked */
	flex-basis: 100% !important;
	padding: 0;
	margin: 0;
}

/* ------------------------------------------------------------------
   MEDIA HANDLING (Videos & Images)
   ------------------------------------------------------------------ */

/* Ensure all images and videos are fully responsive within their containers */
.entry-content img,
.entry-content video {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
	padding: 5px 0;
}

/* Wrapper for videos (Vimeo/YouTube embeds use iframes)
   This ensures standard 16:9 videos are responsive. */
.entry-content .wp-block-embed,
.entry-content .wp-block-embed iframe {
	/* Default to 16:9 aspect ratio */
	aspect-ratio: 16 / 9;
	width: 100%;
	height: auto;
	/* Overwrite any inline height/width set by the embed block */
	max-width: 100% !important;
	max-height: 100% !important;
	border-radius: 8px;
	margin-bottom: 20px;
	overflow: hidden;
}

/* Specific styling for 9:16 portrait videos 
   (Requires the user to apply the class 'aspect-9-16' to a parent block in Gutenberg)
*/
.aspect-9-16.wp-block-group .wp-block-embed,
.aspect-9-16.wp-block-group .wp-block-embed iframe {
	aspect-ratio: 9 / 16; /* Portrait ratio for video */
	max-height: 80vh; /* Prevent overly large portrait videos on mobile */
}

/* ------------------------------------------------------------------
   TEXT STYLING (Column 2)
   ------------------------------------------------------------------ */

.client-detail-layout .wp-block-column h2 {
	font-size: 1.8rem;
	font-weight: 700;
	margin-bottom: 15px;
	border-bottom: 2px solid #ccc;
	padding-bottom: 5px;
}

.client-detail-layout .wp-block-column p {
	font-size: 1rem;
	line-height: 1.6;
	margin-bottom: 20px;
	color: #444;
}

/* ------------------------------------------------------------------
   DESKTOP LAYOUT ADJUSTMENTS
   ------------------------------------------------------------------ */

@media screen and (min-width: 800px) {
	#primary {
		margin-left: 300px;
		padding-top: 40px;
		padding-left: 40px;
		padding-right: 40px;
	}

	.client-detail-layout.wp-block-columns {
		flex-direction: row; /* Switch to side-by-side */
		gap: 60px;
		align-items: flex-start; /* Align columns to the top */
	}

	/* Assign widths to columns on desktop */
	.client-detail-layout > .wp-block-column:first-child {
		/* Text column (e.g., 40% width) */
		flex-basis: 40%;
	}

	.client-detail-layout > .wp-block-column:last-child {
		/* Media column (e.g., 60% width) */
		flex-basis: 60%;
		/* order: -1; Place the media column first visually (left side) */
	}
}