/**
 * Mobile catalog polish — phones only (<= 768px). Desktop is untouched.
 *
 * Scope: catalog / category / shop / sold-earlier archives + the product card
 * (content-product.php). Keeps OUR vintage sepia catalogue look; only the
 * mobile LAYOUT/BEHAVIOUR is tightened to match the reference site's tidy
 * 2-col tiles.
 *
 * Fixes the 2-col mobile card bugs:
 *   - "THIRD REICH" emblem chip truncated to "THIRD" (overflowed the tile).
 *   - Nation + "NO. xxxx" meta line wrapping uglily (CZECHOSLOVAKIA / NO. 10490).
 *   - Status badge (top-right) overlapping the emblem chip (top-left).
 * Plus: consistent 2 columns, compact height, touch-friendly filters / sort /
 * pagination, and zero horizontal overflow.
 *
 * Loaded after lot.css / sf-catalog.css so these @media rules win by source
 * order (see inc/sf-mobile-catalog-css.php, priority 60).
 *
 * @package sf-wp-child
 */

@media (max-width: 768px) {

  /* ----------------------------------------------------------------------
   * Grid — ONE lot per row, like the reference mobile catalogue (its product
   * list is a single-column stack of full-width cards). Beats lot.css'
   * min-width:640 !important bumps to 3/4 across the 640–768 band.
   * -------------------------------------------------------------------- */
  .woocommerce ul.products.sf-lot-grid,
  ul.products.sf-lot-grid,
  .woocommerce ul.products,
  ul.products {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* ----------------------------------------------------------------------
   * Sold lots (SOLD EARLIER tab / sold-earlier archive) — the reference shows
   * sold items as photo + title only: no price, no BUY affordance.
   * -------------------------------------------------------------------- */
  li.product.outofstock .sf-lot-bottom {
    display: none;
  }

  /* ----------------------------------------------------------------------
   * Category tiles (shop index + subcategory tiles) — 2-col like reference.
   * (sf-shop-grid.css handles the tile look; this pins the phone column
   * count and keeps a tidy gap between the tiles and what follows.)
   * -------------------------------------------------------------------- */
  .sf-catalog-tiles {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 18px;
  }

  /* Stock tabs now sit outside the collapsed Filters panel — reference shows
     them inline on every catalogue page. Give the row breathing room. */
  .sf-stock-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 12px;
  }

  /* ----------------------------------------------------------------------
   * Emblem chip (top-left) — flag only on mobile. "THIRD REICH" / "USSR"
   * labels are dropped so the chip can never truncate or collide with the
   * status stamp. The reference site likewise shows just a flag in the
   * photo corner. Nation info still reads in the catalogue body line.
   * -------------------------------------------------------------------- */
  .sf-lot-emblem-chip {
    left: 6px;
    top: 6px;
    gap: 0;
    padding: 3px 4px;
    max-width: calc(50% - 10px);
  }
  .sf-lot-emblem-label { display: none; }
  .sf-lot-emblem-chip img { height: 13px; }

  /* ----------------------------------------------------------------------
   * Status stamp (top-right) — compact, single line, never overlaps the
   * (now tiny) emblem chip on the left.
   * -------------------------------------------------------------------- */
  .sf-lot-stamp {
    right: 6px;
    top: 6px;
    padding: 2px 5px;
    font-size: 8.5px;
    letter-spacing: 0.09em;
    max-width: calc(65% - 8px);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sf-lot-discount {
    right: 6px;
    top: 30px;
    padding: 2px 5px;
    font-size: 8.5px;
    letter-spacing: 0.09em;
  }

  /* ----------------------------------------------------------------------
   * Catalogue body — a touch more compact so 2-col tiles aren't overly tall.
   * -------------------------------------------------------------------- */
  .sf-lot-body {
    gap: 6px;
    padding: 10px 11px 12px;
  }
  .sf-lot-title { font-size: 14px; }
  .sf-lot-subtitle { font-size: 11.5px; }

  /* ----------------------------------------------------------------------
   * Nation (left) <-> "No. xxxx" (right) — stay on ONE tidy line. The nation
   * name shrinks with an ellipsis if needed; the lot number never wraps.
   * -------------------------------------------------------------------- */
  .sf-lot-line { gap: 6px; }
  .sf-lot-line-nation {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 9px;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .sf-lot-line-emblem { flex: 0 0 auto; }
  .sf-lot-no {
    flex: 0 0 auto;
    font-size: 9px;
    letter-spacing: 0.06em;
    white-space: nowrap;
  }

  /* ----------------------------------------------------------------------
   * Price + brass Buy row — compact, no overflow.
   * -------------------------------------------------------------------- */
  .sf-lot-bottom {
    gap: 6px;
    padding-top: 7px;
  }
  .sf-lot-price { flex: 1 1 auto; min-width: 0; }
  .sf-lot-price-value { font-size: 15px; }
  /* Real amounts (e.g. "$1,200") keep nowrap; only the long "Price on request"
     POA text is allowed to wrap so it can't clip or crowd the Buy button. */
  .sf-lot-price-poa,
  .sf-lot-price-amount.sf-lot-price-poa {
    display: inline-block;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal !important;
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .sf-lot-buy { flex: 0 0 auto; padding: 6px 14px; }

  /* ----------------------------------------------------------------------
   * Filters / sort / pagination — touch-friendly, no horizontal overflow.
   * (The filters panel is already a collapsible <details>.)
   * -------------------------------------------------------------------- */
  .sf-filters,
  .sf-filter-form,
  .sf-filters-body,
  .sf-nation-list,
  .sf-price-fields,
  .sf-pagination { max-width: 100%; }
  .sf-filters-toggle { min-height: 44px; }
  .sf-stock-tab { min-height: 40px; display: inline-flex; align-items: center; }
  .sf-price-fields { flex-wrap: wrap; }
  .sf-price-input { flex: 1 1 40%; width: auto; min-width: 0; }
  .woocommerce-ordering select,
  .sf-sort-select,
  select.orderby { width: 100%; min-height: 42px; }
  .sf-pagination { flex-wrap: wrap; gap: 8px; }
  .sf-page-btn { min-height: 42px; display: inline-flex; align-items: center; }

  /* ----------------------------------------------------------------------
   * Safety net — zero horizontal overflow, long titles wrap.
   * -------------------------------------------------------------------- */
  .sf-lot-card,
  .sf-lot-body,
  .sf-lot-plate { max-width: 100%; }
  .sf-lot-title,
  .sf-lot-subtitle { overflow-wrap: anywhere; }
}