/*
 * Artwork Detail Page — verified for single-artwork.php
 *
 * IMPORTANT:
 * This file must be uploaded as:
 * /wp-content/themes/blocksy-child/artwork-detail.css
 *
 * The current PHP template explicitly loads artwork-detail.css.
 * Do not rename this file to style.css.
 */

/* =========================================================
   1. PAGE VARIABLES AND BASE
   ========================================================= */

body.single-artwork {
	--artwork-page-width: 1440px;
	--artwork-text-width: 1040px;
	--artwork-side-space: 40px;
	--artwork-text-indent: 54px;

	--artwork-heading-size: 26px;
	--artwork-body-size: 18px;

	--artwork-button-bg: #FBFAF8;
	--artwork-button-bg-hover: #F3F0EB;

	background: #ffffff;
}

body.single-artwork .artwork-detail {
	width: 100%;
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: inherit;
	font-family: inherit;
}

/* Reset theme margins that may be applied to the custom template */
body.single-artwork .artwork-detail section,
body.single-artwork .artwork-detail div,
body.single-artwork .artwork-detail header {
	box-sizing: border-box;
}

/* =========================================================
   2. SHARED IMAGE BEHAVIOUR
   ========================================================= */

body.single-artwork .artwork-detail__hero img,
body.single-artwork .artwork-detail__original img,
body.single-artwork .artwork-detail__details img {
	display: block;
	width: 100%;
	max-width: none;
	height: auto;
	margin: 0;
}

/* =========================================================
   3. HERO
   Same outer width as the master page
   ========================================================= */

body.single-artwork .artwork-detail__hero {
	width: min(
		var(--artwork-page-width),
		calc(100% - (var(--artwork-side-space) * 2))
	);
	max-width: none;
	margin: 0 auto;
	padding: 0;
}

body.single-artwork .artwork-detail__hero img {
	width: 100%;
	max-height: 880px;
	object-fit: cover;
	object-position: center;
}

/* =========================================================
   4. MAIN CONTENT CONTAINER
   Same width as hero, original image and detail gallery
   ========================================================= */

body.single-artwork .artwork-detail__inner {
	width: min(
		var(--artwork-page-width),
		calc(100% - (var(--artwork-side-space) * 2))
	);
	max-width: none;
	margin: 0 auto;
	padding: 16px 0 112px;
}

/* =========================================================
   5. STICKY BACK-TO-WORKS BUTTON
   ========================================================= */

body.single-artwork a.artwork-detail__back {
	position: sticky;
	top: 104px;
	z-index: 20;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	width: auto;
	min-width: 132px;
	min-height: 44px;
	margin: 0 0 52px;
	padding: 10px 18px;

	border: 0;
	border-radius: 2px;
	background: var(--artwork-button-bg);

	color: inherit;
	font-family: inherit;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4;
	text-decoration: none !important;
	white-space: nowrap;

	transition: background-color 160ms ease;
}

body.single-artwork a.artwork-detail__back:hover,
body.single-artwork a.artwork-detail__back:focus-visible {
	background: var(--artwork-button-bg-hover);
	color: inherit;
	font-weight: 700 !important;
	text-decoration: none !important;
}

/* =========================================================
   6. ARTWORK INFORMATION
   ========================================================= */

body.single-artwork .artwork-detail__information {
	width: 100%;
	max-width: var(--artwork-text-width);
	margin: 0 0 32px;
	padding: 0;
}

