/* ==============================================================
   RESPONSIVE.CSS
   Bootstrap grid handles column layout across the page; these
   media queries only patch spacing/typography/visibility for
   Bidszo's custom components at each breakpoint.
   Breakpoints: 576 / 768 / 992 / 1200 / 1400
   ============================================================== */

/* ===== ≤1400px : Large Desktop down ===== */
@media (max-width: 1400px) {
  .container-xl {
    max-width: 1180px;
  }
}

/* ===== ≤1200px : Desktop / small laptop ===== */
@media (max-width: 1200px) {
  .hero-stats-row {
    max-width: 460px;
  }

  .trust-grid,
  .steps-grid,
  .advantage-grid {
    gap: var(--space-4);
  }

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

  .footer-top {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }

  .footer-top .footer-col.footer-help {
    grid-column: 4;
  }

  /* Reclaim horizontal room before the burger breakpoint: the tagline is the
     widest part of the brand block, and full-size gaps make Home/About/
     Auctions/Terms & Conditions/Contact + the icon cluster overflow around
     1000-1150px. */
  .brand-tag {
    display: none;
  }

  .navbar-main .container-xl {
    gap: var(--space-5);
  }

  .nav-links {
    gap: var(--space-5);
  }

  .nav-links>li>a {
    font-size: 0.86rem;
  }

  .nav-actions-primary {
    gap: var(--space-2);
  }
}

/* ===== ≤992px : Tablet / laptop ===== */
@media (max-width: 992px) {
  .topbar {
    display: none;
  }

  .nav-links {
    display: none;
  }

  .nav-burger {
    display: flex;
  }

  /* Row 2 wraps: mega-menu trigger + search share the first line, search can shrink;
     below 576px they stack so both stay fully reachable */
  .navbar-secondary-inner {
    flex-wrap: wrap;
    row-gap: 10px;
  }

  .mega-menu {
    width: calc(100vw - 2.5rem);
    grid-template-columns: 1fr 1fr;
  }

  .mega-menu .mega-featured {
    grid-column: 1 / -1;
  }

  .search-form select {
    max-width: 100px;
  }

  /* Hero carousel: force content-first stacking on tablet (image below
     content) even though col-md-6 would otherwise pair them side by side
     at this width. */
  .hero-carousel .col-lg-6,
  .hero-carousel .col-md-6 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  .hero-slide-row {
    min-height: 0;
  }

  .hero-slide-copy {
    text-align: center;
    margin-bottom: var(--space-7);
  }

  .hero-slide-copy .lede {
    margin-inline: auto;
  }

  .hero-cta-row {
    justify-content: center;
  }

  .hero-stats-row {
    margin-inline: auto;
  }

  .hero-chip-row {
    justify-content: center;
  }

  .hero-slide-media {
    max-width: 460px;
    margin-inline: auto;
  }

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

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

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

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

  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-6);
  }

  .stat-item+.stat-item::before {
    display: none;
  }

  .app-banner {
    grid-template-columns: 1fr;
    text-align: center;
    padding: var(--space-8) var(--space-6);
  }

  .app-banner-copy p {
    margin-inline: auto;
  }

  .app-store-row {
    justify-content: center;
  }

  .app-banner-visual {
    display: none;
  }

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

  .footer-brand {
    grid-column: 1 / -1;
  }

  .footer-top .footer-col.footer-help {
    grid-column: auto;
  }

  /* ----- About page ----- */
  .about-intro-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-intro-media {
    order: -1;
  }

  .about-why-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }

  .about-stats-grid {
    grid-template-columns: repeat(2, 1fr);
    row-gap: var(--space-5);
  }

  .about-testimonials-grid {
    grid-template-columns: 1fr;
  }
}

/* ===== ≤768px : Mobile large / tablet portrait ===== */
@media (max-width: 768px) {
  .section {
    /* padding-block: var(--space-8); */
    padding-block-start: 10px !important;
    padding-block-end: 30px;
  }

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

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

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

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

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

  .footer-top {
    grid-template-columns: 1fr 1fr;
    text-align: left;
  }

  .footer-bottom {
    flex-direction: column;
    gap: var(--space-3);
    text-align: center;
  }

  .footer-bottom-links {
    flex-wrap: wrap;
    justify-content: center;
  }

  #back-to-top {
    right: var(--space-4);
    bottom: var(--space-4);
    width: 42px;
    height: 42px;
  }

  /* ----- About page ----- */
  .about-hero {
    padding-block: var(--space-7);
  }
}

/* ===== ≤576px : Mobile ===== */
@media (max-width: 576px) {
  .container-xl {
    padding-inline: 1.1rem;
  }

  .hero-slide {
    padding-top: var(--space-6);
    padding-bottom: var(--space-6);
  }

  .hero-cta-row {
    flex-direction: column;
    width: 100%;
  }

  .hero-cta-row .btn {
    width: 100%;
  }

  .hero-stats-row {
    grid-template-columns: repeat(2, 1fr);
    max-width: 320px;
  }

  .hero-carousel .carousel-control-prev,
  .hero-carousel .carousel-control-next {
    display: none;
  }

  .category-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: var(--space-3);
  }

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

  .mega-menu-wrap {
    flex: 1 1 100%;
  }

  .mega-trigger {
    width: 100%;
    justify-content: center;
  }

  .nav-search {
    flex: 1 1 100%;
  }

  .mega-menu {
    width: calc(100vw - 2.2rem);
    grid-template-columns: 1fr;
  }

  .mega-menu .mega-featured {
    grid-column: auto;
  }

  /* Search bar: select + full "Search" button text left almost no room for
     the input itself on narrow phones. Shrink the select, drop the button
     to icon-only, and tighten input padding to free up real typing space. */
  .search-form select {
    max-width: 82px;
    padding: 0 0.4rem 0 0.75rem;
    font-size: 0.78rem;
  }

  .search-form input {
    padding-inline: 0.65rem;
    font-size: 0.82rem;
  }

  .search-form button {
    padding-inline: 1rem;
  }

  .search-form button span {
    display: none;
  }

  .footer-top {
    grid-template-columns: 1fr;
    /* text-align: center; */
  }

  .footer-brand p {
    margin-inline: auto;
  }

  .footer-social {
    justify-content: center;
  }

  .footer-cta {
    flex-direction: column;
  }

  .rail-nav {
    display: none;
  }

  /* ----- About page ----- */
  .about-intro-actions {
    flex-direction: column;
    width: 100%;
  }

  .about-intro-actions .btn {
    width: 100%;
  }

  .about-stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3);
  }

  .about-stat-card {
    padding: var(--space-5) var(--space-4);
  }
}