/* ==========================================================================
   PUBLIC DISCOVER RESPONSIVE CONTRACT
   Large desktop >=1440 | desktop 1200-1439 | laptop 1024-1199
   Tablet 768-1023 | phone <768 | small phone <480
   ========================================================================== */

body:not(.discover-admin-page) .section-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

body:not(.discover-admin-page) .search-box{
  width: min(100%, 360px);
  min-width: 220px;
}

body:not(.discover-admin-page) .filter-row{
  overflow-x: auto;
  flex-wrap: nowrap;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

body:not(.discover-admin-page) .filter-btn{
  flex: 0 0 auto;
  min-height: 40px;
}

/* Products and testimonials: the inner sliding container owns the grid. */
body:not(.discover-admin-page) .sliding-container{
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Blog uses its own content grid. */
body:not(.discover-admin-page) .blog-track{
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Public reading widths stay comfortable even inside the 1200px shell. */
body:not(.discover-admin-page) #aboutText,
body:not(.discover-admin-page) #faqList{
  max-width: 820px;
  margin-inline: auto;
}

body:not(.discover-admin-page) #about .founder{
  max-width: 900px;
  margin-inline: auto;
}

@media (min-width: 1440px){
  body:not(.discover-admin-page) #productTrack .sliding-container{
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  body:not(.discover-admin-page) #testimonialList .sliding-container{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  body:not(.discover-admin-page) .blog-track{
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 767px){
  body:not(.discover-admin-page) .main-header{
    padding-bottom: var(--space-5);
  }

  body:not(.discover-admin-page) .section-header{
    align-items: stretch;
  }

  body:not(.discover-admin-page) .search-box{
    width: 100%;
    min-width: 0;
  }

  body:not(.discover-admin-page) .sliding-container{
    grid-template-columns: 1fr;
  }

  body:not(.discover-admin-page) #productTrack .sliding-container{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-3);
    padding: 0 12px 8px 0;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body:not(.discover-admin-page) #productTrack .sliding-container::-webkit-scrollbar{
    display: none;
  }

  body:not(.discover-admin-page) #productTrack .sliding-item{
    flex: 0 0 82%;
    width: 82%;
    min-width: 0;
    scroll-snap-align: start;
  }

  body:not(.discover-admin-page) .sliding-item{
    min-width: 0;
  }

  body:not(.discover-admin-page) .scroll-hint{
    display: none;
  }

  body:not(.discover-admin-page) .contact-card{
    flex-direction: column;
    align-items: flex-start;
  }

  body:not(.discover-admin-page) .founder-image-frame{
    width: 64px;
    height: 64px;
    flex-basis: 64px;
  }

  body:not(.discover-admin-page) .founder-image{
    width: 64px;
    height: 64px;
  }

  body:not(.discover-admin-page) .card-actions{
    align-items: stretch;
  }

  body:not(.discover-admin-page) .blog-track{
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    gap: var(--space-3);
    padding-right: var(--space-4);
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  body:not(.discover-admin-page) .blog-track::-webkit-scrollbar{
    display: none;
  }

  body:not(.discover-admin-page) .blog-card{
    flex: 0 0 calc(100% - 20px);
    width: calc(100% - 20px);
    min-height: 400px;
    scroll-snap-align: start;
  }

  body:not(.discover-admin-page) .testimonial-grid .sliding-container{
    grid-template-columns: 1fr;
  }

  body:not(.discover-admin-page) .section-title{
    margin-block: 0;
  }
}

@media (max-width: 479px){
  body:not(.discover-admin-page) .logo{
    font-size: 24px;
  }

  body:not(.discover-admin-page) .lab-section{
    padding-inline: 16px;
  }

  body:not(.discover-admin-page) .section-title{
    font-size: 20px;
  }

  body:not(.discover-admin-page) .card-image-wrapper{
    height: 140px;
    aspect-ratio: auto;
  }

  body:not(.discover-admin-page) .product-card .card-name{
    font-size: 16px;
  }

  body:not(.discover-admin-page) .testimonial-item{
    width: 100%;
  }
}