/*
 * Mobile Components
 * Cards, buttons, CTAs, forms, maps, landing pages — reusable building blocks
 */

/* ── Card System ── */
@media (max-width: 768px) {
  .why-us-card,
  .service-card,
  .recent-post-card,
  .blog-card,
  .testimonial-card,
  .client-card,
  .value-card,
  .sidebar-widget,
  .expertise-card {
    border-radius: var(--m-card-radius);
    box-shadow: var(--m-card-shadow);
    border: var(--m-card-border);
    transition: box-shadow var(--m-duration-base) var(--m-ease-out),
                transform var(--m-duration-base) var(--m-ease-out);
  }

  .service-card,
  .value-card {
    padding: var(--m-card-padding);
  }

  .service-title,
  .why-us-card h3,
  .recent-post-title,
  .blog-title {
    font-size: var(--m-font-h3);
    letter-spacing: -0.01em;
    line-height: var(--m-leading-tight);
  }

  .service-description,
  .why-us-card p,
  .recent-post-excerpt,
  .blog-excerpt {
    font-size: var(--m-font-body);
    color: var(--text-secondary);
    line-height: var(--m-leading-normal);
  }

  .service-link {
    font-size: var(--m-font-body);
    font-weight: 600;
    min-height: var(--m-tap-min);
    display: inline-flex;
    align-items: center;
    gap: var(--m-space-xs);
  }
}

/* ── CTA Band ── */
@media (max-width: 768px) {
  .cta-band-section {
    padding: var(--m-space-3xl) var(--m-container-px);
  }

  .cta-band-content {
    text-align: center;
    gap: var(--m-space-xl);
  }

  .cta-band-text h2 {
    font-size: var(--m-font-h2);
    letter-spacing: -0.02em;
    line-height: var(--m-leading-tight);
  }

  .cta-band-text p {
    font-size: var(--m-font-body);
    line-height: var(--m-leading-relaxed);
    opacity: 0.9;
  }

  .cta-band-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--m-space-sm);
  }

  .cta-band-buttons .btn,
  .cta-band-buttons .btn-outline-light {
    width: 100%;
    text-align: center;
    min-height: var(--m-btn-height);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--m-btn-radius);
    font-weight: 700;
    font-size: var(--m-font-button);
  }

  .cta-band-buttons .btn:active {
    transform: scale(0.98);
  }
}

/* ── Lead Magnet CTA ── */
@media (max-width: 640px) {
  .lead-magnet-cta {
    padding: 0 var(--m-container-px);
    margin: var(--m-space-2xl) auto;
  }

  .lead-magnet-cta__inner {
    flex-direction: column;
    text-align: center;
    padding: var(--m-card-padding);
    border-radius: var(--m-card-radius);
    gap: var(--m-space-md);
  }

  .lead-magnet-cta__icon {
    width: 48px;
    height: 48px;
    border-radius: var(--m-card-radius-sm);
  }

  .lead-magnet-cta__title {
    font-size: var(--m-font-body);
  }

  .lead-magnet-cta__desc {
    font-size: var(--m-font-small);
  }

  .lead-magnet-cta__buttons {
    flex-direction: column;
    width: 100%;
    gap: var(--m-space-xs);
  }

  .lead-magnet-cta__button {
    width: 100%;
    justify-content: center;
    min-height: var(--m-tap-comfortable) !important;
    border-radius: var(--m-card-radius-sm) !important;
    font-size: var(--m-font-body) !important;
  }
}

/* ── Blog CTA / Generic CTA ── */
@media (max-width: 768px) {
  .blog-cta,
  .cta-section {
    padding: var(--m-space-2xl) var(--m-space-lg);
    border-radius: var(--m-card-radius);
    margin: var(--m-space-2xl) 0;
    text-align: center;
  }

  .blog-cta h2,
  .cta-section h2 {
    font-size: var(--m-font-h2);
    letter-spacing: -0.02em;
  }

  .blog-cta p,
  .cta-section p {
    font-size: var(--m-font-body);
    margin-bottom: var(--m-space-lg);
    line-height: var(--m-leading-relaxed);
  }

  .cta-buttons {
    flex-direction: column;
    gap: var(--m-space-sm);
  }

  .cta-buttons .btn {
    width: 100%;
    min-height: var(--m-btn-height);
    text-align: center;
    border-radius: var(--m-btn-radius);
    font-weight: 700;
  }

  .cta-icon {
    margin: 0 auto var(--m-space-sm);
  }
}

