/* =====================================================================
   Virtual Gallery Toolkit — Frontend styles
   Concept: a salon-style gallery wall. Deep museum-green walls, brass
   frame lines, cream mat board around each painting, a serif display
   face for titles/names and a plain sans face for labels and numbers.
   Everything is scoped under .vgt-scope so it never leaks into the
   rest of the theme / Elementor page.
   ===================================================================== */

.vgt-scope {
	--vgt-wall: #2E3A2C;
	--vgt-wall-deep: #232E22;
	--vgt-mat: #F3EEE3;
	--vgt-ink: #221F1A;
	--vgt-ink-soft: #6B6558;
	--vgt-paper: #ECE7DA;
	--vgt-paper-dim: rgba(236, 231, 218, 0.62);
	--vgt-paper-faint: rgba(236, 231, 218, 0.28);
	--vgt-brass: #B8923F;
	--vgt-brass-dim: #7E6533;
	--vgt-oxblood: #8B3A2E;

	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--vgt-ink);
	box-sizing: border-box;
}
.vgt-scope *, .vgt-scope *::before, .vgt-scope *::after { box-sizing: inherit; }
.vgt-scope img { max-width: 100%; }
.vgt-display { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; }

/* ---------- shared section shell ---------- */
.vgt-wallpanel {
	background: var(--vgt-wall);
	background-image: radial-gradient(circle at 12% 8%, rgba(255,255,255,0.05), transparent 55%);
	padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3rem);
}

/* ---------- gallery grid ---------- */
.vgt-gallery__title {
	color: var(--vgt-paper);
	font-size: clamp(1.6rem, 2.4vw, 2.5rem);
	font-weight: 500;
	margin: 0 0 .5rem;
	line-height: 1.2;
}
.vgt-gallery__sub {
	color: var(--vgt-paper-dim);
	font-size: .95rem;
	max-width: 46ch;
	margin: 0 0 2.25rem;
	line-height: 1.6;
}
.vgt-grid {
	display: grid;
	grid-template-columns: repeat(var(--vgt-cols, 3), minmax(0, 1fr));
	gap: clamp(1.25rem, 2vw, 2.25rem);
}
@media (max-width: 900px) { .vgt-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px) { .vgt-grid { grid-template-columns: 1fr; } }

