/* ===== CONTACT ===== */
#contact.section{ padding-block:28px 0; }

/* 1) Sarlavhalar qatori: chap “Bog‘lanish”, o‘ng “Kontaktlar” */
.contact-head{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  align-items: baseline;             /* bir chiziqda tekislash */
  gap:20px;
  margin-bottom:12px;
}
.contact-head .h2,
.contact-head .h3{ margin:0; line-height:1.15; }

/* 2) Kontent grid: chap forma + o‘ng kartalar */
.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap:20px;
  align-items:start;
}
.contact-grid > *{ min-width:0; min-height:0; } /* siqilishni oldini oladi */

/* 3) Forma kartasi */
.contact-wrap{
  display:flex; flex-direction:column; height:100%;
  padding:16px; border-radius:16px;
  border:1px solid rgba(195,154,111,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
}
.contact-form{ display:grid; grid-template-columns:1fr 1fr; gap:10px 12px; flex:1; }
.contact-form input[type="text"],
.contact-form input[type="tel"],
.contact-form input[type="email"],
.contact-form textarea{
  width:100%;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(195,154,111,.25);
  border-radius:10px;
  padding:10px 12px;
  color:var(--text); font:inherit; outline:none;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.contact-form textarea{ grid-column:1 / -1; min-height:120px; }
.contact-form input:focus, .contact-form textarea:focus{
  border-color:rgba(195,154,111,.55);
  box-shadow:0 0 0 3px rgba(195,154,111,.18);
  background:rgba(255,255,255,.06);
}
.contact-form .check{ display:flex; gap:8px; align-items:center; color:var(--muted); }
.contact-form .btn{ justify-self:end; margin-top:auto; width: fit-content; max-width: 100%; }
@supports not (width: fit-content){
  .contact-form .btn{ width: auto; }
}

/* 4) O‘ng tomondagi kartalar */
.contact-info-split{ display:flex; flex-direction:column; height:100%; }
.info-grid{ display:flex; flex-direction:column; gap:14px; }

.glass-mini{
  border:1px solid rgba(195,154,111,.25);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.03));
  border-radius:14px; padding:14px;
}

.info-card{
  display:grid; grid-template-columns:32px 1fr;
  gap:10px; align-items:start;
}
.info-title{ font-weight:800; color:var(--text); }
.link{ color:var(--muted); text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* Social */
.social-card{ display:flex; flex-direction:column; gap:10px; }
.social-title{ font-weight:700; color:var(--text); }
.socials{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.social-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:8px 10px; border-radius:10px;
  border:1px solid rgba(195,154,111,.25);
  background:rgba(255,255,255,.04);
  color:var(--text); text-decoration:none; font-size:.95rem;
  transition:background .18s, transform .1s;
}
.social-btn:hover{ background:rgba(255,255,255,.06); }
.social-btn:active{ transform:translateY(1px); }

/* Gold mask icons */
.info-icon{
  width:22px; height:22px; margin-top:2px;
  background:linear-gradient(180deg,#C39A6F,#b88f5f);
  -webkit-mask-position: center; -webkit-mask-repeat: no-repeat; -webkit-mask-size: contain;
  mask-position: center;         mask-repeat: no-repeat;         mask-size: contain;
  opacity:.95;
}
.ico-pin      { -webkit-mask-image:url("../../../public/icons/lucide/map-pin.svg"); mask-image:url("../../../public/icons/lucide/map-pin.svg"); }
.ico-phone    { -webkit-mask-image:url("../../../public/icons/lucide/phone.svg");   mask-image:url("../../../public/icons/lucide/phone.svg"); }
.ico-mail     { -webkit-mask-image:url("../../../public/icons/lucide/mail.svg");    mask-image:url("../../../public/icons/lucide/mail.svg"); }
.ico-instagram{ -webkit-mask-image:url("../../../public/icons/lucide/instagram.svg"); mask-image:url("../../../public/icons/lucide/instagram.svg"); }
.ico-telegram { -webkit-mask-image:url("../../../public/icons/lucide/send.svg");    mask-image:url("../../../public/icons/lucide/send.svg"); }
.ico-youtube  { -webkit-mask-image:url("../../../public/icons/lucide/youtube.svg"); mask-image:url("../../../public/icons/lucide/youtube.svg"); }
.ico-linkedin { -webkit-mask-image:url("../../../public/icons/lucide/linkedin.svg"); mask-image:url("../../../public/icons/lucide/linkedin.svg"); }

/* 5) Responsive */
@media (max-width:980px){
  /* Sarlavhalarni bir qatorda ushlash (short labels) */
  .contact-head{ display:flex; align-items:baseline; gap:12px; }
  .contact-head .h2{ white-space:nowrap; }
  .contact-grid{ grid-template-columns:1fr; }
}

/* Mobile headings order: hide second title in header; show title above info */
@media (max-width:980px){
  .contact-head .h2:nth-child(2){ display:none; }
  .mobile-info-title{ display:block !important; margin:12px 0 8px; }
}
@media (min-width:981px){ .mobile-info-title{ display:none !important; } }
@media (max-width:720px){
  .contact-form{ grid-template-columns:1fr; }
  .contact-form .btn{ justify-self:stretch; }
  .socials{ grid-template-columns:1fr; }
}

.contact-grid{
  display:grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 16px;
  align-items: stretch;
}
@media (max-width: 980px){
  .contact-grid{ grid-template-columns: 1fr; }
}

/* Forma elementlari katta sensor uchun qulay bo‘lsin */
.contact-form input, .contact-form textarea, .social-btn{
  min-height: 44px;           /* Apple HIG & Material tavsiyasi */
}

.socials{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px){
  .socials{ grid-template-columns: 1fr; }
}
