/**
 * Landing / Homepage builder — mobile table & section helpers
 * Classes are toggled from builder quick panel (lp-table-scroll, lp-mobile-stack, etc.)
 */

/* ── Section padding fix on small screens ── */
@media (max-width: 480px) {
  .lp-mobile-section {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
  .lp-mobile-section h1,
  .lp-mobile-section h2 {
    font-size: clamp(18px, 5vw, 22px) !important;
    line-height: 1.35 !important;
  }
}

/* ── Comparison / data tables ── */
.lp-compare-table,
table.lp-compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.lp-compare-table th,
.lp-compare-table td {
  word-break: break-word;
  overflow-wrap: anywhere;
  vertical-align: middle;
}

/* 3-column compare: feature | product A | product B */
.lp-compare-cols-3 {
  table-layout: fixed !important;
  width: 100% !important;
}

.lp-compare-cols-3 thead th:nth-child(1),
.lp-compare-cols-3 tbody td:nth-child(1) {
  width: 42% !important;
}

.lp-compare-cols-3 thead th:nth-child(2),
.lp-compare-cols-3 tbody td:nth-child(2),
.lp-compare-cols-3 thead th:nth-child(3),
.lp-compare-cols-3 tbody td:nth-child(3) {
  width: 29% !important;
}

.lp-compare-cols-equal thead th,
.lp-compare-cols-equal tbody td {
  width: 33.33% !important;
}

.lp-table-center {
  margin-left: auto !important;
  margin-right: auto !important;
}

.lp-table-full {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.lp-table-striped tbody tr:nth-child(even) td {
  background-color: #f9fafb;
}

.lp-table-striped tbody tr:nth-child(even) td:first-child {
  background-color: #f3f4f6;
}

/* ── Mode 1: Horizontal scroll (default for wide tables) ── */
@media (max-width: 480px) {
  .lp-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  .lp-table-scroll::after {
    content: '← swipe করে table দেখুন →';
    display: block;
    text-align: center;
    font-size: 10px;
    color: #64748b;
    padding: 8px 0 2px;
    letter-spacing: 0.2px;
  }

  .lp-table-scroll .lp-compare-table,
  .lp-table-scroll > table,
  .lp-table-scroll table {
    min-width: 520px;
    width: max-content;
    max-width: none;
  }
}

/* ── Mode 2: Compact text on mobile ── */
@media (max-width: 480px) {
  .lp-mobile-compact .lp-compare-table th,
  .lp-mobile-compact .lp-compare-table td,
  .lp-mobile-compact table th,
  .lp-mobile-compact table td {
    padding: 7px 5px !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
  }

  .lp-mobile-compact .lp-compare-table th br,
  .lp-mobile-compact table th br {
    display: none;
  }
}

/* ── Mode 3: Card stack (best for 3-column compare tables) ── */
@media (max-width: 480px) {
  .lp-mobile-stack.lp-table-scroll::after {
    display: none;
  }

  .lp-mobile-stack .lp-compare-table,
  .lp-mobile-stack > table,
  .lp-mobile-stack table {
    display: block;
    min-width: 0 !important;
    width: 100% !important;
  }

  .lp-mobile-stack thead {
    display: none;
  }

  .lp-mobile-stack tbody {
    display: block;
  }

  .lp-mobile-stack tr {
    display: block;
    margin-bottom: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  }

  .lp-mobile-stack td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 12px !important;
    border-bottom: 1px solid #f3f4f6 !important;
    font-size: 13px !important;
    text-align: left !important;
  }

  .lp-mobile-stack td:last-child {
    border-bottom: none !important;
  }

  .lp-mobile-stack td::before {
    content: attr(data-label);
    font-weight: 700;
    color: #374151;
    font-size: 11px;
    flex: 0 0 auto;
    max-width: 52%;
    line-height: 1.3;
  }

  .lp-mobile-stack td:first-child {
    display: block;
    background: #f9fafb;
    font-weight: 700;
    font-size: 14px !important;
    text-align: center !important;
    padding: 12px !important;
  }

  .lp-mobile-stack td:first-child::before {
    display: none;
  }
}

/* ── Mode 4: Side-by-side fit (3 columns visible, no swipe) ── */
@media (max-width: 480px) {
  .lp-mobile-fit {
    overflow-x: visible !important;
  }

  .lp-mobile-fit::after,
  .lp-mobile-fit.lp-table-scroll::after {
    display: none !important;
  }

  .lp-mobile-fit .lp-compare-table,
  .lp-mobile-fit > table,
  .lp-mobile-fit table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
  }

  .lp-mobile-fit .lp-compare-table th:first-child,
  .lp-mobile-fit .lp-compare-table td:first-child,
  .lp-mobile-fit table th:first-child,
  .lp-mobile-fit table td:first-child {
    width: 40% !important;
  }

  .lp-mobile-fit .lp-compare-table th,
  .lp-mobile-fit .lp-compare-table td,
  .lp-mobile-fit table th,
  .lp-mobile-fit table td {
    padding: 8px 4px !important;
    font-size: 10px !important;
    line-height: 1.25 !important;
    hyphens: auto;
  }

  .lp-mobile-fit .lp-compare-table th,
  .lp-mobile-fit table th {
    font-size: 9px !important;
    font-weight: 800 !important;
  }

  .lp-mobile-fit .lp-compare-table th br,
  .lp-mobile-fit table th br {
    display: none;
  }

  /* ✓ ✗ columns stay readable */
  .lp-mobile-fit .lp-compare-table td:not(:first-child),
  .lp-mobile-fit table td:not(:first-child) {
    font-size: 17px !important;
    padding: 8px 2px !important;
    text-align: center !important;
  }
}

/* Builder canvas: also apply when device preview is narrow (GrapesJS mobile frame) */
@media (max-width: 375px) {
  .lp-table-scroll .lp-compare-table,
  .lp-table-scroll > table,
  .lp-table-scroll table {
    min-width: 480px;
  }
}