/*
 * The Avenue Gallery (Divi child): mobile, tablet and small-laptop fixes.
 * Every rule sits inside a max-width media query, so wide screens are untouched, except the
 * footer (M11), which is tidied at every width by Ian's decision, and the artist tiles' fix for
 * Safari and Firefox and the header search's text colour (at the end).
 * Each fix is numbered as in docs/discovery/mobile-assessment.md in the project repository.
 */

/* M1: /gallery/ product grid below 1280px. The Divi shop module keeps WooCommerce's 4 columns at
   every width while thumbnails stay 206px, so tiles overlap below about 1230px and the page runs
   wider than a phone. Decided 12 October 2026: 3 columns from 1024 to 1279 (tablets sideways,
   small laptops), 2 from 768 to 1023 (tablets upright), 1 on phones. Above 1279px nothing here
   applies, so desktop keeps its 4 columns.
   Every other page with the shop module gets the same (body.page, not /gallery/'s own class):
   Current Exhibition, Under $500 and Over $500, by Ian's decision the same day.
   Each artist's page (woocommerce/taxonomy-artist.php, the work list in #artists) gets the same,
   by Ian's decision the same day: its 206px tiles overlapped from 768 to 1024px too. So does the
   product search results page (Advanced Woo Search, WooCommerce's product archive template), with
   its sort menu and type filter, by Ian's decision the same day: it kept 4 columns of 206px tiles,
   edge to edge, to 1024px. */
@media (max-width: 1279px) {
	body.page .et_pb_shop_grid ul.products,
	body.tax-artist #artists ul.products,
	body.search-results.post-type-archive-product ul.products {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		column-gap: 4%;
		row-gap: 30px;
	}
	/* Clearfix pseudo-elements would otherwise take grid cells. */
	body.page .et_pb_shop_grid ul.products::before,
	body.tax-artist #artists ul.products::before,
	body.search-results.post-type-archive-product ul.products::before,
	body.page .et_pb_shop_grid ul.products::after,
	body.tax-artist #artists ul.products::after,
	body.search-results.post-type-archive-product ul.products::after {
		display: none;
	}
	body.page .et_pb_shop_grid ul.products li.product,
	body.tax-artist #artists ul.products li.product,
	body.search-results.post-type-archive-product ul.products li.product {
		width: auto !important;
		margin: 0 !important;
		float: none !important;
		clear: none !important;
	}
	/* Square image box that fits the tile instead of a fixed 206px. */
	body.page .et_pb_shop_grid ul.products .product-thumb-wrapper,
	body.tax-artist #artists ul.products .product-thumb-wrapper,
	body.search-results.post-type-archive-product ul.products .product-thumb-wrapper {
		width: 100%;
		height: auto;
		aspect-ratio: 1 / 1;
	}
	/* The image fills its square, as at desktop, without distorting: the square's grey shows
	   around pieces that are not square. */
	body.page .et_pb_shop_grid ul.products li.product a img,
	body.tax-artist #artists ul.products li.product a img,
	body.search-results.post-type-archive-product ul.products li.product a img {
		width: 100% !important;
		height: 100%;
		max-height: none;
		object-fit: contain;
	}
}
@media (max-width: 1023px) {
	body.page .et_pb_shop_grid ul.products,
	body.tax-artist #artists ul.products,
	body.search-results.post-type-archive-product ul.products {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: 6%;
		row-gap: 40px;
	}
}
@media (max-width: 767px) {
	/* One piece per row, each set off by a fine rule and space, so the artist, title and price
	   read as belonging to the image above them rather than as one running scroll. The rule sits
	   above each piece, leaving the NEW badge and sold dot where they are. */
	body.page .et_pb_shop_grid ul.products,
	body.tax-artist #artists ul.products,
	body.search-results.post-type-archive-product ul.products {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}
	body.page .et_pb_shop_grid ul.products li.product,
	body.tax-artist #artists ul.products li.product,
	body.search-results.post-type-archive-product ul.products li.product {
		border-top: 1px solid #d6d4d3;
		padding-top: 32px !important;
	}
	body.page .et_pb_shop_grid ul.products li.product:first-child,
	body.tax-artist #artists ul.products li.product:first-child,
	body.search-results.post-type-archive-product ul.products li.product:first-child {
		border-top: 0;
		padding-top: 0 !important;
	}
	body.page .et_pb_shop_grid ul.products .product-thumb-wrapper,
	body.tax-artist #artists ul.products .product-thumb-wrapper,
	body.search-results.post-type-archive-product ul.products .product-thumb-wrapper {
		margin-bottom: 14px;
	}
	/* Artist names and materials wrap rather than being cut off; the right padding still keeps
	   them clear of the NEW badge. */
	body.page .et_pb_shop_grid ul.products h2,
	body.tax-artist #artists ul.products h2,
	body.search-results.post-type-archive-product ul.products h2,
	body.page .et_pb_shop_grid ul.products h3,
	body.tax-artist #artists ul.products h3,
	body.search-results.post-type-archive-product ul.products h3,
	body.page .et_pb_shop_grid ul.products a > span,
	body.tax-artist #artists ul.products a > span,
	body.search-results.post-type-archive-product ul.products a > span {
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
}

/* M11: the footer, tidied at desktop, tablet and phone widths (Ian, 12 October 2026). Older rules
   in Divi's Custom CSS and in style.css placed its parts with fixed offsets: the TripAdvisor
   badge's left margin set separately for some twenty widths, and "Follow Us" pinned 50px above the
   icons. So "Follow Us" landed on the links on phones and tablets, the badge sat off centre, and
   wide screens wrapped the links unevenly. These rules lay it out instead.
   Desktop: the badge on the left, the links in one row in the middle, and "Follow Us" over the
   icons on the right, centred on the badge's middle (Ian, the same day: not low beside the
   copyright, and centred rather than top-aligned); the copyright below, on the left. Below 981px:
   the badge and "Follow Us" with the icons side by side at the top, each centred in its half, on
   one middle line; then the links, centred, one per line on phones with room to tap; then the
   copyright.
   The icons are printed after the copyright, so they are placed over the top row: the footer is
   their positioning box, and the row's top padding is fixed so the badge's position is known.
   Divi's Custom CSS loads after this file, hence the ids in the selectors and !important where
   the old rules use it. The old rules can go when Divi's Custom CSS moves into the child theme. */
#main-footer {
	position: relative;
}
/* Fixed, where it was a share of the width, so the badge's position is known. */
#main-footer #footer-widgets {
	padding-top: 30px !important;
}
/* Divi floats each widget left inside its column; on narrow screens the badge's column then
   collapses and the links float up beside the badge. */
