/**
 * crt-responsive.css — Shared responsive utilities for Cyturus Enhanced
 * Load after crt-site-nav.css on every page.
 *
 * Breakpoint ladder (matches nav + sidebar conventions):
 *   <= 480px  — small phone
 *   <= 699px  — phone  (used by nav/sidebar)
 *   <= 900px  — tablet portrait
 *   <= 1099px — mid-laptop (used by nav/sidebar)
 *   >= 1441px — wide / 4K (content cap)
 */

/* ── Fluid media ── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Prevent horizontal overflow on scroll pages ──
   Tool-shell pages already use overflow:hidden on body; this targets
   the public/scroll pages (Landing, Analytics, Overlap, Executive). */
html {
  overflow-x: hidden;
}

/* ── Touch interaction polish ── */
.sort-btn,
.view-btn,
.nf-btn,
.fw-add-btn,
.tab-btn,
.ca-region-btn,
.run-btn,
.calc-btn,
.exec-btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.08);
  touch-action: manipulation;
}

/* Minimum tap size for small pill controls */
.sort-btn,
.view-btn,
.nf-btn,
.fw-add-btn,
.tab-btn {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Safe-area insets (notched / dynamic-island phones) ── */
footer {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
}

.left-bottom {
  padding-bottom: max(14px, env(safe-area-inset-bottom));
}

/* ── Wide-monitor (>= 1441px): center + cap content ──
   Stops text/grids from sprawling across 2560px+ ultra-wide displays. */
@media (min-width: 1441px) {
  .hero,
  .tool-section {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ── Tablet portrait (<= 900px) ── */
@media (max-width: 900px) {
  .section-title {
    font-size: clamp(22px, 4vw, 32px);
  }

  /* Right-panel breathing room on tool pages */
  .rp-body {
    padding-left: 20px;
    padding-right: 20px;
  }

  .rp-header {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ── Phone (<= 699px) ── */
@media (max-width: 699px) {
  /* Bump small controls to comfortable touch size */
  .sort-btn,
  .view-btn,
  .nf-btn,
  .fw-add-btn,
  .tab-btn {
    min-height: 38px;
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 12px;
  }

  /* iOS: font-size < 16px triggers auto-zoom on input focus — prevent it */
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  select,
  textarea {
    font-size: 16px !important;
  }

  /* Footer: always stack vertically on phone */
  footer {
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ── Small phone (<= 480px) ── */
@media (max-width: 480px) {
  .hero {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .tool-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .sort-row,
  .sort-controls {
    gap: 6px;
  }
}