/* ============== CRESTVIEW OUTDOORS — MOBILE ============== */
/* Aggressively responsive overrides. The base site uses inline styles
   with px grids; these media queries override them via attribute
   selectors so we don't have to rewrite every component. */

/* === TABLET: 4-col → 2-col, 3-col → 2-col === */
@media (max-width: 1024px) {
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  [style*="grid-template-columns: repeat(3, 1fr)"],
  [style*="grid-template-columns:repeat(3,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  .container { padding-left: 24px !important; padding-right: 24px !important; }
}

/* === PHONE: collapse everything to single column === */
@media (max-width: 720px) {
  body { font-size: 15px; }
  .container { padding-left: 16px !important; padding-right: 16px !important; max-width: 100% !important; }
  .container--narrow { padding-left: 16px !important; padding-right: 16px !important; }

  /* All grids → 1 column */
  [style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  /* Exception: keep 4-col KPI strips as 2-col so the dashboard still feels dense */
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Reduce padding on hero-style sections */
  section [style*="padding: 56px 32px"],
  section [style*="padding: 64px 32px"],
  section [style*="padding: 72px 32px"],
  section [style*="padding: 80px 0"],
  section [style*="padding: 48px 32px"] {
    padding: 32px 16px !important;
  }
  [style*="padding: 60px 56px"], [style*="padding: 60px"] { padding: 28px 20px !important; }
  [style*="padding: 32px 32px 64px"], [style*="padding: 32px 32px 80px"] { padding: 20px 16px 40px !important; }
  [style*="padding: 120px 32px"] { padding: 56px 16px !important; }
  [style*="padding: 40px 32px"] { padding: 24px 16px !important; }
  [style*="padding: 48px 32px"] { padding: 28px 16px !important; }

  /* Type scale */
  h1 { font-size: clamp(28px, 9vw, 44px) !important; line-height: .95 !important; }
  h2 { font-size: clamp(24px, 7vw, 36px) !important; line-height: 1 !important; }
  h3 { font-size: clamp(18px, 5vw, 24px) !important; }
  [style*="font-size: 96"], [style*="font-size: 104"], [style*="font-size: 88"], [style*="font-size: 72"] { font-size: 44px !important; }
  [style*="font-size: 56"], [style*="font-size: 64"] { font-size: 32px !important; }
  [style*="font-size: 48"] { font-size: 28px !important; }
  [style*="font-size: 44"], [style*="font-size: 40"] { font-size: 26px !important; }
  [style*="font-size: 36"], [style*="font-size: 32"] { font-size: 22px !important; }
  [style*="clamp(56px, 8vw, 104px)"] { font-size: 40px !important; }

  /* Disable sticky right rails on mobile */
  [style*="position: sticky"], [style*="position:sticky"] { position: static !important; top: auto !important; }

  /* Marquee tighter */
  .marquee { font-size: 10px; padding: 7px 0; letter-spacing: .2em; }

  /* Top nav padding */
  header > .container { padding: 12px 16px !important; }

  /* Tables: horizontal scroll */
  .card .tbl, .tbl {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  .tbl thead, .tbl tbody, .tbl tr {
    display: table !important;
    width: max-content;
    min-width: 100%;
  }

  /* Buttons: full width when stacked */
  .btn { font-size: 13px; padding: 12px 16px; }
  .btn--block { width: 100%; }

  /* Cards: drop the hard shadow on mobile (saves precious horizontal space) */
  .card { box-shadow: 2px 2px 0 var(--ink); }

  /* Footer */
  footer > .container { padding: 36px 16px 24px !important; }
  footer > div[style*="border-top"] { padding: 16px !important; flex-direction: column !important; gap: 8px; text-align: center; }

  /* Hero stack: drop the floating sticker because it overflows */
  .sticker[style*="position: absolute"], [style*="position: absolute"][style*="top: -22px"] {
    position: static !important;
    margin-bottom: 12px;
  }

  /* Tabs scroll horizontally if too many */
  .tabs { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
  .tab { flex-shrink: 0; }

  /* Marquee bar — make crumb breadcrumbs wrap */
  .container[style*="display: flex"][style*="alignItems: center"][style*="font-size: 12"] {
    flex-wrap: wrap;
  }

  /* Countdown cells smaller */
  .countdown__cell { min-width: 44px; padding: 6px 8px; }
  .countdown__cell .v { font-size: 18px; }
  .countdown__cell .l { font-size: 8px; }

  /* Admin shell: hide the side rail by default, slide-in drawer when open */
  .admin-shell { grid-template-columns: 1fr !important; }
  .admin-side {
    position: fixed; inset: 0 auto 0 0; width: 260px; max-width: 80vw;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform .2s ease;
    box-shadow: 6px 0 0 var(--ink);
  }
  .admin-side.is-open { transform: translateX(0); }
  .admin-side-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150;
  }
  .admin-mobile-bar {
    display: flex !important;
    padding: 12px 16px;
    background: var(--ink); color: var(--bg);
    align-items: center; justify-content: space-between;
    border-bottom: 2px solid var(--ink);
    position: sticky; top: 0; z-index: 100;
  }

  /* Admin login: stack the marketing pane on top */
  .admin-login-split { grid-template-columns: 1fr !important; }
  .admin-login-hero { padding: 24px 20px !important; min-height: auto !important; }
  .admin-login-hero h1 { font-size: 36px !important; }
  .admin-login-form { padding: 24px 20px !important; }

  /* Force-stack header bars with logo + actions */
  header > div[style*="display: flex"][style*="justify-content: space-between"] {
    flex-wrap: wrap;
    gap: 8px !important;
  }

  /* Tweaks panel safer position on mobile */
  /* (the panel itself handles its own positioning) */

  /* Settings two-column nav → top tabs */
  [data-mobile-stack-settings="1"] {
    grid-template-columns: 1fr !important;
  }
  [data-mobile-stack-settings="1"] > nav {
    flex-direction: row !important;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
  }
  [data-mobile-stack-settings="1"] > nav > button { flex-shrink: 0; }

  /* Hero sticker too big — shrink */
  .sticker { width: 68px; height: 68px; }
  .sticker__big { font-size: 16px; }

  /* Hide elements marked desktop-only */
  .desktop-only { display: none !important; }

  /* Stat strip in admin (Live raffles / tickets sold / etc) — let cells breathe */
  [style*="font-size: 36"][class*="mono"] { font-size: 24px !important; }

  /* Footer rows */
  footer .container > div { text-align: left; }

  /* Marquee top bar — give breathing room */
  .marquee__track { gap: 28px; }
}

/* === SMALL PHONE (<420px): tighten further === */
@media (max-width: 420px) {
  h1 { font-size: 30px !important; }
  h2 { font-size: 22px !important; }
  [style*="font-size: 96"], [style*="font-size: 88"], [style*="font-size: 72"], [style*="font-size: 64"] { font-size: 32px !important; }
  [style*="grid-template-columns: repeat(4, 1fr)"],
  [style*="grid-template-columns:repeat(4,1fr)"] {
    grid-template-columns: 1fr !important;
  }
  .btn { font-size: 12px; padding: 10px 14px; letter-spacing: .06em; }
  .stamp { font-size: 10px; padding: 4px 8px; }
}

/* === HAMBURGER BUTTON (only visible on mobile) === */
.hamburger {
  display: none;
  width: 40px; height: 40px;
  background: var(--ink); color: var(--bg);
  border: 2px solid var(--ink);
  cursor: pointer;
  align-items: center; justify-content: center;
  padding: 0;
}
.hamburger svg { display: block; }
.mobile-nav-drawer {
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--ink); color: var(--bg);
  padding: 24px 24px 32px;
  display: flex; flex-direction: column;
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .25s ease;
}
.mobile-nav-drawer.is-open { transform: translateX(0); }
.mobile-nav-drawer__close {
  background: transparent; color: var(--bg); border: 2px solid var(--bg);
  width: 40px; height: 40px;
  font-size: 18px; cursor: pointer; font-family: 'Oswald';
}
.mobile-nav-link {
  padding: 16px 0;
  font-family: 'Oswald', sans-serif;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-size: 18px;
  font-weight: 600;
  border-bottom: 1px dashed rgba(255,255,255,.2);
  cursor: pointer;
  display: flex; align-items: center; justify-content: space-between;
}

@media (max-width: 720px) {
  .hamburger { display: inline-flex; }
  .desktop-nav { display: none !important; }
  [data-show-mobile] { display: inline-flex !important; }
}
@media (min-width: 721px) {
  .admin-mobile-bar { display: none !important; }
}