/* Contact page — builds on base.css (header/footer) + work.css (.page/.section-head grid). */

/* auto-fit بدل عمودين ثابتين — أي عدد عناصر بمصفوفة contactPage.methods (data.js) بيترتب صح */
.contact-methods{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin:0 0 80px}
.contact-card{
  display:flex;flex-direction:column;gap:14px;padding:32px;border-radius:var(--radius);
  color:inherit;transition:transform .35s var(--ease),border-color .35s;
}
.contact-card:hover{transform:translateY(-6px);border-color:rgba(226,185,97,.48)}
.contact-card .icon{width:50px;height:50px;border-radius:15px;display:grid;place-items:center;background:linear-gradient(145deg,rgba(226,185,97,.22),rgba(226,185,97,.06));border:1px solid rgba(226,185,97,.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 8px 20px rgba(0,0,0,.25)}
.contact-card .icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.contact-card h3{margin:0;font-size:19px}
.contact-card p{margin:0;color:var(--text-muted);font-size:16px;line-height:1.8}
.contact-card .contact-value{color:var(--gold-text);font-weight:700;font-size:15px;margin-top:auto}

.contact-process-head{margin-top:10px}
/* auto-fit بدل 3 أعمدة ثابتة — أي عدد عناصر بمصفوفة contactPage.process (data.js) بيترتب صح */
.contact-process-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:70px}
.contact-step{padding:26px;border-radius:18px}
.contact-step span{font:800 32px/1 Manrope;color:rgba(var(--step-num-rgb),var(--step-num-a3))}
.contact-step h3{margin:18px 0 7px;font-size:16px}
.contact-step p{margin:0;color:var(--text-muted);font-size:13px;line-height:1.8}

@media(max-width:980px){
  .contact-methods{grid-template-columns:1fr;margin-bottom:56px}
  .contact-process-grid{grid-template-columns:1fr;margin-bottom:50px}
}