/**
 * THP Gallery block styles (front end and editor).
 *
 * File Name:     style.css
 * Version:       1.0.0
 * Last Modified: 2026-10-23
 * Package:       TheHomepageExtensions / Blocks / Gallery
 *
 * Two layers of behavior. The BASELINE is plain CSS columns, so the page is
 * complete and readable with JavaScript off and before the script runs. The
 * ENHANCED state (`.is-enhanced`, set by view.js) switches items to absolute
 * positioning that the script lays out as a masonry grid. Breakpoints match
 * the script's column counts: 1 / 2 (600) / 3 (900) / 4 (1200).
 */

@layer thp.gallery, thp.gallery-state;

@layer thp.gallery {
	.thp-gallery-wrap {
		--thp-gallery-gap: 20px;
		--thp-gallery-ink: #1d1d1d;
		--thp-gallery-accent: #134182;
		--thp-gallery-line: #c9ced6;
		--thp-gallery-focus: #134182;
		--thp-gallery-motion: transform 0.4s cubic-bezier(0.2, 1, 0.3, 1);
		--thp-gallery-z-anchor: 10;
		--thp-gallery-z-expanding: 6;
		--thp-gallery-z-drag: 1000;
		--thp-top-band: 3.4rem;

		/* The toolbar floats in the band above the content, so the content (and the
		   identity card) sits at the same place on every THP page. */
		position: relative;
		padding-block-start: var(--thp-top-band);

		/* Toolbar: needs JS, so it stays hidden until the script enhances. */
		& .thp-gallery__toolbar {
			display: none;
		}

		& .thp-gallery {
			column-count: 1;
			column-gap: var(--thp-gallery-gap);
			position: relative;
			transition: block-size 0.4s cubic-bezier(0.2, 1, 0.3, 1);

			@media (min-width: 600px) {
				column-count: 2;
			}
			@media (min-width: 900px) {
				column-count: 3;
			}
			@media (min-width: 1200px) {
				column-count: 4;
			}
		}

		& .thp-gallery__item {
			break-inside: avoid;
			margin-block-end: var(--thp-gallery-gap);
		}

		& .thp-gallery__card {
			position: relative;
			block-size: 100%;
		}

		& .thp-gallery__live {
			position: absolute;
			inline-size: 1px;
			block-size: 1px;
			overflow: hidden;
			clip-path: inset(50%);
		}

		/* ---- enhanced (JS) ------------------------------------------- */
		&.is-enhanced {
			& .thp-gallery__toolbar {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-end;
				gap: 0.4rem;
				align-items: center;
				position: absolute;
				inset-block-start: calc(0.5rem - var(--wp--preset--spacing--40, 2rem));
				inset-inline-end: 0;
				z-index: 40;
			}

			& .thp-gallery {
				column-count: auto;
			}

			& .thp-gallery__item {
				position: absolute;
				inset-block-start: 0;
				inset-inline-start: 0;
				margin: 0;
				will-change: transform, opacity;
				transition: var(--thp-gallery-motion);
				cursor: grab;
			}

			& .thp-gallery__item--anchor {
				cursor: default;
				z-index: var(--thp-gallery-z-anchor);
				will-change: auto;
				transition: none;
			}

			/* An open navigation overlay must cover the toolbar and every card. */
			& .thp-gallery__item--anchor:has(.is-menu-open) {
				z-index: 2000;
			}

			& .thp-gallery.is-sort-locked .thp-gallery__item:not(.thp-gallery__item--anchor) {
				cursor: default;
			}
		}

		& .thp-gallery__menu {
			position: relative;
		}

		& .thp-gallery__icon-btn {
			position: relative;
			display: inline-grid;
			place-items: center;
			inline-size: 2.5rem;
			block-size: 2.5rem;
			padding: 0;
			color: var(--thp-gallery-ink);
			background: transparent;
			border: 1px solid var(--thp-gallery-line);
			border-radius: 10px;
			cursor: pointer;

			&:hover,
			&[aria-expanded="true"] {
				background: var(--thp-gallery-hover, rgba(99, 102, 241, 0.12));
			}

			&:focus-visible {
				outline: 2px solid var(--thp-gallery-focus);
				outline-offset: 2px;
			}
		}

		& .thp-gallery__icon {
			inline-size: 1.25rem;
			block-size: 1.25rem;
		}

		/* The toggle shows the icon of the theme you would switch TO. */
		&[data-theme="dark"] .thp-gallery__icon--moon,
		&[data-theme="light"] .thp-gallery__icon--sun {
			display: none;
		}

		/* A dot marks a filter or arrangement that is not the default. */
		& .thp-gallery__dot {
			position: absolute;
			inset-block-start: 0.4rem;
			inset-inline-end: 0.4rem;
			inline-size: 0.5rem;
			block-size: 0.5rem;
			border-radius: 50%;
			background: var(--thp-gallery-accent);
			display: none;
		}

		& .thp-gallery__icon-btn.is-modified .thp-gallery__dot {
			display: block;
		}

		& .thp-gallery__panel {
			position: absolute;
			inset-block-start: calc(100% + 0.4rem);
			inset-inline-end: 0;
			z-index: 50;
			display: flex;
			flex-direction: column;
			gap: 0.15rem;
			min-inline-size: 11rem;
			padding: 0.35rem;
			border: 1px solid var(--thp-gallery-line);
			border-radius: 10px;
		}

		& .thp-gallery__panel[hidden] {
			display: none;
		}

		& .thp-gallery__btn {
			font: inherit;
			font-size: 0.85rem;
			font-weight: 600;
			text-align: start;
			color: var(--thp-gallery-ink);
			background: transparent;
			border: 1px solid transparent;
			border-radius: 6px;
			padding: 0.45rem 0.8rem;
			cursor: pointer;

			&:hover {
				border-color: var(--thp-gallery-line);
			}

			&.is-active {
				color: #ffffff;
				background: var(--thp-gallery-accent);
			}

			&:focus-visible {
				outline: 2px solid var(--thp-gallery-focus);
				outline-offset: 2px;
			}
		}

		/* Keyboard / touch reorder handle (inserted by the script). */
		& .thp-gallery__handle {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: 0.4rem;
			transform: translateY(-50%);
			z-index: 3;
			inline-size: 1.6rem;
			block-size: 2.9rem;
			padding: 0;
			display: grid;
			place-items: center;
			color: var(--thp-gallery-ink);
			background: rgba(255, 255, 255, 0.92);
			border: 1px solid var(--thp-gallery-line);
			border-radius: 0.7rem;
			cursor: grab;
			opacity: 0;
			touch-action: none;

			&:focus-visible {
				opacity: 1;
				outline: 2px solid var(--thp-gallery-focus);
				outline-offset: 2px;
			}

			&[aria-pressed="true"] {
				opacity: 1;
				color: #ffffff;
				background: var(--thp-gallery-accent);
			}

			@media (hover: none) {
				opacity: 1;
			}
		}

		& .thp-gallery__handle svg {
			inline-size: 0.7rem;
			block-size: 1.1rem;
			fill: currentColor;
			pointer-events: none;
		}

		& .thp-gallery__item:hover .thp-gallery__handle {
			opacity: 1;
		}

		& .thp-gallery.is-sort-locked .thp-gallery__handle {
			display: none;
		}

		@media (prefers-reduced-motion: reduce) {
			& .thp-gallery,
			& .thp-gallery__item {
				transition: none;
			}
		}
	}
}

