/* ═════════════════════════════════════════════════════════════════════
   ONLY BROWNS — UNIVERSAL AUTO DYNAMIC RESPONSIVE STYLESHEET
   Guarantees zero logo clipping, zero information cuts, and
   optimal visibility across all screen sizes (320px to 4K displays).
   ═════════════════════════════════════════════════════════════════════ */

/* 1. Global Viewport & Layout Bounds (Eliminates horizontal blowouts) */
html,
body {
  max-width: 100vw !important;
  overflow-x: hidden !important;
  position: relative;
  box-sizing: border-box;
  -webkit-text-size-adjust: 100%;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 2. Fluid Brand Logo System — NEVER Clips, Never Cuts */
.atelier-nav-logo {
  height: clamp(26px, 4.8vw, 42px) !important;
  max-height: 44px !important;
  max-width: min(230px, 46vw) !important;
  width: auto !important;
  object-fit: contain !important;
  display: block !important;
  flex-shrink: 0 !important;
  transition: transform 0.25s ease;
}

/* Hover micro-interaction */
.group:hover .atelier-nav-logo {
  transform: scale(1.02);
}

/* 3. Header & Navbar Fluid Layout */
header {
  width: 100% !important;
  max-width: 100vw !important;
  box-sizing: border-box;
}

/* Top ticker bar */
.top-bourse-ticker {
  font-size: clamp(8.5px, 2.2vw, 11px) !important;
  letter-spacing: clamp(0.1em, 1.5vw, 0.2em) !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* 4. Breakpoints for Tablet & Mobile Devices */
@media (max-width: 768px) {
  .atelier-nav-logo {
    height: clamp(24px, 5.2vw, 34px) !important;
    max-width: min(190px, 46vw) !important;
  }

  /* Compact padding on mobile headers */
  .atelier-header-inner {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
    gap: 0.5rem !important;
  }

  /* Auth buttons in header */
  .auth-nav-container a {
    padding: 0.4rem 0.65rem !important;
    font-size: 10px !important;
  }
}

@media (max-width: 480px) {
  .atelier-nav-logo {
    height: clamp(22px, 6vw, 30px) !important;
    max-width: min(160px, 46vw) !important;
  }

  .atelier-header-inner {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
    gap: 0.35rem !important;
  }

  /* Protect mobile action buttons from crowding */
  .auth-nav-container .btn-trade-login {
    display: none !important;
  }

  /* Full responsive headlines */
  h1, h2, .font-headline-lg, .font-title-editorial {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto;
  }

  /* Ensure card badges don't collide */
  .card-badge-left,
  .card-badge-right {
    max-width: 48% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}

@media (max-width: 360px) {
  .atelier-nav-logo {
    height: 22px !important;
    max-width: 135px !important;
  }

  .atelier-header-inner {
    padding-left: 0.4rem !important;
    padding-right: 0.4rem !important;
  }
}

/* 5. Smooth Touch Momentum Scrolling for Tables and Parcels */
.responsive-table-container,
.stone-table-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  display: block;
  box-sizing: border-box;
}

/* 6. Mobile Off-Canvas Drawer Optimization */
#mobileDrawer {
  max-width: min(320px, 86vw) !important;
}