/* ============================================================
   FEATURES TABS — Mobile Icon Strip (≤ 767px)
   Goal:
   - Horizontal, centered, scrollable icon-only tab bar on mobile
   - Remove any “tab card” wrapper styling
   - Hide labels, show only icon blocks
   ============================================================

   Levers:
   - Strip spacing: --tabs-gap
   - Icon size: --tab-icon-size
   - Icon radius: --tab-icon-radius
   - Inactive icon opacity: --tab-icon-inactive
   - Active lift: --tab-icon-lift
*/

/* Mobile-only rules */
@media (max-width: 767px) {

  /* --------------------------------------------
     Variables (mobile UI levers)
     -------------------------------------------- */
  .features-tabs {
    --tabs-gap: clamp(0.65rem, 2.5vw, 0.95rem);
    --tab-icon-size: clamp(2.75rem, 10vw, 3.1rem);
    --tab-icon-radius: clamp(0.75rem, 3vw, 0.95rem);
    --tab-icon-inactive: 0.65;
    --tab-icon-lift: -1px;
  }

  /* --------------------------------------------
     1) Nav strip: horizontal row + center + scroll
     -------------------------------------------- */
  .features-tabs .nav-tabs {
    display: flex !important;
    flex-direction: row !important;
    justify-content: center !important;
    align-items: center !important;

    gap: var(--tabs-gap) !important;
    padding: 0.4rem 0 !important;

    flex-wrap: nowrap !important;

    /* allow horizontal scroll if too many tabs */
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;

    /* hide scrollbar */
    scrollbar-width: none;
  }

  .features-tabs .nav-tabs::-webkit-scrollbar {
    display: none;
  }

  /* --------------------------------------------
     2) Keep items horizontal (no wrapping/stacking)
     -------------------------------------------- */
  .features-tabs .nav-item {
    flex: 0 0 auto !important;
    margin: 0 !important;
  }

  /* --------------------------------------------
     3) Remove “tab card” wrapper styling from link
     (we only want the inner .tab-icon visible)
     -------------------------------------------- */
  .features-tabs .nav-link {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;

    padding: 0 !important;
    margin: 0 !important;

    width: auto !important;
    height: auto !important;
    min-height: 0 !important;

    border-radius: 0 !important;
    position: static !important;
    overflow: visible !important;
  }

  .features-tabs .nav-link::before,
  .features-tabs .nav-link::after {
    content: none !important;
    display: none !important;
  }

  /* --------------------------------------------
     4) Hide text labels on mobile
     -------------------------------------------- */
  .features-tabs .nav-link .tab-content {
    display: none !important;
  }

  /* --------------------------------------------
     5) Icon block (only visible shape)
     -------------------------------------------- */
  .features-tabs .nav-link .tab-icon {
    width: var(--tab-icon-size);
    height: var(--tab-icon-size);
    border-radius: var(--tab-icon-radius);

    background: color-mix(in srgb, var(--accent-color), #000 10%);
    display: flex;
    align-items: center;
    justify-content: center;

    transition: background 0.25s ease, transform 0.2s ease;
  }

  /* Inactive icon: lighter but readable */
  .features-tabs .nav-link .tab-icon i {
    font-size: clamp(1.1rem, 4vw, 1.3rem);
    color: rgba(255, 255, 255, var(--tab-icon-inactive));
    opacity: 1;
  }

  /* --------------------------------------------
     6) Active state: solid square + strong icon
     -------------------------------------------- */
  .features-tabs .nav-link.active .tab-icon {
    background: var(--accent-color);
    transform: translateY(var(--tab-icon-lift));
  }

  .features-tabs .nav-link.active .tab-icon i {
    color: var(--contrast-color);
    opacity: 1;
  }
}