body.single-artwork main.artwork-detail h1.artwork-detail__title,
body.single-artwork .artwork-detail .artwork-detail__information > h1.artwork-detail__title {
	margin: 0 0 22px !important;
	padding: 0 !important;

	color: inherit !important;
	font-family: inherit !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

body.single-artwork .artwork-detail__meta {
	width: calc(100% - var(--artwork-text-indent));
	margin: 0 0 0 var(--artwork-text-indent);
	padding: 0;
}

body.single-artwork main.artwork-detail .artwork-detail__information .artwork-detail__meta > p {
	margin: 0 0 14px !important;
	padding: 0 !important;

	color: inherit !important;
	font-family: inherit !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

/* Dimensions and year follow the slightly stronger hierarchy of the master page. */
body.single-artwork main.artwork-detail .artwork-detail__information .artwork-detail__meta > p:nth-child(2),
body.single-artwork main.artwork-detail .artwork-detail__information .artwork-detail__meta > p:nth-child(3) {
	font-weight: 600 !important;
}

body.single-artwork main.artwork-detail .artwork-detail__information .artwork-detail__meta > p:last-child {
	margin-bottom: 0 !important;
}

/* =========================================================
   7. STATEMENT
   ========================================================= */

body.single-artwork .artwork-detail__statement {
	width: calc(100% - var(--artwork-text-indent));
	max-width: calc(var(--artwork-text-width) - var(--artwork-text-indent));
	margin: 0 0 88px var(--artwork-text-indent);
	padding: 0;

	color: inherit;
	font-family: inherit;
	font-size: var(--artwork-body-size) !important;
	font-weight: 400;
	line-height: 1.6;
}

body.single-artwork .artwork-detail__statement > *:first-child {
	margin-top: 0 !important;
}

body.single-artwork .artwork-detail__statement > *:last-child {
	margin-bottom: 0 !important;
}

body.single-artwork .artwork-detail__statement p {
	margin: 0 0 24px !important;
	font-size: inherit !important;
	line-height: inherit !important;
}

/* =========================================================
   8. ORIGINAL IMAGE
   Exact same outer width as hero
   ========================================================= */

body.single-artwork .artwork-detail__original {
	width: 100%;
	max-width: none;
	margin: 0 0 20px;
	padding: 0;
}

body.single-artwork .artwork-detail__original img {
	width: 100%;
	object-fit: contain;
}

/* =========================================================
   9. THREE DETAIL IMAGES
   Combined width aligns with hero and original
   ========================================================= */

body.single-artwork .artwork-detail__details {
	display: grid;
	width: 100%;
	max-width: none;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin: 0;
	padding: 0;
}

body.single-artwork .artwork-detail__details img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* =========================================================
   10. INQUIRY
   ========================================================= */

body.single-artwork .artwork-detail__inquiry {
	width: 100%;
	max-width: var(--artwork-text-width);
	margin: 88px 0 0;
	padding: 0;
}

body.single-artwork main.artwork-detail .artwork-detail__inquiry > h2 {
	margin: 0 0 24px !important;
	padding: 0 !important;

	color: inherit !important;
	font-family: inherit !important;
	font-size: 28px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}

body.single-artwork .artwork-detail__inquiry p {
	width: calc(100% - var(--artwork-text-indent));
	max-width: calc(920px - var(--artwork-text-indent));
	margin: 0 0 24px var(--artwork-text-indent) !important;
	padding: 0;

	color: inherit;
	font-family: inherit;
	font-size: var(--artwork-body-size) !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
}

body.single-artwork .artwork-detail__inquiry-link {
	display: inline-flex;
	margin-left: var(--artwork-text-indent);
	align-items: center;
	justify-content: center;

	min-height: 44px;
	padding: 10px 18px;

	border: 0;
	border-radius: 2px;
	background: var(--artwork-button-bg);

	color: inherit;
	font-family: inherit;
	font-size: var(--artwork-body-size) !important;
	font-weight: 600 !important;
	line-height: 1.4;
	text-decoration: none !important;

	transition: background-color 160ms ease;
}

body.single-artwork .artwork-detail__inquiry-link:hover,
body.single-artwork .artwork-detail__inquiry-link:focus-visible {
	background: var(--artwork-button-bg-hover);
	color: inherit;
	font-weight: 700 !important;
	text-decoration: none !important;
}

/* =========================================================
   11. REMOVE BLOCKSY / WORDPRESS COPYRIGHT FOOTER
   Only on Artwork detail pages
   ========================================================= */

body.single-artwork #footer,
body.single-artwork footer#footer,
body.single-artwork footer.ct-footer,
body.single-artwork .ct-footer,
body.single-artwork .site-footer,
body.single-artwork footer.site-footer,
body.single-artwork [data-footer],
body.single-artwork [data-id="copyright"],
body.single-artwork .ct-footer-copyright,
body.single-artwork .footer-copyright {
	display: none !important;
}

/* Prevent an empty footer wrapper from retaining height */
body.single-artwork #main-container > footer,
body.single-artwork #main-container > .ct-footer {
	display: none !important;
}

/* =========================================================
   12. TABLET
   ========================================================= */

@media (max-width: 1024px) {
	body.single-artwork {
		--artwork-side-space: 32px;
		--artwork-heading-size: 28px;
	}

	body.single-artwork a.artwork-detail__back {
		top: 88px;
	}
}

/* =========================================================
   13. MOBILE
   ========================================================= */

@media (max-width: 767px) {
	body.single-artwork {
		--artwork-side-space: 24px;
		--artwork-text-indent: 16px;
		--artwork-heading-size: 23px;
		--artwork-body-size: 16px;
	}

	body.single-artwork .artwork-detail__inner {
		padding: 32px 0 72px;
	}

	body.single-artwork a.artwork-detail__back {
		top: 72px;
		min-width: 0;
		margin-bottom: 48px;
		padding: 9px 14px;
		font-size: 15px !important;
	}

	body.single-artwork .artwork-detail__statement {
		margin-bottom: 72px;
	}

	body.single-artwork .artwork-detail__details {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	body.single-artwork .artwork-detail__inquiry {
		margin-top: 64px;
	}
}

/* =========================================================
   14. ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	body.single-artwork .artwork-detail *,
	body.single-artwork .artwork-detail *::before,
	body.single-artwork .artwork-detail *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
	}
}


@media (max-width: 1024px) {
	body.single-artwork main.artwork-detail h1.artwork-detail__title,
	body.single-artwork .artwork-detail .artwork-detail__information > h1.artwork-detail__title,
	body.single-artwork main.artwork-detail .artwork-detail__inquiry > h2 {
		font-size: 26px !important;
	}
}

@media (max-width: 767px) {
	body.single-artwork main.artwork-detail h1.artwork-detail__title,
	body.single-artwork .artwork-detail .artwork-detail__information > h1.artwork-detail__title,
	body.single-artwork main.artwork-detail .artwork-detail__inquiry > h2 {
		font-size: 23px !important;
	}

	body.single-artwork main.artwork-detail .artwork-detail__information .artwork-detail__meta > p {
		font-size: 16px !important;
	}
}


@media (max-width: 480px) {
	body.single-artwork {
		--artwork-side-space: 18px;
		--artwork-text-indent: 0px;
	}

	body.single-artwork .artwork-detail__meta,
	body.single-artwork .artwork-detail__statement,
	body.single-artwork .artwork-detail__inquiry p {
		width: 100%;
		max-width: 100%;
		margin-left: 0 !important;
	}

	body.single-artwork .artwork-detail__inquiry-link {
		margin-left: 0;
	}
}

/* =========================================================
   15. ARTWORK INQUIRY MODAL
   ========================================================= */

body.single-artwork .artwork-detail__inquiry-link {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	cursor: pointer;
}

body.single-artwork.artwork-inquiry-is-open {
	overflow: hidden;
}

body.single-artwork .artwork-inquiry-modal[hidden] {
	display: none !important;
}

body.single-artwork .artwork-inquiry-modal {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: grid;
	place-items: center;
	padding: 32px;
	font-family: inherit;
}

body.single-artwork .artwork-inquiry-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, 0.36);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

body.single-artwork .artwork-inquiry-modal__window {
	position: relative;
	z-index: 1;
	width: min(680px, 100%);
	max-height: calc(100vh - 64px);
	overflow-y: auto;
	padding: 34px 38px 38px;
	border: 1px solid rgba(20, 20, 20, 0.08);
	border-radius: 4px;
	background: #ffffff;
	box-shadow: 0 20px 70px rgba(20, 20, 20, 0.18);
	color: inherit;
	overscroll-behavior: contain;
}

body.single-artwork .artwork-inquiry-modal__close {
	position: absolute;
	top: 16px;
	right: 18px;
	display: inline-grid;
	width: 36px;
	height: 36px;
	place-items: center;
	padding: 0;
	border: 0;
	border-radius: 2px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 28px;
	font-weight: 300;
	line-height: 1;
	cursor: pointer;
}

body.single-artwork .artwork-inquiry-modal__close:hover,
body.single-artwork .artwork-inquiry-modal__close:focus-visible {
	background: #FBFAF8;
}

body.single-artwork .artwork-inquiry-modal__header {
	margin: 0 48px 30px 0;
	padding: 0 0 22px;
	border-bottom: 1px solid rgba(20, 20, 20, 0.10);
}

body.single-artwork .artwork-inquiry-modal__eyebrow {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

body.single-artwork .artwork-inquiry-modal__title {
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	letter-spacing: 0 !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-ui,
body.single-artwork .artwork-inquiry-modal__form .forminator-custom-form {
	margin: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-row {
	margin-bottom: 20px !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-row:last-child {
	margin-bottom: 0 !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-field {
	margin: 0 !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-label {
	display: block !important;
	margin: 0 0 8px !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
}

body.single-artwork .artwork-inquiry-modal__form input[type="text"],
body.single-artwork .artwork-inquiry-modal__form input[type="email"],
body.single-artwork .artwork-inquiry-modal__form input[type="tel"],
body.single-artwork .artwork-inquiry-modal__form input[type="url"],
body.single-artwork .artwork-inquiry-modal__form textarea,
body.single-artwork .artwork-inquiry-modal__form select {
	width: 100% !important;
	min-height: 46px !important;
	margin: 0 !important;
	padding: 10px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid rgba(20, 20, 20, 0.22) !important;
	border-radius: 0 !important;
	outline: 0 !important;
	background: transparent !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
	box-shadow: none !important;
}

body.single-artwork .artwork-inquiry-modal__form textarea {
	min-height: 132px !important;
	padding-top: 12px !important;
	resize: vertical;
}

body.single-artwork .artwork-inquiry-modal__form input:focus,
body.single-artwork .artwork-inquiry-modal__form textarea:focus,
body.single-artwork .artwork-inquiry-modal__form select:focus {
	border-bottom-color: rgba(20, 20, 20, 0.75) !important;
}

body.single-artwork .artwork-inquiry-modal__form input::placeholder,
body.single-artwork .artwork-inquiry-modal__form textarea::placeholder {
	color: rgba(20, 20, 20, 0.48) !important;
	opacity: 1;
}

body.single-artwork .artwork-inquiry-modal__form .inquiry-privacy,
body.single-artwork .artwork-inquiry-modal__form .collector-club,
body.single-artwork .artwork-inquiry-modal__form .inquiry-collector {
	margin-top: 4px !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-checkbox {
	display: grid !important;
	grid-template-columns: 20px minmax(0, 1fr);
	gap: 10px;
	align-items: start;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 14px !important;
	font-weight: 400 !important;
	line-height: 1.5 !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-checkbox-box {
	margin-top: 1px !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-description,
body.single-artwork .artwork-inquiry-modal__form .forminator-error-message {
	font-family: inherit !important;
	font-size: 13px !important;
	line-height: 1.45 !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-response-message {
	margin: 0 0 22px !important;
	padding: 14px 16px !important;
	border-radius: 2px !important;
	font-family: inherit !important;
	font-size: 14px !important;
	line-height: 1.5 !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-button-submit {
	appearance: none !important;
	-webkit-appearance: none !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 44px !important;
	margin: 8px 0 0 !important;
	padding: 10px 18px !important;
	border: 0 !important;
	border-radius: 2px !important;
	background: #FBFAF8 !important;
	color: inherit !important;
	font-family: inherit !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	text-decoration: none !important;
	box-shadow: none !important;
	cursor: pointer !important;
}

body.single-artwork .artwork-inquiry-modal__form .forminator-button-submit:hover,
body.single-artwork .artwork-inquiry-modal__form .forminator-button-submit:focus-visible {
	background: #F3F0EB !important;
	font-weight: 700 !important;
}

@media (max-width: 767px) {
	body.single-artwork .artwork-inquiry-modal {
		align-items: end;
		padding: 16px;
	}

	body.single-artwork .artwork-inquiry-modal__window {
		width: 100%;
		max-height: calc(100dvh - 32px);
		padding: 28px 22px 26px;
		border-radius: 4px 4px 0 0;
	}

	body.single-artwork .artwork-inquiry-modal__header {
		margin-right: 40px;
		margin-bottom: 24px;
		padding-bottom: 18px;
	}

	body.single-artwork .artwork-inquiry-modal__title {
		font-size: 23px !important;
	}

	body.single-artwork .artwork-inquiry-modal__form .forminator-row {
		margin-bottom: 17px !important;
	}
}

@media (max-width: 480px) {
	body.single-artwork .artwork-inquiry-modal {
		padding: 0;
	}

	body.single-artwork .artwork-inquiry-modal__window {
		max-height: 100dvh;
		min-height: 100dvh;
		padding: 26px 18px 24px;
		border: 0;
		border-radius: 0;
	}
}