/* Testimonials carousel, mobile only.
   At <=520px the spotlight card and the mosaic tiles become one swipeable
   track, one review per view. The tiles are restyled to match the big first
   (spotlight) card so every slide looks the same, and align-items:stretch keeps
   them the same height. Arrows and dots (.pc-*) come from testimonials-carousel.js
   and pricing-carousel.css. Loaded after styles.css to win over the grid. */

@media (max-width: 520px){
  /* lift the mosaic tiles up to be siblings of the feature in one flex track */
  .tb-mosaic{ display: contents; }

  .tb-grid{
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    margin-inline: -4px;
    padding: 2px 4px 4px;
    align-items: stretch;       /* every slide takes the tallest height */
  }
  .tb-grid::-webkit-scrollbar{ display: none; }

  .tb-grid > .tb-feature,
  .tb-grid .tb-tile{
    flex: 0 0 100%;
    min-width: 0;
    min-height: 0 !important;    /* drop the desktop heights main.js locked */
    scroll-snap-align: center;
    margin: 0;
  }
  .tb-grid > .tb-feature{ padding: 26px; }

  /* Bring the white tiles up to match the big first card. */
  .tb-grid .tb-tile{
    background: linear-gradient(135deg, #6651f6 0%, #5a45e6 50%, #4838c4 100%);
    border: 0;
    border-radius: 22px;
    padding: 26px;
    gap: 18px;
    color: #fff;
    box-shadow: 0 30px 60px -20px rgba(102, 81, 246, 0.55);
  }
  .tb-grid .tb-tile::before{
    content: "\2605\2605\2605\2605\2605";
    color: #ffd166;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
  }
  .tb-grid .tb-tile .tb-tile-q{
    font-size: 18px;
    line-height: 1.4;
    font-weight: 500;
    color: #fff;
  }
  .tb-grid .tb-tile .tb-tile-meta{
    padding-top: 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.18);
  }
  .tb-grid .tb-tile .tb-tile-meta .tb-name{ color: #fff; font-size: 15px; }
  .tb-grid .tb-tile .tb-tile-meta .tb-role{ color: rgba(255, 255, 255, 0.72); font-size: 12.5px; }
}