@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');
/* Basic Resets & Global Styles */
:root {
	--primary-text-color: #000000;
	--background-color: #ffffff;
	--font-body: 'Tahoma', sans-serif;
	--header-height: 80px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* --- Global Body Styling --- */
body {
	font-family: var(--font-body);
	line-height: 1.6;
	color: var(--primary-text-color);
	background-color: var(--background-color);
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	padding-top: var(--header-height);
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 20px;
}

.container h2 {
	font-size: 1.8em;
	margin-bottom: 0.8em;
	line-height: 1.2;
	font-weight: 200;
}

.subheading h2 {
	text-align: center;
	font-size: 1.4em;
	margin-top: 20px;
}

.container p {
	font-size: 1.1em;
	margin-bottom: 1em;
	margin-top: 1em;
	line-height: 1.9;
}

/* --- General Typography & Link Styles --- */
h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: var(--font-body);
	color: var(--primary-text-color);
	line-height: 1.2;
}

/* Base link styles to remove default colors and underlines */
a,
a:visited {
	color: var(--primary-text-color); /* All links are black by default */
	text-decoration: none; /* Removes the underline */
	transition: opacity 0.3s ease; /* Transition for a subtle hover effect */
}

a:hover {
	opacity: 0.7; /* Subtle fade on hover */
}

/* --- Header & Navigation --- */
.main-header {
	background-color: var(--background-color);
	height: var(--header-height);
	display: flex;
	align-items: center;
	border-bottom: 1px solid #eee;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 1000;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
	transition: top 0.8s ease-out, opacity 0.8s ease-out;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.main-header.hidden {
	top: calc(-1 * var(--header-height));
	opacity: 0;
	pointer-events: none;
	transition: top 0.8s ease-out, opacity 0.8s ease-out,
		visibility 0s 0.8s;
	visibility: hidden;
}

.main-header .container {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
}

.logo a {
	font-weight: 400;
	font-size: 1.8em;
	color: var(--primary-text-color);
	text-transform: uppercase;
	letter-spacing: 1px;
}

.main-nav ul.nav-links {
	list-style: none;
	display: flex;
	gap: 30px;
}

.main-nav ul.nav-links a {
	font-weight: 400;
	font-size: 1.1em;
	padding: 5px 10px;
	position: relative;
	transition: color 0.3s ease, background-color 0.3s ease;
}

.main-nav ul.nav-links a.active-link {
	color: var(--background-color);
	background-color: var(--primary-text-color);
	border-radius: 4px; /* Matches the hover effect's border-radius */
}

.main-nav ul.nav-links a:hover {
	color: var(--background-color);
	background-color: var(--primary-text-color);
	border-radius: 4px; /* Adjust this value for a larger or smaller radius */
}

.menu-toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 10px;
	z-index: 1100;
}

.menu-toggle .bar {
	display: block;
	width: 25px;
	height: 3px;
	background-color: var(--primary-text-color);
	margin: 5px 0;
	transition: all 0.3s ease-in-out;
}

.menu-toggle.active .bar:nth-child(1) {
	transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active .bar:nth-child(2) {
	opacity: 0;
}

.menu-toggle.active .bar:nth-child(3) {
	transform: translateY(-8px) rotate(-45deg);
}

/* --- Hero Section --- */
/* Wrapper for hero section to make it full width */
.hero-section-wrapper {
	margin: 0;
	width: 100%;
	min-height: 600px;
	/* Removed the box-shadow for a seamless transition */
}

.hero-slideshow {
	position: relative;
	width: 100%;
	height: 600px;
	overflow: hidden;
	background-color: #f0f0f0;
}

.slideshow-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.slideshow-container .slide {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
	transition: opacity 1s ease-in-out;
}

.slideshow-container .slide.active {
	opacity: 1;
}

.slide-1 {
	background-image: url('imgs/hero_img/img_1.jpg');
}
.slide-2 {
	background-image: url('imgs/hero_img/img_2.jpg');
}
.slide-3 {
	background-image: url('imgs/hero_img/img_3.jpg');
}
.slide-4 {
	background-image: url('imgs/hero_img/img_4.jpg');
}
.slide-5 {
	background-image: url('imgs/hero_img/img_5.jpg');
}
.slide-6 {
	background-image: url('imgs/hero_img/img_6.jpg');
}

.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(
		to right,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0) 50%
	);
	box-sizing: border-box;
}

