/* Termin (tm-): the page is built from the shared blocks (b-, site.css). These rules add only what the blocks and the
   site's .form styles do not have: the practice line in the opening, the single column of the form on its blush sheet,
   the validation lines, the select arrow, the send button, the side column and the contact list in the closing card. */

/* ---------- the opening: practice, address and the way to the phone on one line ---------- */
.tm-line { gap: .5rem 1.5rem; margin-top: 1.5rem; }
.tm-line .b-k { margin: 0; }
.tm-line address { color: var(--color-ink); }
.tm-line__call .ico { width: 1rem; height: 1rem; }

/* ---------- the form: one simple column (Name, E-Mail, topic, phone and time side by side, message, consent) ----------
   No sub-headings or hairlines, so it fits on about one and a half phone screens. */
.tm-form.form { gap: 1rem; }
.tm-form .form__row { gap: 1rem var(--gap); }
.tm-form .tm-pair { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: .75rem; }
.tm-form .field input, .tm-form .field select { min-height: 52px; }
.tm-form .field textarea { min-height: 6.5rem; }
.tm-form .opt { font-weight: 400; color: var(--color-ink-soft); }
.tm-form select {
  appearance: none; padding-right: 2.75rem; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238B3456' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-position: right .9rem center; background-size: 1.1rem; background-repeat: no-repeat;
}
@media (max-width: 899.98px) {
  /* phones and tablets: straight to the form, the photograph of the room stays for larger screens */
  .page-termin .b-open__art { display: none; }
  .tm-send .btn { width: 100%; justify-content: center; }
}
.tm-hint { margin: .1rem 0 0; max-width: 36rem; font-size: var(--fs-small); line-height: 1.45; color: var(--color-ink-soft); }

/* validation: after the first submit attempt (or once a field was left) an invalid field gets a red edge and its
   message line shows (each input names its line with aria-describedby). The red is the site's error colour. */
.tm-err { display: none; margin: 0; font-size: var(--fs-small); font-weight: 500; line-height: 1.45; color: #A0182F; }
.tm-form .field input:user-invalid { border-color: #A0182F; box-shadow: inset 3px 0 0 #A0182F; }
.tm-form .field:has(input:user-invalid) .tm-err { display: block; }
.tm-form .form-consent:has(input:user-invalid) input { outline: 2px solid #A0182F; outline-offset: 2px; }
.tm-form:has(.form-consent input:user-invalid) .tm-err--consent { display: block; margin-top: -.5rem; padding-left: calc(22px + .75rem); }

/* consent and send */
.tm-form .form-consent { max-width: 36rem; font-size: 1rem; }
.tm-send .btn { min-height: 56px; padding-inline: 1.75rem; }
/* the live region stays in the page (so it is announced) but takes no room while empty */
.tm-form .form__status:empty { min-height: 0; margin: 0; }
.tm-form .form__status:not(:empty) { margin-top: -.25rem; }
.tm-form .form__status.is-error { padding: .15rem 0 .15rem 1rem; border-left: 3px solid #A0182F; }

/* ---------- the side column: the emergency note, then the process ---------- */
.tm-side > * + * { margin-top: 2.5rem; }
.tm-next .b-h3 + .b-rows { margin-top: 1rem; }
.tm-next .b-rows { padding: 0; list-style: none; }
.tm-next .b-row > strong { display: block; font-weight: 500; }
.tm-next .b-row > span { display: block; color: var(--color-ink-soft); }

/* ---------- the contact list in the closing card (dark card: cream text, light rules) ----------
   Label above the value on phones, so a long e-mail address keeps one line; beside it from 480. */
.tm-reach { margin: 1.25rem 0 0; max-width: 34rem; }
.tm-reach > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; padding: .55rem 0; border-top: 1px solid rgb(245 238 232 / .2); }
.tm-reach dt { font-size: var(--fs-small); color: rgb(245 238 232 / .72); }
.tm-reach dd { margin: 0; font-size: 1.0625rem; color: var(--color-cream); overflow-wrap: anywhere; }
.tm-reach dd a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-cream); text-decoration: underline 1px; text-underline-offset: .2em; }
@media (min-width: 480px) { .tm-reach > div { grid-template-columns: 7.5rem minmax(0, 1fr); align-items: center; gap: .5rem; min-height: 2.75rem; padding: 0; } }