/**
 * HEAVY MACHINERY - Global Industrial Marketplace - Responsive & Adaptive Styles
 * Breakpoints tested: 1920px, 1440px, 1366px, 1280px, 1024px, 768px, 430px, 390px, 375px
 * Enforces:
 * - Full-width machine cards at <= 768px with min 44px touch targets
 * - Vertically stacked advantage cards on mobile
 * - Clean 2-column category grid on mobile
 * - Zero horizontal overflow
 */

/* ==========================================================================
   Large Screens & Laptops (1440px - 1200px)
   ========================================================================== */

@media (max-width: 1440px) {
  .site-header .container-marketplace {
    padding-left: 1.25rem;
    padding-right: 1.25rem;
  }
  .navbar-container .brand-logo-link {
    margin-right: 1rem;
  }
  .nav-link {
    padding: 0.5rem 0.45rem;
    font-size: 0.835rem;
  }
  .navbar-search-form {
    width: clamp(140px, 12vw, 180px);
  }
  .header-actions {
    gap: 0.5rem;
    flex-shrink: 0;
  }
}

@media (max-width: 1366px) {
  .featured-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .video-action-card {
    grid-column: span 4;
    min-height: 220px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }

  .video-play-trigger {
    top: 50%;
    left: 12%;
  }

  .video-action-content {
    max-width: 65%;
    margin-left: auto;
  }

  /* 3 + 2 intentional arrangement for advantages on smaller laptops */
  .advantages-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .advantages-grid .advantage-card:nth-child(4),
  .advantages-grid .advantage-card:nth-child(5) {
    grid-column: span 1;
  }
}

@media (max-width: 1340px) {
  .navbar-container {
    height: 96px;
    gap: 0.5rem;
  }

  .navbar-container .brand-logo-link {
    margin-right: 0.75rem;
  }

  .brand-logo-img {
    height: 70px;
    max-width: 220px;
  }

  .navbar-search-form {
    width: 135px;
  }

  .navbar-search-input:focus {
    width: 160px;
  }

  .nav-link {
    font-size: 0.8rem;
    padding: 0.35rem 0.4rem;
  }

  .header-actions {
    gap: 0.4rem;
    flex-shrink: 0;
  }

  .header-actions .btn {
    padding: 0.4rem 0.65rem;
    font-size: 0.8125rem;
  }

  .category-cards-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .sellers-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-top-grid {
    grid-template-columns: 1.5fr repeat(3, 1fr);
  }

  .footer-top-grid .footer-col:last-child {
    grid-column: span 4;
  }
}

/* ==========================================================================
   Tablets & Compact Screens (<= 1180px)
   Switches cleanly to mobile drawer before navbar buttons can collide
   ========================================================================== */