@layer thp.gallery-state {
	.thp-gallery-wrap {
		& .thp-gallery__item.is-hidden {
			opacity: 0;
			pointer-events: none;
		}

		& .thp-gallery__item.is-expanding {
			z-index: var(--thp-gallery-z-expanding);
		}

		& .thp-gallery__item.is-lifted .thp-gallery__card {
			outline: 3px solid var(--thp-gallery-accent);
			outline-offset: 4px;
		}

		& .thp-gallery__item.is-dragging {
			cursor: grabbing;
			z-index: var(--thp-gallery-z-drag);
			user-select: none;
			-webkit-user-select: none;

			& .thp-gallery__card {
				transform: scale(1.03) rotate(1deg);
				box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.45);
				opacity: 0.95;
			}
		}
	}
}

/*
 * Dark card skin and module integration (v1.1.0).
 *
 * Ported from the masonry prototype's approved look (Poppins, dark cards,
 * category pills; David has license to replace the original style guide).
 * Deliberately UNLAYERED with `.thp-gallery-wrap` in every selector: the feed
 * and sponsor module stylesheets are unlayered, and unlayered CSS beats any
 * layer regardless of specificity, so selector weight does the work here, no
 * !important. Tokens live on the wrapper so a community can override them.
 */
.thp-gallery-wrap {
	--thp-gallery-bg: #0a0d14;
	--thp-gallery-bg-glow: #1e1b4b;
	--thp-gallery-card-bg: rgba(22, 28, 45, 0.88);
	--thp-gallery-card-border: rgba(255, 255, 255, 0.1);
	--thp-gallery-card-radius: 16px;
	--thp-gallery-text: #f8fafc;
	--thp-gallery-muted: #a8b3c7;
	--thp-gallery-date: #a5b4fc;
	--thp-gallery-cat-news: #38bdf8;
	--thp-gallery-cat-listen: #c084fc;
	--thp-gallery-cat-watch: #fb7185;
	--thp-gallery-cat-community: #34d399;
	--thp-gallery-ink: var(--thp-gallery-text);
	--thp-gallery-line: var(--thp-gallery-card-border);
	--thp-gallery-accent: #6366f1;
	--thp-gallery-focus: #a5b4fc;
	--thp-gallery-card-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5);
	--thp-gallery-hover: rgba(168, 85, 247, 0.15);
	--thp-gallery-toolbar-bg: rgba(15, 23, 42, 0.65);
	--thp-gallery-handle-bg: rgba(15, 23, 42, 0.85);
	--thp-gallery-panel-bg: #161c2d;
	--thp-gallery-page-bg: #0a0d14;
	--thp-identity-ink: var(--thp-gallery-text);

	color: var(--thp-gallery-text);

	/* Modules bring their own width and margins; the gallery owns both. */
	& .thp-gallery__card > * {
		margin-block: 0;
		max-inline-size: none;
	}

	/* ---- toolbar ---- */
	& .thp-gallery__icon-btn {
		color: var(--thp-gallery-muted);
		background: var(--thp-gallery-toolbar-bg);
		backdrop-filter: blur(12px);

		&:hover,
		&[aria-expanded="true"] {
			color: var(--thp-gallery-text);
		}
	}

	& .thp-gallery__panel {
		background: var(--thp-gallery-panel-bg);
		box-shadow: var(--thp-gallery-card-shadow);
	}

	& .thp-gallery__btn {
		color: var(--thp-gallery-muted);

		&:hover {
			color: var(--thp-gallery-text);
		}

		&.is-active {
			color: #ffffff;
		}
	}

	/* ---- feed module card ---- */
	& .thp-feed-module {
		background: var(--thp-gallery-card-bg);
		backdrop-filter: blur(16px);
		color: var(--thp-gallery-text);
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);
		padding-block: 1.25rem;
		padding-inline: 1.25rem;

		& .thp-feed-module__heading {
			font-size: 1.4rem;
			font-weight: 700;
			line-height: 1.3;
			text-transform: none;
			margin-inline-end: 6rem;
			margin-block-end: 1rem;
			color: var(--thp-gallery-text);

			& strong {
				font-weight: 700;
			}
		}

		& .thp-feed-module__item-title {
			font-size: 1rem;
			font-weight: 600;
		}

		& .thp-feed-module__item-excerpt {
			color: var(--thp-gallery-muted);
		}

		& .thp-feed-module__item-date {
			font-style: normal;
			font-weight: 700;
			opacity: 1;
			color: var(--thp-gallery-date);
		}

		& .thp-feed-module__more {
			color: var(--thp-gallery-muted);

			&:hover,
			&:focus-visible {
				color: var(--thp-gallery-text);
			}
		}
	}

	& .thp-gallery__item:not(.thp-gallery__item--anchor):not(.is-dragging):hover .thp-feed-module {
		border-color: rgba(129, 140, 248, 0.45);
	}

	/* ---- sponsor module ---- */
	& .thp-sponsor-module {
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);

		/* The category pill owns the top-right corner here, so the "+" sits at the
		   bottom of the photo area and the title leaves room for the pill. */
		& .thp-sponsor-module__plus {
			inset-block-start: auto;
			inset-block-end: 1rem;
		}

		& .thp-sponsor-module__title {
			padding-inline-end: 6rem;
		}
	}

	/* Over a photo the pill needs a solid backing to stay readable. */
	& .thp-gallery__item:has(.thp-sponsor-module--media) .thp-gallery__tag {
		background: var(--thp-gallery-card-bg);
	}

	/* ---- category pill ---- */
	& .thp-gallery__tag {
		position: absolute;
		inset-block-start: 1.1rem;
		inset-inline-end: 1.1rem;
		z-index: 2;
		font-size: 0.65rem;
		font-weight: 800;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		padding: 0.2rem 0.55rem;
		border-radius: 999px;
		background: rgba(255, 255, 255, 0.06);
		border: 1px solid currentColor;
		white-space: nowrap;
		text-decoration: none;

		&:hover,
		&:focus-visible {
			background: color-mix(in srgb, currentColor 16%, transparent);
		}

		&:focus-visible {
			outline: 2px solid var(--thp-gallery-focus);
			outline-offset: 2px;
		}
	}

	& .thp-gallery__tag--news {
		color: var(--thp-gallery-cat-news);
	}

	& .thp-gallery__tag--listen {
		color: var(--thp-gallery-cat-listen);
	}

	& .thp-gallery__tag--watch {
		color: var(--thp-gallery-cat-watch);
	}

	& .thp-gallery__tag--community {
		color: var(--thp-gallery-cat-community);
	}

	/* ---- reorder handle: vertical grip, middle of the right edge ---- */
	& .thp-gallery__handle {
		color: var(--thp-gallery-muted);
		background: var(--thp-gallery-handle-bg);
	}

	/* ---- anchors ---- */
	/* The identity card follows the theme: dark card with light ink, light card
	   with dark ink (--thp-identity-ink recolors wordmark and house together). */
	& .thp-gallery__item--anchor-identity .thp-gallery__card {
		background: var(--thp-gallery-card-bg);
		color: var(--thp-gallery-text);
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);
		padding: 0.75rem 1rem;
	}

	& .thp-gallery__item--anchor-nav .thp-gallery__card {
		color: var(--thp-gallery-text);
	}

	& .thp-gallery__item--anchor-nav .wp-block-navigation__responsive-container-open {
		color: var(--thp-gallery-text);
	}
}

