/* Mobile overrides for The Rowley Gallery.
   Loaded AFTER Screen.css. Every rule lives inside a media query, so the
   desktop layout is untouched — removing the <link> in Public.master
   reverts the site completely. */

/* The only rule outside a media query: the burger exists in the master page on
   every screen size, so it must be hidden by default and revealed below. */
#NavToggle { display: none; }

@media (max-width: 768px) {

	/* ---- Page shell --------------------------------------------------- */
	/* Screen.css pins the shell to 920px and anchors the footer with
	   absolute positioning. Both have to go before anything else can reflow. */
	#Wrapper { width: auto; max-width: 100%; }
	#Content { width: auto; padding: 15px; font-size: 1em; }
	#HeaderLeft { display: none; }

	/* ---- Header and navigation ---------------------------------------- */
	/* The header becomes a fixed bar: burger top-left, logo top-right. The
	   padding-top reserves that bar, so the menu falls below it when opened. */
	#Header {
		width: auto;
		height: auto;
		padding-top: 64px;
		background-size: 70px auto;
		background-position: right top;		/* flush into the corner */
		position: relative;
	}

	#NavToggle {
		display: block;
		position: absolute;
		top: 12px;
		left: 10px;
		width: 44px;			/* 44px is the minimum comfortable touch target */
		height: 40px;
		padding: 0;
		border: 0;
		border-radius: 3px;
		background: transparent;
		cursor: pointer;
	}
	#NavToggle span,
	#NavToggle span:before,
	#NavToggle span:after {
		display: block;
		position: absolute;
		left: 10px;
		width: 24px;
		height: 3px;
		background: #ffffff;
		content: "";
	}
	#NavToggle span { top: 18px; }
	#NavToggle span:before { top: -8px; left: 0; }
	#NavToggle span:after  { top:  8px; left: 0; }

	/* Collapsed by default; the toggle adds .nav-open to #Header. */
	#Header ul.AspNet-Menu { display: none; }
	#Header.nav-open ul.AspNet-Menu { display: block; }

	/* Screen.css absolutely positions the menu and pads links 101px down to
	   clear the desktop logo. Neither applies once it is a dropdown. */
	#Header ul,
	#Header ul.AspNet-Menu {
		position: static;
		height: auto;
		width: auto;
	}
	#Header ul li,
	ul.AspNet-Menu li { float: none; width: 100%; }
	#Header ul li a {
		margin: 0;
		padding: 13px 16px;
		font-size: 1em;
		border-top: solid 1px rgba(255, 255, 255, 0.25);
	}

	/* ---- Content blocks ------------------------------------------------ */
	/* Everything below is a fixed-width float in Screen.css. */
	#HomeText,
	#HomeImage,
	#FramingInfo,
	#Info,
	#Images,
	#Paintings,
	.Artists,
	ul.Gesso,
	ul.ImageBlock,
	#Content ul.Team {
		float: none;
		width: auto;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	/* ImageBlock is pushed down 770px to clear desktop artwork. */
	ul.ImageBlock { margin-top: 20px; }

	/* Thumbnail grids. auto-fill fits as many 130px columns as the screen
	   allows, so these stay a grid all the way down to the narrowest phone
	   instead of collapsing into one long column. */
	.Artists,
	#Paintings,
	ul.Gesso,
	#Content ul.Team,
	#HomeImage ul.History {
		display: grid;
		grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
		gap: 18px 12px;
		padding: 0;
		list-style: none;
	}
	.Artists li,
	#Paintings li,
	ul.Gesso li,
	#Content ul.Team li,
	#HomeImage ul.History li {
		float: none;
		width: auto;
		height: auto;
		margin: 0;
		text-align: center;
	}
	.Artists li img,
	#Paintings li img,
	#Content ul.Team li img { max-width: 100%; height: auto; }
	#HomeImage ul.History { float: none; margin-right: 0; }

	/* Floated inline images crowd a narrow column. */
	#Content img.left,  #Content span.left,
	#Content img.right, #Content span.right {
		float: none;
		display: block;
		margin: 0 0 12px 0;
	}

	/* No image should ever exceed the viewport. */
	#Content img,
	#Content object,
	#Content embed { max-width: 100%; height: auto; }

	/* ---- Homepage slideshow -------------------------------------------- */
	/* Every .slider img is position:absolute, so the container gets no height
	   from its contents and must be given a shape of its own. The slides are
	   all 350px wide with heights ranging 239-410, so the box is sized to the
	   tallest: shorter slides sit top-aligned inside it and the page does not
	   jump as the slideshow cycles. */
	/* No aspect-ratio here. #HomeImage above sets width:auto, which outranks a
	   plain .slider width — and an auto width plus an aspect-ratio plus the
	   script's explicit height makes the WIDTH derive from the height, which
	   the image then feeds back into the height. The ID+class selector pins
	   the width so it can never depend on the height.
	   The 410px height is the no-JS fallback (tallest slide at natural size);
	   Mobile.js overrides it inline with the exact height of each slide. */
	#HomeImage.slider,
	.slider {
		width: 100%;
		max-width: 350px;		/* the slides' natural width — never upscale */
		height: 410px;
		position: relative;
		margin: 10px auto 0 auto;
		/* No height transition. slideshow2.js cross-fades via inline styles,
		   which fires the observer many times per second; an in-flight height
		   animation never settles and the box sticks at its start value. */
	}
	/* height:auto, not 100% — the script derives the container's height from
	   the image, so the image must never derive its height from the container. */
	.slider img {
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	/* ---- Forms and tables ---------------------------------------------- */
	.Boxed, .Boxed150 { width: 100%; box-sizing: border-box; }
	table.Workshop td { float: none; display: block; width: auto; }
	#tblForm, #tblForm td { display: block; width: auto; }

	/* ---- Popups --------------------------------------------------------- */
	#popupInner, #closepopup { width: auto; max-width: 95%; }

	/* ---- Footer ---------------------------------------------------------- */
	/* Screen.css absolutely positions the footer at left:50% with a fixed
	   380px width; on a phone that lands it off-centre and overflowing. */
	#ClearFooter { width: auto; height: 20px; }
	#FooterLeft { display: none; }
	#Footer {
		position: static;
		width: auto;
		height: auto;
		left: auto;
		text-align: center;
		padding: 8px 0;
	}
	#Footer p { margin: 0; }
}

/* Narrow phones: tighten the grid rather than collapsing it to one column,
   so the artist and painting pages stay browsable instead of becoming a
   very long scroll. */
@media (max-width: 480px) {
	.Artists,
	#Paintings,
	ul.Gesso,
	#Content ul.Team,
	#HomeImage ul.History {
		/* The artist and painting thumbnails are only 100px square, so 100px
		   columns fit three across a 375px phone instead of two. */
		grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
		gap: 14px 10px;
	}
}