/* ==========================================================================
   GLOBAL MORTGAGE GROUP (GMG BROKER) - MOBILE VIEW STYLESHEET
   Responsive layouts, mobile navigation drawer, single-column stacks & compact tables
   Target: Smartphones and mobile devices (max-width: 768px / 640px / 576px / 480px / 380px)
   ========================================================================== */

@media (max-width: 576px) {
  .hero-section {
    padding: calc(3rem + 76px) 1.25rem 3.5rem;
  }
}

@media (max-width: 640px) {
  .footer-grid-5col {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .footer-subbar {
    flex-direction: column;
    text-align: center;
    gap: 1.25rem;
  }

  .footer-subbar-left {
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    text-align: center;
  }

  .footer-subbar-sep {
    display: none;
  }

  .footer-subbar-right {
    justify-content: center;
    gap: 0.85rem;
  }
}

@media (max-width: 576px) {
  .rates-hero-bg {
    padding: calc(4rem + 76px) 0 3.5rem;
  }
}

@media (max-width: 768px) {

  .nav-desktop,
  .header-actions .btn-phone {
    display: none;
  }

  .mobile-toggle {
    display: block;
  }

  .process-grid,
  .solutions-grid,
  .rates-grid,
  .testimonials-grid {
    grid-template-columns: 1fr;
  }

  .radio-cards-grid {
    grid-template-columns: 1fr;
  }

  .calc-box {
    padding: 1.75rem;
  }

  .app-wizard-wrapper {
    padding: 1.75rem;
  }

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

  .footer-bottom {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .toast-container {
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
  }

  .toast {
    min-width: 100%;
  }
}

@media (max-width: 576px) {
  :root {
    --header-height: 76px;
  }

  .site-header.scrolled {
    --header-height: 74px;
  }

  .header-container {
    height: 76px;
    padding: 0 1rem;
  }

  .brand-logo {
    height: 52px;
    max-height: 54px;
  }

  .brand-text {
    font-size: 0.98rem;
  }

  .header-actions .btn-gold {
    padding: 0.55rem 0.95rem;
    font-size: 0.84rem;
  }

  .mobile-nav-drawer {
    top: var(--header-height, 76px);
    height: calc(100vh - var(--header-height, 76px));
  }
}

@media (max-width: 576px) {
  .residential-hero {
    padding: calc(5rem + 76px) 1.25rem 4rem;
  }
}

@media (max-width: 640px) {
  .residential-cards-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  .commercial-hero {
    padding: calc(5rem + 76px) 1.25rem 4rem;
  }
}

@media (max-width: 640px) {
  .commercial-cards-grid {
    grid-template-columns: 1fr;
  }

  .commercial-metrics-bar {
    grid-template-columns: 1fr;
    padding: 1.5rem;
    margin-top: -2rem;
  }

  .commercial-metric-item {
    border-right: none;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: 1rem;
  }

  .commercial-metric-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }
}

@media (max-width: 576px) {
  .private-hero {
    padding: calc(5rem + 76px) 1.25rem 4rem;
  }
}

@media (max-width: 640px) {
  .private-cards-grid {
    grid-template-columns: 1fr;
  }

  .private-card {
    padding: 2rem 1.5rem;
  }

  .exit-roadmap-grid {
    grid-template-columns: 1fr;
  }

  .private-promo-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
}

@media (max-width: 768px) and (orientation: portrait) {
  .hero-section {
    padding: 4.5rem 1.25rem 3.5rem;
    min-height: calc(100svh - 76px);
    display: flex;
    align-items: center;
  }

  .hero-actions {
    flex-direction: column;
    width: 100%;
    gap: 1rem;
  }

  .hero-actions .btn {
    width: 100%;
  }

  .calc-box,
  .app-wizard-wrapper {
    padding: 1.25rem;
    border-radius: 14px;
  }

  .rate-card {
    padding: 1.75rem 1.25rem;
  }

  .wizard-progress {
    gap: 0.5rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }

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

@media (orientation: landscape) and (max-height: 600px) {
  .site-header {
    position: relative;
    /* avoids taking screen in small height landscape */
  }

  .header-container {
    height: 60px !important;
    padding: 0 1.25rem;
  }

  .brand-logo {
    height: 48px !important;
    max-height: 50px !important;
  }

  .brand-text {
    font-size: 0.95rem !important;
  }

  .mobile-nav-drawer {
    top: 60px !important;
    padding: 1.25rem 2rem !important;
  }

  .mobile-nav-list {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem 2rem !important;
  }

  .hero-section {
    min-height: auto !important;
    padding: 3rem 1.5rem 2.5rem !important;
  }

  .hero-title {
    font-size: 2rem !important;
    margin-bottom: 0.75rem !important;
  }

  .hero-description {
    font-size: 0.95rem !important;
    margin-bottom: 1.25rem !important;
  }

  .hero-actions {
    flex-direction: row !important;
    gap: 1rem !important;
    align-items: center !important;
  }

  /* Two-column layout in landscape for calculators */
  .calc-grid {
    grid-template-columns: 1.1fr 0.9fr !important;
    gap: 1.5rem !important;
  }

  .process-grid,
  .rates-grid,
  .solutions-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 1.25rem !important;
  }

  .section-padding {
    padding: 3rem 0 !important;
  }
}

@media (max-width: 768px) {
  .lenders-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.85rem;
  }

  .lender-logo-card {
    min-height: 70px;
    padding: 0.75rem 0.85rem;
  }

  .lender-logo-img {
    max-height: 32px;
  }
}