.hero-content-wrapper {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0;
}

.hero-text {
	font-size: 3.5em;
	color: #ffffff;
	text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
	margin-bottom: 20px;
	text-transform: uppercase;
	line-height: 1.1;
	font-weight: 350;
	padding: 0;
	text-align: center;
}

/* Add ':visited' to the selector to override the default visited link color */
.hero-shop-btn,
.hero-shop-btn:visited {
	display: inline-block;
	padding: 15px 30px;
	border: 2px solid white;
	background-color: rgba(0, 0, 0, 0.6);
	color: white; /* This will now apply correctly */
	text-transform: uppercase;
	font-size: 0.9em;
	font-weight: 500;
	letter-spacing: 1px;
	transition: background-color 0.3s ease, color 0.3s ease;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
}

/* Add ':visited:hover' to ensure the hover effect works on visited links */
.hero-shop-btn:hover,
.hero-shop-btn:visited:hover {
	background-color: white;
	color: black;
}

/*This id the style for pages header*/
.page-header h1 {
	font-size: 3em;
	font-weight: 400;
	text-align: center;
	margin-bottom: 0;
	margin-top: 40px;
}
/* Styling for the artwork gallery page header */
.artwork-content-section {
	padding: 0;
	background-color: var(--background-color);
}

/* --- Welcome Section --- */
.content-section {
	padding: 60px 0;
	background-color: var(--background-color);
}

.welcome-grid {
	display: flex;
	align-items: center;
	gap: 50px;
}

.welcome-image-placeholder {
	flex: 1;
	min-width: 300px;
	height: 400px;
	background-color: #f0f0f0;
	border: 1px solid #ddd;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 0.9em;
	color: #999;
	overflow: hidden;
}

.welcome-image-placeholder img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border: 2px solid #555;
}

.welcome-text-content {
	flex: 2;
	text-align: left;
}

.welcome-heading {
	font-size: 2.5em;
	margin-bottom: 0.8em;
	line-height: 1.2;
	font-weight: 400;
}

.welcome-text-content p {
	font-size: 1.1em;
	margin-bottom: 1em;
	color: var(--primary-text-color);
}

/* --- Newsletter Section --- */
.full-width-parallax-section {
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
	background-image: url('imgs/sub_bg.jpg');
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

.newsletter-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.5);
	display: flex;
	align-items: center;
	justify-content: center;
}

.newsletter-content {
	color: white;
	text-align: center;
	max-width: 600px;
	padding: 20px;
	background-color: rgba(0, 0, 0, 0.6);
	border: 2px solid white;
}

.newsletter-content h2 {
	color: white;
	font-size: 2.2em;
	margin-bottom: 0.8em;
	font-weight: 350;
}

.newsletter-content p {
	font-size: 1.1em;
	margin-bottom: 1.5em;
	line-height: 1.5;
}

.newsletter-form {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 15px;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
}

.newsletter-form input[type='text'],
.newsletter-form input[type='email'] {
	width: 100%;
	padding: 12px 15px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	background-color: rgba(255, 255, 255, 0.1);
	color: white;
	font-family: var(--font-body);
	font-size: 1em;
	border-radius: 3px;
	outline: none;
	transition: border-color 0.3s ease, background-color 0.3s ease;
}

.newsletter-form input::placeholder {
	color: rgba(255, 255, 255, 0.7);
}

.newsletter-form input[type='text']:focus,
.newsletter-form input[type='email']:focus {
	border-color: white;
	background-color: rgba(255, 255, 255, 0.2);
}

.subscribe-btn {
	display: inline-block;
	padding: 12px 30px;
	border: 2px solid white;
	background-color: transparent;
	color: white;
	text-transform: uppercase;
	font-size: 1em;
	font-weight: 600;
	letter-spacing: 1px;
	cursor: pointer;
	transition: background-color 0.3s ease, color 0.3s ease,
		border-color 0.3s ease;
	width: 100%;
	max-width: 200px;
	border-radius: 3px;
}

