/* ==========================================================================
   Product Detail Responsive Media Queries
   Extracted from css/product-detail.css
   ========================================================================== */

@media (max-width: 768px) {
  .product-detail-hero {
    padding: 16px 0 22px !important;
    min-height: auto !important;
  }

  .detail-badge {
    padding: 5px 10px 5px 14px !important;
    gap: 8px !important;
    font-size: 11px !important;
    max-width: 95vw !important;
  }

  .badge-backoffice .badge-title-wrap {
    font-size: 11px !important;
    letter-spacing: 0.4px !important;
  }

  .badge-backoffice .badge-pill-trial {
    font-size: 9.5px !important;
    padding: 2.5px 7px !important;
  }

  .showcase-image-container {
    max-height: none !important;
    margin-bottom: 12px !important;
  }

  .showcase-image-container img {
    max-height: none !important;
  }

  .showcase-content-box {
    padding: 18px 16px !important;
    margin-bottom: 15px !important;
  }

  .showcase-content-box h2 {
    font-size: 19px !important;
  }

  .showcase-content-box p {
    font-size: 14px !important;
    line-height: 1.55 !important;
  }

  .workflow-section {
    padding: 24px 0 28px !important;
  }

  .workflow-header {
    margin-bottom: 16px !important;
  }

  .workflow-header-secondary {
    margin-top: 24px !important;
    margin-bottom: 16px !important;
  }

  .workflow-header h2 {
    font-size: 21px !important;
  }

  .workflow-header p {
    font-size: 13.5px !important;
  }

  .steps-pipeline-grid {
    grid-template-columns: 1fr;
    gap: 12px !important;
    margin-bottom: 22px !important;
  }

  .benefits-grid {
    grid-template-columns: 1fr;
    gap: 12px !important;
  }

  .showcase-quote-cta {
    padding: 20px 16px !important;
    margin-top: 15px !important;
  }

  .quote-text {
    font-size: 16px;
  }

  .btn-detail-contact-healops,
  .btn-detail-contact-backoffice {
    width: 100%;
    justify-content: center;
    font-size: 14px;
    padding: 14px 20px;
  }
}

@media (min-width: 480px) and (max-width: 768px) {
  .steps-pipeline-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .benefits-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}