/* =================================================================
   Salaryvia — Mobile & Responsive Polish
   Targets: 768px (tablet), 640px (large phone),
            480px (phone), 375px (small phone)
   ================================================================= */

/* ─────────────────────────────────────────────────────────────────
   1. ROOT & CONTAINER
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 375px) {
  .container { padding: 0 12px; }
}

/* ─────────────────────────────────────────────────────────────────
   2. HEADER / NAVBAR
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Touch-friendly nav links */
  .nav-link {
    padding: 13px 16px;
    min-height: 44px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-size: 0.9625rem;
  }

  /* CTA: hide label, show icon only */
  .hdr-cta span { display: none; }
  .hdr-cta { padding: 8px 10px; min-height: 36px; }

  /* Announcement bar compact */
  .site-announcement .container { gap: 8px; }
}

@media (max-width: 480px) {
  /* Prevent iOS auto-zoom on search input focus */
  .hdr-search-bar input[type="text"] { font-size: 16px; }

  /* Search icon button touch target */
  .hdr-search-btn { padding: 8px; min-width: 40px; min-height: 40px; }

  /* Hamburger touch target */
  .nav-toggle { padding: 10px 8px; }
}

/* ─────────────────────────────────────────────────────────────────
   3. SUMMARY CARDS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .sc2-wrap { gap: 12px; }
  .sc2-card { padding: 18px; }
  .sc2-card--hero { padding: 20px; }

  /* Main salary value — clamp floor is too small on 320px */
  .sc2-hero-val { font-size: 2rem; }

  /* Metrics strip: allow wrapping with gap */
  .sc2-hero-metrics { gap: 8px; flex-wrap: wrap; }
  .sc2-hero-metric { padding: 8px 12px; }
  .sc2-hero-metric:first-child { padding-left: 12px; }

  /* Range card numbers */
  .sc2-col-num { font-size: 1.875rem; }
  .sc2-conf-label { font-size: 1.125rem; }

  /* Range vals don't have awkward gap */
  .sc2-range-vals { gap: 4px; }

  /* CoL col label: allow shrink */
  .sc2-col-cmp-lbl { min-width: 70px; }
}

@media (max-width: 375px) {
  .sc2-card { padding: 14px; }
  .sc2-card--hero { padding: 16px 14px; }
  .sc2-hero-val { font-size: 1.75rem; }
}

/* ─────────────────────────────────────────────────────────────────
   4. SALARY DATA TABLE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Readable header font (was .68rem = ~10.9px) */
  .st-th { font-size: .72rem; }

  /* Detail row: single column on phones */
  .st-detail-grid { grid-template-columns: 1fr !important; }

  /* Export button clutters small screens */
  .st-export-btn { display: none; }

  /* Section margin */
  .st-section { margin: 1.5rem 0; }

  /* Search input: full width */
  .st-search-wrap { flex: 1; }
  .st-search-input { width: 100%; }
}

@media (max-width: 375px) {
  .st-th, .st-td { padding: .5rem .5rem; }
  .st-table { font-size: .75rem; }
  /* Percentile: 2-col on very small phone */
  .st-pct-strip { grid-template-columns: repeat(2, 1fr); }
  .st-pct-item:nth-child(n+3) { border-top: 1px solid var(--st-border-light, #e4e4e7); }
}

/* ─────────────────────────────────────────────────────────────────
   5. FAQ ACCORDION
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Shrink icon circle so padding calc isn't extreme */
  .faq-block { --fq-icon-sz: 20px; }

  /* Category filter tabs: horizontal scroll instead of wrap */
  .faq-block-cats {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 4px;
  }
  .faq-block-cats::-webkit-scrollbar { display: none; }
  .faq-block-cat { flex-shrink: 0; }
}

@media (max-width: 375px) {
  .faq-block-btn { padding: .8rem .875rem; gap: .6rem; }
  .faq-block-title { font-size: 1.3rem; }
  .faq-block-text { font-size: .9rem; }
}

/* ─────────────────────────────────────────────────────────────────
   6. SALARY DETAIL PAGE
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Summary cards grid: force 1-col (was 1fr 1fr at 580px) */
  .sd-sum-grid { grid-template-columns: 1fr !important; }

  /* QA stats row: tighter column padding */
  .sd-qa-col { padding: 0 12px; }
  .sd-qa-val { font-size: 1.625rem; }

  /* Table wrapper: ensure flush edges */
  .sd-table-wrap { margin: 0 -4px; padding: 0 4px; }

  /* Percentile grid: 3-col on 480px is 80px each — ok */
}

@media (max-width: 375px) {
  .sd-card { padding: 16px; }
  .sd-qa-val { font-size: 1.5rem; }
  .sd-qa-label { font-size: .65rem; }

  /* Hero title — clamp handles well but reinforce floor */
  .sd-hero-title { font-size: 1.625rem; }

  /* Percentile: 3-col gets very cramped — go 2+center */
  .sd-pct-grid {
    grid-template-columns: repeat(3, 1fr);
    font-size: .75rem;
  }
}