@media (max-width: 480px) {
  .lenders-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .lender-logo-card {
    min-height: 64px;
    padding: 0.65rem 0.75rem;
  }

  .lender-logo-img {
    max-height: 28px;
  }
}

@media (max-width: 640px) {
  .service-cards-container {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 576px) {
  main.container.section-padding {
    /* padding-top: calc(2.5rem + 76px); */
  }
}

@media (max-width: 768px) {
  .calculator-container {
    padding: 1.75rem 1.5rem;
    border-radius: 18px;
  }

  .calculator-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 576px) {
  .calculator-container {
    padding: 1.25rem 1rem;
    border-radius: 14px;
    margin-bottom: 2rem;
  }

  .calculator-grid {
    gap: 2rem;
  }

  .calc-sliders-2col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .calc-results {
    padding: 1.5rem 1.25rem;
    border-radius: 16px;
  }
}

@media (max-width: 640px) {
  .contact-form-grid-2col {
    grid-template-columns: 1fr;
  }

  .contact-form-card {
    padding: 1.5rem 1.25rem !important;
  }
}

@media (max-width: 640px) {

  #step2StagesGrid,
  #timelinesGrid,
  #licensingCardsGrid,
  #remunerationGrid {
    grid-template-columns: 1fr !important;
  }

  #fsraAuthorityCard>div[style*="grid-template-columns"],
  #suitabilityFactors>div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 576px) {
  #careers.calc-results-card {
    padding: 1.75rem 1.25rem !important;
    /* border-radius: 18px !important; */
    margin-bottom: 2.5rem !important;
  }

  #careers h2 {
    font-size: 1.5rem !important;
  }

  #careerPathsGrid .solution-card {
    padding: 1.5rem 1.25rem !important;
  }

  #resConsultationBanner {
    padding: 1.75rem 1.25rem !important;
  }

  .toast {
    min-width: unset !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  .header-actions {
    gap: 0.5rem;
  }

  .header-actions .btn-gold {
    padding: 0.5rem 0.75rem;
    font-size: 0.8rem;
    letter-spacing: -0.01em;
  }

  .brand-logo {
    height: 46px;
    max-height: 48px;
  }
}

@media (max-width: 576px) {
  .calc-sliders-2col {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }

  .calc-box {
    padding: 1.25rem 1rem;
    border-radius: 18px;
  }

  .calc-results-card {
    padding: 1.75rem 1.25rem !important;
    /* border-radius: 18px !important; */
  }

  .slider-badge {
    font-size: 0.95rem;
    padding: 0.2rem 0.65rem;
    min-width: 70px;
  }
}

