/*
------------------------------------------------
RESPONSIVE
Desktop (> 1100px) is untouched; these rules only
kick in as the viewport narrows.
Some pages set their own widths in a <style> block,
so those overrides are prefixed with #rightColumn.
------------------------------------------------
*/

/* menu button, hidden on desktop */
.nav_toggle { display:none; }

/*
---------------------------------
NARROW DESKTOP (<= 1100px)
---------------------------------
*/
@media screen and (max-width:1100px) {

	/* the 976px layout fits down to 1000px with smaller side margins */
	#pageWrapper { padding:0 12px; }
}

/*
---------------------------------
STACKED (<= 999px)
---------------------------------
*/
@media screen and (max-width:999px) {

	/* single 686px column: header bar, page content, footer */
	#pageWrapper { width:auto; max-width:686px; min-height:0; background-image:none; }

	/* header bar with collapsible menu */
	#leftColumn { float:none; width:auto; min-height:0; margin:0 0 14px 0; background-color:#302F2F; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; }
	#leftColumn > a { display:block; }
	#ashcombe_building_logo { display:block; width:138px; height:auto; margin:0; }

	.nav_toggle { display:block; width:44px; height:44px; margin:0 10px 0 0; padding:12px 10px; background:transparent; border:0; cursor:pointer; }
	.nav_toggle span { display:block; height:3px; margin:0 0 5px 0; background-color:#D3D3CF; border-radius:2px; }
	.nav_toggle span:last-child { margin:0; }
	.nav_toggle:hover span, #leftColumn.menu_open .nav_toggle span { background-color:#FFFFFF; }

	ul#mainNavigation { display:none; width:100%; padding:6px 0; background-color:#EDEDEB; }
	#leftColumn.menu_open ul#mainNavigation { display:block; }
	ul#mainNavigation li.mainLink a:link, ul#mainNavigation li.mainLink a:visited,
	ul.subnavigation li.sublink a.subNav:link, ul.subnavigation li.sublink a.subNav:visited { padding-top:8px; padding-bottom:8px; }

	#rightColumn { float:none; width:auto; }
	#footer { width:auto; }
}

/*
---------------------------------
FLUID (<= 709px)
---------------------------------
*/
@media screen and (max-width:709px) {

	#rightColumn img { max-width:100%; height:auto; }

	/* header images: the picture scales, the text boxes that sat on it go underneath */
	#homepage_headerImage, #ashcombe_building_about, #ashcombe_building_contact, #rightColumn .caseStudiesHeaderImage { width:auto; height:auto; background-size:100% auto; }
	#homepage_headerImage { padding-top:57.87%; } /* 686x397 */
	#ashcombe_building_about { padding-top:47.81%; } /* 686x328 */
	#ashcombe_building_contact { padding-top:39.5%; } /* 686x271 */
	#rightColumn .caseStudiesHeaderImage { padding-top:60.35%; } /* 686x414 */
	h1.homepageTitle, h2.homepageSub, h1.about, h2.about_sub,
	.caseStudiesHeaderBlock, .caseStudiesBlock { position:static; width:auto; margin:4px 0 0 0; text-align:left; }
	h1, h1.about p, h1.homepageTitle p { font-size:24px; line-height:30px; }
	h2, h2.about_sub p, h2.homepageSub p { font-size:17px; line-height:23px; }

	/* home - gallery and contact boxes */
	.homepage_linkImage { width:calc(50% - 7px); height:auto; aspect-ratio:336/180; background-size:cover; }

	/* about */
	#ashcombe_building_about_copy { float:none; width:auto; min-height:0; }
	#ashcome_building_about_viewGallery { float:none; width:auto; min-height:0; }

	/* case study category - featured projects */
	.caseStudiesFeatured { width:auto; }
	ul#featuredProjects li { width:33.333%; box-sizing:border-box; }
	ul#featuredProjects li img { display:block; width:100%; height:auto; }
	ul#featuredProjects li a > div { width:auto !important; aspect-ratio:225/190; height:auto !important; } /* no thumbnail */
	.featuredProjectsTitles { top:52%; right:8px; width:auto; font-size:15px; }

	/* case study - main image, then the thumbnails and project numbers */
	#case_study_col_1, #case_study_col_2 { float:none; width:auto; }
	#case_study_main_image_container { width:auto; height:auto; aspect-ratio:560/378; } /* same crop of the 686px image as desktop */
	#case_study_main_image_container img { display:block; width:122.5%; max-width:none; }
	#case_study_main_image_container > div { width:auto !important; height:auto !important; line-height:1.4 !important; padding:60px 10px; } /* no images */
	#case_study_section_title { width:auto; height:auto; line-height:22px; padding:8px 10px; }
	#case_study_copy_container { width:auto; min-height:0; }
	#case_study_thumbnail_container { height:auto; display:flex; gap:3px; margin:3px 0; }
	.case_study_thumb { width:calc((100% - 6px) / 3); height:auto; margin:0; }
	.case_study_thumb img { display:block; width:100%; }
	#case_study_next_prev { width:auto; height:auto; padding:0 0 10px 0; background-repeat:repeat; }
	.NextPrevContainer { width:auto; }

	/* project gallery */
	#rightColumn .gallery_pagitnation { width:auto; }
	#rightColumn .gallery_thumb { width:calc(33.33% - 10px); height:auto; box-sizing:border-box; }
	#rightColumn .gallery_thumb img { display:block; width:100%; }

	/* contact - labels above full width fields */
	#contact_page_form { padding:15px; }
	#contact_page_form label { float:none; display:block; width:auto; margin:0 0 4px 0; }
	#contact_page_form input.text_input, #contact_page_form .textarea_input { float:none; width:100%; box-sizing:border-box; }
	#contact_page_form altcha-widget { margin:0; --altcha-max-width:100%; }
	#contact_page_form .form_row { margin:0 0 12px 0; }
	#contact_page_form .field_error { padding-left:0; }
	#rightColumn #contact_page_ty_msg { padding:20px; }
}

/*
---------------------------------
PHONE (<= 480px)
---------------------------------
*/
@media screen and (max-width:480px) {

	/* home boxes stack */
	.linkImgContact, .linkImgGallery { float:none; width:auto; margin:0 0 14px 0; }

	ul#featuredProjects li { width:50%; }
	.featuredProjectsTitles { font-size:14px; }

	#rightColumn .gallery_thumb { width:calc(50% - 10px); }
}