/* ============================================================
   SattaKingReports.com — Responsive v4 (Full Mobile Fix)
   ============================================================ */

/* ==========================================================
   LG: ≤1100px
   ========================================================== */
@media (max-width:1100px) {
  .footer-grid { grid-template-columns:1fr 1fr; }
}

/* ==========================================================
   MD: ≤900px
   ========================================================== */
@media (max-width:900px) {
  .navbar-nav { display:none; }
  .mobile-menu-btn { display:flex; }

  .grid-3 { grid-template-columns:repeat(2,1fr); }
  .grid-4 { grid-template-columns:repeat(2,1fr); }
  .grid-5 { grid-template-columns:repeat(3,1fr); }

  .hero-title { font-size:var(--t-3xl); }
  .live-results-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }

  /* Market cards */
  .mkt-cards-grid { grid-template-columns:repeat(2,1fr); }

  /* Inner page filter bar */
  .inner-filter-bar { flex-direction:column; }
  .ifb-group { min-width:100%; }
  .ifb-group.ifb-actions { flex-direction:row; }
}

/* ==========================================================
   SM: ≤640px — Main breakpoint for table transforms
   ========================================================== */
@media (max-width:640px) {
  :root { --t-huge:3rem; }
  .section { padding:var(--s10) 0; }
  .inner-section { padding:var(--s8) 0; }

  /* Grids */
  .grid-2,.grid-3,.grid-4,.grid-5 { grid-template-columns:1fr; }
  .mkt-cards-grid { grid-template-columns:1fr; }

  /* Hero */
  .hero-title { font-size:var(--t-2xl); }
  .hero-subtitle { font-size:var(--t-base); }
  .hero-stats { flex-direction:column; gap:0; max-width:280px; }
  .hero-stat { border-right:none; border-bottom:1px solid var(--border); }
  .hero-stat:last-child { border-bottom:none; }

  /* Search */
  .hero-search-form { padding:0 var(--s3); }
  .search-btn { padding:0 14px; }
  .search-btn .btn-text { display:none; }

  /* Section headers */
  .sec-header { padding:var(--s3) var(--s4); gap:var(--s3); }
  .sec-header h2 { font-size:var(--t-base); }
  .sec-header-icon { font-size:1.4rem; }

  /* Live panel */
  .live-results-grid { grid-template-columns:repeat(2,1fr); }

  /* Timings */
  .timings-grid { grid-template-columns:1fr; }

  /* Year cards */
  .year-cards-grid { grid-template-columns:repeat(2,1fr); }

  /* Footer */
  .footer-grid { grid-template-columns:1fr; }
  .footer-col:not(:first-child) { display:none; }

  /* ── RESULTS TABLE → CARD LAYOUT ─────────────────────── */
  /*
   * On mobile each row becomes a self-contained card.
   * We use data-label on each <td> via CSS content trick.
   * The PHP already outputs the table — no markup changes needed.
   * We read the label from ::before using a hardcoded mapping
   * based on nth-child position.
   */

  .results-table-wrap {
    border:none;
    border-radius:0;
    overflow:visible;
    box-shadow:none;
    background:transparent;
  }

  .results-table { display:block; width:100%; }

  .results-table thead { display:none; } /* hide header — labels shown via ::before */

  .results-table tbody { display:flex; flex-direction:column; gap:var(--s3); }

  .results-table tbody tr {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0;
    background:var(--bg-card);
    border:1px solid var(--border-light);
    border-radius:var(--r);
    overflow:hidden;
    box-shadow:var(--shadow-sm);
    position:relative;
    padding-bottom:0;
  }
  .results-table tbody tr:nth-child(odd),
  .results-table tbody tr:nth-child(even) { background:var(--bg-card); }
  .results-table tbody tr:hover { background:var(--bg-hover); }

  .results-table td {
    display:flex;
    flex-direction:column;
    padding:10px 14px;
    font-size:var(--t-sm);
    border-bottom:1px solid var(--border);
    border-right:1px solid var(--border);
    text-align:left !important;
    position:relative;
  }
  .results-table td:nth-child(odd) { border-right:1px solid var(--border); }
  .results-table td:nth-child(even) { border-right:none; }

  /* Label above each value */
  .results-table td::before {
    content:attr(data-label);
    font-size:var(--t-xs);
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.08em;
    color:var(--text-3);
    font-family:'Rajdhani',sans-serif;
    margin-bottom:4px;
    line-height:1;
  }

  /* Market name cell — spans full width at top */
  .results-table td:first-child {
    grid-column:1/-1;
    background:linear-gradient(90deg, var(--red-dark), #1a0010);
    border-right:none;
    border-bottom:1px solid var(--border);
    padding:10px 14px;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:var(--s3);
  }
  .results-table td:first-child::before {
    display:none; /* market name speaks for itself */
  }
  .results-table td:first-child .result-market-name {
    font-size:var(--t-base);
    color:#fff;
  }

  /* Status cell — spans full width at bottom */
  .results-table td:last-child {
    grid-column:1/-1;
    border-right:none;
    border-bottom:none;
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
  }

  /* Result number — make it larger on mobile */
  .results-table .result-number {
    font-size:2.2rem;
    line-height:1;
  }

  /* ── YEARLY RECORD TABLE ───────────────────────────────── */
  /* Only scroll when content actually overflows (many year columns) */
  .yearly-record-table-wrap {
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  .yearly-record-table {
    /* No min-width — fills available space naturally with few columns */
    font-size:var(--t-xs);
  }
  .yearly-record-table tbody td,
  .yearly-record-table thead th { padding:7px 4px; }
  /* Market name column stays compact on mobile */
  .yearly-record-table thead th:first-child,
  .yearly-record-table tbody td:first-child { min-width:90px; }

  /* ── CHART GRID TABLE → HORIZONTAL SCROLL ─────────────── */
  .chart-grid-outer { overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .chart-grid-table { min-width:320px; }

  /* ── MARKET PAGE results table ─────────────────────────── */
  .inner-section .results-table-wrap {
    border:none; overflow:visible;
  }
}

/* ==========================================================
   XS: ≤420px
   ========================================================== */
@media (max-width:420px) {
  .hero-title { font-size:var(--t-xl); }
  .year-cards-grid { grid-template-columns:repeat(2,1fr); }
  .mkt-result-num { font-size:3rem; }
  .mkt-card-btns { grid-template-columns:1fr 1fr; }

  .results-table tbody tr { grid-template-columns:1fr 1fr; }

  /* Inner page header */
  .inner-page-header h1 { font-size:var(--t-xl); }
  .inner-page-header p { font-size:var(--t-sm); }

  /* Filter bar */
  .inner-filter-bar { padding:var(--s3); }

  /* Live panel */
  .live-results-panel .live-results-grid { grid-template-columns:1fr 1fr; }
  .lrc-number { font-size:1.8rem; }
}

/* ==========================================================
   Print
   ========================================================== */
@media print {
  .navbar,.announcement-bar,.back-to-top,.site-footer { display:none; }
  body { background:#fff; color:#000; }
  .result-number { color:#000; }
  .results-table-wrap { border:1px solid #ccc; overflow:visible; }
}

/* ==========================================================
   Reduced Motion
   ========================================================== */
@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .ticker-content { animation:none; }
  .scroll-animate { opacity:1 !important; transform:none !important; }
}

/* ── Promo section mobile heading fix ─────────────────────── */
@media (max-width:640px) {
  .promo-admin-name {
    font-size:var(--t-lg) !important;
    letter-spacing:0.03em;
  }
  .promo-khaiwal-header {
    font-size:var(--t-lg) !important;
    padding:var(--s3) var(--s4);
  }
  .promo-admin-header {
    padding:var(--s3) var(--s4);
    gap:var(--s2);
  }
  .promo-admin-icon { font-size:1.2rem; }
  .promo-admin-message {
    font-size:var(--t-sm);
    padding:var(--s4);
    margin:var(--s3);
    line-height:1.8;
  }
  .promo-market-item { font-size:var(--t-base); }
  .pmi-time { font-size:var(--t-lg); }
}

@media (max-width:400px) {
  .promo-admin-name { font-size:var(--t-base) !important; }
  .promo-khaiwal-header { font-size:var(--t-base) !important; }
}