/**
 * wwh/gallery-eoi — front-end styles.
 *
 * Builds on wwh/gallery-applications' stylesheet (declared as a second style in
 * block.json), so the EOI reads as part of the same gallery set: cream cards,
 * square inputs, pill buttons. Only what the EOI adds is here. The Page holds
 * its own cover hero, so this block starts at the content.
 */

.wwh-eoi {
	scroll-margin-top: var(--wp--preset--spacing--6); /* redirects land here (#wwh-eoi) */
	max-width: 900px;
	margin-inline: auto;
	padding: var(--wp--preset--spacing--8) var(--wp--preset--spacing--6);
	box-sizing: border-box;
}

/* The read-only copy's h3s ("What would be exhibited", each artist, "Your other
   Expressions of Interest") were styled by gallery-applications' card h3 rule,
   which became an h2 rule with GitLab #26; kept here so they look as before. */
.wwh-eoi .wwh-gallery__card h2,
.wwh-eoi .wwh-gallery__card h3 {
	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-eoi .wwh-gallery__field + .wwh-gallery__field,
.wwh-eoi .wwh-gallery__field + .wwh-eoi__samples {
	margin-top: var(--wp--preset--spacing--5);
}

/* Ticks and radios: normal case, and not stretched like text inputs. */
.wwh-eoi__choice,
.wwh-eoi__remove {
	display: flex;
	gap: var(--wp--preset--spacing--2);
	align-items: flex-start;
	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;
	margin: var(--wp--preset--spacing--2) 0;
}

.wwh-eoi .wwh-gallery__field .wwh-eoi__choice,
.wwh-eoi .wwh-gallery__field .wwh-eoi__remove {
	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-eoi input[type="checkbox"],
.wwh-eoi input[type="radio"] {
	width: auto;
	flex: none;
	margin: 0.3em 0 0;
	accent-color: var(--wp--preset--color--ink-primary);
}

.wwh-eoi input[type="file"] {
	background: transparent;
	border: 1px dashed var(--wp--preset--color--ink-caption);
}

/* The account email can't be changed here, so it is shown, not offered. */
.wwh-eoi__label {
	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;
}

.wwh-eoi__static {
	margin: 0;
}

/* ---- Images ---------------------------------------------------------- */

.wwh-eoi__thumbs {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
	gap: var(--wp--preset--spacing--4);
}

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

.wwh-eoi__thumb img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	background: var(--wp--preset--color--warm-cream);
}

.wwh-eoi__thumb a:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 2px;
}

.wwh-eoi .wwh-eoi__thumb input[type="text"] {
	padding: var(--wp--preset--spacing--2);
	font-size: var(--wp--preset--font-size--caption);
}

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

/* ---- Group members --------------------------------------------------- */

.wwh-eoi__artist {
	border: 0;
	border-top: 1px solid var(--wp--preset--color--ink-caption);
	margin: var(--wp--preset--spacing--6) 0 0;
	padding: var(--wp--preset--spacing--5) 0 0;
}

.wwh-eoi__artist > legend {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--display-h-3);
	padding: 0 var(--wp--preset--spacing--2) 0 0;
}

.wwh-eoi__artist h3 small {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--caption);
	color: var(--wp--preset--color--ink-caption);
}

/* ---- Notices --------------------------------------------------------- */

.wwh-eoi__acting {
	background: var(--wp--preset--color--warm-obsidian);
	color: var(--wp--preset--color--warm-cream);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--5);
	margin-bottom: var(--wp--preset--spacing--6);
}

.wwh-eoi__acting p {
	margin: 0;
}

.wwh-eoi__acting a {
	color: var(--wp--preset--color--warm-cream);
	margin-left: var(--wp--preset--spacing--2);
}

.wwh-eoi__problems {
	margin: 0 0 var(--wp--preset--spacing--6);
	padding: var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) var(--wp--preset--spacing--4) var(--wp--preset--spacing--8);
	border-left: 3px solid var(--wp--preset--color--event-soldout);
	background: var(--wp--preset--color--warm-cream-2);
}

.wwh-eoi__problems a {
	color: inherit;
}

/* An artist's image box that is short after a send that wasn't ready.
   Doubled class: .wwh-gallery__field (gallery-applications) loads later and
   resets border and padding. */
.wwh-gallery__field.wwh-eoi__samples--short {
	padding-left: var(--wp--preset--spacing--4);
	border-left: 3px solid var(--wp--preset--color--event-soldout);
}

