/* ==========================================================================
   Contact: the quote request is a kraft job ticket; the office is a clear plate.
   ========================================================================== */

.qc-contact { padding: 0 var(--gutter) var(--section); }
.qc-contact__grid {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
	max-width: var(--max);
	margin-inline: auto;
}
@media (max-width: 960px) { .qc-contact__grid { grid-template-columns: 1fr; } }

/* ---------- The ticket ---------- */

.qc-quote {
	position: relative;
	padding: clamp(2rem, 4vw, 3rem);
	border-radius: 4px;
	background-color: var(--kraft);
	background-image:
		url("../img/kraft-print.png"),
		repeating-linear-gradient(97deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px),
		repeating-linear-gradient(8deg, rgba(0, 0, 0, 0.04) 0 1px, transparent 1px 5px);
	background-size: 176px, auto, auto;
	color: var(--white);
	box-shadow: 18px 28px 50px -30px rgba(51, 32, 27, 0.55), 2px 3px 6px -3px rgba(51, 32, 27, 0.4);
}
.qc-quote :focus-visible { outline-color: var(--white); }
.qc-quote__hole {
	position: absolute;
	top: 1.1rem;
	left: 50%;
	width: 16px;
	height: 16px;
	margin-left: -8px;
	border-radius: 50%;
	background: var(--paper);
	box-shadow: inset 1px 2px 2px rgba(0, 0, 0, 0.25);
}
.qc-quote__title { font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem); color: var(--white); }
.qc-quote__intro { margin-top: 0.75rem; max-width: 50ch; opacity: 0.92; }
.qc-quote__form { margin-top: 2rem; }
.qc-quote__form[hidden] { display: none; }
.qc-quote fieldset { margin: 0 0 2rem; padding: 0; border: 0; min-width: 0; }
.qc-quote legend { padding: 0; margin-bottom: 1rem; font: 400 1.4rem/1.2 var(--f-display); }

.qc-quote__sketch[hidden] { display: none; }
.qc-quote__items { display: grid; gap: 0.6rem; margin-bottom: 1rem; }
.qc-quote__items:empty { display: none; }
.qc-quote__item {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr) auto;
	align-items: center;
	gap: 0.9rem;
	padding: 0.5rem;
	border-radius: 3px;
	background: rgba(51, 32, 27, 0.28);
}
.qc-quote__item .qc-mini { width: 60px; }
.qc-quote__item a { color: var(--white); font-weight: 600; text-decoration: none; }
.qc-quote__item a:hover { text-decoration: underline; }
.qc-quote__item button {
	display: grid;
	place-items: center;
	width: 44px; height: 44px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--white);
	cursor: pointer;
}
.qc-quote__item button:hover { background: rgba(255, 255, 255, 0.16); }
.qc-motion .qc-quote__item.is-new { animation: qc-mount 640ms var(--ease-mount) both; }
.qc-motion .qc-quote__item.is-removing { animation: qc-unmount 260ms var(--ease-cut) both; }
.qc-quote__empty { margin-bottom: 1rem; padding: 1rem 1.1rem; border: 1px dashed rgba(255, 255, 255, 0.5); border-radius: 3px; }
.qc-quote__empty[hidden] { display: none; }
.qc-quote__empty a { color: var(--white); font-weight: 600; }

.qc-quote__fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1rem; }
@media (max-width: 600px) { .qc-quote__fields { grid-template-columns: 1fr; } }
.qc-field { display: grid; gap: 0.35rem; align-content: start; }
.qc-field--wide { grid-column: 1 / -1; }
.qc-field label { font-weight: 600; font-size: 0.95rem; }
.qc-field__opt { font-weight: 400; }
.qc-field__hint { font-size: 0.85rem; }
.qc-field input,
.qc-field textarea {
	width: 100%;
	min-height: 50px;
	padding: 0.75rem 0.9rem;
	border: 0;
	border-radius: 3px;
	background: rgba(255, 255, 255, 0.95);
	box-shadow: inset 0 1px 3px rgba(51, 32, 27, 0.25);
	color: var(--ink);
	font: 400 1rem/1.4 var(--f-text);
	transition: box-shadow var(--t-fast);
}
.qc-field textarea { resize: vertical; }
.qc-field input:focus,
.qc-field textarea:focus { outline: none; box-shadow: inset 0 1px 3px rgba(51, 32, 27, 0.25), 0 0 0 3px var(--ink), 0 0 0 6px var(--edge); }
.qc-field.has-error input,
.qc-field.has-error textarea,
.qc-quote__products.has-error textarea { box-shadow: inset 0 0 0 2px var(--error); }
.qc-field__error {
	justify-self: start;
	padding: 0.25rem 0.55rem;
	border-radius: 2px;
	background: var(--white);
	color: var(--error);
	font-size: 0.85rem;
	font-weight: 600;
}
.qc-field__error[hidden] { display: none; }

