/**
 * wwh/gallery-applications — front-end styles.
 *
 * Follows THEME_STANDARDS.md: semantic colour tokens, the theme type scale,
 * spacing presets rather than raw px, square corners on cards and inputs with
 * the pill reserved for buttons (§15.13), and the same cream/obsidian
 * vocabulary as the other member surfaces so /manage-gallery/ reads as part of
 * the set rather than a bolted-on form.
 */

.wwh-gallery {
	color: var(--wp--preset--color--ink-primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	background: var(--wp--preset--color--warm-cream);
}

/* Inner container. The hero runs full-bleed; everything after it is measured. */
.wwh-gallery__body {
	max-width: 900px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--10) var(--wp--preset--spacing--6);
}

/* =================================================================
   §15.1 Cover hero — eyebrow / italic display H2 / lede on warm-obsidian
   The site header is position:absolute and transparent, so the first
   in-flow element sits underneath it. A dark hero with generous top
   padding is what every other member surface uses to clear it; without
   one the page title collides with the nav.
   ================================================================= */
.wwh-gallery__hero {
	background: var(--wp--preset--color--warm-obsidian);
	color: var(--wp--preset--color--warm-cream);
	padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4rem);
}

.wwh-gallery__hero-inner {
	max-width: 980px;
	margin: 0 auto;
	text-align: center;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--4);
	align-items: center;
}

.wwh-gallery__hero h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-section);
	font-style: italic;
	font-weight: 400;
	margin: 0;
	color: var(--wp--preset--color--warm-cream);
}

.wwh-gallery__hero .wwh-gallery__eyebrow {
	color: var(--wp--preset--color--ink-muted-dark);
	margin: 0;
}

.wwh-gallery__hero .wwh-gallery__lede {
	color: var(--wp--preset--color--ink-muted-dark);
	max-width: 60ch;
	margin: 0;
}


/* With a photo (the Page's Featured image): taller, the photo darkened
   behind the text, and the small text full white so it reads over it. */
.wwh-gallery__hero--photo {
	position: relative;
	overflow: hidden;
	min-height: 52vh;
	display: flex;
	align-items: flex-end;
	justify-content: center;
}

.wwh-gallery__hero-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.wwh-gallery__hero-shade {
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(26, 22, 19, 0.55), rgba(26, 22, 19, 0.75));
}

.wwh-gallery__hero--photo .wwh-gallery__hero-inner {
	position: relative;
	width: 100%;
}

.wwh-gallery__hero--photo .wwh-gallery__eyebrow,
.wwh-gallery__hero--photo .wwh-gallery__lede,
.wwh-gallery__hero--photo h1 {
	color: #fff;
}

/* "Need a hand?": help videos for applying, when there are any. */
.wwh-gallery__help {
	margin: 0 0 var(--wp--preset--spacing--6);
}

.wwh-gallery__help h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-h-3);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--3);
}

/* ---- Gates (logged out / not a member) ------------------------------- */

/* Same top clearance as the hero: the site header is position:absolute, and
   with only spacing-12 above it the eyebrow sat under the desktop nav (GF-18). */
.wwh-gallery__gate {
	background: var(--wp--preset--color--warm-obsidian);
	color: var(--wp--preset--color--warm-cream);
	padding: clamp(5rem, 12vh, 8rem) clamp(1.5rem, 5vw, 4rem) clamp(2.5rem, 6vh, 4rem);
	text-align: center;
}

.wwh-gallery__gate h1 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-prose);
	font-style: italic;
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--4);
	color: var(--wp--preset--color--warm-cream);
}

.wwh-gallery__gate p {
	max-width: 52ch;
	margin-inline: auto;
	color: var(--wp--preset--color--ink-muted-dark);
}

.wwh-gallery__gate .wwh-gallery__button {
	margin-top: var(--wp--preset--spacing--4);
}

/* On the dark band the default ink button had no visible edge (GF-18):
   light, and outlined on hover/focus. Cream on obsidian passes AA. */
.wwh-gallery__gate .wwh-gallery__button,
.wwh-gallery__gate .wwh-gallery__button:visited {
	background: var(--wp--preset--color--warm-cream);
	color: var(--wp--preset--color--ink-primary);
	border-color: var(--wp--preset--color--warm-cream);
}

.wwh-gallery__gate .wwh-gallery__button:hover,
.wwh-gallery__gate .wwh-gallery__button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--warm-cream);
	border-color: var(--wp--preset--color--warm-cream);
	outline: 2px solid var(--wp--preset--color--warm-cream);
	outline-offset: 3px;
}

/* ---- Headings -------------------------------------------------------- */

.wwh-gallery__eyebrow {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 500;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-caption);
	margin: 0 0 var(--wp--preset--spacing--2);
}

