/* =============================================================
   Global responsive overrides
   Applied site-wide to harden every page on tablet / mobile.
   Loaded via <link> in every HTML file.
   ============================================================= */

/* ── Universal box / overflow safety ─────────────────────── */
html, body { max-width: 100%; overflow-x: hidden; }
img, video, svg { max-width: 100%; height: auto; }
table { max-width: 100%; }

/* Make any wide inline element wrap nicely */
h1, h2, h3, h4, p, li, span, a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ── Tablet (≤1024px) ────────────────────────────────────── */
@media (max-width: 1024px) {
  /* Generic section padding shrink */
  section[style*="padding: 120px 64px"],
  section[style*="padding: 100px 64px"],
  section[style*="padding: 80px 64px"] {
    padding-left: 28px !important;
    padding-right: 28px !important;
  }

  /* Headers used in many pages */
  header[style*="padding: 80px 32px"],
  header[style*="padding: 100px 32px"],
  header[style*="padding: 70px 24px"] {
    padding-top: 56px !important;
    padding-bottom: 28px !important;
  }

  /* Force any 4-column grid to 2-column */
  div[style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* 3-col → 2-col */
  div[style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ── Mobile (≤700px) ─────────────────────────────────────── */
@media (max-width: 700px) {
  /* All multi-column grids collapse to single column */
  div[style*="grid-template-columns: repeat(2, 1fr)"],
  div[style*="grid-template-columns: repeat(3, 1fr)"],
  div[style*="grid-template-columns: repeat(4, 1fr)"],
  div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Section padding minimal */
  section, main, header, article, aside, footer {
    padding-left: max(16px, env(safe-area-inset-left)) !important;
    padding-right: max(16px, env(safe-area-inset-right)) !important;
  }
  /* Preserve vertical paddings — only override horizontal via above */

  /* Big hero text shrinks */
  h1.h-display, h1 {
    font-size: clamp(28px, 8vw, 38px) !important;
  }
  h2.h-display, h2 {
    font-size: clamp(24px, 6.5vw, 32px) !important;
  }

  /* Buttons that often have inline padding */
  .btn-primary, .btn-ghost {
    padding: 12px 22px !important;
    font-size: 14px !important;
    width: auto;
  }

  /* CTA rows often laid out as flex with gap=16 — keep wrapping */
  .cta-row, .pr-row, .compare-cta-row, .case-cta-row {
    gap: 10px !important;
  }

  /* Large card padding shrink */
  .watercolor-card,
  .glass-card,
  .glass-card-dark,
  .sec-card,
  .section-card,
  .verdict-card,
  .form-wrap,
  .positioning-card,
  .feature-card,
  .pain-card,
  .article-card,
  .plan-recommend,
  .case-cta,
  .compare-cta {
    padding: 24px 22px !important;
  }

  /* Reduce huge font-sizes in pricing / hero numbers */
  .pr-price, .num, .stat-tile-number, .kpi-tile .number,
  .result-headline-value {
    font-size: clamp(32px, 12vw, 48px) !important;
  }

  /* Tables: allow horizontal scroll */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
  .feat-table { white-space: normal; }
  .feat-table td.cell-feature .note { white-space: normal; }
}

/* ── Very small (≤400px) ─────────────────────────────────── */
@media (max-width: 400px) {
  h1.h-display, h1 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }
  .pdf-cover {
    padding: 22px 18px !important;
  }
}

/* ── Tablet + mobile: simplify language toggle ───────────── */
@media (max-width: 700px) {
  [role="group"][aria-label*="言語"] button,
  [role="group"][aria-label*="Language"] button,
  [role="group"][aria-label*="Idioma"] button {
    min-width: 22px !important;
    padding: 4px 6px !important;
    font-size: 10px !important;
  }
}

/* ── Form fields stretch full width ──────────────────────── */
@media (max-width: 700px) {
  input[type="text"], input[type="email"], input[type="tel"],
  textarea, select {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── Make Hero before/after stack on mobile ──────────────── */
@media (max-width: 760px) {
  .hero-section { padding: 32px 16px 56px !important; }
  .hero-float-1, .hero-float-2 { display: none !important; }
  .hero-ba-grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .hero-ba-grid > div:nth-child(2) {
    transform: rotate(90deg);
    margin: 8px 0;
  }
}

/* ── Footer mobile: stack columns ───────────────────────── */
@media (max-width: 700px) {
  .footer-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .site-footer {
    padding: 48px 20px 28px !important;
  }
}

/* ── Reduce huge inline 3-col layouts (Pricing, Worries) ── */
@media (max-width: 700px) {
  .pricing-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .worries-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}

/* ── Compare table: scroll-x on mobile ───────────────────── */
@media (max-width: 700px) {
  .feat-table th, .feat-table td {
    padding: 10px 8px !important;
    font-size: 12.5px !important;
  }
}

/* ── ROI calculator: stack form + result ────────────────── */
@media (max-width: 880px) {
  .calc-grid {
    grid-template-columns: 1fr !important;
  }
  .result-card {
    position: static !important;
  }
}

/* ── Article preview cards (Plugin Articles): full width ── */
@media (max-width: 700px) {
  .articles-content {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    padding: 16px 12px 48px !important;
  }
  .col-left, .col-right {
    grid-template-columns: 1fr !important;
  }
}

/* ── DL page grid stack ──────────────────────────────────── */
@media (max-width: 700px) {
  .dl-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    padding: 0 16px !important;
  }
  .pdf-cover {
    aspect-ratio: auto !important;
  }
}

/* ── Diagnosis option buttons: full width ──────────────── */
@media (max-width: 700px) {
  .opt-btn {
    font-size: 14px !important;
    padding: 12px 14px !important;
  }
}