/* ============================================================
   Global responsive optimisations — maheshika.com
   Applied to all pages via <link> in every HTML file
   Breakpoints: 767px = mobile, 1023px = tablet/small laptop
   ============================================================ */

/* ── TABLET / SMALL LAPTOP (768px – 1023px) ─────────────── */
@media (max-width: 1023px) {

  /* Container padding — tighten on smaller screens */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
  }

  /* Hero sections — compress vertical padding */
  section[style*="min-height: 88vh"],
  section[style*="min-height:88vh"] {
    min-height: auto !important;
    padding-top: 5rem !important;
    padding-bottom: 3.5rem !important;
  }

  /* Hero two-column: collapse to single column on tablet */
  .hero-audience-strip { display: none !important; }

  /* Deep dive grids at tablet: ensure columns don't crush */
  .grid.md\:grid-cols-2 {
    gap: 2.5rem !important;
  }

  /* Stage deep dive cards — don't use min-height on tablet */
  [style*="min-height: 280px"] {
    min-height: 200px !important;
  }

}

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

  /* Prevent horizontal scroll */
  html, body { overflow-x: hidden; max-width: 100%; }

  /* iOS Safari auto-zoom fix */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="search"],
  input[type="password"],
  textarea,
  select { font-size: 16px !important; }

  /* ── CONTAINERS ── */
  .max-w-7xl, .max-w-6xl, .max-w-5xl, .max-w-4xl, .max-w-3xl, .max-w-2xl, .max-w-xl {
    padding-left: 1.25rem !important;
    padding-right: 1.25rem !important;
  }
  .px-6 { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }

  /* ── SECTION PADDING ── */
  section[style*="padding: 5.5rem 0"],
  section[style*="padding: 5rem 0"] {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  section[style*="padding: 6rem 0"],
  section[style*="padding-top: 6rem"],
  section[style*="padding-top: 5rem"] {
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
  }
  section[style*="padding-top: 7rem"] {
    padding-top: 4.5rem !important;
    padding-bottom: 3rem !important;
  }
  .py-24 { padding-top: 3rem !important; padding-bottom: 3rem !important; }
  .py-32 { padding-top: 3.5rem !important; padding-bottom: 3.5rem !important; }
  .pt-14 { padding-top: 2.5rem !important; }
  .pb-10 { padding-bottom: 1.5rem !important; }

  /* ── HERO SECTIONS ── */
  /* Center hero text on mobile */
  section[style*="min-height: 88vh"] .grid > div:first-child,
  section[style*="min-height:88vh"] .grid > div:first-child {
    text-align: center;
  }
  /* Center hero pills/badges on mobile */
  section[style*="min-height: 88vh"] .flex.flex-wrap,
  section[style*="min-height:88vh"] .flex.flex-wrap {
    justify-content: center;
  }
  /* Stack hero buttons on mobile */
  section[style*="min-height: 88vh"] .flex.flex-wrap.gap-4,
  section[style*="min-height:88vh"] .flex.flex-wrap.gap-4 {
    flex-direction: column;
    align-items: stretch;
  }
  section[style*="min-height: 88vh"] .flex.flex-wrap.gap-4 a,
  section[style*="min-height:88vh"] .flex.flex-wrap.gap-4 a {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  /* Hide hero photo on mobile to keep above-fold clean */
  section[style*="min-height: 88vh"] .grid > div:last-child,
  section[style*="min-height:88vh"] .grid > div:last-child {
    display: none;
  }
  /* Compress hero min-height */
  section[style*="min-height: 88vh"],
  section[style*="min-height:88vh"] {
    min-height: auto !important;
    padding-top: 5.5rem !important;
    padding-bottom: 3rem !important;
  }

  /* ── GRIDS → SINGLE COLUMN ── */
  .grid { grid-template-columns: 1fr !important; }
  .md\:grid-cols-2, .md\:grid-cols-3, .md\:grid-cols-4 { grid-template-columns: 1fr !important; }

  /* Journey cards stack: override inline JS on narrow mobile */
  #journey-grid { grid-template-columns: 1fr !important; }

  /* Value chain cards: restore borders and radius when stacked */
  #value-chain-grid { gap: 0.75rem !important; }
  #value-chain-grid > div {
    border-radius: 1.25rem !important;
    border-left-width: 1px !important;
    border-right-width: 1px !important;
  }

  /* Hero strip: stack cleanly on mobile */
  .hero-strip { border-radius: 0.75rem !important; }
  .hero-strip > div { border-right: none !important; border-bottom: 1px solid rgba(255,255,255,0.06); }
  .hero-strip > div:last-child { border-bottom: none; }

  /* ── FLEX STACKING ── */
  .sm\:flex-row { flex-direction: column !important; }
  .flex.gap-4:not(.flex-wrap):not([class*="items-center"]) { flex-direction: column; }

  /* ── TYPOGRAPHY SCALING ── */
  h1, h2, h3, p { overflow-wrap: break-word; word-break: break-word; }
  /* Prevent huge display headings from overflowing */
  .font-display[style*="font-size: clamp"] { font-size: clamp(1.875rem, 8vw, 3rem) !important; }

  /* ── SPACING ── */
  .mb-16 { margin-bottom: 2rem !important; }
  .mb-14 { margin-bottom: 1.75rem !important; }
  .mb-12 { margin-bottom: 1.5rem !important; }
  .mb-20 { margin-bottom: 2.5rem !important; }
  .mt-14 { margin-top: 2rem !important; }
  .mt-12 { margin-top: 1.75rem !important; }
  .gap-14 { gap: 2rem !important; }
  .gap-10 { gap: 1.5rem !important; }
  .gap-12 { gap: 1.75rem !important; }

  /* Deep dive section row gaps */
  .mb-24 { margin-bottom: 3rem !important; }
  .lg\:gap-20 { gap: 2rem !important; }
  .gap-12 { gap: 1.5rem !important; }

  /* ── BUTTONS ── */
  .btn-gold, .btn-ghost { min-height: 48px; padding: 0.875rem 1.75rem; font-size: 0.6875rem; }
  .btn-gold-hero { width: 100%; font-size: 0.875rem; padding: 1.125rem 1.5rem; }
  /* Journey CTAs already full-width by design */

  /* ── CARDS ── */
  .journey-card { padding: 1.5rem 1.25rem; }
  .step-card, .tool-card, .kit-card { padding: 1.25rem 1rem !important; }
  .persona-card { padding: 1.25rem 1rem; }
  .result-card { min-height: unset !important; }

  /* Stage deep dive cards — no fixed height on mobile */
  [style*="min-height: 280px"] { min-height: auto !important; padding: 2rem 1.25rem !important; }

  /* ── TOOL PAGES: FORM + RESULT AREAS ── */
  /* Score circle stays centered */
  .score-ring { margin-left: auto; margin-right: auto; }
  /* Progress bar full width */
  .progress-track { width: 100%; }
  /* Two-path enhance section full width buttons */
  #ars-enhance > div { width: 100%; margin-bottom: 0.75rem; }
  /* Form textarea — taller minimum */
  #rpt-profile, textarea { min-height: 160px; }

  /* ── TOOL HERO BANNERS ── */
  /* Center the pill + title + subtitle in tool page heroes */
  section[style*="background: linear-gradient"] > div > div[style*="text-align"] {
    text-align: center !important;
  }
  /* Center pill badges in tool heroes */
  [style*="border-radius: 999px"][style*="display: inline"] {
    display: block !important;
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content;
  }

  /* ── CREDIBILITY STRIP ── */
  .credibility-strip p {
    font-size: 0.75rem;
    letter-spacing: 0;
    line-height: 2;
  }

  /* ── KIT / CHECKLIST CARDS ── */
  .kit-card p, .kit-checklist p { font-size: 0.875rem !important; }

  /* ── TABLES ── */
  table { width: 100%; overflow-x: auto; display: block; }

  /* ── FOOTER ── */
  footer { padding-top: 2.5rem !important; padding-bottom: 2rem !important; }
  footer .grid { gap: 1.5rem !important; }

  /* ── PRICE / PURCHASE BLOCKS ── */
  .price-block { flex-wrap: wrap; gap: 0.75rem; }

  /* ── ANIMATIONS ── */
  /* Disable reveal on mobile — content loads visible */
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* ── HERO AUDIENCE STRIP ── */
  /* Hide right-column audience cards on mobile */
  .hero-audience-strip { display: none !important; }

  /* ── NAV ── */
  .nav-empire-dropdown { max-width: calc(100vw - 2rem); }

}

/* ── TOUCH TARGETS (all screen sizes) ─────────────────────── */
button, a, [role="button"] { -webkit-tap-highlight-color: transparent; }
input, textarea, select, button { touch-action: manipulation; }