.subscribe-btn:hover {
	background-color: white;
	color: black;
	border-color: white;
}

/* New Artwork Grid Section */
.artwork-grid-container {
	padding: 40px 0;
}

.artwork-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	row-gap: 1.5rem; /* Spacing between rows (top/bottom) */
	column-gap: 1.5rem; /* Spacing between columns (left/right) */
	grid-auto-rows: 1px;
	list-style: none;
}

/* Individual list items for the masonry layout */
.grid-item {
	position: relative;
	overflow: hidden;
	/* Removed box-shadow from here */
	transition: transform 0.3s ease-in-out;
}

.grid-item:hover {
	transform: translateY(-5px);
}

/* Ensure no extra spacing within the figure element */
.artwork-item {
	width: 100%;
	height: 100%;
	margin: 0; /* Important: Remove any default margin */
	padding: 0; /* Important: Remove any default padding */
}

/* Style the image directly to control shadow */
.artwork-item img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Apply shadow directly to the image */
	transition: box-shadow 0.3s ease-in-out;
}

.grid-item:hover img {
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); /* Apply hover shadow here */
}

/* The hover-to-reveal overlay */
.hover-info {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
	padding: 1rem;
	background-color: rgba(0, 0, 0, 0.75);
	color: #ffffff;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
	border-top-left-radius: 0px; /* Match parent's top-left radius */
	border-top-right-radius: 0px; /* Match parent's top-right radius */
	border-bottom-left-radius: 0; /* Override and make bottom corners square */
	border-bottom-right-radius: 0; /* Override and make bottom corners square */
}

.artwork-item figcaption {
	margin: 0;
	padding: 0;
}

.grid-item:hover .hover-info {
	opacity: 1;
}

/* Grayscale effect on the image */
.artwork-item img {
	width: 100%;
	height: auto;
	display: block;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	transition: box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out;
	filter: grayscale(0%); /* Start with color */
}

.grid-item:hover .artwork-item img {
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
	filter: grayscale(100%); /* Go to black and white on hover */
}

/* Ensure the hover info text is styled */
.hover-info h3 {
	margin: 0 0 0.2rem 0;
	font-size: 1.2rem;
	font-weight: 500;
	color: #ffffff;
	padding-left: 10px;
	padding-top: 5px;
}

.hover-info p {
	margin: 0;
	font-size: 0.9rem;
	color: #cccccc;
	padding-left: 10px;
	padding-bottom: 5px;
	font-style: italic;
}

/* end of css for artwork.html ////////////////////*/ 

/* --- Back to Top Button --- */
#back-to-top-btn {
    display: none; /* Hidden by default */
    position: fixed; /* Stays in place when scrolling */
    bottom: 25px;
    right: 25px;
    z-index: 99;
    
    /* Appearance */
    background-color: var(--primary-text-color); /* Black background */
    color: var(--background-color); /* White arrow */
    border: none;
    border-radius: 50%; /* Makes it a circle */
    width: 50px;
    height: 50px;
    font-size: 20px;
    cursor: pointer;

    /* Centering the icon */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Smooth transition */
    opacity: 0;
    transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
    transform: translateY(10px); /* Start slightly lower */
}

/* This class will be added by JavaScript to show the button */
#back-to-top-btn.show {
    opacity: 1;
    transform: translateY(0); /* Move to final position */
}

/* end of styles for back to the top butto*/

/* --- Contact Form Styling --- */
.contact-form-section {
	padding: 10px 0;
}

.contact-form-section,
h3 {
	font-weight: 200;
	color: #000;
}

.contact-intro {
	text-align: center;
	font-size: 1.1em;
	margin-bottom: 30px;
}

.contact-form {
	max-width: 600px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.name-fields {
	display: flex;
	gap: 20px;
}

.name-fields input {
	flex: 1;
}

.contact-form input,
.contact-form textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ccc;
	font-family: var(--font-body);
	font-size: 1em;
	border-radius: 4px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
	color: #999;
}

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--primary-text-color);
}