/* ---- light theme: same structure, swapped tokens ---- */
.thp-gallery-wrap[data-theme="light"] {
	--thp-gallery-card-bg: rgba(255, 255, 255, 0.94);
	--thp-gallery-card-border: rgba(15, 23, 42, 0.12);
	--thp-gallery-text: #0f172a;
	--thp-gallery-muted: #475569;
	--thp-gallery-date: #4338ca;
	--thp-gallery-cat-news: #0369a1;
	--thp-gallery-cat-listen: #7e22ce;
	--thp-gallery-cat-watch: #be123c;
	--thp-gallery-cat-community: #047857;
	--thp-gallery-accent: #4f46e5;
	--thp-gallery-focus: #4338ca;
	--thp-gallery-card-shadow: 0 10px 28px -12px rgba(15, 23, 42, 0.25);
	--thp-gallery-hover: rgba(99, 102, 241, 0.1);
	--thp-gallery-toolbar-bg: rgba(255, 255, 255, 0.8);
	--thp-gallery-handle-bg: rgba(255, 255, 255, 0.95);
	--thp-gallery-panel-bg: #ffffff;
	--thp-gallery-page-bg: #f4f6fb;

	& .thp-gallery__tag {
		background: rgba(15, 23, 42, 0.04);
	}

}