#main-footer #footer-widgets .footer-widget .fwidget {
	float: none;
	margin-left: 0 !important;
	padding-left: 0 !important;
}
#main-footer #footer-widgets #menu-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px 32px;
	margin: 0;
	padding: 0;
	line-height: 1.5 !important;
}
#main-footer #footer-widgets #menu-footer li {
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
}
#main-footer #footer-bottom {
	padding-bottom: 24px !important;
}
/* Divi positions every .container; this one must not be, so the footer is the icons' box. */
#main-footer #footer-bottom,
#main-footer #footer-bottom .container {
	position: static;
}
/* "Follow Us" and the icons, over the top row, centred on the badge's middle: the row's 1px top
   border, its 30px padding, and half the badge's 100px height. */
#main-footer #footer-bottom .et-social-icons {
	position: absolute;
	top: 81px;
	transform: translateY(-50%);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 22px;
	float: none;
	margin: 0 !important;
	padding: 0;
}
#main-footer #footer-bottom .et-social-icons li {
	margin: 0;
}
/* In the flow above the icons, no longer pinned over whatever sits above them. */
#main-footer #footer-bottom .et-social-icons .followus {
	position: static;
	flex: 0 0 100%;
	margin: 0;
	line-height: 1.2;
}
#main-footer #footer-bottom #footer-info {
	float: none;
	margin: 0 !important;
	padding: 0;
}
/* Phone numbers in the footer credits (Divi, Theme Customizer, Footer, Bottom Bar) as tel: links,
   in the text's own style rather than Divi's bold footer links. */
