/* TUOHAI contact page: 40/60 inquiry layout, contact details, form states, map teaser and pending-configuration notes. */

/* ---------- Contact page layout ---------- */
/* The form column carries the page, so it takes the larger share; the contact column is wide enough
   for its photo and details without competing with the form. The gap between them stays tight, so
   the two columns read as one block rather than two separate panels. */
.contact-split { display: grid; gap: clamp(18px, 2.2vw, 32px); grid-template-columns: minmax(0, 42fr) minmax(0, 58fr); align-items: start; }
.contact-side { display: grid; align-content: start; }
/* One card for the whole contact column: photo first, then the company details and contacts. */
.contact-card-panel { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.contact-body { display: grid; gap: 18px; padding: clamp(22px, 3vw, 28px); }
.contact-media { margin: 0; background: var(--color-primary-light); }
.contact-media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.contact-about { display: grid; gap: 6px; }
.contact-company { margin: 0; font-size: 19px; font-weight: 600; }
.contact-card-panel dl { display: grid; gap: 14px; margin: 0; }
.contact-item dd { margin: 0; }
.contact-note { margin: 0; padding-top: 18px; border-top: 1px solid var(--color-border); color: var(--color-text-secondary); font-size: 13.5px; }
.contact-col { display: grid; gap: 22px; align-content: start; }
.map-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
@media (max-width: 900px) {
    .contact-split { grid-template-columns: 1fr; }
    /* On small screens the contact card and the form come first, so the details are not pushed
       below a long form. */
    .contact-col, .contact-side { display: contents; }
    .contact-card-panel { order: 1; }
    .contact-form { order: 2; }
}

/* ---------- Inquiry form states ---------- */
.inquiry-form { display: grid; gap: 18px; }
.form-section-title { margin: 4px 0 0; font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-secondary); }
.field-error { min-height: 0; margin: 0; color: var(--color-error); font-size: 13px; }
.field-error:empty { display: none; }
.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--color-error); }
.field-help { margin: 0; color: var(--color-text-secondary); font-size: 13px; }
.required-note { margin: 0; color: var(--color-text-secondary); font-size: 13.5px; }
.required-note .req { color: var(--color-error); }
.inquiry-form label .req { color: var(--color-error); }
.form-extras { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.form-extras summary { padding: 16px 20px; font-size: 15.5px; font-weight: 600; cursor: pointer; list-style: none; }
.form-extras summary::-webkit-details-marker { display: none; }
.form-extras summary::after { content: "+"; float: right; font-size: 20px; font-weight: 400; line-height: 1; color: var(--color-primary); }
.form-extras[open] summary::after { content: "\2013"; }
.form-extras-body { padding: 0 20px 20px; }
.form-extras-hint { margin: 0 0 14px; color: var(--color-text-secondary); font-size: 13.5px; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; color: var(--color-text-secondary); }
.checkbox-row input { margin-top: 4px; flex: none; }
.checkbox-row--consent { color: var(--color-text); }
.form-privacy { display: grid; gap: 8px; }
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status--error { background: #FBEAE8; color: #7A1A13; }
.form-actions { display: grid; gap: 10px; }

/* ---------- Thank you page ---------- */
.thank-you { display: grid; gap: 18px; justify-items: start; max-width: 780px; margin: 0 auto; padding: clamp(48px, 8vw, 104px) 0; }
.thank-you__title { margin: 0; font-size: clamp(34px, 5.4vw, 58px); line-height: 1.15; letter-spacing: -0.01em; color: var(--color-primary); }
.thank-you__lead { margin: 0; font-size: 20px; line-height: 1.5; color: var(--color-text); }
.thank-you__note { margin: 0; font-size: 15px; line-height: 1.55; color: var(--color-text-secondary); }
.thank-you__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }

/* ---------- Map teaser and external link ---------- */
.map-zone { display: grid; gap: 16px; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: center; padding: clamp(20px, 3vw, 28px); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.map-teaser { position: relative; display: grid; place-items: center; min-height: 220px; padding: 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); background: var(--color-primary-light); text-align: center; }
.map-teaser p { margin: 0; max-width: 380px; color: var(--color-text-secondary); font-size: 14.5px; }
.map-frame { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.map-frame iframe { display: block; width: 100%; height: 340px; border: 0; }
.map-copy h2 { margin: 0 0 8px; }
.map-copy p { margin: 0 0 12px; color: var(--color-text-secondary); }
@media (max-width: 820px) {
    .map-zone { grid-template-columns: 1fr; }
    .map-frame iframe { height: 260px; }
}