/* Desktop */
@media (min-width: 1024px) {

	.main-header {
		flex-direction: row;
		flex-grow: 1;
		max-width: 99%;
	}

	.contact-info {
		width: 40%;
	}

	.container-wrapper {
		gap: 26px;
		flex-direction: row;
	}

	/* Adjust expandable container for vertical behavior on desktop */
	.expandable-card {
		/* 100% viewport width minus body padding */
		/* width: calc(100vw - 40px); */
		/* Limit max width on desktop */
		max-width: 31%;
		/* Set height relative to viewport width */
		height: 225px;
		/* Initial collapsed height for desktop */
		max-height: 225px;
		/* Hide overflow for vertical collapse */
		overflow: hidden;
		/* Prevent horizontal growth in column layout on mobile */
		flex-grow: 0;
	}

	/* State when an individual checkbox is checked (Desktop behavior) */
	.card-checkbox:checked+.expandable-card {
		/* Maintain full width on expand */
		max-width: 31%;
		/* width: calc(100vw - 40px); */
		/* Maintain max-width */
		/* max-width: 600px; */
		/* Allow height to adjust to content when expanded */
		height: fit-content;
		/* Expand vertically to a large height */
		/* max-height: fit-content; */
		/* Make background image disappear */
		/* background-image: none; */
		/* Allow content to be visible when expanded */
		overflow: visible;
	}
}


/* Tablet */
@media (min-width: 476px) and (max-width: 1023px) {

	.main-header {
		flex-direction: column;
		flex-grow: 1;
		max-width: 99%;
	}

	.contact-info {
		width: 40%;
	}

	.container-wrapper {
		gap: 26px;
		flex-direction: column;
	}

	/* Adjust expandable container for vertical behavior on desktop */
	.expandable-card {
		/* 100% viewport width minus body padding */
		width: calc(100vw - 40px);
		/* Limit max width on desktop */
		max-width: 99%;
		/* Set height relative to viewport width */
		height: 225px;
		/* Initial collapsed height for desktop */
		max-height: 225px;
		/* Hide overflow for vertical collapse */
		overflow: hidden;
		/* Prevent horizontal growth in column layout on mobile */
		flex-grow: 0;
	}

	/* State when an individual checkbox is checked (Desktop behavior) */
	.card-checkbox:checked+.expandable-card {
		/* Maintain full width on expand */
		max-width: 99%;
		/* width: calc(100vw - 40px); */
		/* Maintain max-width */
		/* max-width: 600px; */
		/* Allow height to adjust to content when expanded */
		height: fit-content;
		/* Expand vertically to a large height */
		/* max-height: fit-content; */
		/* Make background image disappear */
		/* background-image: none; */
		/* Allow content to be visible when expanded */
		overflow: visible;
	}
}



/* Mobile */
@media (max-width: 475px) {

	.main-header {
		flex-direction: column;
		flex-grow: 1;
		max-width: 88%;
		height: auto;
		justify-content: center;
	}
	
	model-viewer {
		width: 88%;
		height: 30rem;
	}

	.hr-title-container {
		width: 88%;
		margin-top: 0.5rem;
		margin-bottom: 1rem;
	}

	.p-contact-info {
		width: 88%;
	}
	
	.container-wrapper {
		gap: 26px;
		flex-direction: column;
		height: auto;
		align-content: center;
	}

	/* Adjust expandable container for vertical behavior on mobile */
	.expandable-card {
		/* 100% viewport width minus body padding */
		width: calc(100vw - 40px);
		/* Limit max width on mobile */
		max-width: 99%;
		/* Set height relative to viewport width */
		height: 225px;
		/* Initial collapsed height for mobile */
		max-height: 225px;
		/* Hide overflow for vertical collapse */
		overflow: hidden;
		/* Prevent horizontal growth in column layout on mobile */
		flex-grow: 0;
	}

	/* When checked, expand vertically on mobile */
	.card-checkbox:checked+.expandable-card {
		/* Maintain full width on mobile */
		width: calc(100vw - 40px);
		/* Reapply max-width to prevent overflow */
		max-width: 99%;
		/* Allow height to adjust to content when expanded */
		height: fit-content;
		/* Expand vertically to a large height (adjust as needed) */
		/* max-height: 1400px; */
		/* Make background image disappear on mobile expansion too */
		/* background-image: none; */
	}
}