/* ---------- painting card ---------- */
.vgt-card__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	background: var(--vgt-mat);
	padding: 10px;
	box-shadow: 0 0 0 1px var(--vgt-brass-dim), 0 25px 40px -25px rgba(0,0,0,.55);
	transition: transform .4s cubic-bezier(.2,.7,.3,1), box-shadow .4s ease;
}
.vgt-card:hover .vgt-card__frame {
	transform: translateY(-6px);
	box-shadow: 0 0 0 1px var(--vgt-brass), 0 35px 50px -20px rgba(0,0,0,.6);
}
.vgt-card__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vgt-card__frame--empty {
	display: flex; align-items: center; justify-content: center;
	color: var(--vgt-ink-soft); font-size: .8rem;
	background-image: repeating-linear-gradient(135deg, #EAE4D6 0 10px, #F3EEE3 10px 20px);
}
.vgt-card__views {
	position: absolute; top: 18px; right: 18px;
	background: rgba(34,31,26,.6); color: var(--vgt-paper);
	font-size: .68rem; padding: 3px 8px; letter-spacing: .01em;
}
.vgt-card__plate { margin-top: 1rem; }
.vgt-card__title { font-size: 1.15rem; font-weight: 500; margin: 0 0 .2rem; line-height: 1.3; color: var(--vgt-paper); }
.vgt-card__title a { color: inherit; text-decoration: none; }
.vgt-card__title a:hover { color: var(--vgt-brass); }
.vgt-card__artist { font-size: .85rem; color: var(--vgt-paper-dim); margin: 0 0 .65rem; }
.vgt-card__artist a { color: inherit; text-decoration: underline; text-decoration-color: var(--vgt-paper-faint); text-underline-offset: 3px; }
.vgt-card__meta { display: flex; align-items: center; justify-content: space-between; font-size: .8rem; }
.vgt-card__style { color: var(--vgt-brass); }
.vgt-card__price { color: var(--vgt-paper); font-weight: 600; }

/* ---------- artist profile ---------- */
.vgt-artist__grid {
	display: grid; grid-template-columns: 220px 1fr;
	gap: clamp(1.75rem, 4vw, 3rem); align-items: start;
}
@media (max-width: 720px) { .vgt-artist__grid { grid-template-columns: 1fr; max-width: 360px; } }
.vgt-artist__portrait {
	aspect-ratio: 4 / 5; background: var(--vgt-mat); padding: 10px;
	box-shadow: 0 0 0 1px var(--vgt-brass-dim);
}
.vgt-artist__portrait img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vgt-artist__name { color: var(--vgt-paper); font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 .6rem; line-height: 1.15; }
.vgt-artist__bio { color: var(--vgt-paper-dim); max-width: 60ch; line-height: 1.75; margin: 0 0 1.75rem; }
.vgt-artist__stats { display: flex; gap: 2.5rem; border-top: 1px solid var(--vgt-paper-faint); padding-top: 1rem; }
.vgt-artist__stat-value { font-size: 1.6rem; color: var(--vgt-brass); display: block; }
.vgt-artist__stat-label { font-size: .78rem; color: var(--vgt-paper-dim); }
.vgt-artist__works-heading { color: var(--vgt-paper); font-size: 1.4rem; margin: 3rem 0 1.5rem; }

/* ---------- single painting detail ---------- */
.vgt-detail__grid {
	display: grid; grid-template-columns: minmax(0,1.15fr) minmax(280px,.85fr);
	gap: clamp(2rem, 4vw, 3.5rem); align-items: start;
}
@media (max-width: 860px) { .vgt-detail__grid { grid-template-columns: 1fr; } }
.vgt-detail__frame {
	background: var(--vgt-mat); padding: 16px;
	box-shadow: 0 0 0 1px var(--vgt-brass-dim), 0 40px 60px -30px rgba(0,0,0,.6);
}
.vgt-detail__frame img { width: 100%; height: auto; display: block; }
.vgt-detail__title { color: var(--vgt-paper); font-size: clamp(1.75rem, 3vw, 2.6rem); margin: 0 0 .4rem; line-height: 1.15; }
.vgt-detail__artist { color: var(--vgt-paper-dim); margin: 0 0 1.75rem; }
.vgt-detail__artist a { color: var(--vgt-brass); text-decoration: none; }
.vgt-detail__artist a:hover { text-decoration: underline; }
.vgt-detail__specs { list-style: none; margin: 0 0 1.5rem; padding: 0; }
.vgt-detail__specs li { display: flex; align-items: baseline; gap: .5rem; padding: .55rem 0; border-bottom: 1px solid var(--vgt-paper-faint); }
.vgt-detail__specs .vgt-label { color: var(--vgt-paper-dim); font-size: .85rem; white-space: nowrap; }
.vgt-detail__specs .vgt-leader { flex: 1; border-bottom: 1px dotted var(--vgt-paper-faint); transform: translateY(-4px); }
.vgt-detail__specs .vgt-value { color: var(--vgt-paper); font-weight: 500; }
.vgt-detail__price { font-size: 1.6rem; color: var(--vgt-brass); margin: 0 0 1.5rem; }
.vgt-detail__views { font-size: .8rem; color: var(--vgt-paper-dim); margin-bottom: 2rem; }
.vgt-detail__cta { background: var(--vgt-mat); padding: 1.75rem; border-top: 3px solid var(--vgt-oxblood); }
.vgt-detail__cta h3 { margin: 0 0 .5rem; font-size: 1.2rem; color: var(--vgt-ink); }
.vgt-detail__cta p { color: var(--vgt-ink-soft); font-size: .88rem; margin: 0 0 1.25rem; }

/* ---------- light-touch Gravity Forms overrides inside the CTA panel ---------- */
.vgt-scope .vgt-detail__cta .gform_wrapper input[type=text],
.vgt-scope .vgt-detail__cta .gform_wrapper input[type=email],
.vgt-scope .vgt-detail__cta .gform_wrapper input[type=tel],
.vgt-scope .vgt-detail__cta .gform_wrapper textarea {
	border: none; border-bottom: 1px solid #D8CFB8; background: transparent;
	border-radius: 0; padding: .5rem .1rem; font-family: 'Inter', sans-serif;
	width: 100%;
}
.vgt-scope .vgt-detail__cta .gform_wrapper .gform_footer,
.vgt-scope .vgt-detail__cta .gform_wrapper .gform_page_footer { margin-top: 1rem; }
.vgt-scope .vgt-detail__cta .gform_wrapper .gform_button {
	background: var(--vgt-oxblood); color: #fff; border: none; border-radius: 0;
	padding: .75rem 1.75rem; font-family: 'Inter', sans-serif; font-weight: 600; cursor: pointer;
}
.vgt-scope .vgt-detail__cta .gform_wrapper .gform_button:hover { background: #6f2c22; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.vgt-card__frame { transition: none; }
}

/* ---------- keyboard focus ---------- */
.vgt-scope a:focus-visible,
.vgt-scope button:focus-visible {
	outline: 2px solid var(--vgt-brass);
	outline-offset: 2px;
}