/* Tabs sized to line up with the photo strip above them. There are exactly 8 tabs
   and 8 photos, and both rows already share the same left and right edges, so the
   tab row becomes a grid on the same column count and the same 10px gap — each tab
   then sits directly under its photo. The row is flex.min-w-max by default, which
   has to be overridden along with the container's horizontal scroll. */
@media (min-width:1101px){
  #huRhythmRoot .overflow-x-auto.border-b{ overflow-x:visible !important; }
  #huRhythmRoot .flex.min-w-max{
    display:grid !important;
    grid-template-columns:repeat(8, minmax(0,1fr)) !important;
    gap:10px !important;
    min-width:0 !important;
  }
  #huRhythmRoot button.relative.pb-4{
    width:100%;
    min-height:56px;
    padding:14px 10px 16px !important;
    font-size:.95rem !important;
    text-align:center;
  }
  /* the active underline spans the wider tab */
  #huRhythmRoot button.relative.pb-4 > span.absolute{ left:16px !important; right:16px !important; }
}
/* tablet: the strip is 4 across, so the tabs match on two rows */
@media (min-width:641px) and (max-width:1100px){
  #huRhythmRoot .overflow-x-auto.border-b{ overflow-x:visible !important; }
  #huRhythmRoot .flex.min-w-max{
    display:grid !important;
    grid-template-columns:repeat(4, minmax(0,1fr)) !important;
    gap:10px !important;
    min-width:0 !important;
  }
  #huRhythmRoot button.relative.pb-4{
    width:100%; min-height:52px; padding:12px 10px 14px !important; font-size:.9rem !important;
    text-align:center;
  }
}
/* phones keep the scrolling row, matching the photo rail */