/* Contact page — message form beside glass detail cards; studio rooms strip; imprint */

/* Two columns from 900px: form 1.2fr / details 1fr. The left column is form → repair callout → "Before you write",
   the right column is studios + direct; the two stacks end within a card of each other at every desktop width.
   On phones everything stacks in DOM order: form, studios, direct, repair callout, "Before you write". */
.contact { display: grid; gap: var(--s-3); }
.contact__col { min-width: 0; padding-bottom: var(--s-5); }
@media (min-width: 900px) {
  /* Row 3 is 1fr so a taller details column (spanning all rows) grows the last row, never the gaps between form, repair and help.
     Row gap matches the card stack (12px); the form → repair step keeps its wider 32px via the callout's margin. */
  .contact { grid-template-columns: 1.2fr 1fr; grid-template-rows: auto auto 1fr; grid-template-areas: "form side" "repair side" "help side"; gap: var(--s-3) var(--s-8); align-items: start; }
  .contact__col { grid-area: form; padding-bottom: 0; }
  .contact__side { grid-area: side; }
  .contact__repair { grid-area: repair; margin-top: calc(var(--s-6) - var(--s-3)); }
  .contact__help-card { grid-area: help; }
}
.contact__col-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--s-2) var(--s-4); margin-bottom: var(--s-5); }
.contact__col-hint { display: inline-flex; align-items: center; gap: 6px; }
.contact__col-hint svg { width: 13px; height: 13px; stroke: var(--lime); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Form ---- */
.contact__form { scroll-margin-top: calc(var(--page-top) + var(--s-4)); }
@media (max-width: 899.98px) { .contact__form { scroll-margin-top: var(--s-5); } }
.contact__form .field > label:not(.check) { display: inline-flex; align-items: center; gap: 6px; justify-self: start; }
.contact__form .field > label:not(.check)::after { content: ""; width: 4px; height: 4px; border-radius: 50%; background: var(--fg-3); opacity: 0; transition: opacity var(--t-fast); }
.contact__form .field.is-invalid > label:not(.check)::after { background: var(--coral); opacity: 1; }
.contact__form .check { align-items: flex-start; min-height: var(--tap); padding-block: var(--s-2); }
.contact__form .check__box { margin-top: 2px; }
.contact__form .check > span:last-child { padding-top: 1px; }
.contact__form .field.is-invalid .check__box { border-color: var(--coral); box-shadow: 0 0 0 4px rgb(255 92 57 / 0.15); }

/* Order number slot: appears only for Order and Repair topics (contact.js) */
.contact__order:not([hidden]) { animation: fieldIn var(--t-base) var(--ease-expo) both; }
@keyframes fieldIn { from { opacity: 0; transform: translateY(8px); } }

/* Message meta: hint left, live counter right */
.contact__meta { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); }
.contact__count { flex: none; color: var(--fg-3); transition: color var(--t-fast); }
.contact__count.is-near { color: var(--lime); }
.contact__count.is-full { color: var(--coral); }

.contact__actions { display: grid; gap: var(--s-4); align-items: center; margin-top: var(--s-2); }
@media (min-width: 640px) { .contact__actions { grid-template-columns: auto 1fr; } }
.contact__actions .btn { min-height: 50px; justify-self: start; }
.contact__note { font-size: var(--text-xs); color: var(--fg-3); max-width: 40ch; }

/* ---- Details column ---- */
.contact__side { display: grid; gap: var(--s-3); min-width: 0; }
.contact__card { display: grid; gap: var(--s-4); padding: var(--s-5); border-radius: var(--r-3); }
.contact__card-head { display: grid; gap: var(--s-2); }
.contact__card-head h2 { font-weight: 600; }
.contact__card-head .eyebrow { margin-bottom: var(--s-1); }
.contact__card p { max-width: 40ch; }

/* Studios list */
.contact__studios { display: grid; }
.contact__studio { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); padding-block: var(--s-4); border-top: 1px solid var(--line); }
.contact__studio:last-child { padding-bottom: 0; }
.contact__studio > svg { width: 18px; height: 18px; margin-top: 2px; stroke: var(--lime); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact__studio-body { display: grid; gap: var(--s-2); justify-items: start; min-width: 0; }
.contact__studio-top { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2); width: 100%; }
.contact__studio-top .mono { color: var(--fg); }
.contact__studio address { font-style: normal; font-size: var(--text-sm); color: var(--fg-2); line-height: 1.45; }
.contact__hours { display: inline-flex; align-items: center; gap: 6px; color: var(--fg-3); text-transform: none; letter-spacing: 0.02em; }
.contact__hours svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.contact__dir { min-height: var(--tap); }