/* The error list links here; leave the fields above it in view. */
.wwh-eoi__samples {
	scroll-margin-top: 30vh;
}

.wwh-eoi__samples:focus {
	outline: 2px solid var(--wp--preset--color--ink-primary);
	outline-offset: 3px;
}

/* A field named in the "not ready" list (GF-3). */
.wwh-eoi [data-wwh-invalid] {
	border-color: var(--wp--preset--color--event-soldout);
	box-shadow: inset 3px 0 0 var(--wp--preset--color--event-soldout);
	scroll-margin-top: 30vh;
}

.wwh-eoi input[type="checkbox"][data-wwh-invalid] {
	outline: 2px solid var(--wp--preset--color--event-soldout);
	outline-offset: 2px;
}

.wwh-eoi__field-error {
	margin: 0 0 var(--wp--preset--spacing--3);
	color: var(--wp--preset--color--event-soldout);
	font-weight: 600;
}

.wwh-eoi__signin-link {
	margin-top: var(--wp--preset--spacing--6);
	padding-top: var(--wp--preset--spacing--5);
	border-top: 1px solid var(--wp--preset--color--ink-caption);
}

.wwh-eoi__signin-link p {
	margin: 0 0 var(--wp--preset--spacing--3);
}

/* "Save and add another artist": clear of the image box above it. */
.wwh-eoi__add-another {
	margin-top: var(--wp--preset--spacing--6);
}

/* After "Save and add another artist" the new space's Name box takes focus;
   keep its legend and label in view above it. */
.wwh-eoi__artist input {
	scroll-margin-top: 8rem;
}

/* Honeypot: off-screen for people, still in the DOM for bots. */
.wwh-eoi__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ---- Curator's list -------------------------------------------------- */

.wwh-eoi__table {
	width: 100%;
	border-collapse: collapse;
}

.wwh-eoi__table th,
.wwh-eoi__table td {
	text-align: left;
	padding: var(--wp--preset--spacing--3) var(--wp--preset--spacing--2);
	border-bottom: 1px solid var(--wp--preset--color--ink-caption);
	vertical-align: top;
}

.wwh-eoi__table th {
	font-family: var(--wp--preset--font-family--ui);
	font-size: var(--wp--preset--font-size--cap);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.wwh-eoi__table small {
	color: var(--wp--preset--color--ink-caption);
}

@media (max-width: 600px) {
	.wwh-eoi {
		padding-inline: var(--wp--preset--spacing--4);
	}
	.wwh-eoi .wwh-gallery__card {
		padding: var(--wp--preset--spacing--4);
	}
}

/* ---- Image picker as a drop area (GALLERY_UX.md §7.4, core 2.119.0) ---- */
.wwh-eoi__drop {
	border: 2px dashed #7a7268;
	background: var(--wp--preset--color--warm-cream, #f2efea);
	padding: 16px 18px;
	margin: 8px 0 6px;
}
.wwh-eoi__drop label { display: block; margin-bottom: 8px; }
.wwh-eoi__drop input[type="file"] { width: 100%; font: inherit; }
.wwh-eoi__drop input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--ink-primary, #1a1613);
	border-radius: 999px;
	background: transparent;
	color: var(--wp--preset--color--ink-primary, #1a1613);
	font-family: var(--wp--preset--font-family--ui, Montserrat, Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	cursor: pointer;
}
.wwh-eoi__drop input[type="file"]:focus-visible { outline: 2px solid var(--wp--preset--color--brand-text, #8f632f); outline-offset: 3px; }
.wwh-eoi__drop-count { margin: 8px 0 0; font-size: .95em; color: var(--wp--preset--color--ink-caption, #5a544d); }
.wwh-eoi__drop-count:empty { display: none; }

/* ---- The group section, folded until someone is added ---- */
.wwh-eoi__group > summary {
	cursor: pointer;
	display: inline-block;
	padding: 10px 18px;
	border: 1px solid var(--wp--preset--color--ink-primary, #1a1613);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--ui, Montserrat, Arial, sans-serif);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	list-style: none;
}
.wwh-eoi__group > summary::-webkit-details-marker { display: none; }
.wwh-eoi__group[open] > summary { margin-bottom: 16px; }
.wwh-eoi__group > summary:focus-visible { outline: 2px solid var(--wp--preset--color--brand-text, #8f632f); outline-offset: 3px; }