/* superbot-responsive.css — mobile overrides for superbot.css
 *
 * DO NOT modify superbot.css directly — it is the canonical design reference.
 * This file is loaded AFTER superbot.css and overrides fixed dimensions for
 * viewports ≤768px and ≤480px.
 *
 * Breakpoints:
 *   768px — tablet / large phone landscape
 *   480px — phone portrait
 */

/* ================================================================
   T8.B ADDITIONS — catalog, wizard, header mobile
   ================================================================ */

/* --- Catalog layout: sidebar + main --- */
.sb-catalog-layout {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 0 24px;
}

.sb-catalog-sidebar {
  flex: 0 0 200px;
  max-width: 200px;
  padding: 16px 0;
}

.sb-catalog-sidebar-inner {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sb-catalog-main {
  flex: 1;
  min-width: 0;
}

/* --- Filter bar --- */
.sb-catalog-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 12px;
}

.sb-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.sb-filter-label {
  font-size: 13px;
  color: var(--c-muted);
  white-space: nowrap;
}

/* --- List grid for catalog --- */
.sb-list-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* --- Kind cards grid on home --- */
.sb-kind-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 16px;
}

.sb-kind-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 20px;
  border-radius: 16px;
  border: 1px solid var(--c-border, #e0e0e0);
  text-decoration: none;
  color: var(--c-fg);
  background: var(--c-surface, #fff);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.sb-kind-card:hover {
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  border-color: var(--c-brand, #1F8AE0);
}

.sb-kind-card-icon {
  font-size: 36px;
  line-height: 1;
}

.sb-kind-card-title {
  font-size: 18px;
  font-weight: 700;
}

.sb-kind-card-desc {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.4;
}

.sb-kind-card-cta {
  font-size: 13px;
  font-weight: 600;
  color: var(--c-brand, #1F8AE0);
  margin-top: auto;
  padding-top: 8px;
}

/* --- Wizard pick-kind grid --- */
.sb-pick-kind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  max-width: 780px;
}

.sb-pick-kind-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 24px;
  border-radius: 16px;
  border: 2px solid var(--c-border, #e0e0e0);
  text-decoration: none;
  color: var(--c-fg);
  background: var(--c-surface, #fff);
  transition: box-shadow 0.15s, border-color 0.15s;
}

.sb-pick-kind-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
  border-color: var(--c-brand, #1F8AE0);
}

.sb-pick-kind-icon {
  font-size: 48px;
  line-height: 1;
}

.sb-pick-kind-title {
  font-size: 20px;
  font-weight: 700;
}

.sb-pick-kind-desc {
  font-size: 14px;
  color: var(--c-muted);
  line-height: 1.4;
}

/* --- Wizard form --- */
.sb-wizard-form {
  max-width: 640px;
}

.sb-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.sb-form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--c-fg);
}

.sb-form-hint {
  font-size: 12px;
  color: var(--c-muted);
}

.sb-input-prefix-wrap {
  display: flex;
  align-items: center;
  border: 1px solid var(--c-border, #e0e0e0);
  border-radius: 8px;
  overflow: hidden;
  background: var(--c-surface, #fff);
}

.sb-input-prefix {
  padding: 10px 12px;
  background: var(--c-surface-alt, #f5f5f5);
  color: var(--c-muted);
  font-size: 14px;
  border-right: 1px solid var(--c-border, #e0e0e0);
  white-space: nowrap;
}

.sb-input-prefix-wrap .sb-input {
  border: none;
  border-radius: 0;
  flex: 1;
}

.sb-textarea {
  resize: vertical;
  min-height: 120px;
}

.sb-select {
  appearance: auto;
}

.sb-input-file {
  padding: 8px 0;
}

.sb-form-field-checkbox {
  flex-direction: row;
  align-items: flex-start;
}

.sb-checkbox-label {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}

.sb-checkbox-label input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

/* --- Hamburger button (mobile only) --- */
.sb-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  background: none;
  border: 1px solid var(--c-border, #e0e0e0);
  border-radius: 8px;
  cursor: pointer;
}

.sb-hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--c-fg);
  border-radius: 2px;
  transition: opacity 0.15s;
}

/* --- Mobile nav (slide-down, hidden by default) --- */
.sb-mobile-nav {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 0 4px;
  border-top: 1px solid var(--c-border, #e0e0e0);
  order: 10; /* below header actions in flex */
}

.sb-mobile-nav[hidden] {
  display: none;
}

.sb-mobile-nav a {
  display: block;
  padding: 10px 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--c-fg);
  text-decoration: none;
}

.sb-mobile-nav a:hover {
  color: var(--c-brand, #1F8AE0);
}

/* --- Header: "Добавить" button always visible --- */
.sb-header-add-btn {
  flex-shrink: 0; /* never let it wrap or disappear */
}

/* ================================================================
   VIEWPORT ≤ 768px
   ================================================================ */
@media (max-width: 768px) {

  /* --- Page wrapper ---
     Drop the hard 1280px fixed width; let it fill the viewport. */
  .sb-page {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    border-radius: 0;
    box-shadow: none;
    min-height: 100svh;
  }

  /* --- Header ---
     Stack brand + actions; hide the nav link row on mobile.
     Hamburger button is shown instead. */
  .sb-header {
    flex-wrap: wrap;
    gap: 12px;
    padding: 12px 16px;
  }

  .sb-header-nav {
    display: none; /* hide nav links; keep brand + actions row compact */
  }

  .sb-header-actions {
    margin-left: auto;
  }

  /* --- Show hamburger on mobile --- */
  .sb-hamburger {
    display: flex;
  }

  /* --- Profile display name: hide on mobile to save space --- */
  .sb-header-profile {
    /* Keep avatar, hide text label — we just need the icon */
    font-size: 0;
    gap: 0;
    padding: 4px;
  }

  .sb-header-profile .sb-avatar {
    font-size: 13px; /* restore avatar text size */
  }

  /* --- Catalog: collapse sidebar to chip row on top --- */
  .sb-catalog-layout {
    flex-direction: column;
    padding: 0 16px;
  }

  .sb-catalog-sidebar {
    flex: none;
    max-width: 100%;
    width: 100%;
    padding: 8px 0 0;
  }

  .sb-catalog-sidebar-inner {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
  }

  /* --- Kind cards: 3-col → 1-col --- */
  .sb-kind-cards-grid {
    grid-template-columns: 1fr;
  }

  /* --- Pick-kind grid: 3-col → 1-col --- */
  .sb-pick-kind-grid {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  /* --- Wizard form: full width --- */
  .sb-wizard-form {
    max-width: 100%;
  }

  /* --- Filter bar: stack vertically at narrow widths --- */
  .sb-catalog-filter-bar {
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }

  /* --- Hero ---
     Tighten the large desktop padding. */
  .sb-hero {
    padding: 32px 16px 24px;
  }

  /* --- Section padding --- */
  .sb-section {
    padding: 24px 16px;
  }

  /* --- Breadcrumb --- */
  .sb-breadcrumb {
    padding: 16px 16px 0;
  }

  /* --- Top grid: 3-col → 1-col --- */
  .sb-top-grid {
    grid-template-columns: 1fr;
  }

  /* --- Categories grid: fixed 5-col → auto-fill --- */
  .sb-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }

  /* --- Listing hero: 3-col (avatar|meta|vote) → single column stack --- */
  .sb-listing-hero {
    grid-template-columns: 1fr;
    padding: 20px 16px 24px;
    gap: 16px;
  }

  .sb-vote-stack {
    min-width: unset;
    width: 100%;
  }

  /* --- Listing body: 2-col → 1-col at ≤900px (also covers ≤768px) --- */
  .sb-listing-body {
    grid-template-columns: 1fr;
    padding: 24px 16px;
    gap: 20px;
  }

  /* --- Footer: stack brand + links vertically, center on mobile --- */
  .sb-footer {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 16px;
    gap: 16px;
  }

  .sb-footer-links {
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  /* --- Search: allow inner elements to wrap below the input --- */
  .sb-search {
    flex-wrap: wrap;
    border-radius: 16px;
    padding: 8px 12px;
    gap: 8px;
  }

  .sb-search input {
    width: 100%;
    padding: 10px 0;
    font-size: 16px; /* prevent iOS zoom on focus */
  }

  /* --- Leaderboard rows: reduce column count --- */
  .sb-board-row {
    grid-template-columns: 40px 1fr 80px;
    gap: 8px;
    padding: 12px 14px;
  }

  /* Hide the less-important columns on tablet */
  .sb-board-row > :nth-child(4),
  .sb-board-row > :nth-child(5) {
    display: none;
  }

  /* --- List card: ensure it doesn't overflow --- */
  .sb-list-card {
    grid-template-columns: 48px 1fr auto;
    gap: 10px;
    padding: 14px 12px;
  }

  /* --- Cat card: no overflow --- */
  .sb-cat-card {
    overflow: hidden;
    word-break: break-word;
  }

  /* --- Rules grid: 2-col → 1-col at ≤768px --- */
  .sb-rules-grid {
    grid-template-columns: 1fr;
  }

  /* --- Login card: remove excess margin --- */
  .sb-login-card {
    margin: 24px auto;
    max-width: 100%;
    padding: 28px 20px;
  }

  /* --- Listing body grid breaks already at ≤900 below, but also ≤768 --- */
}

/* ================================================================
   VIEWPORT ≤ 900px  (listing body only — collapses sidebar early)
   ================================================================ */
@media (max-width: 900px) {
  .sb-listing-body {
    grid-template-columns: 1fr;
    padding: 24px 20px;
    gap: 20px;
  }
}

/* ================================================================
   VIEWPORT ≤ 480px  (phone portrait — tightest breakpoint)
   ================================================================ */
@media (max-width: 480px) {

  /* --- Hero h1: 60px → 32px --- */
  .sb-hero h1 {
    font-size: 32px;
    line-height: 1.1;
  }

  .sb-hero p {
    font-size: 15px;
  }

  /* --- Hero stats: horizontal flex → vertical stack --- */
  .sb-hero-stats {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .sb-hero-stat-divider {
    display: none;
  }

  /* --- Categories: 2 columns minimum --- */
  .sb-cat-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  /* --- Board rows: compact single-row layout, smaller avatar --- */
  .sb-board-row {
    grid-template-columns: 32px 1fr 72px;
    gap: 6px;
    padding: 10px 10px;
  }

  .sb-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .sb-board-rank {
    font-size: 14px;
  }

  /* --- Rules grid: 1-col --- */
  .sb-rules-grid {
    grid-template-columns: 1fr;
  }

  /* --- Search key chip (⌘K): hide on mobile — irrelevant on touch --- */
  .sb-search-key {
    display: none;
  }

  /* --- Section head: stack heading + link vertically --- */
  .sb-section-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  /* --- Listing hero: shrink large avatar --- */
  .sb-listing-avatar-lg {
    width: 88px;
    height: 88px;
    font-size: 36px;
  }

  .sb-listing-title {
    font-size: 26px;
  }

  /* --- Footer: tighten padding --- */
  .sb-footer {
    padding: 20px 12px;
  }

  /* --- List card: drop the side rating column, show it inline --- */
  .sb-list-card {
    grid-template-columns: 44px 1fr;
  }

  .sb-list-card-rating {
    display: none; /* de-prioritise on very small screens */
  }

  /* --- Kind cards (home): reduce padding at 480px --- */
  .sb-kind-card {
    padding: 16px;
  }

  .sb-kind-card-icon {
    font-size: 28px;
  }

  .sb-kind-card-title {
    font-size: 16px;
  }

  /* --- Catalog filter bar: tighten gap --- */
  .sb-catalog-filter-bar {
    gap: 8px;
  }
}

/* ============================================================================
   Centered-hero override (home page) — applies on every viewport.
   Centers the slogan, lead, search bar, and stats so the page feels
   landing-style instead of left-aligned.
   ============================================================================ */
.sb-hero--centered {
  text-align: center;
}
.sb-hero--centered h1,
.sb-hero--centered > p {
  margin-left: auto;
  margin-right: auto;
}
.sb-hero--centered .sb-search {
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.sb-hero--centered .sb-hero-stats {
  justify-content: center;
}
/* Push the decorative star slightly off-center so the centered text
   reads cleanly and the artwork still anchors the composition. */
.sb-hero--centered .sb-hero-star {
  left: auto;
  right: -90px;
  opacity: 0.55;
}
@media (max-width: 768px) {
  .sb-hero--centered .sb-hero-star {
    right: -160px;
    opacity: 0.35;
  }
}

/* ============================================================================
   Wizard form (centered, narrow column) — applies to the public listing
   creation/edit forms at /listings/new/* and /listings/:user/edit.
   ============================================================================ */
.sb-wizard {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}
.sb-wizard-header {
  text-align: center;
  margin-bottom: 28px;
}
.sb-wizard-form {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 28px;
}
@media (max-width: 768px) {
  .sb-wizard {
    margin: 16px auto;
    padding: 0 12px;
  }
  .sb-wizard-form {
    padding: 18px;
  }
}

/* Pick-kind grid (step 1 of the wizard) — center 3 cards */
.sb-pick-kind-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  max-width: 880px;
  margin: 32px auto;
}
@media (max-width: 768px) {
  .sb-pick-kind-grid {
    grid-template-columns: 1fr;
    margin: 16px auto;
  }
}