/* Direct rows */
.contact__direct { display: grid; }
.contact__direct li { display: grid; grid-template-columns: 20px 1fr; gap: var(--s-3); padding-block: var(--s-3); border-top: 1px solid var(--line); }
.contact__direct li:last-child { padding-bottom: 0; }
.contact__direct li > svg { width: 18px; height: 18px; margin-top: 3px; stroke: var(--lime); fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.contact__direct li > div { display: grid; gap: 2px; min-width: 0; }
.contact__direct .mono { color: var(--fg-3); }
.contact__val { font-weight: 600; font-size: var(--text-base); letter-spacing: -0.01em; overflow-wrap: anywhere; display: inline-block; justify-self: start; }
/* mailto/tel links: a 44px tap box centred on the 1.5-line text, with the overshoot pulled back into the row so the rhythm is unchanged.
   The neighbours (mono label above, note below) are static text, so the full box is reachable. */
a.contact__val { position: relative; z-index: 1; display: inline-flex; align-items: center; min-height: var(--tap); margin-block: calc((var(--tap) - 1.5em) / -2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: transparent; transition: text-decoration-color var(--t-fast), color var(--t-fast); }
a.contact__val:hover { text-decoration-color: var(--lime); }
.contact__direct small { font-size: var(--text-sm); color: var(--fg-2); }

/* Help links: each row a full-width .link, arrow at the far edge */
.contact__help { display: grid; }
.contact__help li { border-top: 1px solid var(--line); }
.contact__help .link { width: 100%; justify-content: space-between; min-height: 56px; padding-block: var(--s-2); }
.contact__help-txt { display: grid; gap: 1px; min-width: 0; }
.contact__help-txt small { font-weight: 400; font-size: var(--text-xs); color: var(--fg-3); }
.contact__help .link:hover .contact__help-txt small { color: var(--fg-2); }

/* Repair callout */
.contact__card--repair { position: relative; overflow: hidden; border-color: rgb(216 255 63 / 0.35); background: linear-gradient(160deg, rgb(216 255 63 / 0.10), rgb(255 255 255 / 0.03) 55%); }
.contact__card--repair::before { content: ""; position: absolute; top: -40%; right: -30%; width: 60%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgb(216 255 63 / 0.22), transparent 65%); pointer-events: none; }
.contact__card--repair > * { position: relative; }
.contact__steps { display: grid; gap: var(--s-3); }
.contact__steps li { display: grid; grid-template-columns: 34px 1fr; gap: var(--s-3); align-items: start; }
.contact__step-n { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgb(216 255 63 / 0.5); color: var(--lime); font-size: 10px; }
.contact__steps strong { display: block; font-weight: 600; margin: 6px 0 2px; letter-spacing: -0.01em; }
/* Wide form column: the three steps read left to right */
@media (min-width: 1280px) {
  .contact__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); }
  /* align-content: start — the outer grid stretches the three li to one height; without it the shorter items spread the slack between number and title */
  .contact__steps li { grid-template-columns: 1fr; gap: var(--s-3); align-content: start; padding-top: var(--s-3); border-top: 1px solid rgb(216 255 63 / 0.25); }
  .contact__steps strong { margin-top: 0; }
  .contact__card--repair .contact__card-head p { max-width: 52ch; }
}
.contact__repair-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-4); margin-top: var(--s-1); }
.contact__repair-actions .btn, .contact__repair-actions .link { min-height: var(--tap); }
.contact__repair-actions .btn .ic { transform: none; }
.contact__repair-actions .btn:hover .ic { transform: rotate(-20deg); }

/* ---- Rooms strip ---- */
.contact__rooms { display: grid; gap: var(--s-4); }
@media (min-width: 720px) { .contact__rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); } }
.contact__room { display: grid; gap: var(--s-3); }
.contact__room:nth-child(2) { --d: 90ms; }
.contact__room:nth-child(3) { --d: 180ms; }
.contact__room .media { border-radius: var(--r-3); }
@media (max-width: 719.98px) { .contact__room .media { aspect-ratio: 16 / 9; } }
.contact__room .media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgb(9 9 11 / 0.55)); pointer-events: none; }
@media (hover: hover) { .contact__room:hover .media img { transform: scale(1.04); } }
.contact__room figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3); padding-inline: 4px; }
.contact__room figcaption .mono { color: var(--fg-3); }
.contact__room figcaption strong { font-weight: 600; font-size: var(--text-sm); letter-spacing: -0.01em; text-align: right; }

/* ---- Imprint ---- */
#imprint { scroll-margin-top: calc(var(--page-top) + var(--s-2)); }
.contact__imprint { display: grid; gap: var(--s-5); padding: var(--s-6) var(--s-5); border: 1px solid var(--line); border-radius: var(--r-3); background: var(--bg-2); }
@media (min-width: 900px) { .contact__imprint { grid-template-columns: 220px 1fr; gap: var(--s-7); padding: var(--s-7) var(--s-6); } }
.contact__imprint-head { display: grid; gap: var(--s-3); align-content: start; }
.contact__imprint-grid { display: grid; gap: var(--s-5); }
@media (min-width: 640px) { .contact__imprint-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .contact__imprint-wide { grid-column: 1 / -1; } }
@media (min-width: 1100px) { .contact__imprint-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.contact__imprint-grid > div { display: grid; gap: var(--s-2); align-content: start; min-width: 0; }
.contact__imprint-grid dt { color: var(--fg-3); }
.contact__imprint-grid dd { font-size: var(--text-sm); color: var(--fg-2); line-height: 1.55; max-width: 60ch; overflow-wrap: anywhere; }
.contact__imprint-grid dd strong { color: var(--fg); font-weight: 600; }
/* Email / phone: each on its own 44px line (no negative margins here — two stacked links would otherwise overlap each other's tap box) */
.contact__imprint-grid dd a.link--u { color: var(--fg); display: inline-flex; align-items: center; min-height: var(--tap); }
/* Dispute platform: a standalone link row under the sentence, so the 44px target never opens a gap inside the paragraph */
.contact__imprint-link { display: flex; width: fit-content; min-height: var(--tap); margin-top: var(--s-1); }