/* ============================================================
   MOBILE FIXES — Overlay stylesheet
   Created: Feb 21 2026
   Purpose: Fix mobile responsiveness issues found via Playwright QA
   Load AFTER components.css — overrides only, no base changes
   ============================================================ */

/* ---- TABLET (max 1024px) ---- */
@media (max-width: 1024px) {

  /* Featured logos — center on tablet */
  .featured-logos,
  .featured-logos-row {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 1.5rem 2.5rem !important;
  }

  /* Get-a-Quote stats grid — 2x2 instead of cramped 4-across */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .stat-item {
    text-align: center;
    padding: 0.75rem 0.5rem;
  }

  /* Team grid — 2 per row on tablet */
  .team-grid {
    gap: 1.5rem;
  }

  .team-card {
    min-width: 240px;
  }
}

/* ---- MOBILE (max 767px) ---- */
@media (max-width: 767px) {

  /* Prevent horizontal overflow globally */
  html, body {
    overflow-x: hidden;
  }

  /* ---- HOMEPAGE ---- */

  /* Hero action cards — more breathing room between stacked cards */
  .hero .grid--3,
  .hero .grid--3-cards {
    gap: 1rem;
  }

  .hero .grid--3 > *,
  .hero .grid--3-cards > * {
    padding: 1.25rem;
  }

  /* Hero buttons — stack vertically on mobile */
  .hero__buttons,
  .hero .btn + .btn {
    margin-left: 0;
  }

  .hero__buttons {
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
  }

  .hero__buttons .btn {
    width: 100%;
    text-align: center;
  }

  /* Featured logos — symmetric 2x2 grid on mobile */
  .featured-logos,
  .featured-logos-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.25rem 1rem !important;
    justify-items: center !important;
    align-items: center !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  .featured-logos img,
  .featured-logos-row img {
    height: 28px !important;
    width: auto !important;
    max-width: 140px;
  }

  /* Note buyers section — tighter on mobile */
  .note-buyers__stats,
  .stats {
    flex-direction: column;
    gap: 1rem;
    align-items: center;
  }

  /* ---- GET-A-QUOTE PAGE ---- */

  /* Stats bar — stack 2x2 on mobile */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .stat-item {
    text-align: center;
    padding: 0.75rem 0.25rem;
  }

  .stat-number {
    font-size: 1.5rem;
  }

  .stat-label {
    font-size: 0.75rem;
  }

  /* ---- SELL MORTGAGE NOTE / CALCULATOR ---- */

  /* Calculator inputs — full width on mobile */
  .calculator-form,
  .calculator__form {
    padding: 1rem;
  }

  .calculator-form select,
  .calculator-form input,
  .calculator__form select,
  .calculator__form input,
  .form-group select,
  .form-group input[type="text"],
  .form-group input[type="number"] {
    width: 100%;
    min-width: 0;
    font-size: 16px; /* Prevents iOS zoom on input focus */
    padding: 0.75rem;
  }

  /* Calculator grid — single column on mobile */
  .calculator-grid,
  .calculator__grid {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  /* Calculator result */
  .calculator__result,
  .calculator-result {
    padding: 1.25rem;
    text-align: center;
  }

  .calculator__amount {
    font-size: 1.75rem;
  }

  /* ---- ABOUT PAGE ---- */

  /* Team cards — slightly smaller photos on mobile */
  .team-card img,
  .team-card__photo {
    max-height: 280px;
    object-fit: cover;
  }

  .team-card {
    max-width: 100%;
  }

  .team-card__name {
    font-size: 1.1rem;
  }

  .team-card__title {
    font-size: 0.85rem;
  }

  /* Team modals — full screen on mobile */
  .team-modal__content,
  .modal-content {
    width: 95%;
    max-height: 90vh;
    margin: 5vh auto;
    padding: 1.25rem;
  }

  /* ---- FOOTER ---- */

  /* Footer top — logo + badges stack cleanly */
  .footer__top {
    gap: 1.25rem;
    align-items: center;
    text-align: center;
  }

  .footer__top img {
    max-width: 220px;
  }

  /* Footer badges row — wrap on mobile */
  .footer__badges,
  .footer__top > div:last-child {
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.75rem;
  }

  /* Footer social icons — center */
  .footer__social,
  .footer__social-icons {
    justify-content: center;
  }

  /* Footer contact — center aligned */
  .footer__contact-info {
    align-items: center;
    text-align: center;
  }

  /* Footer bottom row — even spacing */
  .footer__bottom-row {
    gap: 1rem;
    padding: 1rem 0;
  }

  /* Footer copyright */
  .footer__copyright {
    text-align: center;
    font-size: 0.8rem;
    padding: 0.75rem 0;
  }

  /* ---- GENERAL MOBILE POLISH ---- */

  /* Section padding — tighter on mobile */
  section,
  .section {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Tables — horizontal scroll on mobile */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Prevent horizontal overflow anywhere */
  img {
    max-width: 100%;
    height: auto;
  }

  /* TOC sidebar — stack below content on mobile */
  .content-with-sidebar,
  .two-column-layout,
  .toc-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .sidebar,
  .toc-sidebar {
    position: static;
    order: -1;
    margin-bottom: 1.5rem;
    min-width: 0;
    overflow: hidden;
  }

  .content-col {
    min-width: 0;
    overflow: hidden;
  }

  /* Prevent horizontal overflow on any page */
  .calc-card {
    max-width: 100%;
  }

  /* Testimonials — single column */
  .testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  /* Trust signals bar — stack */
  .trust-bar,
  .trust-signals {
    flex-direction: column;
    gap: 0.75rem;
    text-align: center;
  }

  /* CTA banner — tighter padding */
  .cta-banner,
  .cta-section {
    padding: 2rem 1rem;
  }

  .cta-banner h2,
  .cta-section h2 {
    font-size: 1.5rem;
  }

  /* Form fields — prevent iOS zoom */
  input, select, textarea {
    font-size: 16px;
  }

  /* Breadcrumbs — smaller on mobile */
  .breadcrumbs {
    font-size: 0.8rem;
  }

  /* Quote form — full width */
  .quote-form {
    padding: 1rem;
  }

  .quote-form input,
  .quote-form select,
  .quote-form textarea {
    width: 100%;
  }

  /* Abby Shemesh profile — stack layout */
  .profile-grid,
  .bio-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .profile-photo,
  .bio-photo {
    max-width: 250px;
    margin: 0 auto;
  }

  /* Recognition cards — single column */
  .recognition-grid,
  .awards-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

/* ---- SMALL MOBILE (max 380px — iPhone SE, etc) ---- */
@media (max-width: 380px) {

  .hero__title {
    font-size: 1.5rem;
  }

  .hero__subtitle {
    font-size: 0.9rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .featured-logos img,
  .featured-logos-row img {
    height: 24px;
  }

  .footer__top img {
    max-width: 180px;
  }
}