.submit-btn {
	display: block;
	padding: 15px 30px;
	background-color: var(--primary-text-color);
	color: var(--background-color);
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: 1px;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: opacity 0.3s ease;
}

.submit-btn:hover {
	opacity: 0.8;
}

/*
 * Styling for the list in the contact-intro
 */
.contact-list {
	list-style: none; /* Remove the bullet points */
	padding: 0;
	margin-top: -10px; /* Adjust spacing */
	text-align: center;
	margin-bottom: 15px;
}

/* Ensure the embedded SVG fills its container */
.postcard-container svg {
	width: 100%;
	height: auto;
	margin: auto;
	display: block;
	/* Add this line to limit the size on larger screens */
	max-width: 450px;
	/* Add this line to create a border */
	border: 4px solid #000;
} 

.bio-grid {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: 50px;
	align-items: start;
}

.bio-image-col {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.bio-image {
	width: 100%;
	height: auto;
	max-width: 418px;
	border: 1px solid #ddd;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.cv-link {
	margin-top: 14px;
	font-weight: normal;
	text-decoration: underline;
}

.bio-text-col {
	text-align: left;
}

.bio-text-col h2 {
	font-size: 1.8em;
	margin-bottom: 0.8em;
	line-height: 1.2;
	font-weight: 200;
}

.bio-text-col p {
	font-size: 1.1em;
	margin-bottom: 1em;
}

/* --- Projects Grid Layout --- */
.projects-page .content-section {
	padding-top: 15px;
}

.projects-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 40px;
	padding: 20px 0;
}

/* --- The Frame and Mount Styling --- */
.project-link {
	text-decoration: none; /* Removes the underline from the link */
	display: block; /* Makes the link fill its container */
}

.project-frame {
	border: 10px solid #000; /* Creates a solid black border of 10px thickness */
	background-color: #000; /* Ensures the corners are black */
	transition: transform 0.3s ease;
}

.project-link:hover .project-frame {
	transform: translateY(-5px); /* Lifts the frame on hover */
}

.project-mount {
	background-color: #fff; /* The white color of the mount */
	padding: 30px; /* Adjust this value to control the thickness of the mount */
}

.project-poster {
	display: block; /* Removes any default spacing below the image */
	width: 100%; /* Makes the image fill the space within the mount */
	max-width: 600px; /* Sets max width for the image */
	height: auto;
	max-height: 848px; /* Sets max height for the image */
	background-color: #eee; /* Creates a light grey background for the placeholder */
	border: #000 solid 1px;
}

.project-details {
	text-align: center;
	margin: 15px 0 0 0; /* Adds space above the text */
	color: #000;
	font-family: var(--font-body);
	font-size: 1em;
	font-weight: 300;
}

.exhib-view-btn {
	border: 2px solid black;
	color: white;
}

.exhib-view-btn:hover {
	background-color: black;
	color: white;
}

.hidden-gallery {
	display: none;
}

/* Base style for all status dots (shape, size, spacing) */
.status-dot {
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-left: 6px;
	vertical-align: middle;
}

/* Color for the 'Sold' status */
.status-dot.sold {
	background-color: #e74c3c; /* Red */
}

/* Color for the 'For Sale' status */
.status-dot.for-sale {
	background-color: #2ecc71; /* Green */
}

/* NEW: Color for the 'For Charity' status */
.status-dot.charity {
	background-color: #3498db; /* Blue */
}

/* NEW: Color for other unavailable statuses */
.status-dot.unavailable {
	background-color: #95a5a6; /* Grey */
}

/* Responsive grid for tablets and mobile */
@media (max-width: 992px) {
	.artwork-grid {
		grid-template-columns: repeat(
			3,
			1fr
		); /* 3 columns for tablets */
	}
}

@media (max-width: 768px) {
	.artwork-grid {
		grid-template-columns: repeat(
			2,
			1fr
		); /* 2 columns for smaller screens */
	}
}

@media (max-width: 480px) {
	.artwork-grid {
		grid-template-columns: 1fr; /* 1 column for mobile */
	}
}

