/* =============================================================================
   BINYAMIN TRADERS — RESPONSIVE REFINEMENTS
   -----------------------------------------------------------------------------
   Tailwind's responsive utilities already carry the approved breakpoint layout
   (sm 640 / md 768 / lg 1024 / xl 1280 / 2xl 1536). This file holds the
   adjustments that utilities could not express, verified at the widths in the
   brief: 1920, 1440, 1280, 1024, 768, 430, 390, 375 and 320px.

   Loaded AFTER style.css so these rules win where they overlap.

   This file is NOT generated. Edit it directly.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Large desktop — 1920px and up
   The design is capped at max-w-7xl (1280px); on very wide screens the hero
   would otherwise leave a lot of dead vertical space.
   -------------------------------------------------------------------------- */
@media (min-width: 1920px) {
  #hero { min-height: 74vh; }
  .bt-loader-stage { width: 20rem; height: 20rem; }
}

/* -----------------------------------------------------------------------------
   Laptop / small desktop — up to 1279px
   The primary nav collapses from 8 tabs to the compact variant here; tighten
   the spacing so the logo, tabs and the RFQ pill still fit one line at 1024px.
   -------------------------------------------------------------------------- */
@media (max-width: 1279px) {
  #header-bar .max-w-7xl { gap: 0.75rem; }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  #brand-logo .font-display span:first-child { font-size: 1.0625rem; }
  #header-rfq-cta-btn { padding-left: 1rem; padding-right: 1rem; }
}

/* -----------------------------------------------------------------------------
   Tablet — up to 1023px
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  /* The hero reserves a right-hand media slot on desktop; reclaim the height. */
  #hero { min-height: auto; padding-bottom: 3rem; }
  #hero-media-slot { display: none; }

  /* Product-detail gallery sits above the spec table rather than beside it. */
  .bt-lightbox img { max-height: 80vh; }
}

/* -----------------------------------------------------------------------------
   Mobile — up to 767px
   Mobile is a genuine re-layout, not a squeezed desktop: the technical table
   view scrolls horizontally with a visible affordance, filter controls stack to
   full width, and touch targets are raised to 44px.
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :root { --bt-header-height: 3.75rem; }

  /* Headline steps down but keeps its display weight and tracking. */
  #hero h1 { font-size: clamp(1.625rem, 7.5vw, 2.25rem); line-height: 1.12; }

  /* Wide technical tables: scroll the table, don't crush the columns. */
  [data-view-panel="list"] .overflow-x-auto {
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  [data-view-panel="list"] table { min-width: 44rem; }
  [data-view-panel="list"]::after {
    content: "Scroll horizontally to see all specifications \\2192";
    display: block;
    padding: 0.5rem 1rem 0.75rem;
    font-family: var(--bt-font-mono);
    font-size: 0.625rem;
    color: var(--bt-text-subtle);
    text-align: center;
  }

  /* Comfortable touch targets throughout the filter bar and nav. */
  .bt-nav-mobile,
  .bt-cat-pill,
  .bt-view-btn { min-height: 2.75rem; display: flex; align-items: center; }
  .bt-cat-pill { justify-content: center; }

  /* Search overlay uses the full viewport on small screens. */
  .bt-overlay { padding: 0; align-items: stretch; }
  .bt-overlay-panel { max-width: none; border-radius: 0; height: 100%; }
  .bt-overlay-panel > div:nth-child(2) { max-height: none; flex: 1; }

  /* Floating WhatsApp pill shrinks to the icon so it never covers content. */
  .fixed.bottom-5.right-5 { bottom: 1rem; right: 1rem; }

  /* Spec rows read better stacked than as a 3-column grid. */
  .grid.grid-cols-3.px-3\\.5 { grid-template-columns: 1fr; gap: 0.125rem; }
  .grid.grid-cols-3.px-3\\.5 > dd { grid-column: span 1 / span 1; }
}

/* -----------------------------------------------------------------------------
   Large phones — 391px to 430px  (iPhone Pro Max, Pixel Pro)
   -------------------------------------------------------------------------- */
@media (max-width: 430px) {
  .bt-loader-stage { width: 13rem; height: 13rem; }
}

/* -----------------------------------------------------------------------------
   Standard phones — up to 390px  (iPhone 12/13/14, most Android)
   -------------------------------------------------------------------------- */
@media (max-width: 390px) {
  /* Drop the strapline under the wordmark so the header stays single-line. */
  #brand-logo .font-display span:first-child { font-size: 1rem; letter-spacing: 0.06em; }

  /* Stat cards read as one column rather than two cramped ones. */
  #heritage-stats .grid { gap: 1.25rem; }
}

/* -----------------------------------------------------------------------------
   Small phones — up to 375px, down to 320px
   320px is the narrowest viewport we support; nothing may overflow horizontally.
   -------------------------------------------------------------------------- */
@media (max-width: 375px) {
  #hero h1 { font-size: 1.5rem; }

  /* Hero CTAs go full width rather than wrapping into awkward orphans. */
  #hero-explore-capabilities-btn,
  #hero-request-quote-btn,
  #hero-inside-works-btn {
    width: 100%;
    justify-content: center;
  }

  /* Product card action row stacks so neither button truncates. */
  .bt-product-card .mt-5 { flex-direction: column; align-items: stretch; gap: 0.5rem; }
  .bt-product-card .mt-5 > * { margin-left: 0 !important; }
}

@media (max-width: 320px) {
  .max-w-7xl,
  .max-w-6xl,
  .max-w-4xl,
  .max-w-3xl { padding-left: 0.875rem; padding-right: 0.875rem; }

  #hero h1 { font-size: 1.375rem; }
  .bt-loader-stage { width: 11rem; height: 11rem; }
}

/* -----------------------------------------------------------------------------
   Nothing may cause a horizontal page scroll at any width.
   -------------------------------------------------------------------------- */
html, body { overflow-x: hidden; max-width: 100%; }
img, svg, video { max-width: 100%; height: auto; }

/* -----------------------------------------------------------------------------
   Print — a product page should print as a clean technical data sheet.
   -------------------------------------------------------------------------- */
@media print {
  #site-header,
  #mobile-menu,
  footer,
  #bt-loader,
  .bt-overlay,
  .bt-lightbox,
  .fixed.bottom-5.right-5,
  [data-rfq-open],
  [data-download-tds],
  [data-copy-link] { display: none !important; }

  body { background: #fff !important; background-image: none !important; }
  .bg-tech-dots, .bg-tech-dots-soft, .bg-tech-dots-red { background-image: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.7em; color: #666; }
}