/* ── FAQ ── */
@media (max-width: 768px) {
  .faq-question {
    padding: var(--m-space-md) var(--m-space-lg);
    font-size: var(--m-font-body);
    font-weight: 600;
    min-height: var(--m-tap-comfortable);
    -webkit-tap-highlight-color: transparent;
  }

  .faq-answer-content {
    padding: 0 var(--m-space-lg) var(--m-space-lg);
    font-size: var(--m-font-body);
    line-height: var(--m-leading-relaxed);
  }

  .table-wrapper {
    margin-left: calc(-1 * var(--m-container-px));
    margin-right: calc(-1 * var(--m-container-px));
    border-radius: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Map Section ── */
@media (max-width: 768px) {
  .map-compact-section {
    padding: var(--m-section-padding);
  }

  .map-content-wrapper {
    gap: var(--m-space-lg);
  }

  #compactMap {
    height: 220px;
    border-radius: var(--m-card-radius);
  }

  .map-locations-compact {
    gap: var(--m-space-sm);
  }

  .location-compact {
    padding: var(--m-space-md);
    border-radius: var(--m-card-radius-sm);
    background: var(--m-surface-0);
    border: var(--m-card-border);
  }

  .location-info strong {
    font-size: var(--m-font-body);
  }

  .company-name {
    font-size: var(--m-font-small);
    color: var(--primary-color);
  }

  .location-description {
    font-size: var(--m-font-small);
    color: var(--text-muted);
    line-height: var(--m-leading-normal);
  }

  .map-cta {
    margin-top: var(--m-space-xl);
    text-align: center;
  }

  .map-cta .btn {
    width: 100%;
    min-height: var(--m-btn-height);
    border-radius: var(--m-btn-radius);
    font-weight: 700;
  }
}

/* ── Landing Pages ── */
@media (max-width: 768px) {
  .landing-page-wrapper .container,
  [class*="kc-"] .container {
    padding-left: var(--m-container-px);
    padding-right: var(--m-container-px);
  }

  .landing-page-wrapper section,
  [class*="kc-"] section {
    padding-top: var(--m-space-3xl);
    padding-bottom: var(--m-space-3xl);
  }

  .landing-page-wrapper h1,
  [class*="kc-"] h1 {
    font-size: var(--m-font-h1);
    letter-spacing: -0.02em;
  }

  .landing-page-wrapper h2,
  [class*="kc-"] h2 {
    font-size: var(--m-font-h2);
    letter-spacing: -0.02em;
  }

  .landing-page-wrapper .btn,
  [class*="kc-"] .btn {
    width: 100%;
    min-height: var(--m-btn-height);
    text-align: center;
    border-radius: var(--m-btn-radius);
    font-weight: 700;
  }
}

/* ── Scroll Reveal Animations ── */
@media (max-width: 768px) {
  .m-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--m-duration-slow) var(--m-ease-out),
                transform var(--m-duration-slow) var(--m-ease-out);
  }

  .m-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  .m-reveal-stagger > * {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity var(--m-duration-base) var(--m-ease-out),
                transform var(--m-duration-base) var(--m-ease-out);
  }

  .m-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0ms; opacity: 1; transform: none; }
  .m-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 60ms; opacity: 1; transform: none; }
  .m-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 120ms; opacity: 1; transform: none; }
  .m-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 180ms; opacity: 1; transform: none; }
  .m-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 240ms; opacity: 1; transform: none; }
  .m-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 300ms; opacity: 1; transform: none; }

  /* Active state feedback */
  .btn:active,
  .service-card:active,
  .sector-card-link:active,
  .recent-post-card:active,
  .blog-card:active,
  .expertise-card:active {
    transform: scale(0.985);
    transition-duration: 50ms;
  }
}