/* --- Footer --- */
.main-footer {
	background-color: var(--primary-text-color);
	color: var(--background-color);
	padding: 30px 0;
	text-align: center;
	margin-top: auto;
	font-size: 0.9em;
}

.social-icons {
	margin-top: 15px;
	display: flex;
	justify-content: center;
	gap: 40px;
}

.social-icons a {
	color: var(--background-color);
	font-size: 1.5em;
	transition: color 0.3s ease;
	text-decoration: none;
}

.social-icons a:hover {
	color: #999;
}

/* --- Responsive Adjustments --- */
@media (max-width: 768px) {
	.main-header .container {
		justify-content: space-between;
	}

	.logo {
		order: 1;
	}
	.main-nav {
		order: 2;
	}

	.logo a {
		font-size: 1.5em;
	}

	.menu-toggle {
		display: block;
	}

	.main-nav ul.nav-links {
		display: none;
		flex-direction: column;
		position: absolute;
		top: var(--header-height);
		left: 0;
		width: 100%;
		background-color: var(--background-color);
		box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
		padding: 20px 0;
		text-align: center;
		border-top: 1px solid #eee;
		z-index: 999;
	}

	.main-nav ul.nav-links.active {
		display: flex;
	}

	.main-nav ul.nav-links li {
		margin: 10px 0;
	}

	.main-nav ul.nav-links a {
		font-size: 1.2em;
		padding: 10px 0;
		display: block;
	}

	.hero-slideshow {
		height: 400px;
	}
	.hero-section-wrapper {
		min-height: 400px;
	}
	.hero-overlay {
		justify-content: center;
		background: linear-gradient(
			to top,
			rgba(0, 0, 0, 0.6) 0%,
			rgba(0, 0, 0, 0) 50%
		);
	}
	.hero-content-wrapper {
		align-items: center;
		padding: 0 20px;
	}
	.hero-text {
		font-size: 2.5em;
		text-align: center;
		margin-bottom: 15px;
	}

	.hero-shop-btn {
		font-size: 0.8em;
		padding: 12px 25px;
		white-space: normal;
		text-align: center;
	}

	.welcome-grid {
		flex-direction: column;
		gap: 30px;
	}

	.welcome-image-placeholder {
		width: 100%;
		max-width: 400px;
		height: 300px;
	}

	.welcome-text-content {
		text-align: center;
	}

	.welcome-heading {
		font-size: 2em;
	}

	.welcome-text-content p {
		font-size: 1em;
	}

	.full-width-parallax-section {
		height: 450px;
	}

	.newsletter-content h2 {
		font-size: 1.8em;
	}

	.newsletter-content p {
		font-size: 0.9em;
	}

	.newsletter-form {
		max-width: 300px;
	}

	.subscribe-btn {
		max-width: 180px;
	}
}

@media (max-width: 480px) {
	.hero-slideshow {
		height: 300px;
	}
	.hero-section-wrapper {
		min-height: 300px;
	}
	.hero-text {
		font-size: 1.8em;
	}
	.hero-shop-btn {
		font-size: 0.7em;
		padding: 10px 20px;
	}

	.welcome-heading {
		font-size: 1.8em;
	}
	.welcome-image-placeholder {
		height: 250px;
	}

	.full-width-parallax-section {
		height: 400px;
	}
	.newsletter-content h2 {
		font-size: 1.5em;
	}
	.newsletter-form input[type='text'],
	.newsletter-form input[type='email'],
	.subscribe-btn {
		padding: 10px 12px;
		font-size: 0.9em;
	}
}


/* style.css */

/* --- Loading Progress Bar Styles --- */
.artwork-grid-container {
    position: relative; 
    min-height: 200px;
}

#loader-container {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: 80%; /* Make the bar most of the page width */
    max-width: 400px; /* But not too wide on large screens */
    height: 10px;
    background-color: #f3f3f3; /* Light grey background */
    border-radius: 5px;
    overflow: hidden;
    transition: opacity 0.5s ease; /* For fading out */
}

#loader-progress {
    width: 0%; /* Starts at 0% width */
    height: 100%;
    background-color: #000000; /* Black progress bar */
    border-radius: 5px;
    transition: width 0.3s ease-out; /* Smoothly animates the width change */
}

