/* ============================================================
   Matrix Energy Partners — Mobile / Responsive Stylesheet
   Drop into every page: <link rel="stylesheet" href="mobile.css">
   ============================================================ */

/* ── TABLET & SMALL DESKTOP (≤860px) ── */
@media (max-width: 860px) {

  /* Notice / disclaimer bar */
  .notice-bar,
  .disclaimer-bar {
    padding: 10px 16px;
    font-size: 11px;
    letter-spacing: 1px;
  }

  /* Nav */
  nav {
    padding: 14px 20px !important;
    flex-wrap: wrap;
    gap: 10px;
  }
  .nav-logo img { height: 44px !important; }
  .nav-links {
    flex-wrap: wrap;
    gap: 8px 14px;
    width: 100%;
  }
  .nav-links a {
    font-size: 11px !important;
    letter-spacing: 1.5px !important;
  }

  /* ── INDEX: Hero ── */
  .hero {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 32px !important;
  }
  .hero h1 { font-size: 36px !important; }
  .hero-body { font-size: 19px !important; }
  .dan-photo { max-width: 200px; margin: 0 auto; display: block; }

  /* ── INDEX: Credentials bar ── */
  .cred-inner {
    grid-template-columns: 1fr 1fr !important;
    padding: 0 20px !important;
  }
  .cred-item {
    border-right: none !important;
    border-bottom: 1px solid rgba(196,162,74,0.2);
    padding: 14px 10px !important;
  }

  /* ── INNER PAGES: Page hero ── */
  .page-hero { padding: 48px 20px 40px !important; }
  .page-hero-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .page-hero-inner img { max-width: 180px; margin: 0 auto; display: block; }
  .page-hero h1 { font-size: 34px !important; }

  /* ── ABOUT: Content sections ── */
  .content-wrap { padding: 0 20px !important; }
  .bio-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    padding: 40px 0 32px !important;
  }
  .timeline { grid-template-columns: 1fr 1fr !important; }
  .tl-item {
    border-right: none !important;
    border-bottom: 1px solid var(--light-rule, #c8bea8);
    padding: 20px 0 !important;
  }
  .tl-item:last-child { border-bottom: none !important; }
  .two-col-section {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }
  .books-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
  }

  /* ── ABOUT: CTA band & footer ── */
  .cta-band { padding: 36px 20px !important; }
  .cta-band-inner {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 24px !important;
  }
  .btn-request { white-space: normal !important; }
  .page-footer {
    padding: 16px 20px !important;
    flex-direction: column !important;
    gap: 8px !important;
    text-align: center;
  }
  .footer-disclaimer {
    text-align: center !important;
    max-width: 100% !important;
  }

  /* ── OPPORTUNITY: Letter ── */
  .letter-wrap { padding: 32px 16px !important; }
  .letter { padding: 40px 20px !important; }

  /* ── CONTACT: Two-col form layout ── */
  .two-col {
    grid-template-columns: 1fr !important;
    padding: 40px 20px !important;
    gap: 36px !important;
  }
  .sidebar { position: static !important; top: auto !important; }
}

/* ── FORM ROW (≤560px) ── */
@media (max-width: 560px) {
  .form-row { grid-template-columns: 1fr !important; }
}

/* ── PHONE (≤480px) ── */
@media (max-width: 480px) {

  /* Hero */
  .hero { padding: 28px 16px !important; }
  .hero h1 { font-size: 30px !important; }
  .btn-request {
    width: 100% !important;
    text-align: center;
    padding: 16px 20px !important;
  }

  /* Credentials — single column */
  .cred-inner { grid-template-columns: 1fr !important; }

  /* Page hero headline */
  .page-hero h1 { font-size: 26px !important; }

  /* About: Timeline single column */
  .timeline { grid-template-columns: 1fr !important; }
  .bio-text p { font-size: 18px !important; }
  .fact-item { grid-template-columns: 80px 1fr !important; }

  /* Opportunity: Letter text */
  .letter p { font-size: 18px !important; line-height: 1.75 !important; }
  .letter .pullquote { font-size: 19px !important; padding-left: 16px !important; }

  /* Contact: Submit button */
  .submit-btn {
    font-size: 12px;
    padding: 16px 20px;
    letter-spacing: 0.12em;
  }
}