/* ============================================================
   Adarsha ReelHub — Responsive Design Patch
   Mobile-first overrides for all views (submit, judge, control, consent)
   ============================================================ */

/* ── Global resets ─────────────────────────────────────────── */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
img, video { max-width: 100%; height: auto; }
button, input, select, textarea { max-width: 100%; }

/* ── SUBMIT PAGE ───────────────────────────────────────────── */

/* Tighten wrap on tiny screens */
@media (max-width: 374px) {
  .wrap { padding: 8px 8px 32px; }
  .intro { padding: 12px 12px 4px; }
  .content { padding: 8px 12px 16px; }
  .intro h1 { font-size: 19px; }
  .drop .title { font-size: 17px; }
  .drop .big { font-size: 28px; }
  .chips { grid-template-columns: 1fr 1fr; gap: 8px; }
  .chip span { min-height: 48px; font-size: 16px; }
  button.primary { min-height: 50px; font-size: 17px; }
}

/* Submit: bottom bar safe area */
@media (max-width: 480px) {
  .bottombar { padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); }
  .bottombar .inner { max-width: 100%; }
  body.has-bar { padding-bottom: 110px; }
}

/* Submit: picked video card responsive */
@media (max-width: 400px) {
  .picked { gap: 8px; padding: 8px; }
  .picked video { width: 48px; height: 76px; }
  .pickedText strong { font-size: 15px; }
}

/* ── JUDGE PAGE ────────────────────────────────────────────── */

/* Judge: scale buttons on small screens */
@media (max-width: 480px) {
  .scale { grid-template-columns: repeat(5, 1fr); gap: 5px; }
  .scale span { min-height: 44px; font-size: 14px; }
  .total { grid-template-columns: 1fr; gap: 6px; }
  .total div { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; }
  .total small { margin-bottom: 0; }
  .reelHead h2 { font-size: 18px; }
  video { max-height: 50vh; border-radius: 10px; }
  .topbar { padding: 8px 10px; gap: 6px; }
  .brand { gap: 8px; font-size: 14px; }
  .brand small { font-size: 12px; }
}

/* Judge: reels list horizontal scroll on mobile */
@media (max-width: 820px) {
  .desk { gap: 10px; }
  .reels { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 5px; }
  .reels button { min-height: 40px; padding: 6px 8px; font-size: 13px; }
  .stage { gap: 12px; }
  .actions { gap: 8px; }
  .actions .primary { width: 100%; }
  fieldset { margin-bottom: 10px; }
  legend { font-size: 15px; }
  .marks label { padding: 6px 8px; font-size: 14px; }
}

/* ── CONTROL CENTRE (React dashboard) ─────────────────────── */

/* Tablet: 768–1000px — refine the existing 1000px breakpoint */
@media (max-width: 1000px) {
  .action-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .hero { padding: 22px 24px; }
  .hero h2 { font-size: 24px; }
  .score strong, .attention strong { font-size: 38px; }
  .publish-progress-row { grid-template-columns: 1fr; gap: 10px; }
  .delivery-badges { grid-template-columns: 1fr; }
  .review-desk { grid-template-columns: 1fr; }
  .review-compare video { height: 320px; }
  .studio-selectors { grid-template-columns: 1fr 1fr; }
}