/* Utility class to hide the loader container */
#loader-container.hidden {
    opacity: 0;
}

/* Responsive grid for tablets and mobile */
@media (max-width: 992px) {
	.artwork-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (max-width: 768px) {
	.artwork-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 480px) {
	.artwork-grid {
		grid-template-columns: 1fr;
	}
}

/*
 * Updated styles for devices with a screen width of 992px or less.
 * This media query will now ensure captions are fully visible.
 */
@media screen and (max-width: 992px) {
	/* Remove the hover effects for touch devices. */
	.grid-item:hover {
		transform: none; /* Remove the translateY effect on hover */
	}

	.grid-item:hover .artwork-item img {
		filter: none; /* Reverts the image back to its original color */
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Revert to the default shadow */
	}

	/*
 * Updated styles for devices with a screen width of 992px or less.
 * This media query will now include a grey border around the caption.
 */
	@media screen and (max-width: 992px) {
		/* Remove the hover effects for touch devices. */
		.grid-item:hover {
			transform: none; /* Remove the translateY effect on hover */
		}

		.grid-item:hover .artwork-item img {
			filter: none; /* Reverts the image back to its original color */
			box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Revert to the default shadow */
		}

		/* Make the hover info (caption) always visible and correctly positioned. */
		.hover-info {
			opacity: 1; /* Make it always visible */
			background-color: transparent; /* Remove the black overlay background */
			color: var(
				--primary-text-color
			); /* Change text color to black */
			width: 100%;
			position: relative; /* Change from static back to relative */
			padding: 10px; /* Add padding to create space around the text */
			transition: none; /* Disable the transition effect */
			border: 1px solid #cccccc; /* Add a 1px solid light gray border */
			margin-top: 10px; /* Add some space between the image and the border */
		}

		/* Remove the hover-specific opacity change. */
		.grid-item:hover .hover-info {
			opacity: 1;
		}

		/* Style the caption's h3 and p tags as requested. */
		.hover-info h3 {
			color: var(--primary-text-color);
			text-align: left;
			margin: 0;
			font-size: 1.1rem;
			font-weight: 500;
		}

		.hover-info p {
			color: var(--primary-text-color);
			text-align: left;
			margin: 0;
			font-size: 0.8rem;
			font-style: italic;
		}
	}
}

/* Responsive adjustments for the contact form */
@media (max-width: 480px) {
	.name-fields {
		flex-direction: column;
		gap: 0;
	}
}

/* Responsive adjustments for smaller screens */
@media (max-width: 768px) {
	.bio-grid {
		grid-template-columns: 1fr;
		gap: 30px;
	}

	.bio-image-col {
		align-items: center;
	}
}

/* --- Art Prints Promo Section --- */
#art-prints-promo { /* Targeting the specific section ID */
    background-color: #f8f8f8; /* A very light grey */
    padding: 60px 0; /* Adding consistent padding, similar to other sections */
}

.promo-grid {
    display: flex; /* Uses Flexbox to align items side-by-side */
    align-items: center; /* Vertically centers the content */
    gap: 50px; /* Adds space between the image and the text */
}

.promo-image {
    flex: 1; /* Assigns 1 part of the available space to the image */
}

.promo-image img {
    width: 100%; /* Makes the image responsive */
    display: block; /* Removes any extra space below the image */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* A subtle shadow to match your site */
    border: 1px solid #ddd;
}

.promo-text {
    flex: 1; /* Assigns 1 part of the available space to the text */
}

.promo-text h2 {
    font-size: 2.5em; /* A nice, large font size for the heading */
    font-weight: 400; /* Matches your other headings */
    line-height: 1.6;
}


/* --- Responsive Styles for Art Prints Promo Section --- */
@media (max-width: 768px) {
    .promo-grid {
        /* This reverses the order and stacks them vertically on mobile */
        flex-direction: column-reverse; 
        gap: 30px; /* Reduces the gap for mobile view */
    }

    .promo-text h2 {
        text-align: center; /* Centers the text on mobile */
        font-size: 2em; /* Slightly smaller font size for mobile */
    }
}