/* JBB International LLC - responsive.css
   Breakpoint-specific layout overrides.
   All base styles live in style.css. */

/* --- TABLET: <=1100px --- */
@media (max-width: 1100px) {
  .quality-grid { grid-template-columns: 1fr; }
  .quality-figure { grid-column: auto; }
  .network-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .about-hero-grid { grid-template-columns: 1fr 1fr; }
  .timeline-wrap { grid-template-columns: 1fr; gap: var(--s-4); }
  .timeline-intro { position: static; }
  .portfolio-grid { grid-template-columns: 1fr; }
  .products-hero-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .diamond-pair { max-width: 360px; justify-self: start; }
  .supply-grid { grid-template-columns: 1fr; gap: var(--s-4); }
  .framework { grid-template-columns: 1fr; }
  .framework > div { border-right: 0; border-bottom: 1px solid var(--line-200); }
  .framework > div:last-child { border-bottom: 0; }
}

/* --- MOBILE NAV SWITCH: <=991.98px --- */
@media (max-width: 991.98px) {
  .nav-toggle { display: flex; }
  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 0 0;
    z-index: 95;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: var(--s-3) var(--s-3) var(--s-5);
    background: var(--paper-50);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform .35s var(--ease);
  }
  body.nav-open .primary-nav { transform: none; }
  .nav-list { flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
  .nav-list li { width: 100%; border-bottom: 1px solid var(--line-200); }
  .nav-link { display: block; padding: .85rem 0; font-size: 1.05rem; width: 100%; }
  .nav-link::after { display: none; }
  .has-dropdown { flex-direction: column; align-items: flex-start; position: relative; }
  .dropdown-toggle { position: absolute; right: 0; top: .5rem; width: 48px; height: 48px; }
  .dropdown {
    position: static;
    visibility: visible;
    opacity: 1;
    transform: none;
    box-shadow: none;
    border: 0;
    background: var(--sky-100);
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s var(--ease);
  }
  .has-dropdown.is-open .dropdown { max-height: 200px; }
  .dropdown a { padding: .7rem var(--s-2); }
  .nav-cta { margin-top: var(--s-2); }
  .hero-swiper, .hero-slide { height: clamp(420px, 75vh, 600px); }
  .hero-copy h1, .hero-copy h2 { max-width: 20ch; }
  .intro-grid { grid-template-columns: 1fr; }
  .intro-media { margin-bottom: var(--s-2); }
  .category-split { grid-template-columns: 1fr; gap: var(--s-3); }
  .category-paper { margin-top: 0; }
  .category { min-height: 380px; }
  .process { grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-3); }
  .process::before { display: none; }
  .featured-grid { grid-template-columns: repeat(2, 1fr); }
  .catalogue-grid--wide { grid-template-columns: 1fr; }
  .catalog-card--row { flex-direction: column; }
  .catalog-card--row .catalog-img { flex: none; min-height: auto; }
  .checklist { grid-template-columns: repeat(2, 1fr); }
  .usecases { grid-template-columns: 1fr; }
  .usecases article:nth-child(odd) { border-right: 0; padding-left: 0; }
  .supply-panels { grid-template-columns: 1fr; }
  .form-wrap { grid-template-columns: 1fr; gap: var(--s-4); }
  .form-side { position: static; }
  .form-grid { grid-template-columns: 1fr; }
  .field-wide { grid-column: auto; }
  .phone-row { grid-template-columns: minmax(100px, 1fr) 1.6fr; }
  .paper-hero-grid { grid-template-columns: 1fr; }
  .paper-hero-media { display: none; }
  .contact-hero-grid { grid-template-columns: 1fr; gap: var(--s-3); }
  .directory a { grid-template-columns: 1fr auto; }
  .directory-desc { display: none; }
  .sticky-split { grid-template-columns: 1fr; }
  .sticky-col { position: static; }
  .paper-grid { grid-template-columns: 1fr; }
  .catalogue-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- SMALL: <=640px --- */
@media (max-width: 640px) {
  .hero-swiper, .hero-slide { height: clamp(380px, 70vh, 520px); }
  .featured-grid { grid-template-columns: 1fr; }
  .process { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .catalogue-grid { grid-template-columns: 1fr; }
  .about-hero-grid { grid-template-columns: 1fr; }
  .about-hero-media { display: none; }
  .two-col { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: var(--s-2); }
  .hero-controls { gap: var(--s-2); }
  .cat-hero { min-height: clamp(340px, 60vh, 520px); }
  .cat-hero-panel { max-width: 100%; }
  .products-hero .diamond-pair { display: none; }
  .cta-actions { flex-direction: column; }
  .cta-actions .btn { width: 100%; justify-content: center; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .principles > div { grid-template-columns: 1fr; gap: var(--s-1); }
  .supply-panels { grid-template-columns: 1fr; }
  .contact-hero-grid { grid-template-columns: 1fr; }
  .form-grid { grid-template-columns: 1fr; }
  .portfolio-grid { gap: var(--s-3); }
}

/* --- PRINT --- */
@media print {
  .site-header, .nav-backdrop, .back-to-top, .hero-controls,
  .btn, .filter-bar { display: none !important; }
  main { padding-top: 0; }
  body { font-size: 12pt; }
  a { color: inherit; text-decoration: none; }
}

/* ===== WHY-JBB + VALUES GRID responsive ===== */
@media (max-width: 991.98px) {
  .why-grid { grid-template-columns: repeat(2, 1fr); }
  .values-grid { grid-template-columns: 1fr; gap: var(--s-4); }
}
@media (max-width: 640px) {
  .why-grid { grid-template-columns: 1fr; }
  .values-list > li { grid-template-columns: 1fr; }
  .value-num { grid-row: auto; }
}