/* ===================================================================
   RESPONSIVE.CSS — BPirex Mobile-First UX Optimization
   Compact, minimal, app-like feel on small screens.
   =================================================================== */

/* Global: prevent horizontal overflow without breaking position: sticky */
html, body {
  overflow-x: clip;
  width: 100%;
}

/* ─── MOBILE (max-width: 767px) ─── */
@media (max-width: 767px) {

  /* ── Spacing: Compact everything ── */
  :root {
    --space-section: 2.5rem;
  }

  .bpx-container {
    padding: 0 var(--space-md);
  }

  .bpx-section__header {
    margin-bottom: var(--space-xl);
  }

  .bpx-section__headline {
    font-size: clamp(1.5rem, 6vw, 2rem);
    line-height: 1.15;
  }

  .bpx-section__copy {
    font-size: var(--text-sm);
  }

  /* ── Trust Bar: One line, super compact ── */
  .bpx-trust-bar {
    padding: 4px 0;
    font-size: 10px;
  }

  /* ── Header: Sticky, compact ── */
  .bpx-header {
    padding: 8px 0;
  }

  .bpx-header__inner {
    padding: 0 var(--space-md);
  }

  /* ── Hero: Tight layout ── */
  .bpx-hero {
    min-height: auto;
    padding-top: var(--space-xl);
    padding-bottom: var(--space-2xl);
  }

  .bpx-hero__inner {
    gap: var(--space-lg);
  }

  .bpx-hero__eyebrow {
    font-size: 10px;
    margin-bottom: var(--space-sm);
  }

  .bpx-hero__headline {
    font-size: clamp(1.8rem, 7vw, 2.5rem);
    margin-bottom: var(--space-md);
  }

  .bpx-hero__copy {
    font-size: var(--text-sm);
    margin-bottom: var(--space-lg);
  }

  .bpx-hero__ctas {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .bpx-hero__ctas .bpx-btn {
    width: 100%;
    justify-content: center;
    padding: 0.75rem 1.5rem;
  }

  .bpx-hero__lang-note {
    font-size: 10px;
    margin-top: var(--space-sm);
  }

  .bpx-hero__visual {
    min-height: 220px;
  }

  /* ── Credibility Bar ── */
  .bpx-credibility {
    padding: var(--space-lg) 0;
  }

  .bpx-credibility__grid {
    gap: var(--space-sm);
  }

  .bpx-credibility__item {
    padding: var(--space-sm);
  }

  .bpx-credibility__title {
    font-size: var(--text-base);
  }

  .bpx-credibility__desc {
    font-size: 12px;
    line-height: 1.4;
  }

  /* ── Cards: Compact padding ── */
  .bpx-pillar {
    padding: var(--space-lg);
  }

  .bpx-pillar__title {
    font-size: var(--text-base);
  }

  .bpx-pillar__description {
    font-size: 13px;
  }

  .bpx-capability {
    padding: var(--space-lg);
  }

  .bpx-capability__icon {
    width: 44px;
    height: 44px;
    margin-bottom: var(--space-md);
  }

  .bpx-capability__title {
    font-size: var(--text-base);
  }

  .bpx-capability__description {
    font-size: 13px;
  }

  /* ── Material Cards: Tight ── */
  .bpx-material-card {
    padding: var(--space-md);
  }

  /* ── Process Steps: Vertical compact ── */
  .bpx-process__steps {
    gap: var(--space-xl);
  }

  .bpx-process__number {
    font-size: var(--text-3xl);
    margin-bottom: var(--space-sm);
  }

  .bpx-process__title {
    font-size: var(--text-base);
    margin-bottom: var(--space-xs);
  }

  .bpx-process__description {
    font-size: 13px;
  }

  /* ── Overview Highlight ── */
  .bpx-overview__highlight {
    padding: var(--space-md) var(--space-lg);
    font-size: var(--text-base);
    margin-top: var(--space-lg);
  }

  /* ── Circular Flow ── */
  .bpx-circular-flow {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: var(--space-md) !important;
  }

  .bpx-circular-flow > div:not(.bpx-flow-step) {
    text-align: center;
    color: var(--bpx-green-primary);
    padding: 4px 0;
    font-size: 14px;
  }

  .bpx-flow-step {
    text-align: center;
    padding: var(--space-sm) 0;
    font-size: var(--text-sm);
  }

  /* ── Contact Section: App-like, legible ── */
  .bpx-contact__content {
    gap: var(--space-xl);
  }

  .bpx-contact__form-wrapper {
    padding: var(--space-lg) var(--space-md);
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: var(--radius-md);
  }

  .bpx-form__input,
  .bpx-form__select,
  .bpx-form__textarea {
    padding: 0.7rem var(--space-md);
    font-size: 16px; /* Prevents iOS zoom */
    border-radius: var(--radius-sm);
  }

  .bpx-form__textarea {
    min-height: 100px;
  }

  .bpx-form__group {
    margin-bottom: var(--space-md);
  }

  .bpx-form__label {
    margin-bottom: 4px;
    font-size: 12px;
  }

  .bpx-form__checkbox-label {
    font-size: 12px;
  }

  /* ── Benefits/Industries Lists ── */
  .bpx-benefits-list,
  .bpx-industries-list {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .bpx-benefits-list li,
  .bpx-industries-list li {
    padding: 0.75rem !important;
    font-size: 13px;
  }

  /* ── Footer: Compact ── */
  .bpx-footer {
    padding: var(--space-xl) 0 var(--space-md);
  }

  .bpx-footer__inner {
    gap: var(--space-lg);
  }

  .bpx-footer__nav {
    gap: var(--space-sm);
  }

  .bpx-footer__bottom {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
  }

  /* ── Buttons ── */
  .bpx-btn {
    padding: 0.7rem 1.5rem;
    font-size: 13px;
  }

  .bpx-materials__cta .bpx-btn {
    width: 100%;
    justify-content: center;
  }
}

/* ─── EXTRA SMALL (max-width: 375px) ─── */
@media (max-width: 375px) {
  :root {
    --space-section: 2rem;
  }

  .bpx-hero__headline {
    font-size: 1.6rem;
  }

  .bpx-section__headline {
    font-size: 1.4rem;
  }

  .bpx-credibility__grid {
    grid-template-columns: 1fr;
  }
}

/* ─── LANDSCAPE PHONES ─── */
@media (max-height: 480px) and (orientation: landscape) {
  .bpx-hero {
    min-height: auto;
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
  }

  .bpx-hero__visual {
    display: none;
  }
}

/* ─── TABLET (768px - 1023px) ─── */
@media (min-width: 768px) and (max-width: 1023px) {
  .bpx-hero {
    min-height: 80vh;
  }

  .bpx-hero__ctas .bpx-btn {
    width: auto;
  }
}