/* v7 */
/* ============================================
   TS Homes — Mobile refinements (shared)
   Loaded after each page's inline styles.
   ============================================ */

/* Phone link shown only inside the mobile menu */
.ts-nav-phone { display: none; }

/* Header nav links & wordmark — always the brand's soft white,
   regardless of the page's generic link color */
.tsnav-link { color: #EDE8DC !important; }
.tsnav-link:hover { color: #D8CDBC !important; }

@media (max-width: 960px) {
  /* Bigger, easier tap target for the hamburger */
  .ts-menu-toggle { padding: 10px 14px; margin-right: -10px; font-size: 28px; }

  /* Mobile menu panel */
  .ts-navlinks { box-shadow: 0 22px 34px rgba(20, 16, 12, 0.28); }
  .ts-navlinks a { padding: 15px 26px; font-size: 21px; }

  /* Call link at the bottom of the mobile menu
     (replaces the hidden desktop phone number) */
  .ts-nav-phone {
    display: block;
    font-family: 'Jost', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 400;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    border-top: 1px solid rgba(255, 255, 255, 0.16);
    margin-top: 10px;
    padding-top: 18px !important;
    color: #EDE8DC;
  }
}

@media (max-width: 900px) {
  /* Two-column feature bands collapse to one column;
     order overrides (e.g. image-right rows) reset to DOM order */
  .ts-split { grid-template-columns: 1fr !important; }
  .ts-split > * { order: 0 !important; }

  /* Card grids */
  .ts-2col { grid-template-columns: 1fr !important; }
  .ts-3col { grid-template-columns: 1fr !important; }
  .ts-4col { grid-template-columns: 1fr 1fr !important; gap: 30px 24px !important; }
  .ts-5col { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Overlapping image stack (home approach band) needs room below,
     since the small detail image hangs past the container */
  .ts-imgstack { margin-bottom: 9%; }

  /* Home hero photo — on phones, let the photo display at its natural
     3:2 shape, full width, uncropped. No aspect-ratio dependency so it
     renders on every mobile browser. */
  .ts-photo-hero { height: auto !important; aspect-ratio: auto !important; }
  .ts-photo-hero img { height: auto !important; display: block; }

  /* Portfolio grid: two-up on tablets */
  #ts-proj-grid { grid-template-columns: 1fr 1fr !important; }

  /* Lightbox: keep arrows clear of the image */
  #lb figure { max-width: 84vw !important; }
  #lb img { max-height: 70vh !important; }
}

@media (max-width: 640px) {
  .ts-4col { grid-template-columns: 1fr !important; }

  /* Side-by-side form fields stack on small phones */
  .ts-formgrid { grid-template-columns: 1fr !important; }

  /* 16px inputs prevent iOS Safari from auto-zooming on focus */
  .ts-field { font-size: 16px !important; }

  /* Portfolio grid: single column on phones */
  #ts-proj-grid { grid-template-columns: 1fr !important; }
}

/* Safety net: the nav carries an inline display:flex for desktop layout.
   On phones it must stay hidden until the menu button opens it. */
@media (max-width: 960px) {
  .ts-navlinks { display: none !important; }
  .ts-navlinks.open { display: flex !important; }
}