body:has(.thp-gallery-wrap:not([data-theme="light"])) {
	background-color: #0a0d14;
	background-image: radial-gradient(circle at 50% -20%, #1e1b4b 0%, #0a0d14 70%);
	background-attachment: fixed;
}

body:has(.thp-gallery-wrap[data-theme="light"]) {
	background-color: #f4f6fb;
	background-image: radial-gradient(circle at 50% -20%, #e0e7ff 0%, #f4f6fb 70%);
	background-attachment: fixed;
}

/*
 * Category archive ("more headlines"): the same skin around a 3/4 + 1/4 layout.
 * The wrapper carries `.thp-gallery-wrap` (tokens, light/dark) plus `.thp-archive`.
 */
.thp-gallery-wrap.thp-archive {
	padding-inline: var(--wp--preset--spacing--40, 2rem);
	padding-block: var(--thp-top-band, 3.4rem) 3rem;
	min-block-size: 100vh;

	& .thp-archive__bar {
		margin-block-end: 1.5rem;
		gap: 1rem;
	}

	& .thp-community-identity {
		inline-size: min(100%, 18rem);
		padding: 0.75rem 1rem;
		background: var(--thp-gallery-card-bg);
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);
		--thp-identity-ink: var(--thp-gallery-text);
	}

	& .wp-block-navigation {
		color: var(--thp-gallery-text);
	}

	& .thp-archive__columns {
		gap: clamp(1rem, 2.5vw, 2rem);
		align-items: flex-start;
	}

	& .thp-archive__title {
		font-size: clamp(2rem, 4vw, 3rem);
		font-weight: 800;
		line-height: 1.1;
		margin-block: 0 0.5rem;
		color: var(--thp-gallery-text);
	}

	& .thp-archive__lede {
		color: var(--thp-gallery-muted);
		margin-block: 0 1.5rem;
	}

	& .thp-archive__list {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-direction: column;
		gap: 1rem;
	}

	& .thp-archive__item {
		padding: 1.25rem 1.5rem;
		background: var(--thp-gallery-card-bg);
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);
	}

	& .thp-archive__date {
		font-size: 0.8rem;
		font-weight: 700;
		color: var(--thp-gallery-date);
		margin-block: 0 0.25rem;
	}

	& .thp-archive__headline {
		font-size: clamp(1.4rem, 2.4vw, 1.9rem);
		font-weight: 700;
		line-height: 1.25;
		margin-block: 0 0.5rem;

		& a {
			color: var(--thp-gallery-text);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				text-decoration: underline;
			}
		}
	}

	& .thp-archive__excerpt {
		color: var(--thp-gallery-muted);
		font-size: 1.05rem;
		line-height: 1.55;
		margin-block: 0;

		& .wp-block-post-excerpt__more-link {
			color: var(--thp-gallery-date);
			font-weight: 600;
		}
	}

	& .thp-archive__pager {
		margin-block-start: 1.5rem;
		color: var(--thp-gallery-muted);

		& a {
			color: var(--thp-gallery-date);
		}
	}

	& .thp-archive__columns .thp-feed-module {
		margin-block: 0;

		& .thp-feed-module__heading {
			font-size: 1.1rem;
			margin-inline-end: 0;
		}

		& .thp-feed-module__item-title {
			font-size: 0.95rem;
		}
	}

	@media (max-width: 781px) {
		& .thp-archive__columns {
			flex-direction: column;
		}

		& .thp-archive__columns > .wp-block-column {
			flex-basis: 100%;
		}
	}
}