/* Mobile: ≤700px — heavy overrides for phone screens */
@media (max-width: 700px) {
  /* Nav: horizontal scrollable strip */
  aside { padding: 10px 8px !important; overflow-x: auto; }
  nav { gap: 2px !important; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  nav button { padding: 8px 10px !important; font-size: 13px !important; white-space: nowrap; min-height: 40px; }
  nav i { font-size: 16px !important; width: 16px !important; }

  /* Main content */
  main { padding: 16px 12px 48px !important; }

  /* Hero banner */
  .hero { flex-direction: column; text-align: center; padding: 18px 14px !important; gap: 14px; }
  .hero h2 { font-size: 20px !important; }
  .hero p { font-size: 14px; }
  .pill { font-size: 9px; }
  .score, .attention { margin: 0 !important; }
  .score strong, .attention strong { font-size: 32px !important; }
  .attention { width: 100%; }

  /* Action grid */
  .action-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .action-card { grid-template-columns: 32px 1fr; gap: 2px 10px; min-height: auto; padding: 12px; }
  .action-icon { width: 32px; height: 32px; font-size: 14px; }
  .action-card strong { font-size: 13px; }
  .action-card small { font-size: 12px; }

  /* Metric cards */
  .grid.four, .grid.three { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .metric strong { font-size: 22px; }
  .metric span { font-size: 11px; }

  /* Typography */
  h1 { font-size: 22px !important; }
  h2 { font-size: 19px !important; }
  h3 { font-size: 15px !important; }
  header { margin-bottom: 18px !important; }
  .eyebrow { font-size: 9px; }

  /* Panels */
  .panel { padding: 14px 12px; border-radius: 10px; }
  .panel-head { gap: 8px; }

  /* Tables: allow horizontal scroll, tighten cells */
  .table-scroll { margin: 12px -12px 0; padding: 0 12px; }
  .row { gap: 8px !important; padding: 10px 12px !important; font-size: 12px !important; }
  .row.head { font-size: 9px !important; }
  .tag { font-size: 9px; padding: 3px 7px; }

  /* Settings forms */
  .settings-form { gap: 10px !important; }
  .settings-form label { font-size: 11px; }
  .settings-form input, .settings-form select, .settings-form textarea { padding: 8px; font-size: 14px; }
  .compact-form { grid-template-columns: 1fr !important; }

  /* Steps */
  .steps { grid-template-columns: 1fr !important; gap: 0 !important; }
  .step { border-left: 0 !important; border-top: 1px solid var(--line); padding: 12px 0 !important; }
  .step:first-child { border-top: 0; }

  /* Review desk */
  .review-compare video { height: 260px !important; }
  .review-controls { gap: 8px; }
  .review-controls label, .decision-box label { font-size: 11px; }
  .review-card { padding: 10px; }
  .review-card small { font-size: 11px; }

  /* Login page */
  .login form { width: 90% !important; padding: 20px 0; }
  .login form h2 { font-size: 24px; }
  .login label { font-size: 12px; }

  /* Safety bar */
  .safety-bar { gap: 8px; padding-top: 12px; margin-top: 14px; }
  .safety-bar button { padding: 8px 10px; font-size: 13px; width: 100%; }

  /* Inline actions */
  .inline-actions { gap: 6px; }
  .inline-actions button { font-size: 12px; }
  .inline-actions select { font-size: 13px; padding: 6px 8px; }
}

/* Extra-small phones: ≤375px */
@media (max-width: 375px) {
  /* Control dashboard */
  .grid.four, .grid.three, .grid.two { grid-template-columns: 1fr !important; }
  main { padding: 12px 8px 40px !important; }
  .hero { padding: 14px 10px !important; }
  .hero h2 { font-size: 18px !important; }
  .action-card { padding: 10px; }
  .metric strong { font-size: 20px; }
  nav button { padding: 6px 8px !important; }

  /* Judge */
  .scale { grid-template-columns: repeat(5, 1fr) !important; }
  .reels button { font-size: 12px; padding: 5px 6px; }

  /* Submit */
  .intro h1 { font-size: 18px; }
  .consent { padding: 10px; gap: 8px; }
  label.field { font-size: 15px; }
  input[type=text], input[type=tel] { min-height: 46px; padding: 10px 12px; font-size: 16px; }
}

/* ── Tablet landscape / small desktop: 768–1024px ─────────── */
@media (min-width: 701px) and (max-width: 1024px) {
  .action-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .grid.four { grid-template-columns: repeat(2, 1fr) !important; }
  .review-desk { gap: 14px; }
  .review-compare { gap: 10px; }
  .studio-selectors { grid-template-columns: repeat(2, 1fr); }
}

/* ── Desktop enhancements: 1025px+ ────────────────────────── */
@media (min-width: 1025px) {
  .action-grid { grid-template-columns: repeat(4, 1fr); }
  .review-compare video { height: 420px; }
}

/* ── Touch device improvements ────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  button, a, .ghost, nav button, .reels button, .review-card, .linkbtn {
    min-height: 44px;
  }
  /* Prevent text zoom on iOS inputs */
  input[type=text], input[type=tel], input[type=email], input[type=password],
  select, textarea {
    font-size: 16px !important;
  }
  /* Remove hover effects that cause sticky states on touch */
  .drop:hover { background: #f8fbfd; border-color: #9fb4c4; }
  .action-card:hover { border-color: var(--line); box-shadow: none; }
}

/* ── Print: hide nav, full-width content ──────────────────── */
@media print {
  aside, .bottombar, .topActions, nav { display: none !important; }
  .shell { display: block !important; }
  main { padding: 0 !important; max-width: 100% !important; }
  .hero { box-shadow: none; }
}

/* ── Smooth transitions for layout shifts ─────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .shell, aside, main, .hero, .grid, .action-grid, .desk, .stage {
    transition: all 0.2s ease;
  }
}

/* ── Selection & focus consistency ─────────────────────────── */
::selection { background: #1d6fb833; }
:focus-visible { outline: 3px solid #1d6fb8; outline-offset: 2px; }

/* ── Scrollbar styling for horizontal scroll areas ────────── */
.table-scroll::-webkit-scrollbar,
nav::-webkit-scrollbar,
.reels::-webkit-scrollbar { height: 4px; }
.table-scroll::-webkit-scrollbar-thumb,
nav::-webkit-scrollbar-thumb,
.reels::-webkit-scrollbar-thumb {
  background: #c3ccd6; border-radius: 4px;
}

/* ── Consent page mobile ──────────────────────────────────── */
@media (max-width: 480px) {
  /* Consent page uses body>main max-width:480, already responsive */
  body > main { padding: 16px; border-radius: 12px; margin: 0 auto; }
  body > main h1 { font-size: 19px; }
  body > main button strong { font-size: 16px; }
  body > main button small { font-size: 13px; }
}

/* ── Submit: reels gallery compact on mobile ──────────────── */
@media (max-width: 700px) {
  .showcase .reelGrid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .reelCard {
    padding: 10px;
    gap: 4px;
  }
  .reelCard .links {
    gap: 4px;
  }
  .reelCard .links a {
    padding: 6px 10px;
    font-size: 13px;
    min-height: 36px;
  }
  .showcase {
    overflow: hidden;
  }
}

@media (max-width: 375px) {
  .showcase .reelGrid {
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }
  .reelCard .links {
    flex-direction: row;
    gap: 6px;
  }
  .reelCard .links a {
    flex: 1;
    text-align: center;
    font-size: 12px;
    padding: 6px 8px;
    min-height: 34px;
  }
}