/* ─────────────────────────────────────────────────────────────────
   7. RELATED PAGES
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* CTA strip padding */
  .rp-cta-strip { padding: 1.5rem 1.25rem; }

  /* Comparison card header cramped on narrow phones */
  .rp-cmp-header { padding: .75rem 1rem; }
  .rp-cmp-badge { padding: 3px 8px; font-size: .65rem; }
}

@media (max-width: 375px) {
  .rp-card { padding: 1rem; }
  .rp-cta-btn { padding: .65rem 1rem; font-size: .85rem; }

  /* Section padding */
  .rp-section { padding: 2rem 0 2.5rem; }
}

/* ─────────────────────────────────────────────────────────────────
   8. ABOUT & METHODOLOGY PAGES
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* Hero padding — 96px is too tall on phones */
  .ab-hero { padding: 60px 0 48px; }
  .meth-hero { padding: 52px 0 40px; }

  /* Section spacing */
  .ab-section { padding: 60px 0; }

  /* Stats strip: remove right border in 2-col layout (looks odd) */
  .ab-stat-cell:nth-child(2) { border-right: none; }
  .ab-stat-cell:nth-child(3) { border-right: 1px solid rgba(255,255,255,.08); }
}

@media (max-width: 480px) {
  .ab-hero { padding: 44px 0 36px; }
  .meth-hero { padding: 40px 0 32px; }

  /* h1 explicit override — clamp(2.4rem, 5vw) = ~16px at 320px */
  .ab-hero h1 { font-size: 1.875rem; }
  .ab-hero-sub { font-size: 1rem; margin-bottom: 28px; }
  .ab-eyebrow { margin-bottom: 18px; font-size: .68rem; }

  /* Section spacing */
  .ab-section { padding: 48px 0; }

  /* Persona cards */
  .ab-persona-card { padding: 20px; }

  /* Methodology timeline: tighter label column */
  .meth-tl-row { grid-template-columns: 110px 1fr; }
  .meth-tl-freq { padding: 14px 14px; font-size: .75rem; }
  .meth-tl-body { padding: 14px 14px; }
}

@media (max-width: 375px) {
  .ab-hero { padding: 36px 0 28px; }
  .ab-hero h1 { font-size: 1.625rem; }
  .ab-section { padding: 40px 0; }

  /* Hero CTA buttons */
  .ab-hero-actions { gap: 8px; }
  .ab-btn { padding: 9px 16px; font-size: .85rem; }

  /* Methodology timeline: go full-column */
  .meth-tl-row { grid-template-columns: 1fr; }
  .meth-tl-freq {
    border-right: none;
    border-bottom: 1px solid var(--border, #e4e4e7);
    padding-bottom: 10px;
    background: var(--bg-alt);
  }

  /* Methodology section spacing */
  .meth-hero { padding: 32px 0 24px; }
}

/* ─────────────────────────────────────────────────────────────────
   9. FOOTER
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Footer bottom bar already stacks at 768px; center it on small phones */
  .footer-legal {
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
  }
  .footer-legal a { font-size: .78rem; }
}

/* ─────────────────────────────────────────────────────────────────
   10. FORMS & INPUTS
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* Prevent iOS auto-zoom on focus (requires >= 16px) */
  input[type="text"],
  input[type="email"],
  input[type="search"],
  input[type="number"],
  select,
  textarea { font-size: 16px; }

  /* Hero search box */
  .search-input { font-size: 16px; }
}

/* ─────────────────────────────────────────────────────────────────
   11. BREADCRUMB
   ───────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .breadcrumb {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .breadcrumb::-webkit-scrollbar { display: none; }
}

/* ─────────────────────────────────────────────────────────────────
   12. TOUCH DEVICE IMPROVEMENTS
   ───────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Disable transform hovers that feel wrong on touch */
  .rp-card:hover  { transform: none; box-shadow: none; }
  .sc2-card:hover { transform: none; box-shadow: var(--shadow-sm, 0 1px 3px rgba(0,0,0,.06)); }

  /* Ensure minimum tap target heights */
  .faq-block-btn { min-height: 52px; }
  .rp-cta-btn    { min-height: 48px; }
  .nav-link      { min-height: 44px; }
  .btn           { min-height: 44px; }

  /* Remove subtle hover backgrounds that don't trigger on touch */
  .meth-tl-row:hover  { background: transparent; }
  .ab-stat-cell:hover { background: transparent; }
}

/* ─────────────────────────────────────────────────────────────────
   13. LANDSCAPE PHONE ADJUSTMENTS
   ───────────────────────────────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  /* When keyboard is up or landscape on small phone */
  .ab-hero  { padding: 32px 0 24px; }
  .meth-hero { padding: 28px 0 20px; }

  /* Nav dropdown: scrollable in landscape */
  .nav-links.open {
    max-height: calc(100vh - var(--header-h, 64px));
    overflow-y: auto;
  }
}