/* ============================================================
   Reliance Mortgage — Mobile Responsive Layer
   ------------------------------------------------------------
   This file does NOT modify style.css or any HTML/JS.
   Load it AFTER css/style.css (and after any inline <style>
   blocks) on every page so these rules win the cascade:

   <link rel="stylesheet" href="css/style.css">
   <link rel="stylesheet" href="css/mobile-responsive.css">

   Everything below only fires inside the media queries, so
   desktop/tablet layout is completely unaffected.
   ============================================================ */

/* ---------- Tablet / small laptop (≤ 992px) ---------- */
@media (max-width: 992px) {
  .container { padding: 0 24px; }
  section { padding: 72px 0; }
  .hero { padding: 72px 0 120px; }
}

/* ---------- Tablet / large phone (≤ 768px) ---------- */
@media (max-width: 768px) {

  /* Header */
  .site-header .container { padding-top: 12px; padding-bottom: 12px; gap: 12px; }
  .mark.mark--header { height: 52px; }
  .brand-text .name { font-size: 0.92rem; }
  .brand-text .tag { font-size: 0.6rem; }
  .header-actions { gap: 10px; }
  .header-actions a.icon { font-size: 1rem; }

  /* Mobile nav dropdown (partials.js sets these as inline styles when
     toggled — !important is required here to restyle them to match
     the site's navy/gold theme instead of the hard-coded fallback color) */
  #nav-links {
    background: var(--teal-deep) !important;
    box-shadow: 0 12px 24px rgba(0,0,0,.25);
    z-index: 150;
  }
  #nav-links a { color: var(--paper); display: block; padding: 10px 0; }
  #nav-links a:hover,
  #nav-links a[aria-current="page"] { border-bottom-color: var(--gold); }

  /* Hero */
  .hero { padding: 56px 0 96px; text-align: left; }
  .hero h1 { font-size: clamp(1.9rem, 8vw, 2.6rem); max-width: 100%; }
  .hero .lede { padding: 18px 20px; font-size: 0.96rem; max-width: 100%; }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }

  /* Generic sections */
  section { padding: 56px 0; }
  .section-head { margin-bottom: 36px; }
  .section-head h2 { font-size: clamp(1.5rem, 6vw, 2rem); }

  /* Two/three-column grids that don't already collapse below 900px */
  .why-grid,
  .offer-grid,
  .trust-grid,
  .fee-grid,
  .brokers-grid,
  .story-columns,
  .calc-wrap,
  .reviews-grid,
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 32px;
  }

  /* Story / about page */
  .story-columns { text-align: center; }
  .story-photo { margin: 0 auto; }

  /* Team */
  .team-grid { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; }
  .team-card .photo { width: 120px; height: 120px; font-size: 1.5rem; }

  /* Values */
  .values-section { padding: 64px 0 80px; }
  .values-grid { grid-template-columns: 1fr; max-width: 420px; }
  .value-photo { height: 130px; }

  /* Forms */
  .form-panel { padding: 28px 22px; }
  .field-row { grid-template-columns: 1fr; }

  /* Calculator */
  .calc-card { padding: 24px 20px; }
  .results-grid { grid-template-columns: 1fr 1fr; gap: 12px; }

  /* Reviews */
  .review-summary { padding: 22px 18px; }

  /* Map */
  .map-frame { height: 300px; }

  /* Footer */
  .footer-brand { text-align: left; }
  .footer-brand .footer-links,
  .footer-links { justify-content: flex-start; }
  .mark.mark--footer { margin-left: 0; }

  /* Chat bubble */
  .chat-bubble { right: 16px; bottom: 16px; }
}

/* ---------- Phones (≤ 600px) ---------- */
@media (max-width: 600px) {
  .container { padding: 0 18px; }

  h1 { font-size: clamp(1.7rem, 9vw, 2.2rem); }
  h2 { font-size: clamp(1.35rem, 7vw, 1.8rem); }

  .btn { width: 100%; padding: 14px 20px; }
  .btn-block { width: 100%; }

  /* Service cards */
  .card-row,
  .services-carousel .card-row { grid-template-columns: 1fr; }
  .services-carousel .service-card { flex: 0 0 84vw; width: 84vw; }

  /* Process steps */
  .process-item { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; }
  .process-item .num { font-size: 1.4rem; }

  /* Values grid single card width */
  .values-grid { max-width: 100%; }

  /* Results grid stacks on very narrow phones */
  .results-grid { grid-template-columns: 1fr; }

  /* Pullquote */
  .pullquote { padding: 24px 22px; font-size: 1rem; }

  /* Fee / trust / brokers cards */
  .fee-card, .trust-copy, .brokers-copy { text-align: left; }
  .trust-badge { position: static; margin-top: -32px; margin-left: 16px; display: inline-block; }

  /* Chat bubble: collapse the text pill, keep just the round button */
  .chat-bubble .pill { display: none; }

  /* Footer links wrap tighter */
  .footer-links a { padding: 10px 16px; font-size: 0.8rem; }
}

/* ---------- Small phones (≤ 380px) ---------- */
@media (max-width: 380px) {
  .container { padding: 0 14px; }
  .hero { padding: 44px 0 80px; }
  .hero h1 { font-size: 1.6rem; }
  .brand-text .tag { display: none; }
  .mark.mark--header { height: 42px; }
  .calc-actions { flex-direction: column; }
  .calc-actions .btn { width: 100%; }
}

/* ---------- Respect reduced motion on mobile too ---------- */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .value-card { animation: none !important; }
}