/* Single article ("full story") page: same skin, a normal-size headline, readable body. */
.thp-gallery-wrap.thp-article {
	& .thp-article__section {
		margin-block: 0 0.5rem;
		font-size: 0.8rem;
		font-weight: 800;
		letter-spacing: 0.06em;
		text-transform: uppercase;

		& a {
			color: var(--thp-gallery-date);
			text-decoration: none;

			&:hover,
			&:focus-visible {
				text-decoration: underline;
			}
		}
	}

	& .thp-article__title {
		font-size: clamp(1.7rem, 3vw, 2.3rem);
		font-weight: 800;
		line-height: 1.2;
		margin-block: 0 0.5rem;
		color: var(--thp-gallery-text);
	}

	& .thp-article__image {
		margin-block: 1rem;
		border-radius: var(--thp-gallery-card-radius);
		overflow: hidden;
	}

	& .thp-article__body {
		max-inline-size: 46rem;
		font-size: 1.1rem;
		line-height: 1.65;
		color: var(--thp-gallery-text);

		& > * {
			margin-block: 0 1.1rem;
		}

		& a {
			color: var(--thp-gallery-date);
		}

		& li {
			margin-block-end: 0.35rem;
		}
	}
}

/* ---- focus: a ring only when reached by keyboard (Tab), never after a mouse click ---- */
.thp-gallery-wrap :focus:not(:focus-visible) {
	outline: none;
}

/* After a mouse or touch interaction, no ring even if a script moved focus (e.g. closing the menu). */
html[data-thp-input="pointer"] .thp-gallery-wrap :focus {
	outline: none;
	box-shadow: none;
}

/* ---- navigation overlay follows the light/dark theme ---- */
.thp-gallery-wrap .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--thp-gallery-page-bg);
	color: var(--thp-gallery-text);

	& .wp-block-navigation-item__content,
	& .wp-block-navigation__responsive-container-close {
		color: var(--thp-gallery-text);
	}

	& .wp-block-navigation__responsive-container-close:focus-visible,
	& .wp-block-navigation-item__content:focus-visible {
		outline: 2px solid var(--thp-gallery-focus);
		outline-offset: 3px;
	}
}

/* ---- section pages: the header band sits outside the gallery, so its tools sit in flow ---- */
.thp-gallery-wrap.thp-gallery--inline-tools {
	padding-block-start: 0;

	&.is-enhanced .thp-gallery__toolbar {
		position: static;
		margin-block-end: 0.75rem;
	}
}

