/* ==========================================================================
   05 Enquiry — the mark's nine tiles close into one red square on the canvas;
   these fields sit on top of it. `.as-form__target` is an invisible box CSS
   places and home.js reads, so the square's size and position live here.
   Type is the brand stack throughout: bold caps labels as in the lockup's
   "AGENT", regular for what the visitor types, as in "STUDIOS".
   ========================================================================== */

.as-home .as-form {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: grid;
	place-items: center;
	/* Kept in the layout (the script measures the target box) but inert until
	   opened; visibility:hidden also takes the fields out of the tab order. */
	visibility: hidden;
	pointer-events: none;
}
.as-home .as-form.is-open {
	visibility: visible;
	pointer-events: auto;
}

.as-home .as-form__target,
.as-home .as-form__panel {
	width: min(calc(var(--as-u) * 470), 88vw, 88dvh);
	aspect-ratio: 1;
}
.as-home .as-form__target {
	position: absolute;
	visibility: hidden;
	pointer-events: none;
}

.as-home .as-form__panel {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--helvetica);
	-webkit-font-smoothing: antialiased;
	opacity: 0;                        /* the script fades it in once the square has formed */
}

.as-home .as-form__close {
	position: absolute;
	top: clamp(6px, 1.4vmin, 14px);
	right: clamp(8px, 1.8vmin, 18px);
	width: 1.6em;
	height: 1.6em;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--white);
	font: 400 clamp(20px, 3.4vmin, 30px)/1 var(--wp--preset--font-family--helvetica);
	cursor: pointer;
}

.as-home .as-form__title {
	margin: 0 clamp(26px, 5vmin, 44px) 0 0;
	color: inherit;
	font-family: var(--wp--preset--font-family--helvetica);
	font-size: var(--wp--preset--font-size--title);
	font-weight: 700;
	line-height: normal;
	letter-spacing: var(--wp--custom--tracking--nav);
	text-transform: uppercase;
	text-wrap: balance;
}

.as-home .as-field {
	display: flex;
	flex-direction: column;
	gap: clamp(6px, 1.1vmin, 11px);
}
.as-home .as-field--grow {
	flex: 1 1 auto;
	min-height: 0;
}

.as-home .as-field__label {
	font-family: var(--wp--preset--font-family--helvetica);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
	opacity: var(--wp--custom--form--label-opacity);
}

.as-home .as-field__input {
	width: 100%;
	padding: .62em .75em;
	border: 1px solid var(--wp--custom--form--input-border);
	border-radius: var(--wp--custom--radius--input);
	background: var(--wp--custom--form--input-fill);
	color: var(--wp--preset--color--white);
	font: 400 var(--wp--preset--font-size--input)/1.4 var(--wp--preset--font-family--helvetica);
	letter-spacing: var(--wp--custom--tracking--input);
	-webkit-appearance: none;
	appearance: none;
}
.as-home .as-field__input:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 1px;
	border-color: var(--wp--preset--color--white);
}
.as-home .as-field__input--area {
	flex: 1 1 auto;
	min-height: 3.2em;
	resize: none;
}

.as-home .as-form__trap {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.as-home .as-form__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.as-home .as-form__status {
	margin: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.3;
}

.as-home .as-form__send {
	flex: 0 0 auto;
	padding: .62em 1.5em;
	border: 1px solid var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--pill);
	background: none;
	color: var(--wp--preset--color--white);
	font: 700 var(--wp--preset--font-size--button)/1 var(--wp--preset--font-family--helvetica);
	letter-spacing: var(--wp--custom--tracking--button);
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color .15s linear, color .15s linear;
}
.as-home .as-form__send:hover,
.as-home .as-form__send:focus-visible {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--red);
}
.as-home .as-form__send[disabled] {
	opacity: .55;
	cursor: default;
}

@media (prefers-reduced-motion: reduce) {
	.as-home .as-form__send { transition: none; }
}

/* ==== Page panel (Contact / Imprint) =====================================
   The same red square, holding the page's own content (fetched by home.js from
   the REST API). Longer text scrolls inside the square; the page never leaves
   the homepage. Only one panel shows at a time: data-mode="page" on .as-form. */

.as-home .as-form > .as-form__panel,
.as-home .as-form > .as-info { grid-area: 1 / 1; }

.as-home .as-form[data-mode="page"] > .as-form__panel,
.as-home .as-form:not([data-mode="page"]) > .as-info { display: none; }

.as-home .as-info {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--30);
	/* Fixed square: long pages scroll inside the body instead of growing the box. */
	width: min(calc(var(--as-u) * 470), 88vw, 88dvh);
	height: min(calc(var(--as-u) * 470), 88vw, 88dvh);
	overflow: hidden;
	padding: var(--wp--preset--spacing--50);
	color: var(--wp--preset--color--white);
	font-family: var(--wp--preset--font-family--helvetica);
	-webkit-font-smoothing: antialiased;
	opacity: 0;                        /* the script fades it in once the square has formed */
}

.as-home .as-info__body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	padding-right: .6em;
	font: 400 var(--wp--preset--font-size--input)/1.5 var(--wp--preset--font-family--helvetica);
	letter-spacing: var(--wp--custom--tracking--input);
	scrollbar-width: thin;
	scrollbar-color: var(--wp--custom--form--input-border) transparent;
}
.as-home .as-info__body:focus-visible {
	outline: 2px solid var(--wp--preset--color--white);
	outline-offset: 4px;
}
.as-home .as-info__body[aria-busy="true"]::before {
	content: "…";
	opacity: var(--wp--custom--form--label-opacity);
}

/* Page content: plain, white, the brand stack. */
.as-home .as-form .as-info__body > * + * { margin-block-start: 1em; }
.as-home .as-form .as-info__body :is(h1, h2, h3, h4, h5, h6) {
	margin-block: 1.4em .5em;
	color: inherit;
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: var(--wp--custom--tracking--label);
	text-transform: uppercase;
}
.as-home .as-form .as-info__body > :first-child { margin-block-start: 0; }
.as-home .as-form .as-info__body :is(ul, ol) { padding-left: 1.2em; }
.as-home .as-form .as-info__body a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: .15em;
}
.as-home .as-form .as-info__body a:hover { opacity: .72; }
.as-home .as-form .as-info__body img { max-width: 100%; height: auto; }
.as-home .as-info:focus { outline: none; }