.wwh-gallery__gate .wwh-gallery__eyebrow {
	color: var(--wp--preset--color--ink-muted-dark);
}

.wwh-gallery__head {
	margin-bottom: var(--wp--preset--spacing--8);
}

.wwh-gallery__head h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-prose);
	font-style: italic;
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--3);
}

.wwh-gallery__lede {
	font-size: var(--wp--preset--font-size--lede);
	color: var(--wp--preset--color--ink-caption);
	max-width: 62ch;
	margin: 0;
}

.wwh-gallery__back {
	font-size: var(--wp--preset--font-size--caption);
	margin: 0 0 var(--wp--preset--spacing--5);
}

/* ---- Flash ----------------------------------------------------------- */

.wwh-gallery__flash {
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	margin-bottom: var(--wp--preset--spacing--6);
	border-left: 3px solid var(--wp--preset--color--ink-primary);
	background: var(--wp--preset--color--warm-cream-2);
	font-size: var(--wp--preset--font-size--caption);
}

.wwh-gallery__flash--error {
	border-left-color: var(--wp--preset--color--event-soldout);
}

/* ---- List ------------------------------------------------------------ */

.wwh-gallery__list {
	list-style: none;
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--3);
}

.wwh-gallery__item {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
	justify-content: space-between;
	align-items: flex-start;
	background: var(--wp--preset--color--warm-cream-2);
	padding: var(--wp--preset--spacing--5);
}

/* "Exhibitions you are in" / "Your own applications": h2s since the hero
   became the page's h1 (GitLab #26), kept at the size they had as h3s. */
.wwh-gallery__section-title {
	font-size: 1.17em;
}

.wwh-gallery__item-title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--card-title);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--1);
}

.wwh-gallery__item-title a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
}

.wwh-gallery__item-title a:hover,
.wwh-gallery__item-title a:focus-visible {
	border-bottom-color: currentColor;
}

.wwh-gallery__item-meta {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
}

.wwh-gallery__item-side {
	text-align: right;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--wp--preset--spacing--2);
}

.wwh-gallery__owing {
	margin: 0;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 600;
}

/* ---- Status chips ---------------------------------------------------- */

.wwh-gallery__status {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: var(--wp--preset--spacing--1) var(--wp--preset--spacing--3);
	background: var(--wp--preset--color--warm-cream);
	border: 1px solid var(--wp--preset--color--ink-caption);
	color: var(--wp--preset--color--ink-caption);
	margin: 0;
}

.wwh-gallery__status--approved,
.wwh-gallery__status--deposit_paid {
	border-color: var(--wp--preset--color--brand-text);
	color: var(--wp--preset--color--brand-text);
}

.wwh-gallery__status--paid_in_full,
.wwh-gallery__status--completed {
	border-color: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--ink-primary);
}

.wwh-gallery__status--declined,
.wwh-gallery__status--cancelled,
.wwh-gallery__status--withdrawn {
	border-color: var(--wp--preset--color--event-soldout);
	color: var(--wp--preset--color--event-soldout);
}

/* A chip sitting on the dark hero needs the inverse palette. Declared after
   the status variants above so it wins the cascade whatever the status. */
.wwh-gallery__status--on-dark,
.wwh-gallery__status--on-dark.wwh-gallery__status--approved,
.wwh-gallery__status--on-dark.wwh-gallery__status--declined {
	background: transparent;
	border-color: var(--wp--preset--color--ink-muted-dark);
	color: var(--wp--preset--color--warm-cream);
}

/* ---- Cards ----------------------------------------------------------- */

.wwh-gallery__card {
	background: var(--wp--preset--color--warm-cream-2);
	padding: var(--wp--preset--spacing--6);
	margin-bottom: var(--wp--preset--spacing--6);
}

.wwh-gallery__card h2 {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-h-3);
	font-weight: 400;
	margin: 0 0 var(--wp--preset--spacing--4);
}

.wwh-gallery__card--declined {
	border-left: 3px solid var(--wp--preset--color--event-soldout);
}

.wwh-gallery__facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: var(--wp--preset--spacing--4);
	margin: 0 0 var(--wp--preset--spacing--5);
}

.wwh-gallery__facts dt {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-caption);
	margin-bottom: var(--wp--preset--spacing--1);
}

.wwh-gallery__facts dd {
	margin: 0;
	font-size: var(--wp--preset--font-size--body);
}

.wwh-gallery__due {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
}

.wwh-gallery__proposal {
	font-size: var(--wp--preset--font-size--body);
}

.wwh-gallery__note {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
	margin: var(--wp--preset--spacing--4) 0 0;
}

.wwh-gallery__paid {
	font-weight: 600;
	margin: 0;
}

.wwh-gallery__pay {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
}

.wwh-gallery__pay form {
	margin: 0;
}

/* ---- Form ------------------------------------------------------------ */