@media (max-width: 1180px) {
  .navbar-container {
    height: 88px;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-container .brand-logo-link {
    margin-right: 0.75rem;
  }

  .brand-logo-img {
    height: 64px;
    max-width: 200px;
  }

  /* Hide desktop-only nav elements to guarantee Become a Seller is always in bounds */
  .main-nav,
  .navbar-search-form,
  .top-utility-bar {
    display: none !important;
  }

  .header-actions {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
  }

  .mobile-nav-toggle {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Hero section stacks gracefully */
  .hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .hero-content {
    text-align: left;
    max-width: 100%;
  }

  .hero-description {
    max-width: 100%;
  }

  .hero-image-frame {
    max-width: 100%;
  }

  .hero-spec-card {
    right: 16px;
    top: 16px;
  }

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-item:nth-child(2) {
    border-right: none;
  }

  .stat-item:nth-child(3),
  .stat-item:nth-child(4) {
    border-top: 1px solid var(--color-border-subtle);
  }

  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .featured-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .video-action-card {
    grid-column: span 2;
  }

  .ecosystem-layout {
    grid-template-columns: 1fr;
    gap: var(--space-8);
  }

  .advantages-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .advantages-grid .advantage-card:last-child {
    grid-column: span 2;
  }

  .seller-cta-container {
    flex-direction: column;
    align-items: flex-start;
  }

  /* Industrial Storytelling Section Responsive (Tablet) */
  .story-sticky-stage {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .landscape-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
  }

  .story-horizontal-pin-wrapper {
    overflow: visible;
  }

  .story-horizontal-track {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.25rem;
    padding: 0;
    width: 100%;
    transform: none !important;
  }

  .landscape-card {
    width: 100%;
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   Mobile Tablets & Large Phones (<= 768px)
   Point 4 & 5: Full width cards, vertical stack, min 44px touch targets
   ========================================================================== */

@media (max-width: 768px) {
  .navbar-container {
    height: 80px;
  }

  .brand-logo-img {
    height: 58px;
    max-width: 180px;
  }
  .section-padding {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
  }

  .hero-title {
    font-size: 2.25rem;
  }

  .hero-spec-card {
    position: static;
    width: 100%;
    margin-top: 1rem;
    animation: none;
  }

  .category-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0.75rem;
  }

  .category-card {
    padding: 0.75rem 0.85rem;
    min-height: 68px;
  }

  .category-title {
    font-size: 0.8125rem;
  }

  /* Full Width Machine Cards */
  .featured-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .machine-card {
    width: 100%;
  }

  .machine-card-header {
    height: 220px;
  }

  .machine-card-footer {
    padding-top: 0.5rem;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
  }

  .machine-card-footer .btn {
    min-height: 44px;
    padding: 0.5rem 1rem;
    font-size: 0.8125rem;
    flex-shrink: 0;
  }

  .btn-icon,
  .btn-icon-sm {
    min-width: 44px;
    min-height: 44px;
  }

  .video-action-card {
    grid-column: span 1;
    flex-direction: column;
    align-items: flex-start;
    min-height: 360px;
  }

  .video-play-trigger {
    position: static;
    transform: none;
    margin-bottom: 1.25rem;
    width: 52px;
    height: 52px;
  }

  .video-action-content {
    max-width: 100%;
    margin-left: 0;
  }

  /* Advantages: Vertical Stack */
  .advantages-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .advantages-grid .advantage-card:last-child {
    grid-column: span 1;
  }

  .advantage-card {
    min-height: auto;
    padding: 1.35rem 1.15rem;
  }

  .ecosystem-props-list {
    grid-template-columns: 1fr;
  }

  .footer-top-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }

  .footer-brand-col {
    grid-column: span 2;
  }
}

/* ==========================================================================
   Small Mobile Phones (430px, 390px, 375px)
   ========================================================================== */

@media (max-width: 576px) {
  .container-marketplace,
  .container-wide {
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .navbar-container {
    height: 72px;
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  .navbar-container .brand-logo-link {
    margin-right: 0.5rem;
  }

  .brand-logo-img {
    height: 52px;
    width: 52px;
    max-width: 52px;
    aspect-ratio: 1 / 1;
    object-fit: contain;
  }

  .header-actions {
    gap: 0.35rem;
  }

  .lang-selector {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
  }

  .header-actions .btn-ghost {
    padding: 0.35rem 0.5rem;
    font-size: 0.8125rem;
  }

  .brand-name {
    font-size: 0.95rem;
  }

  .brand-tagline {
    font-size: 0.525rem;
    letter-spacing: 0.04em;
  }

  .brand-icon-box {
    width: 34px;
    height: 34px;
  }

  .hero-title {
    font-size: 1.875rem;
  }

  .hero-cta-group {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .hero-cta-group .btn {
    width: 100%;
    min-height: 46px;
  }

  .hero-search-box {
    padding: 0.35rem 0.5rem 0.35rem 0.85rem;
  }

  .hero-search-box input {
    font-size: 0.875rem;
  }

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .stat-item {
    border-right: none;
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0.75rem 0.25rem;
  }

  .stat-item:last-child {
    border-bottom: none;
  }

  /* Categories on small mobile: 2-column or 1-column */
  .category-cards-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
  }

  .category-card {
    padding: 0.65rem 0.65rem;
  }

  .category-thumb-box {
    width: 36px;
    height: 36px;
  }

  .category-title {
    font-size: 0.75rem;
  }

  .category-count {
    font-size: 0.65rem;
  }

  .category-arrow-btn {
    display: none; /* Simplify on narrow screens */
  }

  .sellers-grid {
    grid-template-columns: 1fr;
  }

  .seller-cta-buttons,
  .final-cta-buttons {
    flex-direction: column;
    width: 100%;
    gap: 0.75rem;
  }

  .seller-cta-buttons .btn,
  .final-cta-buttons .btn {
    width: 100%;
    min-height: 46px;
  }

  .footer-top-grid {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }

  .footer-brand-col {
    grid-column: span 1;
  }

  .compare-dock {
    width: calc(100% - 2rem);
    justify-content: space-between;
    padding: 0.65rem 1rem;
    left: 1rem;
    transform: translateY(120%);
  }

  .compare-dock.show {
    transform: translateY(0);
  }

  /* Industrial Storytelling Section Responsive (Mobile <= 576px) */
  .story-sticky-stage {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .story-stage-wrapper {
    margin-bottom: 3.5rem;
  }

  .story-hud-overlay {
    position: static;
    margin-top: 0.75rem;
    background: #121922;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
  }

  .story-horizontal-track {
    grid-template-columns: 1fr;
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .landscape-card {
    width: 100%;
    flex: 1 1 auto;
  }
}