/* ==========================================================================
   Cyber City · the contact page (page-contact.php, assets/js/contact.js)
   Talk to a person: the three ways on the dark panel (the call first, the main action), the message form, the store,
   quick answers. The cards carry the shared light that follows the mouse (spot.css).
   Same rules as every sheet of the theme: tokens only, classes start with ecc- (or is-).
   ========================================================================== */

.ecc-ct { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--ecc-gap); }
.ecc-ct > * { grid-column: 1 / -1; min-width: 0; }
.ecc-ct__label { display: flex; align-items: center; gap: var(--ecc-s-2); margin: 0; }

/* ---- talk to a person: the words, then the three ways ---- */
.ecc-ct__head { display: grid; gap: var(--ecc-s-6); padding-top: var(--ecc-s-7); padding-bottom: var(--ecc-s-6); }
.ecc-ct__say { display: grid; gap: var(--ecc-s-4); align-content: end; }
.ecc-ct__title { max-width: 10em; margin: 0; text-wrap: balance; }
.ecc-ct__lead { max-width: 30em; margin: 0; }
.ecc-ct__now { display: inline-flex; align-items: center; gap: var(--ecc-s-2); justify-self: start; margin: 0; color: var(--ecc-ink-2); }
.ecc-ct__dot { width: var(--ecc-s-2); height: var(--ecc-s-2); background: var(--ecc-line-strong); }
.ecc-ct__now.is-open .ecc-ct__dot { background: var(--ecc-lime); box-shadow: var(--ecc-lime-edge); }
.ecc-ct__now.is-open { color: var(--ecc-ink); }

.ecc-ct__ways { display: grid; gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-ct__way {
  display: grid; grid-template-rows: auto auto 1fr auto auto; gap: var(--ecc-s-2); align-content: start;
  padding: var(--ecc-s-5); border-radius: var(--ecc-r); background-color: var(--ecc-surface-2);
}
.ecc-ct__icon { display: grid; color: var(--ecc-lime); }
.ecc-ct__wayname { margin: 0; color: var(--ecc-ink-2); }
.ecc-ct__big { margin: 0; font-size: var(--ecc-t-h2); font-weight: var(--ecc-fw-display); line-height: var(--ecc-lh-heading); color: var(--ecc-ink); overflow-wrap: anywhere; }
.ecc-ct__number { display: inline-flex; align-items: center; min-height: var(--ecc-hit); color: inherit; text-decoration: none; white-space: nowrap; } /* read in one piece; a 44px target */
.ecc-ct__number:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
.ecc-ct__waysay { margin: 0; color: var(--ecc-ink-2); }
.ecc-ct__go { justify-self: start; gap: var(--ecc-s-2); margin-top: var(--ecc-s-2); }
/* the call is the main action: its card is the wide one, the number on one line, the button beside it */
@media (min-width: 480px) { .ecc-ct__way--call .ecc-ct__big { font-size: var(--ecc-t-h1); } }
@media (min-width: 761px) {
  .ecc-ct__ways { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ecc-ct__way--call { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto auto; column-gap: var(--ecc-s-5); }
  .ecc-ct__way--call > * { grid-column: 1; }
  .ecc-ct__way--call .ecc-ct__go { grid-column: 2; grid-row: 3 / span 2; align-self: end; margin-top: 0; }
  .ecc-ct__ways > :last-child:nth-child(2) { grid-column: 1 / -1; } /* without the message form, the visit is wide too */
}
@media (min-width: 1181px) {
  .ecc-ct__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: stretch; padding-top: var(--ecc-s-8); padding-bottom: var(--ecc-s-7); }
  /* the label level with the top of the call card, the words at the foot, level with the last card */
  .ecc-ct__say { grid-template-rows: 1fr auto auto auto; }
  .ecc-ct__say > .ecc-ct__label { align-self: start; }
  .ecc-ct__way { padding: var(--ecc-s-6); }
  .ecc-ct__way--call .ecc-ct__big { font-size: var(--ecc-t-display); }
}

/* ---- write to us ---- */
.ecc-ct__write { display: grid; gap: var(--ecc-s-6); scroll-margin-top: var(--ecc-s-8); }
.ecc-ct__writesay { display: grid; gap: var(--ecc-s-4); align-content: start; }
.ecc-ct__writesay > * { margin: 0; }
.ecc-ct__writelead { max-width: 30em; color: var(--ecc-ink-2); }
.ecc-ct__form { display: grid; gap: var(--ecc-s-4); }
.ecc-ct__form[hidden], .ecc-ct__done[hidden] { display: none; }
.ecc-ct__pair { display: grid; gap: var(--ecc-s-4); }
.ecc-ct__trap { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ecc-ct__done { display: grid; gap: var(--ecc-s-3); justify-items: start; padding: var(--ecc-s-4) 0; }
.ecc-ct__done p { margin: 0; }
.ecc-ct__done:focus { outline: none; }
.ecc-ct__write .ecc-alert { margin-bottom: var(--ecc-s-4); }
@media (min-width: 761px) { .ecc-ct__pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1181px) { .ecc-ct__write { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ---- the store, then quick answers ---- */
.ecc-ct__store { scroll-margin-top: var(--ecc-s-8); }
.ecc-ct__quick { display: grid; gap: var(--ecc-s-4); }
.ecc-ct__links { display: grid; gap: var(--ecc-gap); margin: 0; padding: 0; list-style: none; }
.ecc-ct__link {
  display: flex; align-items: center; gap: var(--ecc-s-3); min-height: var(--ecc-hit); padding: var(--ecc-s-4);
  border-radius: var(--ecc-r-sm); background-color: var(--ecc-surface-2); color: var(--ecc-ink); text-decoration: none; font-weight: var(--ecc-fw-medium);
}
.ecc-ct__link span { flex: 1; }
.ecc-ct__link .ecc-icon:first-child { color: var(--ecc-spark); }
.ecc-ct__link:focus-visible { outline: var(--ecc-focus-ring); outline-offset: var(--ecc-focus-offset); }
@media (min-width: 761px) { .ecc-ct__links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }