/* ==========================================================================
   Responsive Overrides — Inline-style UI Mockup Components
   Handles internal layout components built with inline styles in HTML
   ========================================================================== */

/* ── Google Ad Snippet Sitelinks ── */
.ad-sitelinks-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  flex-wrap: wrap;
}

/* ── Social Ad Card ── */
.social-ad-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex-wrap: wrap;
}

/* ── GBP Card Actions Row ── */
.gbp-actions-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  text-align: center;
}

/* ── Analytics Dashboard Layout ── */
.analytics-top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* ── CRM Filter Buttons ── */
.crm-filter-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.crm-filter-buttons {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
}

/* ── SMS/Email Widget rows ── */
.comm-widget-row {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

/* ── Channel bar labels ── */
.channel-label-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--slate-700);
}

/* ── Service Mockup caption ── */
.mockup-caption {
  background: var(--light-ice);
  padding: 1rem;
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--primary-cyan);
}

.mockup-caption strong {
  color: var(--deep-navy);
  font-size: 0.9rem;
}

/* ── Why Us footer CTA ── */
.why-us-footer-cta {
  text-align: center;
  margin-top: 3.5rem;
}

.why-us-footer-cta h3 {
  color: var(--white);
  font-size: 1.45rem;
  margin-bottom: 0.75rem;
}

/* ==========================================================================
   Service Mockup Responsive Patches
   ========================================================================== */
@media (max-width: 768px) {
  /* Prevent iOS Safari auto-zoom on input focus */
  .form-control,
  select.form-control,
  textarea.form-control {
    font-size: 16px !important;
  }

  .gbp-actions-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .social-ad-footer {
    flex-direction: column;
    align-items: flex-start;
  }

  .ad-sitelinks-row {
    gap: 0.35rem;
  }

  .analytics-top-bar {
    flex-direction: column;
    align-items: flex-start;
  }

  .crm-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .gbp-actions-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 0.35rem;
  }

  .gbp-actions-row span {
    font-size: 0.65rem !important;
    padding: 0.3rem 0.25rem !important;
  }

  .analytics-metric-box {
    padding: 0.9rem;
  }

  .metric-num {
    font-size: 1.4rem;
  }

  .tech-module-card {
    padding: 1.25rem;
  }

  .tech-module-header {
    gap: 0.75rem;
  }

  .tech-icon-box {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
  }

  .tech-module-header h3 {
    font-size: 1.1rem;
  }

  .whatsapp-chat-preview {
    padding: 0.75rem;
  }

  .wa-bubble {
    font-size: 0.775rem;
    max-width: 90%;
  }

  .wa-button-option {
    display: block;
    width: 100%;
    margin: 0.35rem 0 0 0;
    text-align: center;
    padding: 0.45rem 0.65rem;
  }

  .telephony-preview-box {
    padding: 1rem;
  }

  .ivr-flow-diagram {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.45rem;
  }

  .ivr-node {
    font-size: 0.68rem;
    padding: 0.35rem 0.45rem;
    justify-content: center;
    text-align: center;
  }

  .crm-enquiry-row {
    flex-wrap: wrap;
    gap: 0.35rem;
  }

  .funnel-step-card {
    padding: 0.9rem 0.6rem;
  }

  .gallery-thumb-wrap {
    height: 180px;
  }

  .opportunity-banner {
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .opportunity-icon-wrap {
    width: 52px;
    height: 52px;
  }

  .direct-contact-item {
    padding: 0.9rem;
  }

  .direct-contact-val {
    font-size: 0.95rem;
  }

  .footer-brand-col p {
    font-size: 0.825rem;
  }

  .footer-col-title {
    font-size: 0.875rem;
  }

  .footer-link {
    font-size: 0.825rem;
  }
}