/* ---- header band: identity | SECTION | sponsor | menu ---- */
.thp-gallery-wrap.thp-archive .thp-section-bar {
	flex-wrap: nowrap;
	align-items: center;
	margin-block-end: 1.25rem;

	& .thp-section {
		flex: 1 1 auto;
		min-inline-size: 0;
	}

	@media (max-width: 781px) {
		flex-wrap: wrap;
	}
}

/* Light/dark switch: a quick cross-fade (View Transitions API; instant elsewhere). */
::view-transition-old(root),
::view-transition-new(root) {
	animation-duration: 0.18s;
}

@media (prefers-reduced-motion: reduce) {
	::view-transition-group(root) {
		animation-duration: 0.01s;
	}
}

/* ---- Contact page: the form is a card, and Gravity Forms picks up the skin tokens ---- */
.thp-gallery-wrap.thp-contact {
	& .thp-contact__card {
		max-inline-size: 40rem;
		padding: 1.5rem;
		background: var(--thp-gallery-card-bg);
		color: var(--thp-gallery-text);
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: var(--thp-gallery-card-radius);
		box-shadow: var(--thp-gallery-card-shadow);
		font-size: 1rem;
	}

	& .thp-contact__lede {
		margin-block: 0 1.25rem;
		color: var(--thp-gallery-muted);
		line-height: 1.5;
	}

	& .gform_wrapper {
		--gf-color-primary: var(--thp-gallery-accent);
		--gf-color-primary-rgb: 99, 102, 241;
		--gf-ctrl-bg-color: transparent;
		--gf-ctrl-border-color: var(--thp-gallery-card-border);
		--gf-ctrl-border-color-focus: var(--thp-gallery-focus);
		--gf-ctrl-color: var(--thp-gallery-text);
		--gf-ctrl-label-color-primary: var(--thp-gallery-text);
		--gf-ctrl-label-color-secondary: var(--thp-gallery-muted);
		--gf-ctrl-radius: 10px;
		--gf-ctrl-btn-bg-color-primary: var(--thp-gallery-accent);
		--gf-ctrl-btn-color-primary: #ffffff;
		--gf-ctrl-btn-radius: 999px;

		margin: 0;
		color: var(--thp-gallery-text);
	}

	& .gform_wrapper .gfield_label {
		font-size: 0.9rem;
		font-weight: 700;
		color: var(--thp-gallery-text);
	}

	& .gform_wrapper .gfield_required,
	& .gform_wrapper .gfield_required_asterisk {
		color: var(--thp-gallery-cat-watch);
	}

	& .gform_wrapper input[type="text"],
	& .gform_wrapper input[type="email"],
	& .gform_wrapper input[type="tel"],
	& .gform_wrapper textarea {
		inline-size: 100%;
		padding: 0.7rem 0.9rem;
		font: inherit;
		color: var(--thp-gallery-text);
		background: transparent;
		border: 1px solid var(--thp-gallery-card-border);
		border-radius: 10px;

		&:focus {
			border-color: var(--thp-gallery-focus);
			outline: 2px solid var(--thp-gallery-focus);
			outline-offset: 1px;
		}
	}

	& .gform_wrapper textarea,
	& .gform_wrapper .ginput_container_textarea textarea.large {
		block-size: 9rem;
		min-block-size: 0;
	}

	& .gform_wrapper ::placeholder {
		color: var(--thp-gallery-muted);
		opacity: 0.7;
	}

	& .gform_wrapper {
		--gf-form-gap-y: 1.1rem;
	}

	& .gform_wrapper .gform_fields {
		row-gap: 1.1rem;
	}

	& .gform_wrapper .gform_button,
	& .gform_wrapper input[type="submit"] {
		padding: 0.75rem 1.6rem;
		font: inherit;
		font-weight: 800;
		color: #ffffff;
		background: var(--thp-gallery-accent);
		border: 0;
		border-radius: 999px;
		cursor: pointer;

		&:hover {
			filter: brightness(1.08);
		}
	}

	& .gform_wrapper .gform_validation_errors,
	& .gform_wrapper .validation_message,
	& .gform_wrapper .gfield_validation_message {
		color: var(--thp-gallery-cat-watch);
		font-size: 0.9rem;
	}

	& .gform_confirmation_message {
		font-weight: 700;
		color: var(--thp-gallery-text);
	}
}