@media (max-width: 768px) {

  #siteHeader,
  #headerContainer,
  .site-header #headerContainer,
  .header-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 72px !important;
    min-height: 72px !important;
    max-height: 72px !important;
    padding: 0 1rem !important;
    box-sizing: border-box !important;
  }

  .brand-wrapper {
    flex-shrink: 0 !important;
  }

  .nav-desktop-wrapper {
    display: none !important;
  }

  .header-actions {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    flex-shrink: 0 !important;
    margin-left: auto !important;
  }

  .header-actions .btn-phone {
    display: none !important;
  }

  .btn-text-mobile {
    display: none;
  }

  .mobile-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    padding: 0.5rem !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    margin-left: 0.25rem !important;
    z-index: 50 !important;
  }

  #siteHeader:not(.scrolled) .mobile-toggle {
    color: #ffffff !important;
  }

  .site-header.scrolled .mobile-toggle {
    color: #0f172a !important;
  }

  .mobile-toggle svg {
    width: 26px !important;
    height: 26px !important;
    stroke: currentColor !important;
    display: block !important;
  }

  #calculator.container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .calc-section {
    padding: 2.25rem 0.65rem !important;
    margin: 1.25rem auto !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .calc-box {
    padding: 1.25rem 0.75rem !important;
    border-radius: 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .calc-grid {
    grid-template-columns: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
    gap: 2rem !important;
  }

  .calc-sliders-col {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .calc-results-card {
    padding: 1.5rem 1rem !important;
    /* border-radius: 18px !important; */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}

@media (max-width: 480px) {
  :root {
    --header-height: 68px !important;
  }

  #siteHeader,
  #headerContainer,
  .site-header #headerContainer,
  .header-container {
    height: 68px !important;
    min-height: 68px !important;
    max-height: 68px !important;
  }

  .btn-text-desktop {
    display: none !important;
  }

  .btn-text-mobile {
    display: inline !important;
  }

  .header-actions .btn-gold {
    padding: 0.45rem 0.85rem !important;
    font-size: 0.82rem !important;
    letter-spacing: normal !important;
  }

  .brand-logo {
    height: 42px !important;
    max-height: 44px !important;
    width: auto !important;
  }

  .mobile-nav-drawer {
    top: 68px !important;
    height: calc(100vh - 68px) !important;
    height: calc(100dvh - 68px) !important;
    padding: 1.25rem 1rem !important;
  }

  .calc-sliders-2col {
    grid-template-columns: 100% !important;
    gap: 1.25rem !important;
  }

  .slider-badge {
    font-size: 0.92rem !important;
    padding: 0.2rem 0.55rem !important;
    min-width: 60px !important;
  }

  #calcMonthlyLabel {
    font-size: 0.76rem !important;
  }

  #monthlyPaymentDisplay {
    font-size: clamp(2.2rem, 7vw, 2.75rem) !important;
  }
}

@media (max-width: 575px) {
  .trend-metrics-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {

  /* Mobile Zero-Overflow Fit for Bank Comparison Table */
  .container {
    width: auto;
    margin: 0px;
    padding: 0px;
  }


  .section-padding {
    padding-top: 20px;
    padding-bottom: 20px;
    padding-left: 12px;
    padding-right: 12px;
  }

  .rates-hero-bg {}

  #aboutHeroContainer {
    margin: 30px;
  }

  #aboutMainContainer {
    padding-top: 0px;
    text-align: justify;
  }

  #aboutBulletsList {
    text-align: justify;
  }

  .calc-results-card {
    border-radius: 0px;
  }

  .local-grid {
    margin-bottom: 20px;
  }


  .solutions-grid {
    /* background-color: var(--color-navy-dark); */

  }

  .process-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .process-icon-frame {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .calc-section {
    border-radius: 0px;
  }

  section#calculator {
    padding: 0px !important;
  }



  .bank-rates-table {
    min-width: 0 !important;
    width: 100% !important;
    table-layout: fixed !important;
  }

  .th-text-desktop,
  .bank-name-desktop {
    display: none !important;
  }

  .th-text-mobile,
  .bank-name-mobile {
    display: inline !important;
  }

  .bank-rates-table .col-action {
    display: none !important;
  }

  .bank-rates-table th.col-institution,
  .bank-rates-table td.col-institution {
    width: 34% !important;
    padding: 0.75rem 0.35rem 0.75rem 0.5rem !important;
    overflow: hidden !important;
  }

  .bank-rates-table th.col-rate,
  .bank-rates-table td.col-rate {
    width: 22% !important;
    padding: 0.75rem 0.2rem !important;
  }

  .bank-rates-table th {
    font-size: 0.68rem !important;
    letter-spacing: 0.02em !important;
    padding: 0.75rem 0.25rem !important;
    white-space: normal !important;
    line-height: 1.2 !important;
    text-align: center;
  }

  .bank-rates-table th.col-institution {
    text-align: left !important;
    padding-left: 0.5rem !important;
  }

  .bank-info-cell {
    gap: 0.35rem !important;
  }

  .bank-table-logo {
    height: 20px !important;
    max-width: 32px !important;
    padding: 1px !important;
    flex-shrink: 0 !important;
  }

  .bank-cell-name {
    font-size: 0.8rem !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
  }

  .bank-rate-pill {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
  }

  .bank-table-mobile-cta {
    display: block !important;
    width: 100% !important;
    margin-top: 0.65rem !important;
  }

  .rates-trend-section {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
  }

  .trend-card {
    padding: 1.25rem 1rem !important;
    border-radius: 16px;
  }

  .trend-metrics-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 0.75rem !important;
    margin-bottom: 1.5rem !important;
  }

  .trend-metric-box {
    padding: 0.85rem !important;
    border-radius: 10px !important;
  }

  .trend-metric-label {
    font-size: 0.74rem !important;
  }

  .trend-metric-val {
    font-size: 1.28rem !important;
  }

  .trend-metric-delta {
    font-size: 0.72rem !important;
  }

  .trend-chart-container {
    height: 290px !important;
  }

  .trend-controls-bar {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem !important;
  }

  .trend-series-toggles {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem !important;
  }

  .trend-toggle-btn {
    padding: 0.35rem 0.65rem !important;
    font-size: 0.76rem !important;
  }

  .bank-table-card {
    border-radius: 14px;
  }

  .bank-table-footer {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem !important;
    padding: 0.85rem 1rem !important;
  }

  section#calculator {
    padding: 0px !important;
  }


}

