/* ==========================================================================
   EziBuild Mobile Optimisations
   Responsive overrides for the EziBuild website.
   Keep all mobile/responsive-specific CSS here.
   ========================================================================== */

/* Narrower and below (max-width: 840px)
   ========================================================================== */

@media screen and (max-width: 840px) {

	/* Change the blue accent line under the mobile title bar to brand purple */
	#titleBar {
		box-shadow: 0 4px 0 0 #6f4b9e;
	}

	/* Override main.css full-width buttons — size to content instead */
	#content article > .button {
		width: auto;
		display: inline-block;
		margin-bottom: 0.75em;
		margin-right: 0.5em;
	}
}

/* Tablet and below (max-width: 736px)
   ========================================================================== */

@media screen and (max-width: 736px) {

	/* Hero image — taller than before for better visibility */
	.image.services-hero {
		height: 200px;
	}

	.image.gallery-uniform {
		height: 200px;
	}

	.image.gallery-featured {
		height: 300px;
	}

	/* Stack before/after pairs vertically with tighter spacing */
	.ba-pair {
		flex-direction: column;
		gap: 0.75em;
		margin-bottom: 1.5em;
	}

	/* Fluid height for before/after images */
	.ba-main-wrap {
		height: 300px;
	}

	/* Larger thumbnails for touch targets */
	.ba-thumbs {
		gap: 0.4em;
	}

	.ba-thumbs img {
		width: 60px;
		height: 60px;
	}

	/* Larger close button for touch */
	.lightbox-close {
		width: 48px;
		height: 48px;
		font-size: 1.75em;
		line-height: 48px;
	}

	/* Testimonial boxes — tighter padding */
	.box blockquote {
		padding: 1em 1.25em;
	}

	/* Sidebar — visual separation from main content */
	#sidebar {
		margin-top: 2em;
	}
}

/* Mobile (max-width: 480px)
   ========================================================================== */

@media screen and (max-width: 480px) {

	/* Hero image — still visible on small phones */
	.image.services-hero {
		height: 150px;
	}

	.image.gallery-uniform {
		height: 180px;
	}

	.image.gallery-featured {
		height: 250px;
	}

	/* Smaller max-height for B/A images on phones */
	.ba-main-wrap {
		height: 240px;
	}

	/* Slightly smaller but still tappable thumbnails */
	.ba-thumbs img {
		width: 55px;
		height: 55px;
	}

	/* B/A labels — larger text for readability */
	.ba-pair .ba-item .ba-label {
		font-size: 0.9em;
		padding: 0.4em 0;
	}

	/* Testimonial text — comfortable reading size */
	.box blockquote p {
		font-size: 0.95em;
	}

	/* Lightbox — fill more of the screen */
	.lightbox-overlay img {
		max-width: 95vw;
		max-height: 85vh;
	}

	/* Larger close button on small phones */
	.lightbox-close {
		width: 52px;
		height: 52px;
		font-size: 2em;
		line-height: 52px;
	}

	/* Footer form textarea minimum height */
	#footer textarea {
		min-height: 120px;
	}
}