/* Contact · ATHAR — page layout. Logical properties only.
   Simple page (Oct 2026): one screen. The invitation, our address and the way in for companies on one side,
   the short form on the other (so the form starts on the first screen), then one next step. */

/* the dateline sits over the form column, like the photo column of the shared hero contract */
.contact-hero { padding-block-end: clamp(3rem, 6vw, 5rem); }
.contact-hero .display { max-width: 12ch; }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  grid-template-areas: "intro form" "aside form";
  grid-template-rows: auto 1fr;
  column-gap: var(--hero-gap); row-gap: clamp(2rem, 3.5vw, 3rem);
}
.contact-intro { grid-area: intro; padding-block-start: clamp(0rem, 2vw, 2rem); }
.contact-intro .label { margin-block-end: 1.1rem; }
.contact-intro .lead { max-width: 34ch; }
.contact-form-wrap { grid-area: form; scroll-margin-top: calc(var(--header-h) + 1rem); }
.contact-aside { grid-area: aside; align-self: start; display: grid; gap: 1.25rem; max-width: 640px; }

/* ---------- form ---------- */
.contact-form { display: grid; gap: 1.25rem; padding: clamp(1.5rem, 2.6vw, 2.25rem); }
.form-head { display: grid; gap: .3rem; padding-block-end: 1rem; border-block-end: 1px solid var(--line); }
.form-head .h3 { color: var(--athar-brown); }
html[lang="ar"] .form-head .h3 { font-family: var(--font-arabic-display); font-weight: 700; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ltr-input { direction: ltr; }
html[dir="rtl"] .ltr-input { text-align: end; }
html[dir="rtl"] .ltr-input::placeholder { text-align: end; }
.contact-form .textarea { min-height: 7.5rem; }
.contact-form .chips { gap: .5rem; }
.contact-form .chip .ms { font-size: 1.2rem; }
.contact-form .chip[aria-checked="true"] .ms { color: var(--athar-cream); }
.topic-hint { font-size: .9375rem; color: var(--athar-green); }
html[lang="ar"] .topic-hint { font-size: 1rem; }
.topic-hint:has(> span:not([hidden])) { padding: .75rem 1rem; border-radius: 14px; background: var(--athar-sage); }
.form-submit { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; padding-block-start: .25rem; }
.preview-note { display: flex; gap: .5rem; align-items: flex-start; flex: 1; min-width: 200px; }
.preview-note .ms { font-size: 1.15rem; color: var(--athar-brown); }

/* ---------- confirmation ---------- */
.contact-done { display: grid; justify-items: start; gap: .75rem; padding: clamp(1.75rem, 3.5vw, 3rem); }
.contact-done:focus { outline: none; }
.contact-done:focus-visible { outline: 3px solid var(--athar-green); outline-offset: 3px; }
.contact-done .disc { margin-block-end: .75rem; }
.contact-done .rule { margin-block: .5rem 1rem; }
.contact-done .body-lg a { color: var(--athar-green); font-weight: 700; }
.done-actions { margin-block-start: 1.25rem; }

/* ---------- beside the invitation: the address, and the way in for companies ---------- */
.contact-details { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1rem 1.5rem; }
.contact-details li { display: flex; align-items: center; gap: .9rem; }
.contact-details .t { display: grid; gap: .1rem; }
.contact-details .k { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--athar-brown); }
html[lang="ar"] .contact-details .k { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.contact-details .t > :last-child { font-weight: 700; color: var(--athar-green); }
.contact-details a { text-decoration: none; }
.contact-details a:hover { text-decoration: underline; text-underline-offset: 4px; }

.contact-companies { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding-block: 1.25rem; text-decoration: none; color: inherit; transition: transform .25s var(--ease), box-shadow .25s; }
.contact-companies .t { display: grid; gap: .2rem; }
.contact-companies strong { color: var(--athar-green); font-weight: 800; font-size: 1.125rem; }
html[lang="ar"] .contact-companies strong { font-family: var(--font-arabic-display); font-weight: 700; }
.contact-companies .t > span { color: var(--muted); font-size: .9375rem; }
html[lang="ar"] .contact-companies .t > span { font-size: 1rem; line-height: 1.7; }
.contact-companies .go { color: var(--athar-brown); font-size: 1.4rem; }
.contact-companies:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(56, 40, 20, .1); }

/* ---------- the next step, closing the page ---------- */
.contact-next { margin-block-start: clamp(3rem, 6vw, 4.5rem); }

/* ---------- responsive ---------- */
/* a narrow form column: name and email one above the other */
@media (min-width: 961px) and (max-width: 1240px) {
  .form-row { grid-template-columns: 1fr; }
}
/* one column, the form right after the invitation */
@media (max-width: 960px) {
  .contact-grid { grid-template-columns: 1fr; grid-template-areas: "intro" "form" "aside"; grid-template-rows: none; }
  .contact-intro { padding-block-start: 0; }
  .contact-aside { max-width: none; }
}
@media (max-width: 620px) {
  .form-row { grid-template-columns: 1fr; }
  .form-submit .btn, .done-actions .btn { flex: 1 1 100%; }
  .contact-form .chips .chip { flex: 1 1 auto; justify-content: center; }
}