/*
 * Contact Us — mobile polish only
 * Source: html_maket/neweditsandmobile/jby-contact
 * Desktop stays in custom_yacht_style.css; header/footer not touched.
 * Breakpoints: 1024 / 680 / 600 / 560 (template).
 */

/* ---------- Tablet stack refinements (template ≤1024) ---------- */
@media (max-width: 1024px) {
  html:has(#jb_body.page-contact),
  html:has(#jb_body.page-contact) body {
    overflow-x: hidden;
  }

  /* Template keeps a 2-up field grid until 560; live had collapsed at 1024 */
  #jb_body.page-contact .fields {
    grid-template-columns: 1fr 1fr;
  }

  #jb_body.page-contact .ci-photo {
    width: 100%;
  }
}

/* ---------- Locations rail + type (template ≤680) ---------- */
@media (max-width: 680px) {
  #jb_body.page-contact .loc-grid {
    grid-template-columns: 1fr;
  }

  #jb_body.page-contact .ci-locations {
    padding: 44px 24px 0;
  }

  #jb_body.page-contact .loc-head h2 {
    font-size: 26px;
    line-height: 34px;
  }

  /* Horizontal scroll facets — edge-to-edge bleed like template */
  #jb_body.page-contact .loc-filter {
    gap: 24px;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin: 36px -24px 0;
    padding: 0 24px 2px;
  }

  #jb_body.page-contact .loc-filter::-webkit-scrollbar {
    display: none;
  }

  #jb_body.page-contact .loc-filter button {
    flex: 0 0 auto;
  }

  /* Template keeps details 2-col until 560 (live had collapsed at 680) */
  #jb_body.page-contact .ci-details {
    grid-template-columns: 1fr 1fr;
    gap: 20px 12px;
  }
}

/* ---------- MOBILE POLISH phones only (template ≤600) ---------- */
@media (max-width: 600px) {
  /* Form fields were ~35px tall: phone needs a real tap target */
  #jb_body.page-contact .field input[type="text"],
  #jb_body.page-contact .field input[type="email"],
  #jb_body.page-contact .field input[type="tel"],
  #jb_body.page-contact .ci-ms-control {
    min-height: 48px;
  }

  #jb_body.page-contact .field textarea {
    min-height: 120px;
  }

  #jb_body.page-contact .contact-card .send,
  #jb_body.page-contact .contact-card button[type="submit"] {
    height: auto;
    min-height: 52px;
  }
}

/* ---------- Narrow phone (template ≤560) ---------- */
@media (max-width: 560px) {
  #jb_body.page-contact .fields {
    grid-template-columns: 1fr;
  }

  #jb_body.page-contact .field,
  #jb_body.page-contact .field.full {
    grid-column: 1 / -1;
  }

  #jb_body.page-contact .ci-details {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  #jb_body.page-contact .ci-photo {
    height: auto;
    aspect-ratio: 652 / 367;
  }
}