/* SecureHills — mobile responsiveness only. All rules are inside media queries,
   so desktop (>768px) is completely unchanged. Loaded LAST so it wins on phones. */

/* ============ Universal overflow guard (safe on every width) ============ */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* ============ Tablet & below (<= 768px) ============ */
@media (max-width: 768px) {
  /* Collapse any hard 2/3/4-col grids to a single column */
  [style*="grid-template-columns: repeat(4"],
  [style*="grid-template-columns: repeat(3"],
  [style*="grid-template-columns: repeat(2"],
  [style*="grid-template-columns:repeat(4"],
  [style*="grid-template-columns:repeat(3"],
  [style*="grid-template-columns:repeat(2"] { grid-template-columns: 1fr !important; }

  /* Two-column flex/grid content blocks stack */
  [style*="grid-template-columns: 1.6fr"],
  [style*="grid-template-columns: 1.4fr"],
  [style*="grid-template-columns: 1.3fr"],
  [style*="grid-template-columns: 1.2fr"],
  [style*="grid-template-columns: 1.1fr"],
  [style*="grid-template-columns: 1.05fr"],
  [style*="grid-template-columns: 1fr 360px"],
  [style*="grid-template-columns: 1fr 340px"],
  [style*="grid-template-columns: 2fr"],
  [style*="grid-template-columns: 0.8fr"],
  [style*="grid-template-columns: 300px"],
  [style*="grid-template-columns: 200px"] { grid-template-columns: 1fr !important; }

  /* Ease big section padding */
  section { padding-left: 18px !important; padding-right: 18px !important; }
}

/* ============ Phones (<= 640px) ============ */
@media (max-width: 640px) {
  /* Section vertical rhythm a touch tighter */
  section { padding-top: 48px !important; padding-bottom: 48px !important; }

  /* Display headings scale down so they never clip */
  h1 { font-size: clamp(28px, 8.5vw, 44px) !important; line-height: 1.12 !important; }
  h2 { font-size: clamp(24px, 6.5vw, 36px) !important; line-height: 1.15 !important; }

  /* Finger-friendly tap targets */
  button, a[role="button"], .sh-poppins-btn { min-height: 44px; }

  /* Gallery / masonry auto-rows shrink */
  [style*="grid-auto-rows: 200px"] { grid-auto-rows: 150px !important; }
  [style*="grid-auto-rows: 170px"] { grid-auto-rows: 140px !important; }

  /* Gallery tiles that span 2 columns become white in a 1-col grid -> force span 1 */
  [style*="grid-column: span 2"] { grid-column: span 1 !important; }

  /* Any element that hard-codes a min-width wider than a phone */
  [style*="min-width: 620px"], [style*="min-width: 720px"], [style*="minWidth: 620"] { min-width: 0 !important; }

  /* Gallery page grid: 4-col masonry -> single column, natural tile height */
  [style*="grid-template-columns: repeat(4, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: repeat(3, 1fr)"] { grid-template-columns: 1fr !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: 1fr !important; }
  /* Gallery/masonry tiles: give each a real height instead of relying on auto-rows */
  .sh-zoom, .sh-zoom-img { width: 100% !important; }
  [style*="grid-auto-rows"] > * { min-height: 200px !important; }
  [style*="grid-auto-rows"] { grid-auto-rows: auto !important; }
  /* Logo: never shrink out of view on phones */
  img[alt*="logo"], img[alt*="Logo"] { height: 44px !important; width: auto !important; max-width: none !important; }
}

/* ============ Targeted phone fixes (<= 640px) ============ */
@media (max-width: 640px) {
  /* Hero search: force fields to stack, hide vertical dividers, kill overlap */
  .sh-search-row { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .sh-search-row > div { width: 100% !important; flex: none !important; min-width: 0 !important; padding: 10px 12px !important; border: 1px solid var(--border-hairline); border-radius: var(--radius-sm); }
  .sh-search-row > div[style*="width: 1px"] { display: none !important; height: 0 !important; }
  .sh-search-row .sh-poppins-btn { width: 100% !important; justify-content: center !important; }
  .sh-search-widget { max-width: 100% !important; }

  /* Hero image grid (1fr 1fr, fixed height) -> single column, natural height */
  [style*="grid-template-columns: 1fr 1fr"][style*="height: 460"],
  [style*="grid-template-columns: 1fr 1fr"][style*="grid-template-rows"] { grid-template-columns: 1fr !important; height: auto !important; grid-template-rows: auto !important; }

  /* Image tiles that rely on height:100% collapse to 0 once their grid is auto —
     give them a real height on phones so photos stay visible. */
  [style*="grid-template-columns: 1fr 1fr"][style*="height: 460"] > div,
  [style*="grid-template-columns: 1fr 1fr"][style*="grid-template-rows"] > div { height: 200px !important; min-height: 200px !important; }
  [style*="height: 100%"][style*="aspect-ratio: auto"] { height: 100% !important; min-height: 180px !important; }

  /* Detail-page photo grid (2fr 1fr 1fr, fixed 332px) -> single column, real tile heights */
  [style*="grid-template-columns: 2fr 1fr 1fr"] { grid-template-columns: 1fr !important; grid-template-rows: auto !important; height: auto !important; }
  [style*="grid-template-columns: 2fr 1fr 1fr"] > div { height: 200px !important; min-height: 200px !important; grid-row: auto !important; }

  /* Newsletter box: never exceed viewport, input+button stack */
  .sh-newsletter-box { max-width: 100% !important; }
  .sh-newsletter-box [style*="display: flex"][style*="gap: 10px"] { flex-direction: column !important; }
  .sh-newsletter-box input { width: 100% !important; }
  .sh-newsletter-box button { width: 100% !important; }
}

/* ============ Small phones (<= 400px) ============ */
@media (max-width: 400px) {
  section { padding-left: 14px !important; padding-right: 14px !important; }
  h1 { font-size: clamp(24px, 8vw, 34px) !important; }
}