#main-footer #footer-info a[href^="tel:"] {
	color: inherit;
	font-weight: inherit;
	text-decoration: none;
}
#main-footer #footer-info a[href^="tel:"]:hover,
#main-footer #footer-info a[href^="tel:"]:focus-visible {
	text-decoration: underline;
}
@media (min-width: 981px) {
	#main-footer #footer-widgets {
		display: flex;
		align-items: center;
	}
	#main-footer #footer-widgets::before,
	#main-footer #footer-widgets::after {
		display: none;
	}
	#main-footer #footer-widgets .footer-widget {
		float: none;
		margin: 0 !important;
	}
	/* Equal outer columns keep the links centred on the page; the right one is where "Follow Us"
	   and the icons sit. */
	#main-footer #footer-widgets .footer-widget:nth-child(1),
	#main-footer #footer-widgets .footer-widget:nth-child(3) {
		flex: 0 0 18%;
		width: auto !important;
	}
	#main-footer #footer-widgets .footer-widget:nth-child(2) {
		flex: 1 1 auto;
		width: auto !important;
	}
	/* The badge lines up with the copyright below it. */
	#main-footer #footer-widgets .footer-widget:nth-child(1) {
		text-align: left;
	}
	#main-footer #footer-widgets #menu-footer {
		flex-wrap: nowrap;
		white-space: nowrap;
	}
	/* At the right edge of the content, which Divi keeps at 80% of the window, 1080px at most. */
	#main-footer #footer-bottom .et-social-icons {
		right: calc((100% - min(80%, 1080px)) / 2);
		justify-content: flex-end;
	}
	#main-footer #footer-bottom .et-social-icons .followus {
		text-align: right;
	}
	#main-footer #footer-bottom #footer-info {
		text-align: left;
	}
}
@media (max-width: 980px) {
	#main-footer #footer-widgets .footer-widget {
		float: none;
		width: 100% !important;
		margin: 0 0 16px !important;
		text-align: center;
	}
	/* The badge takes the left half of the top row; "Follow Us" and the icons the right half. */
	#main-footer #footer-widgets .footer-widget:nth-child(1) {
		width: 50% !important;
	}
	/* The third footer column is empty. */
	#main-footer #footer-widgets .footer-widget:not(:has(.fwidget)) {
		display: none;
	}
	#main-footer #footer-widgets .widget_media_image img {
		display: inline-block;
		margin: 0 auto !important;
	}
	/* The right half of the content, which Divi keeps at 80% of the window. */
	#main-footer #footer-bottom .et-social-icons {
		left: 50%;
		width: 40%;
		justify-content: center;
	}
	#main-footer #footer-bottom .et-social-icons .followus,
	#main-footer #footer-bottom #footer-info {
		text-align: center;
	}
}
@media (max-width: 767px) {
	#main-footer #footer-widgets #menu-footer {
		flex-direction: column;
		gap: 2px;
	}
	#main-footer #footer-widgets #menu-footer a {
		display: inline-block;
		padding: 8px 12px;
	}
}

/* Artist tiles on /artists/ and the group pages: the artwork shows, the artist's photo on hover
   (Ian, 12 October 2026: Safari and Firefox showed only the photo, Chrome and Edge worked). The
   artwork is positioned absolutely inside the tile's link, which is inline and is split in two by
   the name's heading. CSS leaves the box of such a split link undefined; Safari and Firefox make
   it zero wide, so the artwork's max-width: 100% (Divi's) shrank it to nothing and the photo
   beneath showed. A block link gives the artwork a real box, the tile's own width, on which both
   images are sized alike; top and left fix where it sits instead of each browser's guess. The
   touch rule in Divi's Custom CSS, artwork only, is unchanged. */
#artists ul.artists li > a {
	display: block;
}
#artists ul.artists li > a .art-thumb {
	top: 0;
	left: 0;
}

/* Header search, once the page is scrolled: Divi's fixed header makes the search box's text white,
   with !important, for its own see-through box on the dark bar. Advanced Woo Search's box sits on
   white (its own box, or in the Pro version its white results panel), so the words typed vanished
   (Ian, 12 October 2026, in Chrome; any browser once scrolled). The search plugin's own dark grey,
   scrolled or not, at every width. */
#main-header .et_search_form_container .aws-container .aws-search-field {
	color: #313131 !important;
}