.qc-quote__summary { margin-bottom: 1.75rem; padding: 1rem 1.25rem; border-radius: 3px; background: var(--white); color: var(--ink); border-left: 5px solid var(--error); }
.qc-quote__summary[hidden] { display: none; }
.qc-quote__summary p { font-weight: 600; }
.qc-quote__summary ul { margin: 0.5rem 0 0; padding-left: 1.1rem; list-style: disc; }
.qc-quote__summary a { color: var(--error); }

.qc-quote__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.qc-quote .qc-btn--ink { min-height: 56px; padding-inline: 2em; }
.qc-btn__busy { display: none; }
.qc-btn.is-busy { pointer-events: none; }
.qc-btn.is-busy .qc-btn__busy {
	display: block;
	position: absolute;
	left: 0; bottom: 0;
	width: 30%;
	height: 3px;
	background: var(--edge);
	box-shadow: 0 0 10px var(--edge);
	animation: qc-busy 1s var(--ease-cut) infinite alternate;
}
@keyframes qc-busy { from { transform: translateX(-100%); } to { transform: translateX(340%); } }
.qc-quote__form-error { margin-top: 1rem; padding: 0.6rem 0.8rem; border-radius: 3px; background: var(--white); color: var(--error); font-weight: 600; }
.qc-quote__form-error[hidden] { display: none; }

.qc-quote__sent { display: flex; gap: 1.25rem; align-items: flex-start; margin-top: 2rem; padding: 1.75rem; border-radius: 3px; background: var(--white); color: var(--ink); }
.qc-quote__sent[hidden] { display: none; }
.qc-quote__sent-mark { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: var(--white); }
.qc-quote__sent-mark .qc-icon { width: 26px; height: 26px; stroke-dasharray: 20; }
.qc-motion .qc-quote__sent.is-fresh .qc-icon { animation: qc-draw 600ms var(--ease-out) 200ms both; }
@keyframes qc-draw { from { stroke-dashoffset: 20; } to { stroke-dashoffset: 0; } }
.qc-quote__sent-title { font: 400 1.7rem/1.2 var(--f-display); margin-bottom: 0.35rem; }
.qc-quote__sent .qc-link { display: inline-block; margin-top: 0.85rem; }
.qc-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- The office plate ---------- */

.qc-contact-card {
	position: sticky;
	top: calc(var(--hd) + 1.5rem);
	container-type: inline-size;
	padding: clamp(2rem, 3vw, 2.5rem);
	border-radius: 4px;
	background: linear-gradient(118deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.45) 45%, rgba(255, 255, 255, 0.65));
	box-shadow: inset 0 0 0 1px #fff, inset -3px -4px 0 rgba(235, 202, 180, 0.6), 14px 22px 36px -22px rgba(51, 32, 27, 0.4);
}
.qc-contact-card .qc-glass { display: none; }
.qc-contact-card .qc-bolts { --b: 13px; --o: 12px; }
.qc-contact-card__title { font-size: 1.7rem; margin-bottom: 1.25rem; }
.qc-contact-card__list { margin: 0; display: grid; }
.qc-contact-card__list > div { padding: 0.9rem 0; border-top: 1px solid var(--paper-line); }
.qc-contact-card__list dt { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--graphite); }
.qc-contact-card__list dd { margin: 0.3rem 0 0 1.75rem; overflow-wrap: anywhere; }
.qc-contact-card__list address { font-style: normal; margin-bottom: 0.35rem; }
.qc-contact-card__social { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--paper-line); font-weight: 600; }
.qc-contact-card__ship { margin-top: 1.25rem; color: var(--graphite); font-size: 0.9rem; }
@media (max-width: 960px) { .qc-contact-card { position: static; } }