.wwh-gallery__form {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--6);
}

.wwh-gallery__field {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
	border: 0;
	padding: 0;
	margin: 0;
}

.wwh-gallery__field--narrow input {
	max-width: 10rem;
}

.wwh-gallery__field label,
.wwh-gallery__field legend {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink-primary);
	padding: 0;
}

.wwh-gallery__field input,
.wwh-gallery__field select,
.wwh-gallery__field textarea {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	color: var(--wp--preset--color--ink-primary);
	/* White, so a box reads as a box on the cream page and cards (Jeff, 2026-10-12). */
	background: #fff;
	border: 1px solid var(--wp--preset--color--ink-caption);
	border-radius: 0;
	padding: var(--wp--preset--spacing--3);
	width: 100%;
	/* Padding and border inside the 100%, or each field ran 26px past the
	   form and the page scrolled sideways on phones (E2E 2026-10-03 F-21). */
	box-sizing: border-box;
}

.wwh-gallery__field input:focus,
.wwh-gallery__field select:focus,
.wwh-gallery__field textarea:focus {
	background: #fff;
}

.wwh-gallery__field input:focus-visible,
.wwh-gallery__field select:focus-visible,
.wwh-gallery__field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
	border-color: var(--wp--preset--color--ink-primary);
}

.wwh-gallery__hint {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
	margin: 0;
}

.wwh-gallery__dates {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--4);
}

.wwh-gallery__dates > span {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--2);
}

.wwh-gallery__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--3);
	align-items: center;
}

/* ---- Buttons (§15.13 pillbox) ---------------------------------------- */

.wwh-gallery__button {
	display: inline-block;
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--cap);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--6);
	border-radius: var(--wp--preset--border-radius--pill, 9999px);
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--warm-cream);
	border: 1px solid var(--wp--preset--color--ink-primary);
}

.wwh-gallery__button:hover,
.wwh-gallery__button:focus-visible {
	background: var(--wp--preset--color--warm-obsidian);
	color: var(--wp--preset--color--warm-cream);
}

/* The theme's focus ring is currentColor (focus.css): on these dark pills
   that is the cream text, drawn outside the button on a cream card, about
   1.1:1 (GF-68). Ink instead. The dark gate band keeps its cream ring below. */
.wwh-gallery__button:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
}

.wwh-gallery__button--ghost {
	background: transparent;
	color: var(--wp--preset--color--ink-primary);
}

.wwh-gallery__button--ghost:hover,
.wwh-gallery__button--ghost:focus-visible {
	background: var(--wp--preset--color--ink-primary);
	color: var(--wp--preset--color--warm-cream);
}

.wwh-gallery__button--small {
	padding: var(--wp--preset--spacing--2) var(--wp--preset--spacing--4);
}

.wwh-gallery__link-button {
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
	text-decoration: underline;
}

.wwh-gallery__link-button:hover,
.wwh-gallery__link-button:focus-visible {
	color: var(--wp--preset--color--ink-primary);
}

/* A field the last error was about (GF-19), as the EOI form marks them. */
.wwh-gallery__field [aria-invalid="true"] {
	border-color: var(--wp--preset--color--event-soldout);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--event-soldout);
}

/* A sign-in card from an email link (here and on /exhibit/): the address is
   fixed, so it reads as text in a box rather than a field to fill. */
.wwh-gallery__field input[readonly] {
	background: transparent;
	border-style: dashed;
}

/* ---- Empty ----------------------------------------------------------- */

.wwh-gallery__empty {
	background: var(--wp--preset--color--warm-cream-2);
	padding: var(--wp--preset--spacing--6);
	margin-top: var(--wp--preset--spacing--6);
	color: var(--wp--preset--color--ink-caption);
}

.wwh-gallery__empty p {
	margin: 0;
}

@media (max-width: 600px) {
	.wwh-gallery__item-side {
		text-align: left;
		align-items: flex-start;
	}
}

/* Terms acknowledgement above the submit buttons. Matches the paper EoI's
   acknowledgement line; sits tight to the actions row it qualifies. */
.wwh-gallery__terms {
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
	margin: var(--wp--preset--spacing--5) 0 var(--wp--preset--spacing--3);
}


/* Tick boxes: the MOU declarations and "Who is exhibiting" (phase D).
   Specific enough to beat the uppercase field-label style. */
.wwh-gallery .wwh-gallery__field label.wwh-gallery__check,
.wwh-gallery label.wwh-gallery__check {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	align-items: flex-start;
	margin: var(--wp--preset--spacing--2) 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 400;
	letter-spacing: normal;
	text-transform: none;
}
.wwh-gallery .wwh-gallery__check input[type="checkbox"] {
	width: auto;
	flex: none;
	margin: 0.3em 0 0;
	accent-color: var(--wp--preset--color--ink-primary);
}