/*!
 * مدد — صفحة تواصل معنا فقط (contact.html — P06)
 * البانر والأقسام من site.css، والحقول (jb-field، jb-error، jb-phone) من components.css.
 * هون: بطاقات طرق التواصل، وتخطيط النموذج وحالة الإرسال، واختصارات «إجابات أسرع». لا خرائط (D2-21).
 */

/* ===== طرق التواصل ===== */
.ct-ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-4); margin: 0; padding: 0; list-style: none; }
@media (max-width: 1024px) { .ct-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ct-ways { grid-template-columns: 1fr; } }
.ct-way { display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); padding: var(--sp-5); border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); box-shadow: var(--sh-xs); min-width: 0; }
.ct-way .jb-icon-tile { margin-block-end: var(--sp-2); }
.ct-way--wa .jb-icon-tile { background: rgba(var(--jb-primary-rgb), .12); }
.ct-way__title { margin: 0; font-size: 1.125rem; }
.ct-way__text { margin: 0; color: var(--jb-text-muted); font-size: var(--fs-sm); }
.ct-way__link { display: inline-flex; align-items: center; gap: .4rem; min-height: 44px; margin-block-start: auto; font-weight: 700; text-decoration: none; overflow-wrap: anywhere; }
.ct-way__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.ct-way__addr { display: flex; align-items: flex-start; gap: .4rem; margin: auto 0 0; padding-block-start: var(--sp-2); font-size: var(--fs-sm); font-weight: 600; }
.ct-way__addr .bi { color: var(--jb-primary); margin-block-start: .15rem; }

/* ===== النموذج ===== */
.ct-contact { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 1.5rem + 3vw, 4rem); align-items: start; }
@media (max-width: 1024px) { .ct-contact { grid-template-columns: 1fr; } }
.ct-contact__intro .jb-section__title, .ct-contact__intro .jb-section__lead { text-align: start; margin-inline: 0; }
.ct-contact__intro .jb-checklist { margin-block-start: var(--sp-5); }

.ct-form-card { padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-radius: var(--r-xl); background: var(--jb-surface); border: 1px solid var(--jb-border); box-shadow: var(--sh-sm); min-width: 0; }
.ct-form { display: grid; gap: var(--sp-5); }
.ct-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.ct-form__full { grid-column: 1 / -1; }
@media (max-width: 600px) { .ct-form__grid { grid-template-columns: 1fr; } }
.ct-form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3) var(--sp-4); }
.ct-form__foot .btn { display: inline-flex; align-items: center; gap: .45rem; }

.ct-done { display: grid; gap: var(--sp-3); justify-items: start; }
.ct-done:focus { outline: none; }
.ct-done__icon { background: var(--jb-st-completed-bg); color: var(--jb-st-completed); }
.ct-done__title { margin: 0; font-size: 1.25rem; }
.ct-done__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-block-start: var(--sp-2); }
.ct-done__actions .btn { display: inline-flex; align-items: center; gap: .4rem; }

/* ===== إجابات أسرع ===== */
.ct-shortcuts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); }
@media (max-width: 1024px) { .ct-shortcuts { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; } }
.ct-shortcut { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-radius: var(--r-lg); background: var(--jb-surface); border: 1px solid var(--jb-border); color: var(--jb-text); text-decoration: none; transition: border-color var(--mo-fast) var(--mo-ease), box-shadow var(--mo-fast) var(--mo-ease); }
.ct-shortcut:hover { border-color: var(--jb-primary); box-shadow: var(--sh-sm); }
.ct-shortcut__body { display: grid; gap: 2px; flex: 1; min-width: 0; }
.ct-shortcut__body b { font-size: 1.0625rem; }
.ct-shortcut__body small { color: var(--jb-text-muted); font-size: var(--fs-sm); }
.ct-shortcut__go { color: var(--jb-primary); flex: none; }