@media (max-height: 500px) and (orientation: landscape) {
  .trend-chart-container {
    height: 250px !important;
  }

  .trend-card {
    padding: 1rem 1.25rem !important;
  }

  .trend-metrics-grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 0.65rem !important;
    margin-bottom: 1rem !important;
  }

  .trend-metric-box {
    padding: 0.65rem !important;
  }

  .trend-metric-val {
    font-size: 1.15rem !important;
  }
}

@media (max-width: 380px) {
  .trend-metrics-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 768px) {

  /* Mobile Rates Table Enhancements */
  .bank-rates-table th,
  .bank-rates-table td {
    padding: 0.65rem 0.25rem !important;
  }

  .bank-rates-table th.col-institution,
  .bank-rates-table td.col-institution {
    padding-left: 0.5rem !important;
    width: 32% !important;
  }

  .bank-rates-table th.col-rate,
  .bank-rates-table td.col-rate {
    width: 22.6% !important;
    text-align: center !important;
    padding: 0.5rem 0.15rem !important;
  }

  .bank-info-cell {
    display: flex !important;
    align-items: center !important;
    gap: 0.45rem !important;
  }

  .bank-logo-wrap {
    width: 30px !important;
    height: 24px !important;
    padding: 1px 2px !important;
    flex-shrink: 0 !important;
  }

  .bank-table-logo {
    max-height: 100% !important;
    max-width: 100% !important;
    object-fit: contain !important;
  }

  .bank-cell-name {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--color-navy) !important;
    white-space: nowrap !important;
    line-height: 1.2 !important;
  }

  .bank-rate-pill {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
  }

  .rate-pill-best {
    color: #9a7632 !important;
    font-weight: 800 !important;
  }

  .best-rate-indicator {
    font-size: 0.56rem !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    background: #c19b53 !important;
    color: #ffffff !important;
    padding: 0px 4px !important;
    border-radius: 3px !important;
    line-height: 1.1 !important;
    display: inline-block !important;
  }

  .lender-category-tag {
    display: none !important;
  }

}

@media (max-width: 768px) {

  .bank-rates-table th.col-logo,
  .bank-rates-table td.col-logo {
    width: 38px !important;
    min-width: 38px !important;
    padding: 0.6rem 0.15rem 0.6rem 0.35rem !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  .bank-rates-table th.col-name,
  .bank-rates-table td.col-name {
    width: auto !important;
    padding: 0.6rem 0.25rem !important;
    text-align: left !important;
    vertical-align: middle !important;
  }

  .bank-logo-wrap {
    width: 32px !important;
    height: 26px !important;
    padding: 2px !important;
    border-radius: 5px !important;
    overflow: hidden !important;
  }

  .bank-cell-name {
    font-size: 0.82rem !important;
    font-weight: 700 !important;
    color: var(--color-navy) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    line-height: 1.2 !important;
  }

  .bank-rates-table th.col-rate,
  .bank-rates-table td.col-rate {
    width: 20% !important;
    padding: 0.6rem 0.15rem !important;
    text-align: center !important;
    vertical-align: middle !important;
  }

  .bank-rate-pill {
    font-size: 0.86rem !important;
    font-weight: 700 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 2px !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 768px) {
  .btn-text-desktop {
    display: none !important;
  }

  .btn-text-mobile {
    display: inline !important;
  }

  .footer-cta-card {
    border: none;
    background: none;
    box-shadow: none;

  }

  .main-footer-body {
    padding: 20px 12px 20px 12px;
  }

  #resMortgagesContainer,
  #commFinancingContainer,
  #privateMortgagesContainer {
    padding-top: 30px;
  }

  section.residential-hero {
    padding-top: 120px !important;
  }

  #ratesHeroContainer {
    margin-left: 20px;
    margin-right: 20px;
  }

  #aboutMainContainer {
    margin-left: 12px;
    margin-right: 12px;
    margin-top: 20px;
    text-align: left;
  }

  .testimonial-card {
    justify-content: left;
    flex-direction: unset;
  }

  .ghl-embed-wrapper {
    zoom: .8;
  }
}