/*
 * cc-hero-mobile.css — shared mobile hero CTA + sitewide mobile fixes (v321.g)
 * Applied globally to pages using .cc-hero-actions (CoverageReport,
 * EngagementPage, execution hub, industries, executive-search, etc.)
 */

@media (max-width: 768px) {
  /* Avoid overflow-x: clip on main — known iOS Safari paint/scroll bugs */
  body {
    overflow-x: hidden;
  }

  .cc-hero-actions {
    flex-direction: column;
    width: 100%;
  }

  .cc-hero-actions .btn,
  .cc-hero-actions a.btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .btn-row {
    flex-direction: column;
    width: 100%;
  }

  .btn-row .btn,
  .btn-row a.btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  .cc-cta-actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .cc-cta-actions .btn,
  .cc-cta-actions a.btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Executive search — velocity bars stack on narrow screens */
  .exec-velocity-row {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  .exec-velocity-label {
    width: auto;
  }

  /* Metrics row — single column on small phones */
  .metrics-row {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
}

@media (max-width: 640px) {
  .exec-compare-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 12px 14px;
  }

  .exec-compare-head {
    display: none;
  }

  .exec-compare-metric {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 2px;
  }

  .exec-compare-trad::before {
    content: 'Traditional: ';
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
  }

  .exec-compare-ah::before {
    content: 'AlphaHire: ';
    font-weight: 600;
    color: rgba(168, 85, 247, 0.65);
  }

  .exec-metrics {
    grid-template-columns: 1fr;
  }

  .metrics-row {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 390px) {
  .cc-hero-badge-row {
    gap: 6px;
  }
}